@codefast/ui 0.0.37 → 0.0.39

package/package.json

@@ -1,325 +1,325 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
   ],
   "exports": {
     "./radio-cards": {
-      "types": "./src/radio-cards.tsx",
-      "import": "./dist/radio-cards.mjs",
-      "require": "./dist/radio-cards.js"
+      "types": "./src/react/radio-cards.tsx",
+      "import": "./dist/react/radio-cards.mjs",
+      "require": "./dist/react/radio-cards.js"
     },
     "./spinner": {
-      "types": "./src/spinner.tsx",
-      "import": "./dist/spinner.mjs",
-      "require": "./dist/spinner.js"
+      "types": "./src/react/spinner.tsx",
+      "import": "./dist/react/spinner.mjs",
+      "require": "./dist/react/spinner.js"
     },
     "./radio": {
-      "types": "./src/radio.tsx",
-      "import": "./dist/radio.mjs",
-      "require": "./dist/radio.js"
+      "types": "./src/react/radio.tsx",
+      "import": "./dist/react/radio.mjs",
+      "require": "./dist/react/radio.js"
     },
     "./checkbox-cards": {
-      "types": "./src/checkbox-cards.tsx",
-      "import": "./dist/checkbox-cards.mjs",
-      "require": "./dist/checkbox-cards.js"
+      "types": "./src/react/checkbox-cards.tsx",
+      "import": "./dist/react/checkbox-cards.mjs",
+      "require": "./dist/react/checkbox-cards.js"
     },
     "./checkbox-group": {
-      "types": "./src/checkbox-group.tsx",
-      "import": "./dist/checkbox-group.mjs",
-      "require": "./dist/checkbox-group.js"
+      "types": "./src/react/checkbox-group.tsx",
+      "import": "./dist/react/checkbox-group.mjs",
+      "require": "./dist/react/checkbox-group.js"
     },
     "./container": {
-      "types": "./src/container.tsx",
-      "import": "./dist/container.mjs",
-      "require": "./dist/container.js"
+      "types": "./src/react/container.tsx",
+      "import": "./dist/react/container.mjs",
+      "require": "./dist/react/container.js"
     },
     "./section": {
-      "types": "./src/section.tsx",
-      "import": "./dist/section.mjs",
-      "require": "./dist/section.js"
+      "types": "./src/react/section.tsx",
+      "import": "./dist/react/section.mjs",
+      "require": "./dist/react/section.js"
     },
     "./box": {
-      "types": "./src/box.tsx",
-      "import": "./dist/box.mjs",
-      "require": "./dist/box.js"
+      "types": "./src/react/box.tsx",
+      "import": "./dist/react/box.mjs",
+      "require": "./dist/react/box.js"
     },
     "./strong": {
-      "types": "./src/strong.tsx",
-      "import": "./dist/strong.mjs",
-      "require": "./dist/strong.js"
+      "types": "./src/react/strong.tsx",
+      "import": "./dist/react/strong.mjs",
+      "require": "./dist/react/strong.js"
     },
     "./quote": {
-      "types": "./src/quote.tsx",
-      "import": "./dist/quote.mjs",
-      "require": "./dist/quote.js"
+      "types": "./src/react/quote.tsx",
+      "import": "./dist/react/quote.mjs",
+      "require": "./dist/react/quote.js"
     },
     "./blockquote": {
-      "types": "./src/blockquote.tsx",
-      "import": "./dist/blockquote.mjs",
-      "require": "./dist/blockquote.js"
+      "types": "./src/react/blockquote.tsx",
+      "import": "./dist/react/blockquote.mjs",
+      "require": "./dist/react/blockquote.js"
     },
     "./kbd": {
-      "types": "./src/kbd.tsx",
-      "import": "./dist/kbd.mjs",
-      "require": "./dist/kbd.js"
+      "types": "./src/react/kbd.tsx",
+      "import": "./dist/react/kbd.mjs",
+      "require": "./dist/react/kbd.js"
     },
     "./em": {
-      "types": "./src/em.tsx",
-      "import": "./dist/em.mjs",
-      "require": "./dist/em.js"
+      "types": "./src/react/em.tsx",
+      "import": "./dist/react/em.mjs",
+      "require": "./dist/react/em.js"
     },
     "./code": {
-      "types": "./src/code.tsx",
-      "import": "./dist/code.mjs",
-      "require": "./dist/code.js"
+      "types": "./src/react/code.tsx",
+      "import": "./dist/react/code.mjs",
+      "require": "./dist/react/code.js"
     },
     "./pre": {
-      "types": "./src/pre.tsx",
-      "import": "./dist/pre.mjs",
-      "require": "./dist/pre.js"
+      "types": "./src/react/pre.tsx",
+      "import": "./dist/react/pre.mjs",
+      "require": "./dist/react/pre.js"
     },
     "./heading": {
-      "types": "./src/heading.tsx",
-      "import": "./dist/heading.mjs",
-      "require": "./dist/heading.js"
+      "types": "./src/react/heading.tsx",
+      "import": "./dist/react/heading.mjs",
+      "require": "./dist/react/heading.js"
     },
     "./text": {
-      "types": "./src/text.tsx",
-      "import": "./dist/text.mjs",
-      "require": "./dist/text.js"
+      "types": "./src/react/text.tsx",
+      "import": "./dist/react/text.mjs",
+      "require": "./dist/react/text.js"
     },
     "./data-table": {
-      "types": "./src/data-table.tsx",
-      "import": "./dist/data-table.mjs",
-      "require": "./dist/data-table.js"
+      "types": "./src/react/data-table.tsx",
+      "import": "./dist/react/data-table.mjs",
+      "require": "./dist/react/data-table.js"
     },
     "./form": {
-      "types": "./src/form.tsx",
-      "import": "./dist/form.mjs",
-      "require": "./dist/form.js"
+      "types": "./src/react/form.tsx",
+      "import": "./dist/react/form.mjs",
+      "require": "./dist/react/form.js"
     },
     "./tooltip": {
-      "types": "./src/tooltip.tsx",
-      "import": "./dist/tooltip.mjs",
-      "require": "./dist/tooltip.js"
+      "types": "./src/react/tooltip.tsx",
+      "import": "./dist/react/tooltip.mjs",
+      "require": "./dist/react/tooltip.js"
     },
     "./toggle-group": {
-      "types": "./src/toggle-group.tsx",
-      "import": "./dist/toggle-group.mjs",
-      "require": "./dist/toggle-group.js"
+      "types": "./src/react/toggle-group.tsx",
+      "import": "./dist/react/toggle-group.mjs",
+      "require": "./dist/react/toggle-group.js"
     },
     "./toggle": {
-      "types": "./src/toggle.tsx",
-      "import": "./dist/toggle.mjs",
-      "require": "./dist/toggle.js"
+      "types": "./src/react/toggle.tsx",
+      "import": "./dist/react/toggle.mjs",
+      "require": "./dist/react/toggle.js"
     },
     "./textarea": {
-      "types": "./src/textarea.tsx",
-      "import": "./dist/textarea.mjs",
-      "require": "./dist/textarea.js"
+      "types": "./src/react/textarea.tsx",
+      "import": "./dist/react/textarea.mjs",
+      "require": "./dist/react/textarea.js"
     },
     "./tabs": {
-      "types": "./src/tabs.tsx",
-      "import": "./dist/tabs.mjs",
-      "require": "./dist/tabs.js"
+      "types": "./src/react/tabs.tsx",
+      "import": "./dist/react/tabs.mjs",
+      "require": "./dist/react/tabs.js"
     },
     "./table": {
-      "types": "./src/table.tsx",
-      "import": "./dist/table.mjs",
-      "require": "./dist/table.js"
+      "types": "./src/react/table.tsx",
+      "import": "./dist/react/table.mjs",
+      "require": "./dist/react/table.js"
     },
     "./switch": {
-      "types": "./src/switch.tsx",
-      "import": "./dist/switch.mjs",
-      "require": "./dist/switch.js"
+      "types": "./src/react/switch.tsx",
+      "import": "./dist/react/switch.mjs",
+      "require": "./dist/react/switch.js"
     },
     "./sonner": {
-      "types": "./src/sonner.tsx",
-      "import": "./dist/sonner.mjs",
-      "require": "./dist/sonner.js"
+      "types": "./src/react/sonner.tsx",
+      "import": "./dist/react/sonner.mjs",
+      "require": "./dist/react/sonner.js"
     },
     "./slider": {
-      "types": "./src/slider.tsx",
-      "import": "./dist/slider.mjs",
-      "require": "./dist/slider.js"
+      "types": "./src/react/slider.tsx",
+      "import": "./dist/react/slider.mjs",
+      "require": "./dist/react/slider.js"
     },
     "./skeleton": {
-      "types": "./src/skeleton.tsx",
-      "import": "./dist/skeleton.mjs",
-      "require": "./dist/skeleton.js"
+      "types": "./src/react/skeleton.tsx",
+      "import": "./dist/react/skeleton.mjs",
+      "require": "./dist/react/skeleton.js"
     },
     "./sheet": {
-      "types": "./src/sheet.tsx",
-      "import": "./dist/sheet.mjs",
-      "require": "./dist/sheet.js"
+      "types": "./src/react/sheet.tsx",
+      "import": "./dist/react/sheet.mjs",
+      "require": "./dist/react/sheet.js"
     },
     "./separator": {
-      "types": "./src/separator.tsx",
-      "import": "./dist/separator.mjs",
-      "require": "./dist/separator.js"
+      "types": "./src/react/separator.tsx",
+      "import": "./dist/react/separator.mjs",
+      "require": "./dist/react/separator.js"
     },
     "./select": {
-      "types": "./src/select.tsx",
-      "import": "./dist/select.mjs",
-      "require": "./dist/select.js"
+      "types": "./src/react/select.tsx",
+      "import": "./dist/react/select.mjs",
+      "require": "./dist/react/select.js"
     },
     "./scroll-area": {
-      "types": "./src/scroll-area.tsx",
-      "import": "./dist/scroll-area.mjs",
-      "require": "./dist/scroll-area.js"
+      "types": "./src/react/scroll-area.tsx",
+      "import": "./dist/react/scroll-area.mjs",
+      "require": "./dist/react/scroll-area.js"
     },
     "./resizable": {
-      "types": "./src/resizable.tsx",
-      "import": "./dist/resizable.mjs",
-      "require": "./dist/resizable.js"
+      "types": "./src/react/resizable.tsx",
+      "import": "./dist/react/resizable.mjs",
+      "require": "./dist/react/resizable.js"
     },
     "./radio-group": {
-      "types": "./src/radio-group.tsx",
-      "import": "./dist/radio-group.mjs",
-      "require": "./dist/radio-group.js"
+      "types": "./src/react/radio-group.tsx",
+      "import": "./dist/react/radio-group.mjs",
+      "require": "./dist/react/radio-group.js"
     },
     "./progress": {
-      "types": "./src/progress.tsx",
-      "import": "./dist/progress.mjs",
-      "require": "./dist/progress.js"
+      "types": "./src/react/progress.tsx",
+      "import": "./dist/react/progress.mjs",
+      "require": "./dist/react/progress.js"
     },
     "./popover": {
-      "types": "./src/popover.tsx",
-      "import": "./dist/popover.mjs",
-      "require": "./dist/popover.js"
+      "types": "./src/react/popover.tsx",
+      "import": "./dist/react/popover.mjs",
+      "require": "./dist/react/popover.js"
     },
     "./pagination": {
-      "types": "./src/pagination.tsx",
-      "import": "./dist/pagination.mjs",
-      "require": "./dist/pagination.js"
+      "types": "./src/react/pagination.tsx",
+      "import": "./dist/react/pagination.mjs",
+      "require": "./dist/react/pagination.js"
     },
     "./navigation-menu": {
-      "types": "./src/navigation-menu.tsx",
-      "import": "./dist/navigation-menu.mjs",
-      "require": "./dist/navigation-menu.js"
+      "types": "./src/react/navigation-menu.tsx",
+      "import": "./dist/react/navigation-menu.mjs",
+      "require": "./dist/react/navigation-menu.js"
     },
     "./menubar": {
-      "types": "./src/menubar.tsx",
-      "import": "./dist/menubar.mjs",
-      "require": "./dist/menubar.js"
+      "types": "./src/react/menubar.tsx",
+      "import": "./dist/react/menubar.mjs",
+      "require": "./dist/react/menubar.js"
     },
     "./label": {
-      "types": "./src/label.tsx",
-      "import": "./dist/label.mjs",
-      "require": "./dist/label.js"
+      "types": "./src/react/label.tsx",
+      "import": "./dist/react/label.mjs",
+      "require": "./dist/react/label.js"
     },
     "./input-otp": {
-      "types": "./src/input-otp.tsx",
-      "import": "./dist/input-otp.mjs",
-      "require": "./dist/input-otp.js"
+      "types": "./src/react/input-otp.tsx",
+      "import": "./dist/react/input-otp.mjs",
+      "require": "./dist/react/input-otp.js"
     },
     "./input": {
-      "types": "./src/input.tsx",
-      "import": "./dist/input.mjs",
-      "require": "./dist/input.js"
+      "types": "./src/react/input.tsx",
+      "import": "./dist/react/input.mjs",
+      "require": "./dist/react/input.js"
     },
     "./hover-card": {
-      "types": "./src/hover-card.tsx",
-      "import": "./dist/hover-card.mjs",
-      "require": "./dist/hover-card.js"
+      "types": "./src/react/hover-card.tsx",
+      "import": "./dist/react/hover-card.mjs",
+      "require": "./dist/react/hover-card.js"
     },
     "./drawer": {
-      "types": "./src/drawer.tsx",
-      "import": "./dist/drawer.mjs",
-      "require": "./dist/drawer.js"
+      "types": "./src/react/drawer.tsx",
+      "import": "./dist/react/drawer.mjs",
+      "require": "./dist/react/drawer.js"
     },
     "./context-menu": {
-      "types": "./src/context-menu.tsx",
-      "import": "./dist/context-menu.mjs",
-      "require": "./dist/context-menu.js"
+      "types": "./src/react/context-menu.tsx",
+      "import": "./dist/react/context-menu.mjs",
+      "require": "./dist/react/context-menu.js"
     },
     "./dialog": {
-      "types": "./src/dialog.tsx",
-      "import": "./dist/dialog.mjs",
-      "require": "./dist/dialog.js"
+      "types": "./src/react/dialog.tsx",
+      "import": "./dist/react/dialog.mjs",
+      "require": "./dist/react/dialog.js"
     },
     "./command": {
-      "types": "./src/command.tsx",
-      "import": "./dist/command.mjs",
-      "require": "./dist/command.js"
+      "types": "./src/react/command.tsx",
+      "import": "./dist/react/command.mjs",
+      "require": "./dist/react/command.js"
     },
     "./collapsible": {
-      "types": "./src/collapsible.tsx",
-      "import": "./dist/collapsible.mjs",
-      "require": "./dist/collapsible.js"
+      "types": "./src/react/collapsible.tsx",
+      "import": "./dist/react/collapsible.mjs",
+      "require": "./dist/react/collapsible.js"
     },
     "./checkbox": {
-      "types": "./src/checkbox.tsx",
-      "import": "./dist/checkbox.mjs",
-      "require": "./dist/checkbox.js"
+      "types": "./src/react/checkbox.tsx",
+      "import": "./dist/react/checkbox.mjs",
+      "require": "./dist/react/checkbox.js"
     },
     "./carousel": {
-      "types": "./src/carousel.tsx",
-      "import": "./dist/carousel.mjs",
-      "require": "./dist/carousel.js"
+      "types": "./src/react/carousel.tsx",
+      "import": "./dist/react/carousel.mjs",
+      "require": "./dist/react/carousel.js"
     },
     "./card": {
-      "types": "./src/card.tsx",
-      "import": "./dist/card.mjs",
-      "require": "./dist/card.js"
+      "types": "./src/react/card.tsx",
+      "import": "./dist/react/card.mjs",
+      "require": "./dist/react/card.js"
     },
     "./calendar": {
-      "types": "./src/calendar.tsx",
-      "import": "./dist/calendar.mjs",
-      "require": "./dist/calendar.js"
+      "types": "./src/react/calendar.tsx",
+      "import": "./dist/react/calendar.mjs",
+      "require": "./dist/react/calendar.js"
     },
     "./accordion": {
-      "types": "./src/accordion.tsx",
-      "import": "./dist/accordion.mjs",
-      "require": "./dist/accordion.js"
+      "types": "./src/react/accordion.tsx",
+      "import": "./dist/react/accordion.mjs",
+      "require": "./dist/react/accordion.js"
     },
     "./avatar": {
-      "types": "./src/avatar.tsx",
-      "import": "./dist/avatar.mjs",
-      "require": "./dist/avatar.js"
+      "types": "./src/react/avatar.tsx",
+      "import": "./dist/react/avatar.mjs",
+      "require": "./dist/react/avatar.js"
     },
     "./aspect-ratio": {
-      "types": "./src/aspect-ratio.tsx",
-      "import": "./dist/aspect-ratio.mjs",
-      "require": "./dist/aspect-ratio.js"
+      "types": "./src/react/aspect-ratio.tsx",
+      "import": "./dist/react/aspect-ratio.mjs",
+      "require": "./dist/react/aspect-ratio.js"
     },
     "./alert-dialog": {
-      "types": "./src/alert-dialog.tsx",
-      "import": "./dist/alert-dialog.mjs",
-      "require": "./dist/alert-dialog.js"
+      "types": "./src/react/alert-dialog.tsx",
+      "import": "./dist/react/alert-dialog.mjs",
+      "require": "./dist/react/alert-dialog.js"
     },
     "./dropdown-menu": {
-      "types": "./src/dropdown-menu.tsx",
-      "import": "./dist/dropdown-menu.mjs",
-      "require": "./dist/dropdown-menu.js"
+      "types": "./src/react/dropdown-menu.tsx",
+      "import": "./dist/react/dropdown-menu.mjs",
+      "require": "./dist/react/dropdown-menu.js"
     },
     "./breadcrumb": {
-      "types": "./src/breadcrumb.tsx",
-      "import": "./dist/breadcrumb.mjs",
-      "require": "./dist/breadcrumb.js"
+      "types": "./src/react/breadcrumb.tsx",
+      "import": "./dist/react/breadcrumb.mjs",
+      "require": "./dist/react/breadcrumb.js"
     },
     "./badge": {
-      "types": "./src/badge.tsx",
-      "import": "./dist/badge.mjs",
-      "require": "./dist/badge.js"
+      "types": "./src/react/badge.tsx",
+      "import": "./dist/react/badge.mjs",
+      "require": "./dist/react/badge.js"
     },
     "./alert": {
-      "types": "./src/alert.tsx",
-      "import": "./dist/alert.mjs",
-      "require": "./dist/alert.js"
+      "types": "./src/react/alert.tsx",
+      "import": "./dist/react/alert.mjs",
+      "require": "./dist/react/alert.js"
     },
     "./button": {
-      "types": "./src/button.tsx",
-      "import": "./dist/button.mjs",
-      "require": "./dist/button.js"
+      "types": "./src/react/button.tsx",
+      "import": "./dist/react/button.mjs",
+      "require": "./dist/react/button.js"
     },
     "./utils": {
-      "types": "./src/utils.ts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.js"
+      "types": "./src/lib/utils.ts",
+      "import": "./dist/lib/utils.mjs",
+      "require": "./dist/lib/utils.js"
     },
     "./tailwind.config": {
       "types": "./tailwind.config.ts",
@@ -331,9 +331,7 @@
   "files": [
     "dist",
     "src",
-    "animate.plugin.ts",
-    "base.plugin.ts",
-    "perspective.plugin.ts",
+    "plugin",
     "tailwind.config.ts"
   ],
   "dependencies": {
@@ -387,15 +385,15 @@
   "devDependencies": {
     "@types/eslint": "^8.56.10",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
+    "@types/react": "^18.3.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "postcss": "^8.4.38",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "tailwindcss": "^3.4.3",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "@codefast/eslint-config": "0.0.18",
+    "@codefast/eslint-config": "0.0.20",
     "@codefast/typescript-config": "0.0.2"
   },
   "peerDependencies": {

package/src/react/accordion.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Accordion
+ * -------------------------------------------------------------------------- */
+
+type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+const Accordion = AccordionPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionItem
+ * -------------------------------------------------------------------------- */
+
+type AccordionItemElement = React.ElementRef<typeof AccordionPrimitive.Item>;
+type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+
+const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+
+AccordionItem.displayName = AccordionPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionTrigger
+ * -------------------------------------------------------------------------- */
+
+type AccordionTriggerElement = React.ElementRef<typeof AccordionPrimitive.Trigger>;
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
+
+const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
+  ({ children, className, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={cn("group flex flex-1 items-center justify-between py-4 text-sm font-medium", className)}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition group-data-[state=open]:rotate-180" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  ),
+);
+
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionContent
+ * -------------------------------------------------------------------------- */
+
+type AccordionContentElement = React.ElementRef<typeof AccordionPrimitive.Content>;
+type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+
+const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className="data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  ),
+);
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+};