@waveso/ui 0.0.2 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wave
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,6 @@
 # @waveso/ui
 
-A React component library built on [Base UI](https://base-ui.com) primitives and [Tailwind CSS v4](https://tailwindcss.com). Ships unstyled, accessible components that you theme with CSS variables.
+A component library built on [Base UI](https://base-ui.com) primitives and [Tailwind CSS v4](https://tailwindcss.com).
 
 ## Install
 
@@ -8,48 +8,70 @@ A React component library built on [Base UI](https://base-ui.com) primitives and
 npm install @waveso/ui @base-ui/react class-variance-authority clsx tailwind-merge
 ```
 
+## Setup
+
+Add the theme preset and source directive to your CSS entry point:
+
+```css
+@import "@waveso/ui/styles.css";
+@import "tailwindcss";
+@source "../../node_modules/@waveso/ui/dist";
+```
+
+The preset provides all CSS variables (colors, radii, sidebar tokens) with light and dark mode support. Override any variable in your own `:root` / `.dark` blocks to customize the theme.
+
 ## Usage
 
 Import components by name — each is a separate entry point for optimal tree-shaking:
 
 ```tsx
 import { Button } from '@waveso/ui/button';
+import { Masonry, MasonryItem, MasonrySpannedItem } from '@waveso/ui/masonry';
 import { Card, CardHeader, CardTitle, CardContent } from '@waveso/ui/card';
-import { Input } from '@waveso/ui/input';
 ```
 
-### Theme setup
+### Button
 
-Components rely on CSS custom properties for colors, radii, and fonts. Define them in your app's `globals.css`:
+8 variants, 8 sizes, built on Base UI's `Button` primitive with full keyboard and ARIA support.
 
-```css
-@import "tailwindcss";
+```tsx
+import { Button } from '@waveso/ui/button';
 
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --primary: oklch(0.61 0.11 222);
-  --primary-foreground: oklch(0.98 0.02 201);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --destructive: oklch(0.58 0.22 27);
-  --radius: 0.875rem;
-  /* ... see full token list below */
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  /* ... map all tokens to Tailwind v4 */
-}
+<Button>Default</Button>
+<Button variant="solid">Solid</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="success">Confirm</Button>
+<Button size="xs">Tiny</Button>
+<Button size="icon"><SearchIcon /></Button>
 ```
 
-See [`.storybook/storybook.css`](.storybook/storybook.css) for the complete token reference with light and dark mode values.
+### Masonry
+
+Responsive masonry grid with staggered animations, spanning items, and automatic reflow.
+
+```tsx
+import { Masonry, MasonryItem, MasonrySpannedItem } from '@waveso/ui/masonry';
+
+<Masonry columns={3} gap={16}>
+  <MasonryItem>
+    <Card>
+      <CardContent>Standard item</CardContent>
+    </Card>
+  </MasonryItem>
+  <MasonrySpannedItem>
+    <Card>
+      <CardContent>This spans two columns</CardContent>
+    </Card>
+  </MasonrySpannedItem>
+  <MasonryItem>
+    <Card>
+      <CardContent>Another item</CardContent>
+    </Card>
+  </MasonryItem>
+</Masonry>
+```
 
 ## Components
 
@@ -59,7 +81,7 @@ See [`.storybook/storybook.css`](.storybook/storybook.css) for the complete toke
 |---|---|
 | **Actions** | Button, Button Group, Toggle, Toggle Group |
 | **Forms** | Input, Textarea, Checkbox, Switch, Radio, Radio Group, Select, Combobox, Autocomplete, Slider, Calendar, Input OTP, Field, Form, Label, Input Group |
-| **Layout** | Card, Separator, Aspect Ratio, Scroll Area, Collapsible, Accordion, Tabs, Sidebar |
+| **Layout** | Card, Masonry, Separator, Aspect Ratio, Scroll Area, Collapsible, Accordion, Tabs, Sidebar |
 | **Navigation** | Breadcrumb, Navigation Menu, Pagination, Menubar |
 | **Overlays** | Dialog, Alert Dialog, Sheet, Popover, Tooltip, Preview Card, Context Menu, Menu |
 | **Feedback** | Alert, Badge, Progress, Skeleton, Spinner, Toaster, Empty |
@@ -92,20 +114,11 @@ Install only what you use.
 ## Development
 
 ```bash
-# Install dependencies
 npm install
-
-# Start Storybook
-npm run storybook
-
-# Build the library
-npm run build
-
-# Type-check
-npm run typecheck
-
-# Watch mode (rebuild on changes)
-npm run dev
+npm run storybook    # Start Storybook
+npm run build        # Build the library
+npm run typecheck    # Type-check
+npm run dev          # Watch mode
 ```
 
 ### Project structure
@@ -116,26 +129,33 @@ npm run dev
 src/
   *.tsx              # Component source files
   *.stories.tsx      # Storybook stories
+  styles.css         # Theme preset (CSS variables + Tailwind mapping)
   hooks/             # Custom hooks
   lib/               # Utilities (cn, internal icons)
 ```
 
 ## Releasing
 
-This project uses [Changesets](https://github.com/changesets/changesets) for versioning and publishing.
+This project uses [Changesets](https://github.com/changesets/changesets) with GitHub Actions.
 
-```bash
-# 1. Create a changeset describing your changes
-npx changeset
+1. Run `npx changeset` to describe your changes (patch, minor, or major)
+2. Commit the generated changeset file with your PR
+3. When merged to `main`, CI automatically versions and publishes to npm
 
-# 2. Version bump (applied by CI or manually)
-npx changeset version
+<details>
+<summary>Manual release (without CI)</summary>
 
-# 3. Publish to npm (handled by CI)
-npm run release
+If you're not using the GitHub Actions workflow, you can publish manually.
+Changesets will skip versions already published to npm, so this won't
+conflict if CI has already run.
+
+```bash
+npx changeset              # Create a changeset
+npx changeset version      # Apply version bump
+npm run release             # Build and publish to npm
 ```
 
-Merging to `main` with pending changesets triggers the publish workflow automatically.
+</details>
 
 ## License
 

package/dist/accordion.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+type AccordionProps = React.ComponentProps<typeof Accordion$1.Root>;
+type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
+type AccordionTriggerProps = React.ComponentProps<typeof Accordion$1.Trigger>;
+type AccordionContentProps = React.ComponentProps<typeof Accordion$1.Panel>;
+declare function Accordion({ className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion.js

@@ -0,0 +1,81 @@
+import { ChevronDownIcon, ChevronUpIcon } from './chunk-DIGOLJIR.js';
+import { cn } from './chunk-76UQO56T.js';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Root,
+    {
+      "data-slot": "accordion",
+      className: cn(
+        "overflow-hidden flex w-full flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn(
+        "not-last:border-b",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { "data-slot": "accordion-header", className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: "data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=accordion.js.map
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion.tsx"],"names":["AccordionPrimitive"],"mappings":";;;;;AAeA,SAAS,SAAA,CAAU,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmB;AAC1D,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,IAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,sCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAuB;AAClE,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,IAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,2BACGA,WAAA,CAAmB,MAAA,EAAnB,EAA0B,WAAA,EAAU,kBAAA,EAAmB,WAAU,MAAA,EAChE,QAAA,kBAAA,IAAA;AAAA,IAACA,WAAA,CAAmB,OAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4fAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,eAAA,EAAA,EAAgB,WAAA,EAAU,wBAAA,EAAyB,WAAU,2EAAA,EAA4E,CAAA;AAAA,wBAC1I,GAAA,CAAC,aAAA,EAAA,EAAc,WAAA,EAAU,wBAAA,EAAyB,WAAU,kFAAA,EAAmF;AAAA;AAAA;AAAA,GACjJ,EACF,CAAA;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,KAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAU,2FAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,yLAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ","file":"accordion.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"./lib/utils\"\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"./lib/internal-icons\"\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\ntype AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>\ntype AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Panel>\n\nfunction Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\n        \"overflow-hidden flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        \"not-last:border-b\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header data-slot=\"accordion-header\" className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n}\n"]}

package/dist/alert.d.ts

@@ -6,9 +6,13 @@ import { VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>;
+type AlertTitleProps = React.ComponentProps<"div">;
+type AlertDescriptionProps = React.ComponentProps<"div">;
+type AlertActionProps = React.ComponentProps<"div">;
+declare function Alert({ className, variant, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare function AlertTitle({ className, ...props }: AlertTitleProps): react_jsx_runtime.JSX.Element;
+declare function AlertDescription({ className, ...props }: AlertDescriptionProps): react_jsx_runtime.JSX.Element;
+declare function AlertAction({ className, ...props }: AlertActionProps): react_jsx_runtime.JSX.Element;
 
 export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/alert.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,2TAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,8BAAA;AAAA,QACT,WAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEA,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACL,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qHAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4JAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,wBAAA,EAA0B,SAAS,CAAA;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"alert.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  AlertAction\n}\n"]}
+{"version":3,"sources":["../src/alert.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,2TAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,8BAAA;AAAA,QACT,WAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAOA,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACL,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAoB;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qHAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4JAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAqB;AAC9D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,wBAAA,EAA0B,SAAS,CAAA;AAAA,MAChD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"alert.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype AlertProps = React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>\ntype AlertTitleProps = React.ComponentProps<\"div\">\ntype AlertDescriptionProps = React.ComponentProps<\"div\">\ntype AlertActionProps = React.ComponentProps<\"div\">\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: AlertActionProps) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  AlertAction\n}\n"]}

package/dist/aspect-ratio.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type AspectRatioProps = React.ComponentProps<"div"> & {
+    /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */
+    ratio: number;
+};
+declare function AspectRatio({ ratio, className, ...props }: AspectRatioProps): react_jsx_runtime.JSX.Element;
+
+export { AspectRatio, type AspectRatioProps };

package/dist/aspect-ratio.js

@@ -0,0 +1,18 @@
+import { cn } from './chunk-76UQO56T.js';
+import { jsx } from 'react/jsx-runtime';
+
+function AspectRatio({ ratio, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "aspect-ratio",
+      style: { "--ratio": ratio },
+      className: cn("relative aspect-(--ratio)", className),
+      ...props
+    }
+  );
+}
+
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.js.map
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/aspect-ratio.tsx"],"names":[],"mappings":";;;AAaA,SAAS,YAAY,EAAE,KAAA,EAAO,SAAA,EAAW,GAAG,OAAM,EAAqB;AACrE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,KAAA,EAAO,EAAE,SAAA,EAAW,KAAA,EAAM;AAAA,MAC1B,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,SAAS,CAAA;AAAA,MACnD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"aspect-ratio.js","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n// --- Types ---\n\ntype AspectRatioProps = React.ComponentProps<\"div\"> & {\n  /** The width-to-height ratio (e.g. 16/9, 4/3, 1) */\n  ratio: number\n}\n\n// --- Components ---\n\nfunction AspectRatio({ ratio, className, ...props }: AspectRatioProps) {\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      style={{ \"--ratio\": ratio } as React.CSSProperties}\n      className={cn(\"relative aspect-(--ratio)\", className)}\n      {...props}\n    />\n  )\n}\n\n// --- Exports ---\n\nexport { AspectRatio }\nexport type { AspectRatioProps }\n"]}

package/dist/autocomplete.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Autocomplete as Autocomplete$1 } from '@base-ui/react/autocomplete';
+
+type AutocompleteProps = React.ComponentProps<typeof Autocomplete$1.Root>;
+type AutocompleteInputProps = React.ComponentProps<typeof Autocomplete$1.Input>;
+type AutocompleteTriggerProps = React.ComponentProps<typeof Autocomplete$1.Trigger>;
+type AutocompleteIconProps = React.ComponentProps<typeof Autocomplete$1.Icon>;
+type AutocompleteClearProps = React.ComponentProps<typeof Autocomplete$1.Clear>;
+type AutocompleteValueProps = React.ComponentProps<typeof Autocomplete$1.Value>;
+type AutocompletePortalProps = React.ComponentProps<typeof Autocomplete$1.Portal>;
+type AutocompleteBackdropProps = React.ComponentProps<typeof Autocomplete$1.Backdrop>;
+type AutocompletePositionerProps = React.ComponentProps<typeof Autocomplete$1.Positioner>;
+type AutocompletePopupProps = React.ComponentProps<typeof Autocomplete$1.Popup>;
+type AutocompleteArrowProps = React.ComponentProps<typeof Autocomplete$1.Arrow>;
+type AutocompleteStatusProps = React.ComponentProps<typeof Autocomplete$1.Status>;
+type AutocompleteEmptyProps = React.ComponentProps<typeof Autocomplete$1.Empty>;
+type AutocompleteListProps = React.ComponentProps<typeof Autocomplete$1.List>;
+type AutocompleteRowProps = React.ComponentProps<typeof Autocomplete$1.Row>;
+type AutocompleteItemProps = React.ComponentProps<typeof Autocomplete$1.Item>;
+type AutocompleteSeparatorProps = React.ComponentProps<typeof Autocomplete$1.Separator>;
+type AutocompleteGroupProps = React.ComponentProps<typeof Autocomplete$1.Group>;
+type AutocompleteGroupLabelProps = React.ComponentProps<typeof Autocomplete$1.GroupLabel>;
+type AutocompleteCollectionProps = React.ComponentProps<typeof Autocomplete$1.Collection>;
+type AutocompleteContentProps = AutocompletePopupProps & Pick<AutocompletePositionerProps, "align" | "alignOffset" | "side" | "sideOffset">;
+declare function Autocomplete({ ...props }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteInput({ className, ...props }: AutocompleteInputProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteTrigger({ className, ...props }: AutocompleteTriggerProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteIcon({ className, ...props }: AutocompleteIconProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteClear({ className, ...props }: AutocompleteClearProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteValue({ ...props }: AutocompleteValueProps): react_jsx_runtime.JSX.Element;
+declare function AutocompletePortal({ className, ...props }: AutocompletePortalProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteBackdrop({ className, ...props }: AutocompleteBackdropProps): react_jsx_runtime.JSX.Element;
+declare function AutocompletePositioner({ className, ...props }: AutocompletePositionerProps): react_jsx_runtime.JSX.Element;
+declare function AutocompletePopup({ className, ...props }: AutocompletePopupProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteArrow({ className, ...props }: AutocompleteArrowProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteStatus({ className, ...props }: AutocompleteStatusProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteEmpty({ className, ...props }: AutocompleteEmptyProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteList({ className, ...props }: AutocompleteListProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteRow({ className, ...props }: AutocompleteRowProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteItem({ className, ...props }: AutocompleteItemProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteSeparator({ className, ...props }: AutocompleteSeparatorProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteGroup({ className, ...props }: AutocompleteGroupProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteGroupLabel({ className, ...props }: AutocompleteGroupLabelProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteCollection({ ...props }: AutocompleteCollectionProps): react_jsx_runtime.JSX.Element;
+declare function AutocompleteContent({ className, align, alignOffset, side, sideOffset, ...props }: AutocompleteContentProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue };

package/dist/autocomplete.js

@@ -0,0 +1,222 @@
+import { cn } from './chunk-76UQO56T.js';
+import { Autocomplete as Autocomplete$1 } from '@base-ui/react/autocomplete';
+import { jsx } from 'react/jsx-runtime';
+
+function Autocomplete({ ...props }) {
+  return /* @__PURE__ */ jsx(Autocomplete$1.Root, { "data-slot": "autocomplete", ...props });
+}
+function AutocompleteInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Input,
+    {
+      "data-slot": "autocomplete-input",
+      className: cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AutocompleteTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Trigger,
+    {
+      "data-slot": "autocomplete-trigger",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+function AutocompleteIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Icon,
+    {
+      "data-slot": "autocomplete-icon",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+function AutocompleteClear({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Clear,
+    {
+      "data-slot": "autocomplete-clear",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+function AutocompleteValue({ ...props }) {
+  return /* @__PURE__ */ jsx(Autocomplete$1.Value, { "data-slot": "autocomplete-value", ...props });
+}
+function AutocompletePortal({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Portal,
+    {
+      "data-slot": "autocomplete-portal",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AutocompleteBackdrop({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Backdrop,
+    {
+      "data-slot": "autocomplete-backdrop",
+      className: cn("fixed inset-0", className),
+      ...props
+    }
+  );
+}
+function AutocompletePositioner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Positioner,
+    {
+      "data-slot": "autocomplete-positioner",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AutocompletePopup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Popup,
+    {
+      "data-slot": "autocomplete-popup",
+      className: cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 group/autocomplete-content relative max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AutocompleteArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Arrow,
+    {
+      "data-slot": "autocomplete-arrow",
+      className: cn("fill-popover", className),
+      ...props
+    }
+  );
+}
+function AutocompleteStatus({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Status,
+    {
+      "data-slot": "autocomplete-status",
+      className: cn("text-muted-foreground flex w-full justify-center py-2 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function AutocompleteEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Empty,
+    {
+      "data-slot": "autocomplete-empty",
+      className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/autocomplete-content:flex", className),
+      ...props
+    }
+  );
+}
+function AutocompleteList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.List,
+    {
+      "data-slot": "autocomplete-list",
+      className: cn("scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+      ...props
+    }
+  );
+}
+function AutocompleteRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Row,
+    {
+      "data-slot": "autocomplete-row",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AutocompleteItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Item,
+    {
+      "data-slot": "autocomplete-item",
+      className: cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pl-1.5 pr-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AutocompleteSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Separator,
+    {
+      "data-slot": "autocomplete-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function AutocompleteGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Group,
+    {
+      "data-slot": "autocomplete-group",
+      className: cn("pt-1", className),
+      ...props
+    }
+  );
+}
+function AutocompleteGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.GroupLabel,
+    {
+      "data-slot": "autocomplete-group-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props
+    }
+  );
+}
+function AutocompleteCollection({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Collection,
+    {
+      "data-slot": "autocomplete-collection",
+      ...props
+    }
+  );
+}
+function AutocompleteContent({
+  className,
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 6,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AutocompletePortal, { children: /* @__PURE__ */ jsx(
+    AutocompletePositioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx(AutocompletePopup, { className, ...props })
+    }
+  ) });
+}
+
+export { Autocomplete, AutocompleteArrow, AutocompleteBackdrop, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteIcon, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue };
+//# sourceMappingURL=autocomplete.js.map
+//# sourceMappingURL=autocomplete.js.map