@codefast/ui 0.0.3 → 0.0.4

package/package.json

@@ -1,25 +1,230 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
   ],
   "exports": {
-    "./button": {
-      "types": "./src/button.tsx",
-      "import": "./dist/button.mjs",
-      "require": "./dist/button.js"
+    "./form": {
+      "types": "./src/form.tsx",
+      "import": "./dist/form.mjs",
+      "require": "./dist/form.js"
+    },
+    "./tooltip": {
+      "types": "./src/tooltip.tsx",
+      "import": "./dist/tooltip.mjs",
+      "require": "./dist/tooltip.js"
+    },
+    "./toggle-group": {
+      "types": "./src/toggle-group.tsx",
+      "import": "./dist/toggle-group.mjs",
+      "require": "./dist/toggle-group.js"
+    },
+    "./toggle": {
+      "types": "./src/toggle.tsx",
+      "import": "./dist/toggle.mjs",
+      "require": "./dist/toggle.js"
+    },
+    "./textarea": {
+      "types": "./src/textarea.tsx",
+      "import": "./dist/textarea.mjs",
+      "require": "./dist/textarea.js"
+    },
+    "./tabs": {
+      "types": "./src/tabs.tsx",
+      "import": "./dist/tabs.mjs",
+      "require": "./dist/tabs.js"
+    },
+    "./table": {
+      "types": "./src/table.tsx",
+      "import": "./dist/table.mjs",
+      "require": "./dist/table.js"
+    },
+    "./switch": {
+      "types": "./src/switch.tsx",
+      "import": "./dist/switch.mjs",
+      "require": "./dist/switch.js"
+    },
+    "./sonner": {
+      "types": "./src/sonner.tsx",
+      "import": "./dist/sonner.mjs",
+      "require": "./dist/sonner.js"
+    },
+    "./slider": {
+      "types": "./src/slider.tsx",
+      "import": "./dist/slider.mjs",
+      "require": "./dist/slider.js"
+    },
+    "./skeleton": {
+      "types": "./src/skeleton.tsx",
+      "import": "./dist/skeleton.mjs",
+      "require": "./dist/skeleton.js"
+    },
+    "./sheet": {
+      "types": "./src/sheet.tsx",
+      "import": "./dist/sheet.mjs",
+      "require": "./dist/sheet.js"
+    },
+    "./separator": {
+      "types": "./src/separator.tsx",
+      "import": "./dist/separator.mjs",
+      "require": "./dist/separator.js"
+    },
+    "./select": {
+      "types": "./src/select.tsx",
+      "import": "./dist/select.mjs",
+      "require": "./dist/select.js"
+    },
+    "./scroll-area": {
+      "types": "./src/scroll-area.tsx",
+      "import": "./dist/scroll-area.mjs",
+      "require": "./dist/scroll-area.js"
+    },
+    "./resizable": {
+      "types": "./src/resizable.tsx",
+      "import": "./dist/resizable.mjs",
+      "require": "./dist/resizable.js"
+    },
+    "./radio-group": {
+      "types": "./src/radio-group.tsx",
+      "import": "./dist/radio-group.mjs",
+      "require": "./dist/radio-group.js"
+    },
+    "./progress": {
+      "types": "./src/progress.tsx",
+      "import": "./dist/progress.mjs",
+      "require": "./dist/progress.js"
+    },
+    "./popover": {
+      "types": "./src/popover.tsx",
+      "import": "./dist/popover.mjs",
+      "require": "./dist/popover.js"
+    },
+    "./pagination": {
+      "types": "./src/pagination.tsx",
+      "import": "./dist/pagination.mjs",
+      "require": "./dist/pagination.js"
+    },
+    "./navigation-menu": {
+      "types": "./src/navigation-menu.tsx",
+      "import": "./dist/navigation-menu.mjs",
+      "require": "./dist/navigation-menu.js"
+    },
+    "./menubar": {
+      "types": "./src/menubar.tsx",
+      "import": "./dist/menubar.mjs",
+      "require": "./dist/menubar.js"
+    },
+    "./label": {
+      "types": "./src/label.tsx",
+      "import": "./dist/label.mjs",
+      "require": "./dist/label.js"
+    },
+    "./input-otp": {
+      "types": "./src/input-otp.tsx",
+      "import": "./dist/input-otp.mjs",
+      "require": "./dist/input-otp.js"
+    },
+    "./input": {
+      "types": "./src/input.tsx",
+      "import": "./dist/input.mjs",
+      "require": "./dist/input.js"
+    },
+    "./hover-card": {
+      "types": "./src/hover-card.tsx",
+      "import": "./dist/hover-card.mjs",
+      "require": "./dist/hover-card.js"
+    },
+    "./drawer": {
+      "types": "./src/drawer.tsx",
+      "import": "./dist/drawer.mjs",
+      "require": "./dist/drawer.js"
+    },
+    "./context-menu": {
+      "types": "./src/context-menu.tsx",
+      "import": "./dist/context-menu.mjs",
+      "require": "./dist/context-menu.js"
+    },
+    "./dialog": {
+      "types": "./src/dialog.tsx",
+      "import": "./dist/dialog.mjs",
+      "require": "./dist/dialog.js"
+    },
+    "./command": {
+      "types": "./src/command.tsx",
+      "import": "./dist/command.mjs",
+      "require": "./dist/command.js"
+    },
+    "./collapsible": {
+      "types": "./src/collapsible.tsx",
+      "import": "./dist/collapsible.mjs",
+      "require": "./dist/collapsible.js"
+    },
+    "./checkbox": {
+      "types": "./src/checkbox.tsx",
+      "import": "./dist/checkbox.mjs",
+      "require": "./dist/checkbox.js"
+    },
+    "./carousel": {
+      "types": "./src/carousel.tsx",
+      "import": "./dist/carousel.mjs",
+      "require": "./dist/carousel.js"
     },
     "./card": {
       "types": "./src/card.tsx",
       "import": "./dist/card.mjs",
       "require": "./dist/card.js"
     },
-    "./code": {
-      "types": "./src/code.tsx",
-      "import": "./dist/code.mjs",
-      "require": "./dist/code.js"
+    "./calendar": {
+      "types": "./src/calendar.tsx",
+      "import": "./dist/calendar.mjs",
+      "require": "./dist/calendar.js"
+    },
+    "./accordion": {
+      "types": "./src/accordion.tsx",
+      "import": "./dist/accordion.mjs",
+      "require": "./dist/accordion.js"
+    },
+    "./avatar": {
+      "types": "./src/avatar.tsx",
+      "import": "./dist/avatar.mjs",
+      "require": "./dist/avatar.js"
+    },
+    "./aspect-ratio": {
+      "types": "./src/aspect-ratio.tsx",
+      "import": "./dist/aspect-ratio.mjs",
+      "require": "./dist/aspect-ratio.js"
+    },
+    "./alert-dialog": {
+      "types": "./src/alert-dialog.tsx",
+      "import": "./dist/alert-dialog.mjs",
+      "require": "./dist/alert-dialog.js"
+    },
+    "./dropdown-menu": {
+      "types": "./src/dropdown-menu.tsx",
+      "import": "./dist/dropdown-menu.mjs",
+      "require": "./dist/dropdown-menu.js"
+    },
+    "./breadcrumb": {
+      "types": "./src/breadcrumb.tsx",
+      "import": "./dist/breadcrumb.mjs",
+      "require": "./dist/breadcrumb.js"
+    },
+    "./badge": {
+      "types": "./src/badge.tsx",
+      "import": "./dist/badge.mjs",
+      "require": "./dist/badge.js"
+    },
+    "./alert": {
+      "types": "./src/alert.tsx",
+      "import": "./dist/alert.mjs",
+      "require": "./dist/alert.js"
+    },
+    "./button": {
+      "types": "./src/button.tsx",
+      "import": "./dist/button.mjs",
+      "require": "./dist/button.js"
     },
     "./utils": {
       "types": "./src/utils.ts",
@@ -35,23 +240,59 @@
     "tailwind.config.ts"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "cmdk": "^1.0.0",
     "cva": "1.0.0-beta.1",
-    "tailwind-merge": "^2.2.2"
+    "embla-carousel-react": "^8.0.0",
+    "input-otp": "^1.2.2",
+    "next-themes": "^0.3.0",
+    "react-day-picker": "^8.10.0",
+    "react-hook-form": "^7.51.1",
+    "react-resizable-panels": "^2.0.13",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^2.2.2",
+    "vaul": "^0.9.0"
   },
   "devDependencies": {
-    "@turbo/gen": "^1.12.5",
-    "@types/eslint": "^8.56.5",
-    "@types/node": "^20.11.28",
-    "@types/react": "^18.2.66",
-    "autoprefixer": "^10.0.1",
+    "@turbo/gen": "^1.13.0",
+    "@types/eslint": "^8.56.6",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.69",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "react": "^18.2.0",
     "tailwindcss": "^3.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.2",
-    "@codefast/eslint-config": "0.0.3",
+    "typescript": "^5.4.3",
+    "@codefast/eslint-config": "0.0.4",
     "@codefast/typescript-config": "0.0.1"
   },
   "peerDependencies": {

package/src/accordion.tsx

@@ -0,0 +1,80 @@
+"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 "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Accordion
+ * -------------------------------------------------------------------------- */
+
+const Accordion = AccordionPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionItem
+ * -------------------------------------------------------------------------- */
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  AccordionPrimitive.AccordionItemProps
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = AccordionPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionTrigger
+ * -------------------------------------------------------------------------- */
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  AccordionPrimitive.AccordionTriggerProps
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline",
+        "[&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionContent
+ * -------------------------------------------------------------------------- */
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  AccordionPrimitive.AccordionContentProps
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    )}
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/alert-dialog.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { buttonVariants } from "./button";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialog
+ * -------------------------------------------------------------------------- */
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTrigger
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogPortal
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogOverlay
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  AlertDialogPrimitive.AlertDialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogContent
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogPrimitive.AlertDialogContentProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogHeader
+ * -------------------------------------------------------------------------- */
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogFooter
+ * -------------------------------------------------------------------------- */
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTitle
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  AlertDialogPrimitive.AlertDialogTitleProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogDescription
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  AlertDialogPrimitive.AlertDialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogAction
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  AlertDialogPrimitive.AlertDialogActionProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={buttonVariants({ className })}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogCancel
+ * -------------------------------------------------------------------------- */
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  AlertDialogPrimitive.AlertDialogCancelProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={buttonVariants({ variant: "outline", className })}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/alert.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { type VariantProps } from "cva";
+import { cn, cva } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Alert
+ * -------------------------------------------------------------------------- */
+
+const alertVariants = cva({
+  base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  variants: {
+    variant: {
+      default: "bg-background text-foreground [&>svg]:text-foreground",
+      destructive:
+        "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+/* -----------------------------------------------------------------------------
+ * Component: Alert
+ * -------------------------------------------------------------------------- */
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={alertVariants({ variant, className })}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertTitle
+ * -------------------------------------------------------------------------- */
+
+const AlertTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  >
+    {children}
+  </h5>
+));
+AlertTitle.displayName = "AlertTitle";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDescription
+ * -------------------------------------------------------------------------- */
+
+const AlertDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Alert, AlertTitle, AlertDescription };

package/src/aspect-ratio.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+/* -----------------------------------------------------------------------------
+ * Component: AspectRatio
+ * -------------------------------------------------------------------------- */
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { AspectRatio };