shapes-ui 0.4.1 → 0.4.2

package/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="useServicePoweredTypesWasEnabledByExperiment" value="true" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # shapes-ui
 
+## 0.4.2
+
+### Patch Changes
+
+- 476148c: Updated menubar docs and stylings.
+- 60ac79e: Updated meter examples and stylings
+- a591c64: Added examples for preview card
+- 7f642b5: Updated number field component and examples
+- 30ebfe7: UPdated progress styles and example
+- c2be2cd: Updated popover component and examples
+- 2d38dfc: Updated navihation menu styles and demo
+
 ## 0.4.1
 
 ### Patch Changes

package/content/components/menubar.mdx

@@ -10,8 +10,10 @@ description: Menu bar providing commands and options for your application with d
 
 <InstallationBlock name="menubar" />
 
+Menubar relies on `Menu` component, but for the ease of use, it also provides a set of components that are built on top of `Menu` component with same styling and APIs.
+
 ## Examples
 
-### Demo
+### Submenus
 
-<RenderPreview name="menubar-demo" />
+<RenderPreview name="menubar-advanced" />

package/content/components/meter.mdx

@@ -12,6 +12,18 @@ description: Meter component that provides a graphical display of a numeric valu
 
 ## Examples
 
-### Demo
+### Default
 
 <RenderPreview name="meter-demo" />
+
+### Value only
+
+<RenderPreview name="meter-no-label" />
+
+### Label only
+
+<RenderPreview name="meter-no-value" />
+
+### Flip
+
+<RenderPreview name="meter-flip" />

package/content/components/navigation-menu.mdx

@@ -3,3 +3,9 @@ title: Navigation Menu
 slug: navigation-menu
 description: Navigation menu component for displaying a collection of links and dropdown menus.
 ---
+
+<RenderPreview name="navigation-menu-demo" />
+
+## Installation
+
+<InstallationBlock name="navigation-menu" />

package/content/components/number-field.mdx

@@ -3,3 +3,27 @@ title: Number Field
 slug: number-field
 description: An input field component specifically designed for numeric input, with built-in validation and formatting options
 ---
+
+<RenderPreview name="number-field-demo" />
+
+## Installation
+
+<InstallationBlock name="number-field" />
+
+## Examples
+
+### Basic
+
+Use data-align `start` and `end` to position increment and decrement controls at the start or end of the input.
+
+<RenderPreview name="number-field-demo" />
+
+### Scrub area
+
+A number field with a scrub area (drag over input to change value).
+
+<RenderPreview name="number-field-scrub" />
+
+### Buttons at end
+
+<RenderPreview name="number-field-buttons-end" />

package/content/components/popover.mdx

@@ -3,3 +3,23 @@ title: Popover
 slug: popover
 description: Popover component that displays content anchored to a trigger element.
 ---
+
+<RenderPreview name="popover-demo" />
+
+## Installation
+
+<InstallationBlock name="popover" />
+
+## Examples
+
+### Basic
+
+<RenderPreview name="popover-demo" />
+
+### Sides
+
+<RenderPreview name="popover-positions" />
+
+### Form
+
+<RenderPreview name="popover-form" />

package/content/components/preview-card.mdx

@@ -3,3 +3,14 @@ title: Preview Card
 slug: preview-card
 description: Component that displays a preview of linked content when hovered.
 ---
+
+<RenderPreview name={'preview-card-demo'} />
+
+
+## Installation
+<InstallationBlock name="preview-card" />
+
+## Examples
+
+### Composed as CTA
+<RenderPreview name="preview-card-links" />

package/content/components/progress.mdx

@@ -3,3 +3,5 @@ title: Progress
 slug: progress
 description: Progress bar component for displaying the status of a task.
 ---
+
+<RenderPreview name={'progress-demo'} />

package/examples/__index.tsx

@@ -574,12 +574,32 @@ export const examples: ExampleRegistry = {
         title: "Demo",
         code: lazy(() => import("./menubar-demo")),
       },
+      {
+        name: "menubar-advanced",
+        title: "Advanced",
+        code: lazy(() => import("./menubar-advanced")),
+      },
     ],
   },
   "meter": {
     title: "Meter",
     code: lazy(() => import("../src/components/ui/meter").then(m => ({ default: m.Meter }))),
     examples: [
+      {
+        name: "meter-no-value",
+        title: "No Value",
+        code: lazy(() => import("./meter-no-value")),
+      },
+      {
+        name: "meter-no-label",
+        title: "No Label",
+        code: lazy(() => import("./meter-no-label")),
+      },
+      {
+        name: "meter-flip",
+        title: "Flip",
+        code: lazy(() => import("./meter-flip")),
+      },
       {
         name: "meter-demo",
         title: "Demo",
@@ -602,17 +622,37 @@ export const examples: ExampleRegistry = {
     title: "Number Field",
     code: lazy(() => import("../src/components/ui/number-field").then(m => ({ default: m.NumberField }))),
     examples: [
+      {
+        name: "number-field-scrub",
+        title: "Scrub",
+        code: lazy(() => import("./number-field-scrub")),
+      },
       {
         name: "number-field-demo",
         title: "Demo",
         code: lazy(() => import("./number-field-demo")),
       },
+      {
+        name: "number-field-buttons-end",
+        title: "Buttons End",
+        code: lazy(() => import("./number-field-buttons-end")),
+      },
     ],
   },
   "popover": {
     title: "Popover",
     code: lazy(() => import("../src/components/ui/popover").then(m => ({ default: m.Popover }))),
     examples: [
+      {
+        name: "popover-positions",
+        title: "Positions",
+        code: lazy(() => import("./popover-positions")),
+      },
+      {
+        name: "popover-form",
+        title: "Form",
+        code: lazy(() => import("./popover-form")),
+      },
       {
         name: "popover-demo",
         title: "Demo",
@@ -624,6 +664,11 @@ export const examples: ExampleRegistry = {
     title: "Preview Card",
     code: lazy(() => import("../src/components/ui/preview-card").then(m => ({ default: m.PreviewCard }))),
     examples: [
+      {
+        name: "preview-card-links",
+        title: "Links",
+        code: lazy(() => import("./preview-card-links")),
+      },
       {
         name: "preview-card-demo",
         title: "Demo",

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