chore: remove use client

Author: SaadBazaz

README.md

@@ -17,7 +17,24 @@ To use Material Web Components for React as a **library** in your project, run:
 npm install material-web-components-react
 ```
 
-## Documentation
+## Usage
+
+Here's a general example of how the components can be used:
+
+```tsx
+import React from 'react';
+import Button from 'material-web-components-react/button';
+
+function Example() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  );
+}
+```
+
+For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](./apps/demo/src/app/page.tsx). It's simple!
 
 Under the hood, this library simply uses the official [@material/web](https://github.com/material-components/material-web/) components. Visit [the official Material Web Components docs](https://github.com/material-components/material-web/blob/main/docs/intro.md) to learn how to use those components. The props remain the same!
 

packages/ui/package.json

@@ -49,11 +49,10 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@lit-labs/ssr-react": "^0.3.0",
     "@lit/react": "^1.0.5",
     "@material/web": "^2.0.0",
     "autoprefixer": "^10.4.19",
-    "lit": "^3.1.4",
+    "lit": "^3.2.0",
     "react": "^18.2.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.1",

packages/ui/src/badge/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdBadge } from "@material/web/labs/badge/badge";

packages/ui/src/button/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Fab.react.tsx
 import { MdElevatedButton } from "@material/web/button/elevated-button";
 import { MdFilledButton } from "@material/web/button/filled-button";

packages/ui/src/card/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Fab.react.tsx
 import { MdElevatedCard } from "@material/web/labs/card/elevated-card";
 import { MdFilledCard } from "@material/web/labs/card/filled-card";

packages/ui/src/checkbox/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Checkbox.react.tsx
 import { MdCheckbox } from "@material/web/checkbox/checkbox";
 import React from "react";

packages/ui/src/chip/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Icon.react.tsx
 import { MdChipSet } from "@material/web/chips/chip-set";
 import { MdAssistChip } from "@material/web/chips/assist-chip";

packages/ui/src/dialog/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdDialog } from "@material/web/dialog/dialog.js";

packages/ui/src/divider/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Divider.react.tsx
 import { MdDivider } from "@material/web/divider/divider";
 import React from "react";

packages/ui/src/elevation/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Elevation.react.tsx
 import { MdElevation } from "@material/web/elevation/elevation";
 import React from "react";

packages/ui/src/fab/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Fab.react.tsx
 import { MdFab } from "@material/web/fab/fab.js";
 import { MdBrandedFab } from "@material/web/fab/branded-fab";

packages/ui/src/focus-ring/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: FocusRing.react.tsx
 import { MdFocusRing } from "@material/web/focus/md-focus-ring";
 import React from "react";

packages/ui/src/icon-button/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: IconButton.react.tsx
 import { MdIconButton } from "@material/web/iconbutton/icon-button";
 import { MdFilledIconButton } from "@material/web/iconbutton/filled-icon-button";

packages/ui/src/icon/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Icon.react.tsx
 import { MdIcon } from "@material/web/icon/icon.js";
 import React from "react";

packages/ui/src/item/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdItem } from "@material/web/labs/item/item";

packages/ui/src/list/index.tsx

@@ -1,5 +1,4 @@
 // File: MaterialList.tsx
-"use client";
 
 import { MdList } from "@material/web/list/list";
 import { MdListItem } from "@material/web/list/list-item";

packages/ui/src/menu/index.tsx

@@ -1,5 +1,4 @@
 // File: MaterialMenu.tsx
-"use client";
 
 import { MdMenu } from "@material/web/menu/menu";
 import { MdMenuItem } from "@material/web/menu/menu-item";

packages/ui/src/navigation-bar/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdNavigationBar } from "@material/web/labs/navigationbar/navigation-bar";

packages/ui/src/navigation-drawer/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdNavigationDrawer } from "@material/web/labs/navigationdrawer/navigation-drawer";

packages/ui/src/navigation-rail/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdNavigationRail } from "./web-component/navigation-rail";

packages/ui/src/navigation-rail/web-component/internal/navigation-rail-styles.js

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 import { MdNavigationTab } from "@material/web/labs/navigationtab/navigation-tab";

packages/ui/src/navigation-rail/web-component/internal/navigation-rail.js

@@ -1,4 +1,3 @@
-"use client";
 // file: Icon.react.tsx
 import { MdOutlinedSegmentedButtonSet } from "@material/web/labs/segmentedbuttonset/outlined-segmented-button-set";
 import { MdOutlinedSegmentedButton } from "@material/web/labs/segmentedbutton/outlined-segmented-button";

packages/ui/src/navigation-tab/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: Icon.react.tsx
 import { MdSwitch } from "@material/web/switch/switch";
 import React from "react";

packages/ui/src/segmented-button/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 // file: TextField.react.tsx
 import { MdFilledTextField } from "@material/web/textfield/filled-text-field";
 import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";