@zentauri-ui/zentauri-components 0.0.7 → 0.0.9

package/README.md

@@ -0,0 +1,134 @@
+# @zentauri-ui/zentauri-components
+
+A React UI kit for building product interfaces with Tailwind CSS. Components are implemented in TypeScript, ship with declaration files, and are bundled as ESM and CommonJS for broad bundler compatibility.
+
+## Overview
+
+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).
+
+## Package exports
+
+| Subpath | Description |
+| --- | --- |
+| `@zentauri-ui/zentauri-components/ui` | Components, hooks, and types (ESM `.js`, CJS `.cjs`, `.d.ts`) |
+
+## Requirements
+
+- **React** and **React DOM** `>= 18` (peer dependencies)
+- A Tailwind pipeline that can **scan** this package (see Step 2 below)
+
+## 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
+
+## Installation
+
+**Getting started** — Add the package, point Tailwind at the library sources, then import components from the UI entry.
+
+### Step 1 — Install the package
+
+Choose your package manager.
+
+```bash
+npm install @zentauri-ui/zentauri-components
+```
+
+```bash
+pnpm install @zentauri-ui/zentauri-components
+```
+
+```bash
+yarn add @zentauri-ui/zentauri-components
+```
+
+### Step 2 — Include library paths in globals.css
+
+Add an `@source` entry so Tailwind scans class names inside `@zentauri-ui/zentauri-components`. The path is relative to this CSS file—adjust `../` if your file lives elsewhere.
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@zentauri-ui/zentauri-components";
+```
+
+### Step 3 — Import and use components
+
+Import from the UI barrel, then compose primitives in your JSX.
+
+#### Imports
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@zentauri-ui/zentauri-components/ui";
+```
+
+#### Usage
+
+```tsx
+<div className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-slate-950/40 backdrop-blur-xl">
+  <Accordion type="single" defaultValue="item-1" appearance="separated" size="md">
+    <AccordionItem value="item-1">
+      <AccordionTrigger>Shipping</AccordionTrigger>
+      <AccordionContent>
+        <p className="text-sm text-slate-300">
+          Standard delivery in 3-5 business days. Express options at
+          checkout.
+        </p>
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-2">
+      <AccordionTrigger>Returns</AccordionTrigger>
+      <AccordionContent>
+        <p className="text-sm text-slate-300">
+          Free returns within 30 days of delivery in original condition.
+        </p>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</div>
+```
+
+## Checkout the components:
+https://zentauri-ui.vercel.app/
+
+## Development
+
+From this package directory in the monorepo:
+
+- `pnpm build` (or `npm run build`) — production bundle via `tsup`
+- `pnpm dev` — `tsup` watch mode
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests
+
+## NOTE: 
+This package is in initial phase of development and you might see some minor or major breaking changes in the future. If you want to contribute to this project, email me at @shubhmtiwri00@gmail.com or ping me on linkeded https://www.linkedin.com/in/shubham-tiwari-b7544b193/
+
+## License
+
+MIT

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