@quarklab/rad-ui 0.1.5 → 0.3.0

package/package.json

@@ -1,42 +1,50 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.1.5",
-  "private": false,
+  "version": "0.3.0",
+  "description": "A CLI for adding Rad UI components to your project. Beautiful Persian-themed React components built on Radix UI and Tailwind CSS.",
+  "license": "MIT",
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "bin": {
+    "rad-ui": "dist/index.js"
+  },
   "files": [
-    "dist/**"
+    "dist",
+    "templates"
   ],
   "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.ts --format cjs,esm --dts --minify --clean"
+    "prebuild": "node scripts/sync-templates.js",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist templates/web templates/mobile"
   },
   "dependencies": {
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-separator": "^1.1.8",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.1"
+    "commander": "^12.1.0",
+    "@clack/prompts": "^0.8.2",
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "execa": "^9.5.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^8.51.0",
-    "@typescript-eslint/parser": "^8.51.0",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.57.1",
-    "postcss": "^8.4.33",
-    "tailwindcss": "^3.4.1",
-    "tailwindcss-rtl": "^0.9.0",
-    "tsup": "^8.3.6",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.11.5",
+    "tsup": "^8.0.0",
     "typescript": "^5.3.3"
   },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^3.0.0"
-  }
+  "keywords": [
+    "rad-ui",
+    "react",
+    "ui",
+    "components",
+    "cli",
+    "tailwindcss",
+    "radix-ui",
+    "persian",
+    "quarklab"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quarklab/rad-ui.git"
+  },
+  "homepage": "https://rad-ui.com"
 }

package/templates/web/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/templates/web/avatar.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/web/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/templates/web/button.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        outline:
+          "border border-border bg-background hover:bg-muted hover:text-foreground active:bg-muted/80",
+        ghost:
+          "hover:bg-muted hover:text-foreground active:bg-muted/80",
+        link:
+          "text-primary underline-offset-4 hover:underline active:text-primary/80",
+      },
+      size: {
+        sm: "h-9 px-3 text-xs rounded-md",
+        md: "h-10 px-4 py-2",
+        lg: "h-11 px-8 text-base rounded-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/templates/web/checkbox.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/templates/web/field.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+import { Separator } from "./separator";
+
+// ---------------------------------------------------------------------------
+// FieldSet
+// ---------------------------------------------------------------------------
+
+const FieldSet = React.forwardRef<
+  HTMLFieldSetElement,
+  React.FieldsetHTMLAttributes<HTMLFieldSetElement>
+>(({ className, ...props }, ref) => (
+  <fieldset
+    ref={ref}
+    className={cn(
+      "space-y-6 border-none p-0 [&>*+[data-slot=field-group]]:pt-4",
+      className
+    )}
+    {...props}
+  />
+));
+FieldSet.displayName = "FieldSet";
+
+// ---------------------------------------------------------------------------
+// FieldLegend
+// ---------------------------------------------------------------------------
+
+interface FieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+  variant?: "legend" | "label";
+}
+
+const FieldLegend = React.forwardRef<HTMLLegendElement, FieldLegendProps>(
+  ({ className, variant = "legend", ...props }, ref) => (
+    <legend
+      ref={ref}
+      className={cn(
+        variant === "legend"
+          ? "text-base font-semibold leading-none"
+          : "text-sm font-medium leading-none",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+FieldLegend.displayName = "FieldLegend";
+
+// ---------------------------------------------------------------------------
+// FieldGroup
+// ---------------------------------------------------------------------------
+
+const FieldGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="field-group"
+    className={cn("@container/field-group flex flex-col gap-4", className)}
+    {...props}
+  />
+));
+FieldGroup.displayName = "FieldGroup";
+
+// ---------------------------------------------------------------------------
+// Field
+// ---------------------------------------------------------------------------
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+);
+
+export interface FieldProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof fieldVariants> {}
+
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      data-slot="field"
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+);
+Field.displayName = "Field";
+
+// ---------------------------------------------------------------------------
+// FieldContent
+// ---------------------------------------------------------------------------
+
+const FieldContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="field-content"
+    className={cn("flex flex-col gap-1", className)}
+    {...props}
+  />
+));
+FieldContent.displayName = "FieldContent";
+
+// ---------------------------------------------------------------------------
+// FieldLabel
+// ---------------------------------------------------------------------------
+
+const FieldLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ className, ...props }, ref) => (
+  <Label
+    ref={ref}
+    data-slot="field-label"
+    className={cn(
+      "group-data-[invalid=true]/field:text-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+FieldLabel.displayName = "FieldLabel";
+
+// ---------------------------------------------------------------------------
+// FieldTitle
+// ---------------------------------------------------------------------------
+
+const FieldTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="field-title"
+    className={cn(
+      "text-sm font-medium leading-none group-data-[invalid=true]/field:text-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+FieldTitle.displayName = "FieldTitle";
+
+// ---------------------------------------------------------------------------
+// FieldDescription
+// ---------------------------------------------------------------------------
+
+const FieldDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="field-description"
+    className={cn("text-sm text-muted-foreground text-pretty", className)}
+    {...props}
+  />
+));
+FieldDescription.displayName = "FieldDescription";
+
+// ---------------------------------------------------------------------------
+// FieldSeparator
+// ---------------------------------------------------------------------------
+
+interface FieldSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+const FieldSeparator = React.forwardRef<HTMLDivElement, FieldSeparatorProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="field-separator"
+      className={cn("flex items-center gap-3", className)}
+      {...props}
+    >
+      <Separator className="flex-1" />
+      {children && (
+        <span className="text-xs text-muted-foreground font-medium">
+          {children}
+        </span>
+      )}
+      <Separator className={cn("flex-1", !children && "hidden")} />
+    </div>
+  )
+);
+FieldSeparator.displayName = "FieldSeparator";
+
+// ---------------------------------------------------------------------------
+// FieldError
+// ---------------------------------------------------------------------------
+
+interface FieldErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+  errors?: Array<{ message?: string } | undefined>;
+}
+
+const FieldError = React.forwardRef<HTMLDivElement, FieldErrorProps>(
+  ({ className, children, errors, ...props }, ref) => {
+    const content = React.useMemo(() => {
+      if (children) {
+        return children;
+      }
+
+      if (!errors?.length) {
+        return null;
+      }
+
+      const uniqueErrors = [
+        ...new Map(errors.map((error) => [error?.message, error])).values(),
+      ];
+
+      if (uniqueErrors?.length === 1) {
+        return uniqueErrors[0]?.message;
+      }
+
+      return (
+        <ul className="list-disc list-inside space-y-1">
+          {uniqueErrors.map(
+            (error, index) =>
+              error?.message && <li key={index}>{error.message}</li>
+          )}
+        </ul>
+      );
+    }, [children, errors]);
+
+    if (!content) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        data-slot="field-error"
+        role="alert"
+        className={cn("text-sm text-destructive", className)}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  }
+);
+FieldError.displayName = "FieldError";
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export {
+  Field,
+  fieldVariants,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};
+export type { FieldLegendProps, FieldSeparatorProps, FieldErrorProps };