@zentauri-ui/zentauri-components 0.0.84 → 0.0.91

package/README.md

@@ -6,13 +6,16 @@ A React UI kit for building product interfaces with Tailwind CSS. Components are
 
 The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equivalent setup where Tailwind can scan this package via `@source`). Styling uses utility classes; **class-variance-authority** powers variant APIs (size, appearance, and similar props), with **clsx** and **tailwind-merge** for predictable `className` composition. **Framer Motion** backs motion where components animate, and **react-icons** is used for iconography where applicable.
 
-Published artifacts live under `dist/`; consumers import the UI barrel at `@zentauri-ui/zentauri-components/ui`. A compiled stylesheet is also exposed at `@zentauri-ui/zentauri-components/styles.css` for setups that import CSS explicitly (many apps rely on Tailwind scanning alone—see installation).
+Published artifacts live under `dist/`. You can import either the **UI barrel** (`@zentauri-ui/zentauri-components/ui`) or a **per-area subpath** (`@zentauri-ui/zentauri-components/ui/<name>`) so bundlers only pull in the entry you use. Most apps rely on Tailwind scanning the package sources (see installation); a separate CSS import is not required for that setup.
 
 ## Package exports
 
 | Subpath | Description |
 | --- | --- |
-| `@zentauri-ui/zentauri-components/ui` | Components, hooks, and types (ESM `.js`, CJS `.cjs`, `.d.ts`) |
+| `@zentauri-ui/zentauri-components/ui` | Full UI barrel: all components, hooks, and types (ESM `.js`, CJS `.cjs`, `.d.ts`) |
+| `@zentauri-ui/zentauri-components/ui/<name>` | Single area entry (same artifacts per file). Use this when you import from one module only to keep the dependency graph smaller. |
+
+The `<name>` segment matches the folder under `src/ui/` (for example `accordion`, `select`, `empty-state`, `buttons` for `Button`, `inputs` for `Input`).
 
 ## Requirements
 
@@ -21,33 +24,35 @@ Published artifacts live under `dist/`; consumers import the UI barrel at `@zent
 
 ## Components
 
-Modules re-exported from the UI entry include:
-
-- Accordion
-- Alert
-- Badge
-- Button
-- Card
-- Divider
-- Drawer
-- Dropdown
-- Empty state
-- Input
-- Modal
-- Pagination
-- Progress
-- Select
-- Skeleton
-- Spinner
-- Table
-- Tabs
-- Toast
-- Toggle
-- Tooltip
+Each area is available from the barrel and from its own subpath (`…/ui/<subpath>`):
+
+| Area | Subpath `…/ui/…` |
+| --- | --- |
+| Accordion | `accordion` |
+| Alert | `alert` |
+| Badge | `badge` |
+| Button | `buttons` |
+| Card | `card` |
+| Divider | `divider` |
+| Drawer | `drawer` |
+| Dropdown | `dropdown` |
+| Empty state | `empty-state` |
+| Input | `inputs` |
+| Modal | `modal` |
+| Pagination | `pagination` |
+| Progress | `progress` |
+| Select | `select` |
+| Skeleton | `skeleton` |
+| Spinner | `spinner` |
+| Table | `table` |
+| Tabs | `tabs` |
+| Toast | `toast` |
+| Toggle | `toggle` |
+| Tooltip | `tooltip` |
 
 ## Installation
 
-**Getting started** — Add the package, point Tailwind at the library sources, then import components from the UI entry.
+**Getting started** — Add the package, point Tailwind at the library sources, then import from the UI barrel or from a specific `ui/<name>` subpath.
 
 ### Step 1 — Install the package
 
@@ -76,9 +81,9 @@ Add an `@source` entry so Tailwind scans class names inside `@zentauri-ui/zentau
 
 ### Step 3 — Import and use components
 
-Import from the UI barrel, then compose primitives in your JSX.
+Prefer a **subpath** when you only need one area (smaller resolved graph than the full barrel). The barrel remains valid when you use many primitives from different areas.
 
-#### Imports
+#### Imports (subpath — recommended for a single area)
 
 ```tsx
 import {
@@ -86,7 +91,20 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@zentauri-ui/zentauri-components/ui";
+} from "@zentauri-ui/zentauri-components/ui/accordion";
+```
+
+#### Imports (multiple areas — one subpath import per area)
+
+```tsx
+import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@zentauri-ui/zentauri-components/ui/select";
+```
+
+#### Imports (barrel — one entry for symbols from several areas)
+
+```tsx
+import { Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@zentauri-ui/zentauri-components/ui";
 ```
 
 #### Usage

package/dist/ui/accordion.cjs

@@ -0,0 +1,311 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/accordion/index.ts
+var accordion_exports = {};
+__export(accordion_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  accordionContentTransitionPresets: () => accordionContentTransitionPresets,
+  accordionContentVariants: () => accordionContentVariants,
+  accordionItemVariants: () => accordionItemVariants,
+  accordionTriggerVariants: () => accordionTriggerVariants,
+  accordionVariants: () => accordionVariants
+});
+module.exports = __toCommonJS(accordion_exports);
+
+// src/ui/accordion/accordion.tsx
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/accordion/animations.ts
+var accordionContentTransitionPresets = {
+  none: { duration: 0 },
+  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] }
+};
+
+// src/ui/accordion/variants.ts
+var import_class_variance_authority = require("class-variance-authority");
+var accordionVariants = (0, import_class_variance_authority.cva)("w-full", {
+  variants: {
+    appearance: {
+      default: "divide-y divide-white/10 rounded-xl border border-white/10",
+      outline: "divide-y divide-white/10 rounded-xl border border-white/15",
+      ghost: "divide-y divide-white/5",
+      card: "space-y-2",
+      separated: "space-y-3",
+      sky: "divide-y divide-sky-600 rounded-xl border border-sky-600",
+      rose: "divide-y divide-rose-600 rounded-xl border border-rose-600",
+      purple: "divide-y divide-purple-600 rounded-xl border border-purple-600",
+      pink: "divide-y divide-pink-600 rounded-xl border border-pink-600",
+      orange: "divide-y divide-orange-600 rounded-xl border border-orange-600",
+      yellow: "divide-y divide-yellow-600 rounded-xl border border-yellow-600",
+      teal: "divide-y divide-teal-600 rounded-xl border border-teal-600",
+      indigo: "divide-y divide-indigo-600 rounded-xl border border-indigo-600",
+      emerald: "divide-y divide-emerald-600 rounded-xl border border-emerald-600",
+      "gradient-blue": "divide-y divide-gradient-to-r from-blue-600 to-purple-600 rounded-xl border border-gradient-to-r from-blue-600 to-purple-600",
+      "gradient-green": "divide-y divide-gradient-to-r from-green-600 to-lime-600 rounded-xl border border-gradient-to-r from-green-600 to-lime-600",
+      "gradient-red": "divide-y divide-gradient-to-r from-red-600 to-pink-600 rounded-xl border border-gradient-to-r from-red-600 to-pink-600",
+      "gradient-yellow": "divide-y divide-gradient-to-r from-yellow-600 to-orange-600 rounded-xl border border-gradient-to-r from-yellow-600 to-orange-600",
+      "gradient-purple": "divide-y divide-gradient-to-r from-purple-600 to-pink-600 rounded-xl border border-gradient-to-r from-purple-600 to-pink-600",
+      "gradient-teal": "divide-y divide-gradient-to-r from-teal-600 to-cyan-600 rounded-xl border border-gradient-to-r from-teal-600 to-cyan-600",
+      "gradient-indigo": "divide-y divide-gradient-to-r from-indigo-600 to-purple-600 rounded-xl border border-gradient-to-r from-indigo-600 to-purple-600",
+      "gradient-pink": "divide-y divide-gradient-to-r from-pink-600 to-rose-600 rounded-xl border border-gradient-to-r from-pink-600 to-rose-600",
+      "gradient-orange": "divide-y divide-gradient-to-r from-orange-600 to-red-600 rounded-xl border border-gradient-to-r from-orange-600 to-red-600"
+    },
+    size: {
+      sm: "px-3 py-2 text-sm",
+      md: "px-4 py-3 text-sm",
+      lg: "px-5 py-4 text-base"
+    }
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+var accordionItemVariants = (0, import_class_variance_authority.cva)("", {
+  variants: {
+    appearance: {
+      default: "",
+      outline: "",
+      ghost: "",
+      card: "rounded-xl border border-white/10 bg-white/[0.03] p-2",
+      separated: "rounded-xl border border-white/10 bg-slate-950/40 p-2",
+      sky: "rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2",
+      rose: "rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2",
+      purple: "rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2",
+      pink: "rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2",
+      orange: "rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2",
+      yellow: "rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2",
+      teal: "rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2",
+      indigo: "rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2",
+      emerald: "rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2",
+      "gradient-blue": "rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-green": "rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white",
+      "gradient-red": "rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-yellow": "rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white",
+      "gradient-purple": "rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white",
+      "gradient-teal": "rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white",
+      "gradient-indigo": "rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white",
+      "gradient-pink": "rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white",
+      "gradient-orange": "rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white"
+    }
+  },
+  defaultVariants: { appearance: "default" }
+});
+var accordionTriggerVariants = (0, import_class_variance_authority.cva)(
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30",
+  {
+    variants: {
+      size: {
+        sm: "py-2 text-sm",
+        md: "py-3 text-sm",
+        lg: "py-4 text-base"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var accordionContentVariants = (0, import_class_variance_authority.cva)("pb-3 text-sm", {
+  variants: {
+    size: {
+      sm: "pb-2 text-xs",
+      md: "pb-3 text-sm",
+      lg: "pb-4 text-base"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/ui/accordion/accordion.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AccordionContext = (0, import_react.createContext)(null);
+var AccordionItemValueContext = (0, import_react.createContext)(null);
+function useAccordionContext(component) {
+  const ctx = (0, import_react.useContext)(AccordionContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Accordion>`);
+  }
+  return ctx;
+}
+function useAccordionItemValue(component) {
+  const value = (0, import_react.useContext)(AccordionItemValueContext);
+  if (!value) {
+    throw new Error(`${component} must be used within <AccordionItem>`);
+  }
+  return value;
+}
+function Accordion({
+  type = "single",
+  value,
+  values,
+  defaultValue,
+  defaultValues,
+  onValueChange,
+  onValuesChange,
+  transition = "default",
+  appearance = "default",
+  size = "md",
+  className,
+  children
+}) {
+  const isSingleControlled = value !== void 0;
+  const isMultipleControlled = values !== void 0;
+  const [singleUncontrolled, setSingleUncontrolled] = (0, import_react.useState)(defaultValue);
+  const [multipleUncontrolled, setMultipleUncontrolled] = (0, import_react.useState)(defaultValues ?? []);
+  const singleValue = isSingleControlled ? value : singleUncontrolled;
+  const multipleValues = (0, import_react.useMemo)(() => isMultipleControlled ? values ?? [] : multipleUncontrolled, [isMultipleControlled, values, multipleUncontrolled]);
+  const isOpen = (0, import_react.useCallback)(
+    (itemValue) => {
+      if (type === "single") {
+        return singleValue === itemValue;
+      }
+      return multipleValues.includes(itemValue);
+    },
+    [multipleValues, singleValue, type]
+  );
+  const toggle = (0, import_react.useCallback)(
+    (itemValue) => {
+      if (type === "single") {
+        const next2 = singleValue === itemValue ? void 0 : itemValue;
+        if (!isSingleControlled) {
+          setSingleUncontrolled(next2);
+        }
+        onValueChange?.(next2);
+        return;
+      }
+      const exists = multipleValues.includes(itemValue);
+      const next = exists ? multipleValues.filter((entry) => entry !== itemValue) : [...multipleValues, itemValue];
+      if (!isMultipleControlled) {
+        setMultipleUncontrolled(next);
+      }
+      onValuesChange?.(next);
+    },
+    [
+      isMultipleControlled,
+      isSingleControlled,
+      multipleValues,
+      onValueChange,
+      onValuesChange,
+      singleValue,
+      type
+    ]
+  );
+  const ctx = (0, import_react.useMemo)(
+    () => ({
+      type,
+      transition: transition ?? "default",
+      appearance: appearance ?? "default",
+      size: size ?? "md",
+      isOpen,
+      toggle
+    }),
+    [appearance, isOpen, size, toggle, transition, type]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "accordion", className: cn(accordionVariants({ appearance, size }), className), children }) });
+}
+Accordion.displayName = "Accordion";
+function AccordionItem({ className, value, children, ref, ...rest }) {
+  const { appearance } = useAccordionContext("AccordionItem");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemValueContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion-item",
+      "data-value": value,
+      className: cn(accordionItemVariants({ appearance }), className),
+      ...rest,
+      children
+    }
+  ) });
+}
+AccordionItem.displayName = "AccordionItem";
+function AccordionTrigger({ className, children, ref, ...rest }) {
+  const itemValue = useAccordionItemValue("AccordionTrigger");
+  const { isOpen, toggle, size } = useAccordionContext("AccordionTrigger");
+  const open = isOpen(itemValue);
+  const panelId = `${itemValue}-panel`;
+  const baseId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "m-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-slot": "accordion-trigger",
+      id: `${baseId}-trigger-${itemValue}`,
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      className: cn(accordionTriggerVariants({ size }), className),
+      onClick: () => toggle(itemValue),
+      ...rest,
+      children
+    }
+  ) });
+}
+AccordionTrigger.displayName = "AccordionTrigger";
+function AccordionContent({ className, children, ref }) {
+  const itemValue = useAccordionItemValue("AccordionContent");
+  const { isOpen, transition: transitionVariant, size } = useAccordionContext("AccordionContent");
+  const open = isOpen(itemValue);
+  const panelId = `${itemValue}-panel`;
+  const transitionConfig = accordionContentTransitionPresets[transitionVariant];
+  const motionless = transitionVariant === "none";
+  return open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      ref,
+      id: panelId,
+      role: "region",
+      "data-slot": "accordion-content",
+      className: cn(accordionContentVariants({ size }), className),
+      initial: motionless ? false : { opacity: 0 },
+      animate: motionless ? void 0 : { opacity: 1 },
+      exit: motionless ? void 0 : { opacity: 0 },
+      transition: transitionConfig,
+      children
+    },
+    itemValue
+  ) : null;
+}
+AccordionContent.displayName = "AccordionContent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  accordionContentTransitionPresets,
+  accordionContentVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionVariants
+});
+//# sourceMappingURL=accordion.cjs.map

package/dist/ui/accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/accordion/index.ts","../../src/ui/accordion/accordion.tsx","../../src/lib/utils.ts","../../src/ui/accordion/animations.ts","../../src/ui/accordion/variants.ts"],"sourcesContent":["export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"./accordion\";\nexport type {\n  AccordionContentProps,\n  AccordionItemProps,\n  AccordionProps,\n  AccordionTransition,\n  AccordionTriggerProps,\n  AccordionType,\n} from \"./types\";\nexport { accordionContentTransitionPresets } from \"./animations\";\nexport {\n  accordionVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n  accordionContentVariants,\n} from \"./variants\";\n","\"use client\";\nimport { motion } from \"framer-motion\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { accordionContentTransitionPresets } from \"./animations\";\nimport type {\n  AccordionContentProps,\n  AccordionItemProps,\n  AccordionProps,\n  AccordionTriggerProps,\n  AccordionCtx,\n} from \"./types\";\nimport {\n  accordionContentVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n  accordionVariants,\n} from \"./variants\";\n\n\nconst AccordionContext = createContext<AccordionCtx | null>(null);\n\nconst AccordionItemValueContext = createContext<string | null>(null);\n\nfunction useAccordionContext(component: string): AccordionCtx {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Accordion>`);\n  }\n  return ctx;\n}\n\nfunction useAccordionItemValue(component: string): string {\n  const value = useContext(AccordionItemValueContext);\n  if (!value) {\n    throw new Error(`${component} must be used within <AccordionItem>`);\n  }\n  return value;\n}\n\nexport function Accordion({\n  type = \"single\",\n  value,\n  values,\n  defaultValue,\n  defaultValues,\n  onValueChange,\n  onValuesChange,\n  transition = \"default\",\n  appearance = \"default\",\n  size = \"md\",\n  className,\n  children,\n}: AccordionProps) {\n  const isSingleControlled = value !== undefined;\n  const isMultipleControlled = values !== undefined;\n  const [singleUncontrolled, setSingleUncontrolled] = useState<string | undefined>(defaultValue);\n  const [multipleUncontrolled, setMultipleUncontrolled] = useState<string[]>(defaultValues ?? []);\n\n  const singleValue = isSingleControlled ? value : singleUncontrolled;\n  const multipleValues = useMemo(() => isMultipleControlled ? values ?? [] : multipleUncontrolled, [isMultipleControlled, values, multipleUncontrolled]);\n\n  const isOpen = useCallback(\n    (itemValue: string) => {\n      if (type === \"single\") {\n        return singleValue === itemValue;\n      }\n      return multipleValues.includes(itemValue);\n    },\n    [multipleValues, singleValue, type],\n  );\n\n  const toggle = useCallback(\n    (itemValue: string) => {\n      if (type === \"single\") {\n        const next = singleValue === itemValue ? undefined : itemValue;\n        if (!isSingleControlled) {\n          setSingleUncontrolled(next);\n        }\n        onValueChange?.(next);\n        return;\n      }\n      const exists = multipleValues.includes(itemValue);\n      const next = exists\n        ? multipleValues.filter((entry) => entry !== itemValue)\n        : [...multipleValues, itemValue];\n      if (!isMultipleControlled) {\n        setMultipleUncontrolled(next);\n      }\n      onValuesChange?.(next);\n    },\n    [\n      isMultipleControlled,\n      isSingleControlled,\n      multipleValues,\n      onValueChange,\n      onValuesChange,\n      singleValue,\n      type,\n    ],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      type,\n      transition: transition ?? \"default\",\n      appearance: appearance ?? \"default\",\n      size: size ?? \"md\",\n      isOpen,\n      toggle,\n    }),\n    [appearance, isOpen, size, toggle, transition, type],\n  );\n\n  return (\n    <AccordionContext.Provider value={ctx}>\n      <div data-slot=\"accordion\" className={cn(accordionVariants({ appearance, size }), className)}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nAccordion.displayName = \"Accordion\";\n\nexport function AccordionItem({ className, value, children, ref, ...rest }: AccordionItemProps) {\n  const { appearance } = useAccordionContext(\"AccordionItem\");\n  return (\n    <AccordionItemValueContext.Provider value={value}>\n      <div\n        ref={ref}\n        data-slot=\"accordion-item\"\n        data-value={value}\n        className={cn(accordionItemVariants({ appearance }), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    </AccordionItemValueContext.Provider>\n  );\n}\n\nAccordionItem.displayName = \"AccordionItem\";\n\nexport function AccordionTrigger({ className, children, ref, ...rest }: AccordionTriggerProps) {\n  const itemValue = useAccordionItemValue(\"AccordionTrigger\");\n  const { isOpen, toggle, size } = useAccordionContext(\"AccordionTrigger\");\n  const open = isOpen(itemValue);\n  const panelId = `${itemValue}-panel`;\n  const baseId = useId();\n\n  return (\n    <h3 className=\"m-0\">\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"accordion-trigger\"\n        id={`${baseId}-trigger-${itemValue}`}\n        aria-expanded={open}\n        aria-controls={panelId}\n        className={cn(accordionTriggerVariants({ size }), className)}\n        onClick={() => toggle(itemValue)}\n        {...rest}\n      >\n        {children}\n      </button>\n    </h3>\n  );\n}\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n\nexport function AccordionContent({ className, children, ref }: AccordionContentProps) {\n  const itemValue = useAccordionItemValue(\"AccordionContent\");\n  const { isOpen, transition: transitionVariant, size } = useAccordionContext(\"AccordionContent\");\n  const open = isOpen(itemValue);\n  const panelId = `${itemValue}-panel`;\n  const transitionConfig = accordionContentTransitionPresets[transitionVariant];\n  const motionless = transitionVariant === \"none\";\n\n  return (\n    open ? (\n      <motion.div\n        key={itemValue}\n        ref={ref}\n        id={panelId}\n        role=\"region\"\n        data-slot=\"accordion-content\"\n        className={cn(accordionContentVariants({ size }), className)}\n        initial={motionless ? false : { opacity: 0 }}\n        animate={motionless ? undefined : { opacity: 1 }}\n        exit={motionless ? undefined : { opacity: 0 }}\n        transition={transitionConfig}\n      >\n        {children}\n      </motion.div>\n    ) : null\n  );\n}\n\nAccordionContent.displayName = \"AccordionContent\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import type { Transition } from \"framer-motion\";\n\n/** Easing and duration presets for accordion panel open/close (opacity only). */\nexport type AccordionTransition = \"none\" | \"default\" | \"smooth\" | \"slow\";\n\nexport type AccordionTransitionPresets = Record<AccordionTransition, Transition>;\n\nexport const accordionContentTransitionPresets: AccordionTransitionPresets = {\n  none: { duration: 0 },\n  default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n  smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n  slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const accordionVariants = cva(\"w-full\", {\n  variants: {\n    appearance: {\n      default: \"divide-y divide-white/10 rounded-xl border border-white/10\",\n      outline: \"divide-y divide-white/10 rounded-xl border border-white/15\",\n      ghost: \"divide-y divide-white/5\",\n      card: \"space-y-2\",\n      separated: \"space-y-3\",\n      sky: \"divide-y divide-sky-600 rounded-xl border border-sky-600\",\n      rose: \"divide-y divide-rose-600 rounded-xl border border-rose-600\",\n      purple: \"divide-y divide-purple-600 rounded-xl border border-purple-600\",\n      pink: \"divide-y divide-pink-600 rounded-xl border border-pink-600\",\n      orange: \"divide-y divide-orange-600 rounded-xl border border-orange-600\",\n      yellow: \"divide-y divide-yellow-600 rounded-xl border border-yellow-600\",\n      teal: \"divide-y divide-teal-600 rounded-xl border border-teal-600\",\n      indigo: \"divide-y divide-indigo-600 rounded-xl border border-indigo-600\",\n      emerald: \"divide-y divide-emerald-600 rounded-xl border border-emerald-600\",\n      \"gradient-blue\": \"divide-y divide-gradient-to-r from-blue-600 to-purple-600 rounded-xl border border-gradient-to-r from-blue-600 to-purple-600\",\n      \"gradient-green\": \"divide-y divide-gradient-to-r from-green-600 to-lime-600 rounded-xl border border-gradient-to-r from-green-600 to-lime-600\",\n      \"gradient-red\": \"divide-y divide-gradient-to-r from-red-600 to-pink-600 rounded-xl border border-gradient-to-r from-red-600 to-pink-600\",\n      \"gradient-yellow\": \"divide-y divide-gradient-to-r from-yellow-600 to-orange-600 rounded-xl border border-gradient-to-r from-yellow-600 to-orange-600\",\n      \"gradient-purple\": \"divide-y divide-gradient-to-r from-purple-600 to-pink-600 rounded-xl border border-gradient-to-r from-purple-600 to-pink-600\",\n      \"gradient-teal\": \"divide-y divide-gradient-to-r from-teal-600 to-cyan-600 rounded-xl border border-gradient-to-r from-teal-600 to-cyan-600\",\n      \"gradient-indigo\": \"divide-y divide-gradient-to-r from-indigo-600 to-purple-600 rounded-xl border border-gradient-to-r from-indigo-600 to-purple-600\",\n      \"gradient-pink\": \"divide-y divide-gradient-to-r from-pink-600 to-rose-600 rounded-xl border border-gradient-to-r from-pink-600 to-rose-600\",\n      \"gradient-orange\": \"divide-y divide-gradient-to-r from-orange-600 to-red-600 rounded-xl border border-gradient-to-r from-orange-600 to-red-600\",\n    },\n    size: {\n      sm: \"px-3 py-2 text-sm\",\n      md: \"px-4 py-3 text-sm\",\n      lg: \"px-5 py-4 text-base\",\n    },\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const accordionItemVariants = cva(\"\", {\n  variants: {\n    appearance: {\n      default: \"\",\n      outline: \"\",\n      ghost: \"\",\n      card: \"rounded-xl border border-white/10 bg-white/[0.03] p-2\",\n      separated: \"rounded-xl border border-white/10 bg-slate-950/40 p-2\",\n      sky: \"rounded-xl border border-sky-600 bg-sky-600/[0.03] p-2\",\n      rose: \"rounded-xl border border-rose-600 bg-rose-600/[0.03] p-2\",\n      purple: \"rounded-xl border border-purple-600 bg-purple-600/[0.03] p-2\",\n      pink: \"rounded-xl border border-pink-600 bg-pink-600/[0.03] p-2\",\n      orange: \"rounded-xl border border-orange-600 bg-orange-600/[0.03] p-2\",\n      yellow: \"rounded-xl border border-yellow-600 bg-yellow-600/[0.03] p-2\",\n      teal: \"rounded-xl border border-teal-600 bg-teal-600/[0.03] p-2\",\n      indigo: \"rounded-xl border border-indigo-600 bg-indigo-600/[0.03] p-2\",\n      emerald: \"rounded-xl border border-emerald-600 bg-emerald-600/[0.03] p-2\",\n      \"gradient-blue\": \"rounded-xl bg-linear-to-r from-blue-600 to-purple-600/[0.03] p-2 text-white\",\n      \"gradient-green\": \"rounded-xl bg-linear-to-r from-green-600 to-lime-600/[0.03] p-2 text-white\",\n      \"gradient-red\": \"rounded-xl bg-linear-to-r from-red-600 to-pink-600/[0.03] p-2 text-white\",\n      \"gradient-yellow\": \"rounded-xl bg-linear-to-r from-yellow-600 to-orange-600/[0.03] p-2 text-white\",\n      \"gradient-purple\": \"rounded-xl bg-linear-to-r from-purple-600 to-pink-600/[0.03] p-2 text-white\",\n      \"gradient-teal\": \"rounded-xl bg-linear-to-r from-teal-600 to-cyan-600/[0.03] p-2 text-white\",\n      \"gradient-indigo\": \"rounded-xl bg-linear-to-r from-indigo-600 to-purple-600/[0.03] p-2 text-white\",\n      \"gradient-pink\": \"rounded-xl bg-linear-to-r from-pink-600 to-rose-600/[0.03] p-2 text-white\",\n      \"gradient-orange\": \"rounded-xl bg-linear-to-r from-orange-600 to-red-600/[0.03] p-2 text-white\",\n    },\n  },\n  defaultVariants: { appearance: \"default\" },\n});\n\nexport const accordionTriggerVariants = cva(\n  \"flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-slate-50 outline-none transition hover:text-white focus-visible:ring-2 focus-visible:ring-white/30\",\n  {\n    variants: {\n      size: {\n        sm: \"py-2 text-sm\",\n        md: \"py-3 text-sm\",\n        lg: \"py-4 text-base\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport const accordionContentVariants = cva(\"pb-3 text-sm\", {\n  variants: {\n    size: {\n      sm: \"pb-2 text-xs\",\n      md: \"pb-3 text-sm\",\n      lg: \"pb-4 text-base\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n"],"mappings":"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","names":["next"]}

package/dist/ui/accordion.d.cts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
+import { Transition } from 'framer-motion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Easing and duration presets for accordion panel open/close (opacity only). */
+type AccordionTransition = "none" | "default" | "smooth" | "slow";
+type AccordionTransitionPresets = Record<AccordionTransition, Transition>;
+declare const accordionContentTransitionPresets: AccordionTransitionPresets;
+
+declare const accordionVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionItemVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+type AccordionType = "single" | "multiple";
+type AccordionProps = AccordionVariantProps & {
+    transition?: AccordionTransition;
+    type?: AccordionType;
+    /** Controlled value for `single` mode. */
+    value?: string;
+    /** Controlled values for `multiple` mode. */
+    values?: string[];
+    defaultValue?: string;
+    defaultValues?: string[];
+    onValueChange?: (value: string | undefined) => void;
+    onValuesChange?: (values: string[]) => void;
+    className?: string;
+    children?: ReactNode;
+};
+type AccordionItemProps = HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    ref?: Ref<HTMLDivElement>;
+};
+type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type AccordionContentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+
+declare function Accordion({ type, value, values, defaultValue, defaultValues, onValueChange, onValuesChange, transition, appearance, size, className, children, }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+declare function AccordionItem({ className, value, children, ref, ...rest }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ref, ...rest }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ref }: AccordionContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionTransition, AccordionTrigger, type AccordionTriggerProps, type AccordionType, accordionContentTransitionPresets, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants };

package/dist/ui/accordion.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
+import { Transition } from 'framer-motion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Easing and duration presets for accordion panel open/close (opacity only). */
+type AccordionTransition = "none" | "default" | "smooth" | "slow";
+type AccordionTransitionPresets = Record<AccordionTransition, Transition>;
+declare const accordionContentTransitionPresets: AccordionTransitionPresets;
+
+declare const accordionVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionItemVariants: (props?: ({
+    appearance?: "default" | "outline" | "ghost" | "card" | "separated" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+type AccordionType = "single" | "multiple";
+type AccordionProps = AccordionVariantProps & {
+    transition?: AccordionTransition;
+    type?: AccordionType;
+    /** Controlled value for `single` mode. */
+    value?: string;
+    /** Controlled values for `multiple` mode. */
+    values?: string[];
+    defaultValue?: string;
+    defaultValues?: string[];
+    onValueChange?: (value: string | undefined) => void;
+    onValuesChange?: (values: string[]) => void;
+    className?: string;
+    children?: ReactNode;
+};
+type AccordionItemProps = HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    ref?: Ref<HTMLDivElement>;
+};
+type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+type AccordionContentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+};
+
+declare function Accordion({ type, value, values, defaultValue, defaultValues, onValueChange, onValuesChange, transition, appearance, size, className, children, }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+declare function AccordionItem({ className, value, children, ref, ...rest }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ref, ...rest }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ref }: AccordionContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionTransition, AccordionTrigger, type AccordionTriggerProps, type AccordionType, accordionContentTransitionPresets, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants };