@quarklab/rad-ui 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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",
@@ -9,14 +9,12 @@
     "rad-ui": "dist/index.js"
   },
   "files": [
-    "dist",
-    "templates"
+    "dist"
   ],
   "scripts": {
-    "prebuild": "node scripts/sync-templates.js",
     "build": "tsup",
     "dev": "tsup --watch",
-    "clean": "rm -rf dist templates/web templates/mobile"
+    "clean": "rm -rf dist"
   },
   "dependencies": {
     "commander": "^12.1.0",

package/templates/web/aspect-ratio.tsx

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

package/templates/web/avatar.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,291 +0,0 @@
-"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 };