shapes-ui 0.4.1 → 0.5.0

package/examples/menu-align.tsx

@@ -9,22 +9,25 @@ export default function MenuDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <ButtonGroup>
-          <Button variant="outline" onClick={() => setSide("bottom")}>
-            Bottom
-          </Button>
-          <Button variant="outline" onClick={() => setSide("top")}>
-            Top
-          </Button>
-          <Button variant="outline" onClick={() => setSide("left")}>
-            Left
-          </Button>
-          <Button variant="outline" onClick={() => setSide("right")}>
-            Right
-          </Button>
-        </ButtonGroup>
-      </MenuTrigger>
+      <MenuTrigger
+        nativeButton={false}
+        render={
+          <ButtonGroup>
+            <Button variant="outline" onClick={() => setSide("bottom")}>
+              Bottom
+            </Button>
+            <Button variant="outline" onClick={() => setSide("top")}>
+              Top
+            </Button>
+            <Button variant="outline" onClick={() => setSide("left")}>
+              Left
+            </Button>
+            <Button variant="outline" onClick={() => setSide("right")}>
+              Right
+            </Button>
+          </ButtonGroup>
+        }
+      ></MenuTrigger>
       <MenuPopup side={side}>
         <MenuItem>{side.charAt(0).toUpperCase() + side.slice(1)}</MenuItem>
       </MenuPopup>

package/examples/menu-checkbox.tsx

@@ -9,9 +9,8 @@ export default function MenuCheckboxDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Checkbox items</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Checkbox items</Button>} />
+
       <MenuPopup>
         <MenuCheckboxItem
           checked={showHidden}

package/examples/menu-demo.tsx

@@ -16,9 +16,7 @@ import {
 export default function MenuDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Open Menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Open Menu</Button>} />
       <MenuPopup>
         <div className="flex items-center justify-between gap-2 p-3">
           <Avatar size="sm">

package/examples/menu-group.tsx

@@ -14,9 +14,7 @@ import {
 export default function MenuGroupDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Group menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Group menu</Button>} />
       <MenuPopup>
         <MenuGroup>
           <MenuLabel>Account</MenuLabel>

package/examples/menu-radio.tsx

@@ -8,9 +8,7 @@ export default function MenuRadioDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Radio items</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Radio items</Button>} />
       <MenuPopup>
         <MenuRadioGroup value={view} onValueChange={(v) => setView(v as any)}>
           <MenuRadioItem value="list">List view</MenuRadioItem>

package/examples/menu-submenu.tsx

@@ -14,9 +14,8 @@ import {
 export default function MenuSubmenuDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Submenu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Submenu</Button>} />
+
       <MenuPopup>
         <MenuItem>New file</MenuItem>
         <MenuItem>Open…</MenuItem>

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,13 @@
-import { useState } from "react";
-
-import { Meter } from "@/components/ui/meter";
+import { Meter, MeterLabel, MeterValue, MeterIndicator, MeterTrack } 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>
+    <Meter className={"w-72"} value={54}>
+      <MeterLabel>Progress</MeterLabel>
+      <MeterValue />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
   );
 }

package/examples/meter-flip.tsx

@@ -0,0 +1,13 @@
+import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@/components/ui/meter";
+
+export default function MeterIndicatorDemo() {
+  return (
+    <Meter className={"w-72"} value={32}>
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+      <MeterLabel>Progress</MeterLabel>
+      <MeterValue />
+    </Meter>
+  );
+}

package/examples/meter-no-label.tsx

@@ -0,0 +1,12 @@
+import { Meter, MeterIndicator, MeterTrack, MeterValue } from "@/components/ui/meter";
+
+export default function MeterNoLabelDemo() {
+  return (
+    <Meter className={"w-72"} value={54}>
+      <MeterValue className={"col-span-2 text-left"} />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
+  );
+}

package/examples/meter-no-value.tsx

@@ -0,0 +1,12 @@
+import { Meter, MeterIndicator, MeterLabel, MeterTrack } from "@/components/ui/meter";
+
+export default function MeterNoValueDemo() {
+  return (
+    <Meter className={"w-72"} value={54}>
+      <MeterLabel>File transfer</MeterLabel>
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
+  );
+}

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>
+  );
+}

package/examples/popover-positions.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverPopup,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverClose,
+} from "@/components/ui/popover";
+
+export default function PopoverPositionsExample() {
+  const [activePosition, setActivePosition] = React.useState(positions[0]);
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Popover>
+        <ButtonGroup>
+          {positions.map((pos) => (
+            <PopoverTrigger
+              key={pos.side}
+              render={<Button variant={"outline"}>{pos.label}</Button>}
+              onClick={() => setActivePosition(pos)}
+            />
+          ))}
+        </ButtonGroup>
+        <PopoverPopup side={activePosition.side}>
+          <PopoverTitle>Position Example</PopoverTitle>
+          <PopoverDescription>
+            This popover is positioned on the {activePosition.label.toLowerCase()} side.
+          </PopoverDescription>
+          <PopoverClose
+            render={
+              <Button variant="ghost" size="sm" className={"ml-auto"}>
+                Close
+              </Button>
+            }
+          />
+        </PopoverPopup>
+      </Popover>
+    </div>
+  );
+}
+
+const positions: Position[] = [
+  { label: "Left", side: "left" },
+  { label: "Center", side: "bottom" },
+  { label: "Right", side: "right" },
+];
+
+type Position = { label: string; side: "top" | "right" | "bottom" | "left" };

package/examples/preview-card-demo.tsx

@@ -1,3 +1,28 @@
+import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/components/ui/preview-card";
+
 export default function PreviewCardDemo() {
-  return <div></div>;
+  return (
+    <PreviewCard>
+      <p className={' text-sm'}>
+        Apple's{" "}
+        <PreviewCardTrigger
+          target={"_blank"}
+          href={"https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass"}
+        >
+          Liquid Glass
+        </PreviewCardTrigger>{" "}
+        has been a controversial release.
+      </p>
+      <PreviewCardPopup className={"flex w-fit flex-col gap-2 items-center justify-center p-3"}>
+        <img
+          alt={"Liquid Glass UI"}
+          className={"w-72 rounded-lg bg-muted object-cover p-2"}
+          src={
+            "https://docs-assets.developer.apple.com/published/2299e5e8eafedded6947927a8f704c34/landing-page-intoducing-liquid-glass-hero~dark%402x.png"
+          }
+        />
+        <p className={"text-xs"}>Liquid glass affects SwiftUI, UIKit, and AppKit.</p>
+      </PreviewCardPopup>
+    </PreviewCard>
+  );
 }

package/examples/preview-card-links.tsx

@@ -0,0 +1,38 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Meter } from "@/components/ui/meter.tsx";
+import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/components/ui/preview-card";
+import { Button } from "@/components/ui/button.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+
+export default function PreviewCardLinks() {
+  return (
+    <PreviewCard>
+      <Card size={"sm"} className={"w-md"}>
+        <CardHeader className={"flex flex-row items-center justify-between"}>
+          <CardTitle>Quote usage</CardTitle>
+          <Badge variant={'warning'}>Basic</Badge>
+        </CardHeader>
+        <CardContent className={'space-y-3'}>
+          <Meter value={72} className={"w-full"} />
+          <div className={'flex flex-col'}>
+            <CardDescription>
+              72 out of 100 requests used this <PreviewCardTrigger>month</PreviewCardTrigger>.
+            </CardDescription>
+          </div>
+        </CardContent>
+      </Card>
+      <PreviewCardPopup side={"bottom"} className={'w-sm p-4'}>
+        <div className="flex flex-col gap-2">
+          <p className={'text-xs text-muted-foreground'}>Usage resets {new Date(Date.now() + 4 * 7 * 24 * 60 * 60 * 1000).toLocaleDateString()} (4 weeks from now).</p>
+          <Button variant={'secondary'} className={'ml-auto'} size={'sm'}>Upgrade to Pro</Button>
+        </div>
+      </PreviewCardPopup>
+    </PreviewCard>
+  );
+}