@quarklab/rad-ui 0.1.4 → 0.2.0

package/templates/web/input-group.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+// ---------------------------------------------------------------------------
+// InputGroup
+// ---------------------------------------------------------------------------
+
+const InputGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="input-group"
+    className={cn(
+      "group/input-group flex min-w-0 items-stretch rounded-md border border-input shadow-sm",
+      "focus-within:ring-1 focus-within:ring-ring",
+      "data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+InputGroup.displayName = "InputGroup";
+
+// ---------------------------------------------------------------------------
+// InputGroupAddon
+// ---------------------------------------------------------------------------
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]",
+        "inline-end":
+          "order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+);
+
+export interface InputGroupAddonProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof inputGroupAddonVariants> {}
+
+const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
+  ({ className, align = "inline-start", ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement
+          ?.querySelector<
+            HTMLInputElement | HTMLTextAreaElement
+          >("input, textarea")
+          ?.focus();
+      }}
+      {...props}
+    />
+  )
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+
+// ---------------------------------------------------------------------------
+// InputGroupButton
+// ---------------------------------------------------------------------------
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+);
+
+export interface InputGroupButtonProps
+  extends
+    Omit<React.ComponentPropsWithRef<typeof Button>, "size">,
+    VariantProps<typeof inputGroupButtonVariants> {}
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  InputGroupButtonProps
+>(
+  (
+    { className, type = "button", variant = "ghost", size = "xs", ...props },
+    ref
+  ) => (
+    <Button
+      ref={ref}
+      type={type}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+);
+InputGroupButton.displayName = "InputGroupButton";
+
+// ---------------------------------------------------------------------------
+// InputGroupText
+// ---------------------------------------------------------------------------
+
+const InputGroupText = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="input-group-text"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+InputGroupText.displayName = "InputGroupText";
+
+// ---------------------------------------------------------------------------
+// InputGroupInput
+// ---------------------------------------------------------------------------
+
+type InputGroupInputProps = Omit<
+  React.ComponentPropsWithRef<typeof Input>,
+  "ref"
+>;
+
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  InputGroupInputProps
+>(({ className, ...props }, ref) => (
+  <Input
+    ref={ref}
+    data-slot="input-group-control"
+    className={cn(
+      "border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none",
+      "group-has-[[data-align=inline-start]]/input-group:rounded-e-md",
+      "group-has-[[data-align=inline-end]]/input-group:rounded-s-md",
+      className
+    )}
+    {...props}
+  />
+));
+InputGroupInput.displayName = "InputGroupInput";
+
+// ---------------------------------------------------------------------------
+// InputGroupTextarea
+// ---------------------------------------------------------------------------
+
+const InputGroupTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <Textarea
+    ref={ref}
+    data-slot="input-group-control"
+    className={cn(
+      "border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 rounded-none min-h-0",
+      className
+    )}
+    {...props}
+  />
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  inputGroupAddonVariants,
+  InputGroupButton,
+  inputGroupButtonVariants,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/templates/web/input-otp.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+const PERSIAN_DIGITS = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"];
+
+function toPersianDigit(
+  str: string | null | undefined
+): string | null | undefined {
+  if (!str) return str;
+  return str.replace(/\d/g, (d) => PERSIAN_DIGITS[parseInt(d)] ?? d);
+}
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    containerClassName?: string;
+  }
+>(({ className, containerClassName, ...props }, ref) => (
+  <div dir="ltr">
+    <OTPInput
+      ref={ref}
+      containerClassName={cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  </div>
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all",
+        "first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {toPersianDigit(char)}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <MinusIcon className="h-4 w-4" />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/templates/web/input.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Upload } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const inputVariants = cva(
+  "flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-3 py-2 text-sm",
+        lg: "h-11 px-4 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export interface InputProps
+  extends
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, type, ...props }, ref) => {
+    // Custom logic for file input to support Farsi text
+    if (type === "file") {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [fileName, setFileName] = React.useState<string>("");
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const inputRef = React.useRef<HTMLInputElement>(null);
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useImperativeHandle(ref, () => inputRef.current!);
+
+      const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+          setFileName(file.name);
+        } else {
+          setFileName("");
+        }
+        props.onChange?.(e);
+      };
+
+      return (
+        <div
+          className={cn(
+            inputVariants({ size, className }),
+            "flex items-center gap-2 cursor-pointer",
+            props.disabled && "cursor-not-allowed opacity-50"
+          )}
+          onClick={() => !props.disabled && inputRef.current?.click()}
+        >
+          <button
+            type="button"
+            disabled={props.disabled}
+            className={cn(
+              "flex items-center gap-2 rounded-sm bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground transition-colors",
+              "hover:bg-secondary/80 focus:outline-none",
+              props.disabled && "pointer-events-none"
+            )}
+            tabIndex={-1}
+          >
+            <Upload className="h-3 w-3" />
+            <span>انتخاب فایل</span>
+          </button>
+          <span
+            className={cn(
+              "text-muted-foreground truncate flex-1 text-right text-xs",
+              !fileName && "opacity-70"
+            )}
+            dir="rtl"
+          >
+            {fileName || props.placeholder || "فایلی انتخاب نشده"}
+          </span>
+          <input
+            type="file"
+            className="hidden"
+            ref={inputRef}
+            onChange={handleFileChange}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/templates/web/kbd.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        className={cn(
+          "pointer-events-none inline-flex h-6 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground shadow-sm",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+export interface KbdGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const KbdGroup = React.forwardRef<HTMLDivElement, KbdGroupProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("inline-flex items-center gap-1", className)}
+        {...props}
+      />
+    );
+  }
+);
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup };

package/templates/web/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/templates/web/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+

package/templates/web/native-select.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const nativeSelectVariants = cva(
+  "flex w-full appearance-none rounded-md border border-input bg-background px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 pe-8",
+  {
+    variants: {
+      size: {
+        sm: "h-9 text-sm",
+        md: "h-10 text-sm",
+        lg: "h-11 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+export interface NativeSelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">,
+    VariantProps<typeof nativeSelectVariants> {}
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, size, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          className={cn(nativeSelectVariants({ size, className }))}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </select>
+        <ChevronDown className="absolute end-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none opacity-50" />
+      </div>
+    );
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+
+export interface NativeSelectOptionProps
+  extends React.OptionHTMLAttributes<HTMLOptionElement> {}
+
+const NativeSelectOption = React.forwardRef<
+  HTMLOptionElement,
+  NativeSelectOptionProps
+>(({ className, ...props }, ref) => {
+  return <option className={cn("", className)} ref={ref} {...props} />;
+});
+NativeSelectOption.displayName = "NativeSelectOption";
+
+export interface NativeSelectOptGroupProps
+  extends React.OptgroupHTMLAttributes<HTMLOptGroupElement> {}
+
+const NativeSelectOptGroup = React.forwardRef<
+  HTMLOptGroupElement,
+  NativeSelectOptGroupProps
+>(({ className, ...props }, ref) => {
+  return <optgroup className={cn("", className)} ref={ref} {...props} />;
+});
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
+
+export {
+  NativeSelect,
+  NativeSelectOption,
+  NativeSelectOptGroup,
+  nativeSelectVariants,
+};

package/templates/web/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow transition-colors",
+        "focus: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",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/templates/web/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/templates/web/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/templates/web/slider.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, value, defaultValue, ...props }, ref) => {
+  // Determine the number of thumbs based on value or defaultValue
+  const thumbCount = React.useMemo(() => {
+    if (value && Array.isArray(value)) {
+      return value.length;
+    }
+    if (defaultValue && Array.isArray(defaultValue)) {
+      return defaultValue.length;
+    }
+    return 1; // Default to single thumb
+  }, [value, defaultValue]);
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )}
+      value={value}
+      defaultValue={defaultValue}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      {Array.from({ length: thumbCount }).map((_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+});
+
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };