@quarklab/rad-ui 0.3.0 → 0.3.2

package/templates/web/input-group.tsx

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

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

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

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

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

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

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

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

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

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

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