shapes-ui 0.4.0 → 0.4.2

package/examples/menu-checkbox.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Menu, MenuTrigger, MenuPopup, MenuCheckboxItem } from "@/components/ui/menu";
+
+export default function MenuCheckboxDemo() {
+  const [showHidden, setShowHidden] = useState(true);
+  const [compact, setCompact] = useState(false);
+
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline">Checkbox items</Button>
+      </MenuTrigger>
+      <MenuPopup>
+        <MenuCheckboxItem
+          checked={showHidden}
+          onCheckedChange={(val) => setShowHidden(Boolean(val))}
+        >
+          Show hidden files
+        </MenuCheckboxItem>
+        <MenuCheckboxItem checked={compact} onCheckedChange={(val) => setCompact(Boolean(val))}>
+          Compact mode
+        </MenuCheckboxItem>
+      </MenuPopup>
+    </Menu>
+  );
+}

package/examples/menu-demo.tsx

@@ -1,32 +1,63 @@
-import { useState } from "react";
+import { BellRingIcon, CreditCardIcon, LogOutIcon, TargetIcon, UserPenIcon } from "lucide-react";
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Menu,
   MenuTrigger,
   MenuPopup,
-  MenuItem,
+  MenuGroup,
+  MenuLabel,
   MenuSeparator,
-  MenuCheckboxItem,
+  MenuItem,
 } from "@/components/ui/menu";
 
 export default function MenuDemo() {
-  const [checked, setChecked] = useState(false);
-
   return (
     <Menu>
-      <MenuTrigger asChild>
+      <MenuTrigger>
         <Button variant="outline">Open Menu</Button>
       </MenuTrigger>
       <MenuPopup>
-        <MenuItem>New Tab</MenuItem>
-        <MenuItem>New Window</MenuItem>
+        <div className="flex items-center justify-between gap-2 p-3">
+          <Avatar size="sm">
+            <AvatarFallback>TA</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <p className="text-sm font-medium">Tim Apple</p>
+            <p className="text-xs text-muted-foreground">tim.apple@example.com</p>
+          </div>
+        </div>
         <MenuSeparator />
-        <MenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
-          Dark Mode
-        </MenuCheckboxItem>
+        <MenuGroup>
+          <MenuLabel>My account</MenuLabel>
+          <MenuItem>
+            <TargetIcon />
+            Set status
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem>
+            <UserPenIcon />
+            Profile
+          </MenuItem>
+          <MenuItem>
+            <BellRingIcon />
+            Notifications{" "}
+            <Badge variant={"info"} className="ml-auto">
+              2
+            </Badge>
+          </MenuItem>
+          <MenuItem>
+            <CreditCardIcon />
+            Subscription settings
+          </MenuItem>
+        </MenuGroup>
         <MenuSeparator />
-        <MenuItem variant="destructive">Close All Tabs</MenuItem>
+        <MenuItem>
+          <LogOutIcon />
+          Sign out
+        </MenuItem>
       </MenuPopup>
     </Menu>
   );

package/examples/menu-group.tsx

@@ -0,0 +1,41 @@
+import { UserIcon, SettingsIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Menu,
+  MenuTrigger,
+  MenuPopup,
+  MenuGroup,
+  MenuLabel,
+  MenuItem,
+  MenuSeparator,
+} from "@/components/ui/menu";
+
+export default function MenuGroupDemo() {
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline">Group menu</Button>
+      </MenuTrigger>
+      <MenuPopup>
+        <MenuGroup>
+          <MenuLabel>Account</MenuLabel>
+          <MenuItem>
+            <UserIcon />
+            Profile
+          </MenuItem>
+          <MenuItem>
+            <SettingsIcon />
+            Settings
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup>
+          <MenuLabel>Actions</MenuLabel>
+          <MenuItem>Export</MenuItem>
+          <MenuItem>Duplicate</MenuItem>
+        </MenuGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}

package/examples/menu-radio.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Menu, MenuTrigger, MenuPopup, MenuRadioGroup, MenuRadioItem } from "@/components/ui/menu";
+
+export default function MenuRadioDemo() {
+  const [view, setView] = useState<"list" | "grid" | "compact">("list");
+
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline">Radio items</Button>
+      </MenuTrigger>
+      <MenuPopup>
+        <MenuRadioGroup value={view} onValueChange={(v) => setView(v as any)}>
+          <MenuRadioItem value="list">List view</MenuRadioItem>
+          <MenuRadioItem value="grid">Grid view</MenuRadioItem>
+          <MenuRadioItem value="compact">Compact</MenuRadioItem>
+        </MenuRadioGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}

package/examples/menu-submenu.tsx

@@ -0,0 +1,43 @@
+import { FileTextIcon, FolderIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Menu,
+  MenuTrigger,
+  MenuPopup,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubPopup,
+  MenuItem,
+} from "@/components/ui/menu";
+
+export default function MenuSubmenuDemo() {
+  return (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline">Submenu</Button>
+      </MenuTrigger>
+      <MenuPopup>
+        <MenuItem>New file</MenuItem>
+        <MenuItem>Open…</MenuItem>
+        <MenuSub>
+          <MenuSubTrigger>
+            <FolderIcon />
+            Open recent
+          </MenuSubTrigger>
+          <MenuSubPopup>
+            <MenuItem>
+              <FileTextIcon />
+              project-a.docx
+            </MenuItem>
+            <MenuItem>
+              <FileTextIcon />
+              project-b.pdf
+            </MenuItem>
+          </MenuSubPopup>
+        </MenuSub>
+        <MenuItem>Save</MenuItem>
+      </MenuPopup>
+    </Menu>
+  );
+}

package/examples/menubar-advanced.tsx

@@ -0,0 +1,91 @@
+import { FolderIcon, FileTextIcon, FileCode2Icon } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Menubar,
+  Menu,
+  MenuTrigger,
+  MenuPopup,
+  MenuItem,
+  MenuSeparator,
+  MenuCheckboxItem,
+  MenuShortcut,
+  MenuSub,
+  MenuSubPopup,
+  MenuSubTrigger,
+} from "@/components/ui/menubar";
+
+export default function MenubarDemo() {
+  const [autosave, setAutosave] = useState(true);
+
+  return (
+    <Menubar>
+      <Menu>
+        <MenuTrigger>File</MenuTrigger>
+        <MenuPopup>
+          <MenuItem>
+            New <MenuShortcut>⌘N</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Open <MenuShortcut>⌘O</MenuShortcut>{" "}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem>
+            Exit <MenuShortcut>⌘Q</MenuShortcut>
+          </MenuItem>
+        </MenuPopup>
+      </Menu>
+      <Menu>
+        <MenuTrigger>Edit</MenuTrigger>
+        <MenuPopup>
+          <MenuItem>
+            Undo <MenuShortcut>⌘N</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Redo <MenuShortcut>⇧⌘R</MenuShortcut>
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem>
+            Cut <MenuShortcut>⌘X</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Copy <MenuShortcut>⌘C</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Paste <MenuShortcut>⌘V</MenuShortcut>
+          </MenuItem>
+          <MenuSeparator />
+          <MenuSub>
+            <MenuSubTrigger>
+              <FolderIcon />
+              Open recent
+            </MenuSubTrigger>
+            <MenuSubPopup>
+              <MenuItem>
+                <FileCode2Icon />
+                button.tsx
+              </MenuItem>
+              <MenuItem>
+                <FileCode2Icon />
+                build-script.ts
+              </MenuItem>
+              <MenuItem>
+                <FileTextIcon />
+                feature-spec.md
+              </MenuItem>
+            </MenuSubPopup>
+          </MenuSub>
+        </MenuPopup>
+      </Menu>
+      <Menu>
+        <MenuTrigger>View</MenuTrigger>
+        <MenuPopup>
+          <MenuCheckboxItem checked={autosave} onCheckedChange={setAutosave}>
+            Auto Save
+          </MenuCheckboxItem>
+          <MenuItem>Full Screen</MenuItem>
+        </MenuPopup>
+      </Menu>
+    </Menubar>
+  );
+}

package/examples/meter-demo.tsx

@@ -1,26 +1,5 @@
-import { useState } from "react";
-
 import { Meter } from "@/components/ui/meter";
 
 export default function MeterDemo() {
-  const [value, setValue] = useState(65);
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <Meter value={value} label="Storage" showLabel showValue />
-        <input
-          type="range"
-          min="0"
-          max="100"
-          value={value}
-          onChange={(e) => setValue(Number(e.target.value))}
-          className="mt-4 w-80"
-        />
-      </div>
-      <div>
-        <Meter value={75} label="Memory" showLabel showValue />
-      </div>
-    </div>
-  );
+  return <Meter className={"w-72"} value={54} label="Storage" showLabel showValue />;
 }

package/examples/meter-flip.tsx

@@ -0,0 +1,13 @@
+import { Meter } from "@/components/ui/meter";
+
+export default function MeterIndicatorDemo() {
+  return (
+    <Meter
+      className={"w-72 flex-col-reverse"}
+      value={32}
+      label="Request usage"
+      showLabel
+      showValue
+    />
+  );
+}

package/examples/meter-no-label.tsx

@@ -0,0 +1,5 @@
+import { Meter } from "@/components/ui/meter";
+
+export default function MeterNoLabelDemo() {
+  return <Meter className={"w-72"} value={32} label="Storage" showLabel={false} showValue />;
+}

package/examples/meter-no-value.tsx

@@ -0,0 +1,13 @@
+import { Meter } from "@/components/ui/meter";
+
+export default function MeterNoValueDemo() {
+  return (
+    <Meter
+      className={"w-72"}
+      value={69.3}
+      label="Daily allowance"
+      showLabel={true}
+      showValue={false}
+    />
+  );
+}

package/examples/navigation-menu-demo.tsx

@@ -1,3 +1,115 @@
+import {
+  NavigationMenu,
+  NavigationMenuTrigger,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuPopup,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+
 export default function NavigationMenuDemo() {
-  return <div></div>;
+  return (
+    <div>
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Overview</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid max-w-md grid-cols-2 gap-4 p-2">
+                {overviewLinks.map((item) => (
+                  <li key={item.href}>
+                    <NavigationMenuLink href={item.href}>
+                      <div className="flex flex-col">
+                        <h3 className="text-sm leading-5 font-medium">{item.title}</h3>
+                        <p className="text-xs leading-tight text-muted-foreground">
+                          {item.description}
+                        </p>
+                      </div>
+                    </NavigationMenuLink>
+                  </li>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Handbook</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid max-w-md grid-cols-2 gap-2 p-2">
+                {handbookLinks.map((item) => (
+                  <li key={item.href}>
+                    <NavigationMenuLink href={item.href}>
+                      <div className="flex flex-col">
+                        <h3 className="text-sm leading-5 font-medium">{item.title}</h3>
+                        <p className="text-xs leading-tight text-muted-foreground">
+                          {item.description}
+                        </p>
+                      </div>
+                    </NavigationMenuLink>
+                  </li>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+
+          <NavigationMenuItem>
+            <NavigationMenuLink
+              className={
+                "flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium transition-all duration-50 hover:bg-accent/60 hover:text-accent-foreground focus:bg-accent/60"
+              }
+            >
+              About
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+
+        <NavigationMenuPopup />
+      </NavigationMenu>
+    </div>
+  );
 }
+
+const overviewLinks = [
+  {
+    href: "/react/overview/quick-start",
+    title: "Quick Start",
+    description: "Install and assemble your first component.",
+  },
+  {
+    href: "/react/overview/accessibility",
+    title: "Accessibility",
+    description: "Learn how we build accessible components.",
+  },
+  {
+    href: "/react/overview/releases",
+    title: "Releases",
+    description: "See what’s new in the latest Base UI versions.",
+  },
+  {
+    href: "/react/overview/about",
+    title: "About",
+    description: "Learn more about Base UI and our mission.",
+  },
+] as const;
+
+const handbookLinks = [
+  {
+    href: "/react/handbook/styling",
+    title: "Styling",
+    description:
+      "Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.",
+  },
+  {
+    href: "/react/handbook/animation",
+    title: "Animation",
+    description:
+      "Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.",
+  },
+  {
+    href: "/react/handbook/composition",
+    title: "Composition",
+    description:
+      "Base UI components can be replaced and composed with your own existing components.",
+  },
+] as const;

package/examples/number-field-buttons-end.tsx

@@ -0,0 +1,20 @@
+import {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+} from "@/components/ui/number-field";
+
+export default function NumberFieldButtonsEndExample() {
+  return (
+    <NumberField defaultValue={8} className="w-40">
+      <NumberFieldGroup>
+        <NumberFieldInput />
+        {/* align props aren't required — data-align/read-order handled by props in component */}
+        <NumberFieldDecrement align="end" />
+        <NumberFieldIncrement align="end" />
+      </NumberFieldGroup>
+    </NumberField>
+  );
+}

package/examples/number-field-demo.tsx

@@ -1,3 +1,19 @@
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from "@/components/ui/number-field";
+
 export default function NumberFieldDemo() {
-  return <div></div>;
+  return (
+    <NumberField defaultValue={21}>
+      <NumberFieldGroup>
+        <NumberFieldDecrement data-align="start" />
+        <NumberFieldInput />
+        <NumberFieldIncrement data-align="end" />
+      </NumberFieldGroup>
+    </NumberField>
+  );
 }

package/examples/number-field-scrub.tsx

@@ -0,0 +1,38 @@
+import { ChevronsLeftRightEllipsis } from "lucide-react";
+import * as React from "react";
+
+import {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from "@/components/ui/number-field";
+
+export default function NumberFieldScrubExample() {
+  const id = React.useId();
+  const [value, setValue] = React.useState<number | null>(120);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <NumberField id={id} value={value} onValueChange={(v) => setValue(v)}>
+        <NumberFieldScrubArea>
+          <label htmlFor={id} className="text-sm font-medium">
+            Amount
+          </label>
+          <NumberFieldScrubAreaCursor>
+            <ChevronsLeftRightEllipsis className="size-4" />
+          </NumberFieldScrubAreaCursor>
+
+          <NumberFieldGroup>
+            <NumberFieldDecrement data-align="start" />
+            <NumberFieldInput />
+            <NumberFieldIncrement data-align="end" />
+          </NumberFieldGroup>
+        </NumberFieldScrubArea>
+      </NumberField>
+    </div>
+  );
+}

package/examples/popover-demo.tsx

@@ -1,3 +1,20 @@
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
 export default function PopoverDemo() {
-  return <div></div>;
+  return (
+    <Popover>
+      <PopoverTrigger render={<Button variant={"secondary"}>Open popover</Button>} />
+      <PopoverPopup>
+        <PopoverTitle>Popover component</PopoverTitle>
+        <PopoverDescription>This is the popover description content.</PopoverDescription>
+      </PopoverPopup>
+    </Popover>
+  );
 }

package/examples/popover-form.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel, FieldControl } from "@/components/ui/field";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverClose,
+} from "@/components/ui/popover";
+
+export default function PopoverFormExample() {
+  return (
+    <Popover>
+      <PopoverTrigger render={<Button>Open Form</Button>} />
+      <PopoverPopup>
+        <PopoverTitle>User Information</PopoverTitle>
+        <div className="space-y-3">
+          <Field name="firstName" className="w-full">
+            <FieldLabel>First Name</FieldLabel>
+            <FieldControl type="text" placeholder="John" />
+          </Field>
+          <Field name="lastName" className="w-full">
+            <FieldLabel>Last Name</FieldLabel>
+            <FieldControl type="text" placeholder="Doe" />
+          </Field>
+          <Field name="email" className="w-full">
+            <FieldLabel>Email</FieldLabel>
+            <FieldControl type="email" placeholder="john@example.com" />
+          </Field>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button size="sm">Submit</Button>
+            <PopoverClose
+              render={
+                <Button variant="outline" size="sm">
+                  Cancel
+                </Button>
+              }
+            />
+          </div>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}