@nqlib/nqui 0.4.2 → 0.4.4

package/docs/components/nqui-combobox.md

@@ -1,73 +1,94 @@
 # nqui Combobox
 
-> **Searchable** select. Single or multi-select. Use when user types to filter options.
+> **Searchable** select (Base UI). User types to filter options. Single or multiple selection.
 
 ## When to Use
 
-- **Selection:** Single or multiple
-- **Key feature:** User searches/filters options by typing
-- **Options:** Many (dozens, hundreds)
+- **Selection:** Single (default) or multiple (`multiple` on root)
+- **Key feature:** Filter list by typing in the input
+- **Options:** Many rows; use **`items`** on `Combobox` + render prop on `ComboboxList` for built-in filtering
 
-**Choose Combobox when:** Options are too many to scroll, or user knows the name. Type to filter. Use Select when options are few and no search needed.
+**Choose Combobox when:** Users need search. Use **Select** when a plain dropdown is enough.
 
 ## Import
 
 ```tsx
 import {
-  Combobox, ComboboxInput, ComboboxContent, ComboboxList,
-  ComboboxItem, ComboboxEmpty, ComboboxChips, ComboboxChip,
-  ComboboxTrigger, ComboboxValue, ComboboxCollection, ComboboxGroup,
-  ComboboxLabel, ComboboxSeparator
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxSeparator,
+  ComboboxCollection,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxClear,
+  useComboboxAnchor,
 } from "@nqlib/nqui"
 ```
 
-## Basic
+## Single selection + type-to-filter (recommended)
+
+Pass **`items`** to `Combobox` and use a **render function** as the only child of `ComboboxList`. Place **`ComboboxEmpty`** next to `ComboboxList` (both under `ComboboxContent`), not inside `ComboboxList` alongside the function.
 
 ```tsx
-<Combobox options={items} value={value} onChange={setValue}>
+const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
+
+<Combobox items={fruits}>
   <ComboboxInput placeholder="Search..." />
   <ComboboxContent>
+    <ComboboxEmpty>No results found.</ComboboxEmpty>
     <ComboboxList>
-      {items.map((item) => (
-        <ComboboxItem key={item.value} value={item.value}>{item.label}</ComboboxItem>
-      ))}
+      {(item) => (
+        <ComboboxItem key={item} value={item}>
+          {item}
+        </ComboboxItem>
+      )}
     </ComboboxList>
-    <ComboboxEmpty>No results</ComboboxEmpty>
   </ComboboxContent>
 </Combobox>
 ```
 
-## showClear
+## Static list (no `items` filter)
 
-```tsx
-<Combobox showClear ... />
-```
-
-## Multi-select chips
+You can still render `ComboboxItem` children manually when you control filtering yourself.
 
 ```tsx
-<Combobox multiSelect value={selected} onChange={setSelected}>
-  <ComboboxChips placeholder="Select...">
-    {(vals) => vals.map((v) => <ComboboxChip key={v} value={v} onRemove={...} />)}
-  </ComboboxChips>
-  ...
+<Combobox>
+  <ComboboxInput placeholder="Search..." />
+  <ComboboxContent>
+    <ComboboxList>
+      <ComboboxItem value="a">A</ComboboxItem>
+      <ComboboxItem value="b">B</ComboboxItem>
+    </ComboboxList>
+  </ComboboxContent>
 </Combobox>
 ```
 
-## Groups
+## Clear button
 
 ```tsx
-<ComboboxCollection>
-  <ComboboxGroup>
-    <ComboboxLabel>Group A</ComboboxLabel>
-    <ComboboxItem value="a">A</ComboboxItem>
-  </ComboboxGroup>
-  <ComboboxSeparator />
-  ...
-</ComboboxCollection>
+<ComboboxInput showClear placeholder="Search..." />
 ```
 
+## Multiple selection
+
+Use **`multiple`** on `Combobox` (see [Base UI Combobox](https://base-ui.com/react/components/combobox)). Combine with **`ComboboxChips`**, **`ComboboxChip`**, **`ComboboxChipsInput`** as needed for chip UI.
+
+## Implementation
+
+- **Source:** `packages/nqui/src/components/ui/combobox.tsx`
+- **Public API:** exported from `@nqlib/nqui` (same as `CoreCombobox*` aliases in the barrel if you need the unprefixed base re-exports)
+- **Styling:** Input group uses injected CSS once per page (`nqui-combobox-styles-v1`) for trigger depth/shadow; component is `"use client"`.
+
 ## Notes
 
-- Injects CSS at mount; client-only in SSR.
-- `useComboboxAnchor` for PopoverAnchor positioning.
+- **`useComboboxAnchor`:** ref for anchoring `ComboboxContent` when using chips / custom layout.
+- **Dropdown items:** spacing/hover treatment aligns with **Select** (`SelectItem`-style density).

package/docs/components/nqui-drawer.md

@@ -1,6 +1,6 @@
 # nqui Drawer
 
-> Bottom drawer. DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter.
+> **Vaul** drawer. **DrawerContent** keeps an **inset rounded card** (`before:bg-card`, `before:inset-2`, `before:rounded-xl`) so the panel does not read as a full-bleed slab—surface follows **`card`** tokens in both themes.
 
 ## Import
 

package/docs/components/nqui-scroll-area.md

@@ -1,6 +1,6 @@
 # nqui ScrollArea
 
-> Custom scrollbar. fadeMask (enhanced), horizontal scroll.
+> Default export is **EnhancedScrollArea** (fade mask, orientation). Underlying primitive: **`CoreScrollArea`** / `ScrollBar` from **`ui/scroll-area`**. Core scrollbar uses a **thinner** track/thumb (drawer-like).
 
 ## Import
 

package/docs/components/nqui-select.md

@@ -48,6 +48,6 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGr
 
 ## Notes
 
-- Injects CSS at mount; client-only in SSR.
+- **Content:** FrostedGlass + popover surface; **items** use relaxed row spacing (hover `accent`, margins) for dropdown parity with **Combobox** list items.
 - Use `SelectScrollUpButton` / `SelectScrollDownButton` for long lists.
-- `CoreSelect*` for plain styling.
+- **`CoreSelect*`** for the same primitives without the enhanced trigger chrome (re-exported from the same `ui/select` module).

package/docs/components/nqui-sheet.md

@@ -1,6 +1,6 @@
 # nqui Sheet
 
-> Side panel. SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter. side: top|right|bottom|left.
+> Side panel (Radix **Dialog** pattern). **SheetContent** uses an **inset card** panel: transparent outer shell + `before:bg-card` block inset with **rounded corners** (matches drawer-style “card floating in the viewport”). **No edge borders** on the sheet shell (divider lines removed in favor of the card shape).
 
 ## Import
 

package/docs/components/nqui-slider.md

@@ -14,3 +14,16 @@ import { Slider } from "@nqlib/nqui"
 <Slider value={[50]} onValueChange={([v]) => setVal(v)} />
 <Slider value={[20, 80]} onValueChange={setRange} />
 ```
+
+## Sizes
+
+```tsx
+<Slider size="sm" defaultValue={[40]} />
+<Slider size="default" defaultValue={[40]} />
+<Slider size="lg" defaultValue={[40]} />
+```
+
+## Notes
+
+- **Thumb:** white, rounded-full, subtle shadow (aligned with **Switch** thumb language).
+- **`size`:** `sm` | `default` | `lg` (control scale heights).

package/docs/components/nqui-spinner.md

@@ -1,6 +1,6 @@
 # nqui Spinner
 
-> Loading spinner.
+> Dual-arc loader (primary **`linearGradient`** strokes, rotating shell). Keyframes live in **`packages/nqui/src/index.css`** (`.nqui-spinner-*`).
 
 ## Import
 
@@ -14,3 +14,8 @@ import { Spinner } from "@nqlib/nqui"
 <Spinner />
 <Spinner className="size-6" />
 ```
+
+## Notes
+
+- Root is a `div` with `role="status"` and `aria-label="Loading"`.
+- Strokes use `var(--primary)` and `color-mix(in oklch, var(--primary) …, white)` so light/dark themes stay on-brand.

package/docs/components/nqui-switch.md

@@ -1,6 +1,6 @@
 # nqui Switch
 
-> Toggle switch. Core Radix.
+> Toggle switch. **Radix** primitive with **size** variants and **capsule thumb** (white, shadow). Sizes align with control scale: `sm` / `default` / `lg`.
 
 ## Import
 
@@ -13,3 +13,25 @@ import { Switch } from "@nqlib/nqui"
 ```tsx
 <Switch checked={checked} onCheckedChange={setChecked} />
 ```
+
+## Sizes
+
+```tsx
+<Switch size="sm" />
+<Switch size="default" />
+<Switch size="lg" />
+```
+
+## Hit area
+
+The switch root has no `::before` styling, so you can add [hit-area utilities](https://bazza.dev/craft/2026/hit-area) on the same element:
+
+```tsx
+<Switch className="hit-area-4" id="notifications" />
+```
+
+Use sparingly in dense toolbars so expanded targets do not overlap.
+
+## Notes
+
+- Thumb travel and track sizes are fixed per `size`; overriding height on the root without matching thumb classes may look off.

package/docs/components/nqui-toaster.md

@@ -1,6 +1,6 @@
 # nqui Toaster
 
-> Toast notifications (sonner). Semantic types, promise pattern.
+> Toast notifications via **Sonner**. Default toast is **pill-shaped**; default **normal** toast uses **inverted** surface (dark fill in light theme, light fill in dark theme) using `--foreground` / `--background`. Implemented in **`packages/nqui/src/components/ui/sonner.tsx`** (`Toaster`). Compatibility aliases: `EnhancedSonner`, `CoreToaster` → same component.
 
 ## Import
 
@@ -42,3 +42,7 @@ toast.promise(fetchData(), {
 toast.success("Msg", { duration: 5000 })
 // Toaster: position, richColors, etc.
 ```
+
+## Notes
+
+- **Subpath import:** `@nqlib/nqui/sonner` re-exports the same `Toaster`.

package/docs/nqui-skills/SKILL.md

@@ -40,6 +40,8 @@ When designing app UI (toolbars, headers, inline controls):
 
 ## Design System Conventions
 
+See **`design-system.md`** in this folder for sizing, grouped controls (including pill **ButtonGroup** / **ToggleGroup** shells), and file paths under `packages/nqui/src/components/ui/`.
+
 ### Control Sizing
 - sm = h-6
 - default = h-7
@@ -57,10 +59,15 @@ Always use CSS variables from elevation.css:
 - `--z-tooltip` (70)
 
 ### Component Naming
-- Enhanced vs Core: default is enhanced; use Core* for plain
+- Default exports are the enhanced/polished variants; use **Core\*** for plain primitives
+- Implementations are consolidated under **`ui/`** (not separate `custom/enhanced-*` per component for Button, Badge, Checkbox, Select, Combobox, Sonner)
 - File names: kebab-case
 - Component names: PascalCase
 
+### Hit area (optional)
+
+Library CSS includes [Bazza hit-area](https://bazza.dev/craft/2026/hit-area) utilities. For **Checkbox** / **Switch** in padded tables or lists, pass **`className="hit-area-6"`** (or `hit-area-4`, axis variants) on the **component root**, not on a wrapper-only parent. Opt-in only; use **`hit-area-debug`** while tuning. Details: `packages/nqui/docs/components/nqui-checkbox.md`, `nqui-switch.md`; examples: `ComponentShowcase` Checkbox + Switch sections.
+
 ## Key Dependencies
 
 Required peer dependencies:

package/docs/nqui-skills/design-system.md

@@ -77,14 +77,15 @@ Font: `--font-sans` (Inter Variable). Leading: `leading-normal` or `text-xs/rela
 1. **Use the scale** – If the component has a `size` prop, map `sm`→h-6, `default`→h-7, `lg`→h-8.
 2. **Match padding** – Text controls: px-2–3, py-1.5. Icon-only: p-0 with explicit size.
 3. **Text size** – sm: `text-xs` or `text-[0.625rem]`, default: `text-sm`, lg: `text-sm`.
-4. **Border radius** – Use `rounded-md` (default) or `rounded-[min(var(--radius-md),8px)]` for sm. For nested layouts, use `calc(outer - offset)`.
+4. **Border radius** – Use `rounded-md` (default) or `rounded-[min(var(--radius-md),8px)]` for sm; **Button** uses full pill (`rounded-full`). For nested layouts, use `calc(outer - offset)`.
 
 ## Grouped Controls (ButtonGroup, ToggleGroup)
 
-- **Shared border** – Container: `rounded-md border border-input overflow-hidden`
+- **Shared border** – Container: `rounded-full border border-input overflow-hidden` (pill outer edge)
 - **Child borders** – Items: `border-0` (container provides the border)
 - **Dividers** – ToggleGroup: item borders (`border-foreground/20`) between items. Or `ToggleGroupSeparator` when `separator={false}`.
 - **Corners** – First item: rounded-l (or rounded-t vertical), last: rounded-r (or rounded-b)
+- **Several groups on one horizontal row** – `ButtonGroup`’s container is **`inline-flex`**, so multiple sibling groups in normal flow behave like **inline boxes** and align to **baseline**. Mixed content (labels vs icons vs `ButtonGroupText`) then produces inconsistent vertical alignment. Prefer an explicit row container: **`flex flex-wrap items-center gap-*`**, or **grid** columns—so you choose **cross-axis alignment** (`items-center`, `items-end`, etc.) instead of inheriting baseline alignment from inline layout.
 
 ## Toggle & ToggleGroup Visual Treatment (Visibility on Any Background)
 
@@ -108,12 +109,24 @@ Never use flat `bg-muted` only for selected state; always add gradient + shadow
 | Chart/settings panel | Label + inline controls, `rounded-lg border bg-muted/30 p-3` | Y-axis: Linear/Log; Size: S/M/L |
 | Standalone | Inline with related UI, not floating alone | Pin, Mute, single Toggle |
 
+## Bounded content (default UX)
+
+- **Rule:** Interactive surfaces should not **visually bleed** outside their box: prefer **ellipsis** (`truncate`), **line-clamp**, **controlled scroll**, or **wrapping** (`break-words` / `whitespace-normal`) instead of letting text or icons paint past padding in narrow layouts.
+- **Not universal:** Portals (dropdowns, popovers), **tooltips**, and **drag overlays** intentionally escape bounds. **Data tables** may use horizontal scroll. Choose per component.
+- **Flex gotcha:** `inline-flex` + icon + `whitespace-nowrap` + raw **string** children keeps an implicit **min-width: min-content**; parents need **`min-w-0`** (and often **`max-w-full`**) on the control and a truncating inner wrapper for long labels.
+- **Built-in helpers in nqui:** Shared `wrapInlineLabelTextNodes` + `min-w-0 max-w-full` on **Button**, **Toggle**, **TabsTrigger**, **Badge**, **ComboboxChip**; **SelectTrigger** uses **`min-w-0 max-w-full`** and **`min-w-0`** on the value slot with **`line-clamp-1`**. **Carousel** prev/next sit **inside** the carousel box so they don’t spill out of **Card** (override via `className` if you want outside arrows).
+- **Card:** **Card** uses **`min-w-0`** on shell + header/content/footer for flex/grid safety but keeps **`overflow-visible`** so overlays aren’t clipped; don’t rely on **`overflow-hidden`** on Card as a global “catch-all” unless you accept clipping dropdowns/focus.
+
 ## Customization
 
 - End users override via `className` or `size` when supported.
 - Do NOT hardcode heights in consumer code when the component supports `size`.
 - Prefer semantic sizes over pixel values in component defaults.
 
+## Hit area utilities
+
+**Hit area** expands the pointer target; it does **not** replace control **size** (sm / default / lg). Use **opt-in** on **Checkbox** / **Switch** for padded rows or cells—not as a global default. Avoid large overlapping hit areas in dense toolbars. See **`SKILL.md`** (Hit area) in this folder and `packages/nqui/docs/components/nqui-checkbox.md` / `nqui-switch.md`.
+
 ## Files to Check for Consistency
 
 - `packages/nqui/src/components/ui/button.tsx`
@@ -121,7 +134,7 @@ Never use flat `bg-muted` only for selected state; always add gradient + shadow
 - `packages/nqui/src/components/ui/toggle-group.tsx`
 - `packages/nqui/src/components/ui/input.tsx`
 - `packages/nqui/src/components/ui/select.tsx`
-- `packages/nqui/src/components/custom/enhanced-button.tsx`
+- `packages/nqui/src/components/ui/combobox.tsx`
 
 ## Anti-Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",

package/scripts/build-styles.js

@@ -19,6 +19,7 @@ const projectRoot = resolve(__dirname, '..');
 const indexCssPath = join(projectRoot, 'src', 'index.css');
 const colorsCssPath = join(projectRoot, 'src', 'styles', 'colors.css');
 const elevationCssPath = join(projectRoot, 'src', 'styles', 'elevation.css');
+const hitAreaCssPath = join(projectRoot, 'src', 'styles', 'hit-area.css');
 const outputPath = join(projectRoot, 'dist', 'styles.css');
 
 function extractStandaloneCSS() {
@@ -30,6 +31,11 @@ function extractStandaloneCSS() {
     throw new Error(`Colors CSS file not found: ${colorsCssPath}`);
   }
 
+  let hitAreaCss = '';
+  if (existsSync(hitAreaCssPath)) {
+    hitAreaCss = readFileSync(hitAreaCssPath, 'utf-8').trimEnd();
+  }
+
   let indexCss = readFileSync(indexCssPath, 'utf-8');
   let colorsCss = readFileSync(colorsCssPath, 'utf-8');
   let elevationCss = '';
@@ -110,14 +116,23 @@ function extractStandaloneCSS() {
     .replace(/@import\s+["']@fontsource-variable\/inter["'];?\s*\n/g, '')
     .replace(/@import\s+["']\.\/styles\/colors\.css["'];?\s*\n/g, '')
     .replace(/@import\s+["']\.\/styles\/elevation\.css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']\.\/styles\/hit-area\.css["'];?\s*\n/g, '')
     .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '')
     .replace(/\/\*\s*Import elevation system\s*\*\//g, '')
+    .replace(/\/\*\s*Hit-area utilities \(expanded pointer targets\)\s*\*\/\s*\n/g, '')
     // Remove @source inline() directives (already extracted above) - must match multiline
     .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\([\s\S]*?\)\s*;/g, '')
     // Remove other @source directives (non-inline ones)
     .replace(/@source\s+(?!inline\()[^;]+;?\s*\n/g, '')
     .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '');
 
+  if (hitAreaCss) {
+    indexCss = indexCss.replace(
+      /@theme inline\s*\{/,
+      `/* Hit-area — https://bazza.dev/craft/2026/hit-area */\n${hitAreaCss}\n\n@theme inline {`
+    );
+  }
+
   // Extract :root and .dark blocks from index.css
   const indexRootMatch = indexCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
   const indexDarkMatch = indexCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
@@ -232,6 +247,7 @@ function extractStandaloneCSS() {
  * - Light and dark mode support
  * - Base layer styles
  * - Utility animations
+ * - Hit-area @utility blocks (inlined from src/styles/hit-area.css)
  * - @source inline() directives for zero-config Tailwind utility generation
  *
  * Generated by: npm run build:lib

package/scripts/init-debug-css.js

@@ -114,8 +114,10 @@ function main() {
   console.log('   1. Import the CSS in your app entry point:');
   console.log(`      import './${finalTargetPath.replace(process.cwd() + '/', '')}'`);
   console.log('   2. Use DebugPanel in your app:');
-  console.log('      import { DebugPanel } from "nqui"');
-  console.log('   3. Add DebugPanel to your root component');
+  console.log('      import { DebugPanel } from "@nqlib/nqui"');
+  console.log('      // Or tree-shake debug out of production: import { DebugPanel } from "@nqlib/nqui/debug"');
+  console.log('   3. Add <DebugPanel /> to your root layout (panel is inactive until the user opens it).');
+  console.log('      Wrapping in process.env.NODE_ENV or import.meta.env.DEV is optional.');
   console.log('\n✨ Done!');
 }
 

package/scripts/verify-build.js

@@ -284,7 +284,7 @@ function main() {
     { name: '@source inline() directives', pattern: /@source\s+inline\(/g },
     { name: ':root block', pattern: /:root\s*\{/ },
     { name: '.dark block', pattern: /\.dark\s*\{/ },
-    { name: 'Viewport lock (html, body, #root)', pattern: /html\s*,\s*\n?\s*body\s*,\s*\n?\s*#root\s*\{[^}]*height:\s*100%[^}]*overflow:\s*hidden/s },
+    // Viewport lock (html, body, #root) was intentionally removed from base styles (see CHANGELOG 0.3.3); use AppLayout for opt-in lock.
   ];
   
   criticalPatterns.forEach(({ name, pattern }) => {

package/dist/button-CYFTFDKe.cjs

@@ -1 +0,0 @@
-"use strict";const u=require("react/jsx-runtime"),d=require("react"),l=require("@radix-ui/react-slot"),f=require("class-variance-authority"),g=require("./utils-IjLH3w2e.cjs");function b(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const v=b(d),o=f.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-7 min-w-7 px-3",sm:"h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-xs",lg:"h-8 min-w-8 px-4",icon:"h-7 w-7 p-0"}},defaultVariants:{variant:"default",size:"default"}}),i=v.forwardRef(({className:e,variant:r,size:t,asChild:n=!1,...s},a)=>{const c=n?l.Slot:"button";return u.jsx(c,{className:g.cn(o({variant:r,size:t,className:e})),ref:a,...s})});i.displayName="Button";exports.Button=i;exports.buttonVariants=o;

package/dist/button-nJvDl3w8.js

@@ -1,44 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as a from "react";
-import { Slot as d } from "@radix-ui/react-slot";
-import { cva as c } from "class-variance-authority";
-import { c as u } from "./utils-B6yFEsav.js";
-const f = c(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-7 min-w-7 px-3",
-        sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-xs",
-        lg: "h-8 min-w-8 px-4",
-        icon: "h-7 w-7 p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-), m = a.forwardRef(
-  ({ className: e, variant: r, size: t, asChild: o = !1, ...n }, i) => /* @__PURE__ */ s(
-    o ? d : "button",
-    {
-      className: u(f({ variant: r, size: t, className: e })),
-      ref: i,
-      ...n
-    }
-  )
-);
-m.displayName = "Button";
-export {
-  m as B,
-  f as b
-};

package/dist/carousel-DEyyJi49.js

@@ -1,179 +0,0 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import * as l from "react";
-import z from "embla-carousel-react";
-import { K as C } from "./keyboard-pkY42Y3a.js";
-import { c as d } from "./utils-B6yFEsav.js";
-import { B as v } from "./button-nJvDl3w8.js";
-import { HugeiconsIcon as N } from "@hugeicons/react";
-import { ArrowLeft01Icon as I, ArrowRight01Icon as R } from "@hugeicons/core-free-icons";
-const b = l.createContext(null);
-function m() {
-  const e = l.useContext(b);
-  if (!e)
-    throw new Error("useCarousel must be used within a <Carousel />");
-  return e;
-}
-function W({
-  orientation: e = "horizontal",
-  opts: t,
-  setApi: r,
-  plugins: s,
-  className: c,
-  children: i,
-  ...u
-}) {
-  const [w, o] = z(
-    {
-      ...t,
-      axis: e === "horizontal" ? "x" : "y"
-    },
-    s
-  ), [k, y] = l.useState(!1), [S, P] = l.useState(!1), f = l.useCallback((n) => {
-    n && (y(n.canScrollPrev()), P(n.canScrollNext()));
-  }, []), h = l.useCallback(() => {
-    o?.scrollPrev();
-  }, [o]), x = l.useCallback(() => {
-    o?.scrollNext();
-  }, [o]), g = l.useCallback(
-    (n) => {
-      n.key === C.ArrowLeft ? (n.preventDefault(), h()) : n.key === C.ArrowRight && (n.preventDefault(), x());
-    },
-    [h, x]
-  );
-  return l.useEffect(() => {
-    !o || !r || r(o);
-  }, [o, r]), l.useEffect(() => {
-    if (o)
-      return f(o), o.on("reInit", f), o.on("select", f), () => {
-        o?.off("select", f);
-      };
-  }, [o, f]), /* @__PURE__ */ a(
-    b.Provider,
-    {
-      value: {
-        carouselRef: w,
-        api: o,
-        opts: t,
-        orientation: e || (t?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev: h,
-        scrollNext: x,
-        canScrollPrev: k,
-        canScrollNext: S
-      },
-      children: /* @__PURE__ */ a(
-        "div",
-        {
-          onKeyDownCapture: g,
-          className: d("relative", c),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...u,
-          children: i
-        }
-      )
-    }
-  );
-}
-function H({ className: e, ...t }) {
-  const { carouselRef: r, orientation: s } = m();
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      ref: r,
-      className: "overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: d(
-            "flex",
-            s === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            e
-          ),
-          ...t
-        }
-      )
-    }
-  );
-}
-function q({ className: e, ...t }) {
-  const { orientation: r } = m();
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      role: "group",
-      "aria-roledescription": "slide",
-      "data-slot": "carousel-item",
-      className: d(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        r === "horizontal" ? "pl-4" : "pt-4",
-        e
-      ),
-      ...t
-    }
-  );
-}
-function F({
-  className: e,
-  variant: t = "outline",
-  size: r = "icon",
-  ...s
-}) {
-  const { orientation: c, scrollPrev: i, canScrollPrev: u } = m();
-  return /* @__PURE__ */ p(
-    v,
-    {
-      "data-slot": "carousel-previous",
-      variant: t,
-      size: r,
-      className: d(
-        "rounded-full absolute touch-manipulation",
-        c === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        e
-      ),
-      disabled: !u,
-      onClick: i,
-      ...s,
-      children: [
-        /* @__PURE__ */ a(N, { icon: I, strokeWidth: 2 }),
-        /* @__PURE__ */ a("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-}
-function G({
-  className: e,
-  variant: t = "outline",
-  size: r = "icon",
-  ...s
-}) {
-  const { orientation: c, scrollNext: i, canScrollNext: u } = m();
-  return /* @__PURE__ */ p(
-    v,
-    {
-      "data-slot": "carousel-next",
-      variant: t,
-      size: r,
-      className: d(
-        "rounded-full absolute touch-manipulation",
-        c === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        e
-      ),
-      disabled: !u,
-      onClick: i,
-      ...s,
-      children: [
-        /* @__PURE__ */ a(N, { icon: R, strokeWidth: 2 }),
-        /* @__PURE__ */ a("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
-}
-export {
-  W as C,
-  H as a,
-  q as b,
-  F as c,
-  G as d
-};