ruler-components 0.1.0

package/components/ui/progress.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800/70",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-1.5",
+        lg: "h-2",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+const progressIndicatorVariants = cva(
+  "h-full rounded-full transition-[width] duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-900 dark:bg-zinc-100",
+        success: "bg-[#28A745] dark:bg-[#5CC975]",
+        warning: "bg-[#E58E00] dark:bg-[#F5B84A]",
+        error: "bg-[#D93025] dark:bg-[#F06B62]",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+const valuePillVariants = cva(
+  "inline-flex min-w-[2.25rem] items-center justify-end text-[11px] font-medium tabular-nums text-zinc-400 dark:text-zinc-500",
+  {
+    variants: {
+      variant: {
+        default: "",
+        success: "",
+        warning: "",
+        error: "",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface ProgressProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+    VariantProps<typeof progressTrackVariants>,
+    VariantProps<typeof progressIndicatorVariants> {
+  value?: number;
+  max?: number;
+  label?: string;
+  showValue?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      className,
+      value = 0,
+      max = 100,
+      variant,
+      size,
+      label,
+      showValue = false,
+      indeterminate = false,
+      disabled = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const clamped = Math.min(max, Math.max(0, value));
+    const percentage = max > 0 ? Math.round((clamped / max) * 100) : 0;
+
+    return (
+      <div
+        className={cn(
+          "flex w-full flex-col gap-2.5",
+          disabled && "pointer-events-none opacity-50",
+          className,
+        )}
+      >
+        {(label || showValue) && (
+          <div className="flex items-center justify-between gap-3">
+            {label && (
+              <span className="text-sm text-zinc-600 dark:text-zinc-300">
+                {label}
+              </span>
+            )}
+            {showValue && !indeterminate && (
+              <span className={cn(valuePillVariants({ variant }))}>
+                {percentage}%
+              </span>
+            )}
+          </div>
+        )}
+        <div
+          ref={ref}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-valuenow={indeterminate || disabled ? undefined : clamped}
+          aria-label={label}
+          aria-valuetext={indeterminate ? "Loading" : `${percentage}%`}
+          aria-disabled={disabled || undefined}
+          className={cn(progressTrackVariants({ size }))}
+          {...props}
+        >
+          {indeterminate ? (
+            <div
+              className={cn(
+                progressIndicatorVariants({ variant }),
+                "w-[40%] animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+              )}
+            />
+          ) : (
+            <div
+              className={cn(progressIndicatorVariants({ variant }))}
+              style={{ width: `${percentage}%` }}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+Progress.displayName = "Progress";
+
+export { Progress, progressTrackVariants, progressIndicatorVariants };

package/components/ui/radio.tsx

@@ -0,0 +1,262 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const radioControlVariants = cva(
+  [
+    "pointer-events-none relative flex shrink-0 items-center justify-center rounded-full border-2 bg-transparent transition-all duration-200",
+    "border-zinc-500 group-hover:border-zinc-700",
+    "peer-checked:border-zinc-900",
+    "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-zinc-900/30 peer-focus-visible:ring-offset-2",
+    "peer-disabled:border-zinc-300",
+    "peer-disabled:peer-checked:border-zinc-300",
+    "dark:border-zinc-500 dark:group-hover:border-zinc-400",
+    "dark:peer-checked:border-zinc-100",
+    "dark:peer-disabled:border-zinc-600 dark:peer-disabled:peer-checked:border-zinc-600",
+    "peer-checked:[&_.radio-dot]:scale-100 peer-checked:[&_.radio-dot]:opacity-100",
+    "peer-disabled:peer-checked:[&_.radio-dot]:bg-zinc-300",
+    "dark:peer-disabled:peer-checked:[&_.radio-dot]:bg-zinc-600",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 [&_.radio-dot]:h-1.5 [&_.radio-dot]:w-1.5",
+        md: "h-5 w-5 [&_.radio-dot]:h-2.5 [&_.radio-dot]:w-2.5",
+        lg: "h-6 w-6 [&_.radio-dot]:h-3 [&_.radio-dot]:w-3",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+const radioWrapperVariants = cva("group relative flex w-full transition-colors duration-150", {
+  variants: {
+    variant: {
+      inline: "gap-3",
+      card: [
+        "gap-3.5 rounded-lg border border-zinc-200 bg-white px-4 py-3.5",
+        "hover:border-zinc-300 hover:bg-zinc-50/80",
+        "has-[:checked]:border-zinc-900",
+        "dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700",
+        "dark:has-[:checked]:border-zinc-500",
+      ],
+    },
+  },
+  defaultVariants: { variant: "inline" },
+});
+
+interface RadioGroupContextValue {
+  name: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  size?: "sm" | "md" | "lg";
+  variant?: "inline" | "card";
+  appearance?: "default" | "segmented";
+  disabled?: boolean;
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(
+  null,
+);
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  size?: "sm" | "md" | "lg";
+  variant?: "inline" | "card";
+  appearance?: "default" | "segmented";
+  disabled?: boolean;
+  orientation?: "vertical" | "horizontal";
+}
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      className,
+      name,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      size = "md",
+      variant = "inline",
+      appearance = "default",
+      disabled,
+      orientation = "vertical",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      defaultValue ?? "",
+    );
+    const value = controlledValue ?? uncontrolledValue;
+
+    const handleValueChange = (next: string) => {
+      if (controlledValue === undefined) {
+        setUncontrolledValue(next);
+      }
+      onValueChange?.(next);
+    };
+
+    return (
+      <RadioGroupContext.Provider
+        value={{ name, value, onValueChange: handleValueChange, size, variant, appearance, disabled }}
+      >
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn(
+            "flex",
+            appearance === "segmented"
+              ? "inline-flex w-fit gap-0.5 rounded-lg border border-zinc-200 p-0.5 dark:border-zinc-800"
+              : variant === "card"
+                ? "gap-2.5"
+                : "gap-2.5",
+            orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+export interface RadioProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
+    VariantProps<typeof radioControlVariants> {
+  value: string;
+  label?: string;
+  description?: string;
+  variant?: "inline" | "card";
+}
+
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      className,
+      size: sizeProp,
+      variant: variantProp,
+      value,
+      label,
+      description,
+      disabled: disabledProp,
+      id,
+      onChange,
+      checked: checkedProp,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const context = React.useContext(RadioGroupContext);
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const size = sizeProp ?? context?.size ?? "md";
+    const groupVariant = variantProp ?? context?.variant ?? "inline";
+    const appearance = context?.appearance ?? "default";
+    const resolvedVariant =
+      appearance === "segmented"
+        ? "inline"
+        : groupVariant === "card" || description
+          ? "card"
+          : "inline";
+    const disabled = disabledProp ?? context?.disabled;
+    const isControlled = context !== null || checkedProp !== undefined;
+    const checked = context ? context.value === value : checkedProp;
+    const alignStart = resolvedVariant === "card" || Boolean(description);
+
+    const input = (
+      <input
+        {...inputProps}
+        ref={ref}
+        id={inputId}
+        type="radio"
+        name={context?.name}
+        value={value}
+        disabled={disabled}
+        checked={isControlled ? checked : undefined}
+        defaultChecked={!isControlled ? checkedProp : undefined}
+        onChange={(event) => {
+          onChange?.(event);
+          if (event.target.checked) {
+            context?.onValueChange?.(value);
+          }
+        }}
+        className="peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+      />
+    );
+
+    return (
+      <label
+        htmlFor={inputId}
+        className={cn(
+          appearance === "segmented"
+            ? "relative inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600 transition-colors duration-150 has-[:checked]:bg-zinc-900 has-[:checked]:text-white dark:text-zinc-400 dark:has-[:checked]:bg-zinc-100 dark:has-[:checked]:text-zinc-900"
+            : radioWrapperVariants({ variant: resolvedVariant }),
+          appearance === "segmented" ? "items-center" : alignStart ? "items-start" : "items-center",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className,
+        )}
+      >
+        {appearance === "segmented" ? (
+          input
+        ) : (
+          <span
+            className={cn(
+              "relative flex shrink-0 items-center justify-center p-2.5 -m-2.5",
+              alignStart ? "-mt-[3px]" : undefined,
+            )}
+          >
+            {input}
+            <span
+              aria-hidden
+              className="pointer-events-none absolute inset-0 rounded-full bg-zinc-900/0 transition-colors duration-200 group-hover:bg-zinc-900/[0.08] group-active:bg-zinc-900/[0.12] peer-disabled:group-hover:bg-transparent dark:group-hover:bg-white/[0.08] dark:group-active:bg-white/[0.12]"
+            />
+            <span className={radioControlVariants({ size })}>
+              <span className="radio-dot scale-0 rounded-full bg-zinc-900 opacity-0 transition-all duration-200 dark:bg-zinc-100" />
+            </span>
+          </span>
+        )}
+        {(label || description) && (
+          <span
+            className={cn(
+              "flex min-w-0 flex-col",
+              appearance === "segmented" ? "gap-0" : "flex-1 gap-0.5",
+            )}
+          >
+            {label && (
+              <span
+                className={cn(
+                  appearance === "segmented"
+                    ? "leading-none"
+                    : cn(
+                        "text-sm leading-snug text-zinc-800 dark:text-zinc-100",
+                        size === "sm" && "text-xs",
+                        size === "md" && "text-sm",
+                        size === "lg" && "text-base",
+                      ),
+                )}
+              >
+                {label}
+              </span>
+            )}
+            {description && (
+              <span className="text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+                {description}
+              </span>
+            )}
+          </span>
+        )}
+      </label>
+    );
+  },
+);
+Radio.displayName = "Radio";
+
+export { Radio, RadioGroup, radioControlVariants };

package/components/ui/skeleton.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+const SkeletonBar = ({ className }: { className?: string }) => (
+  <div className={`animate-pulse rounded bg-zinc-200 dark:bg-zinc-800 ${className}`} />
+);
+
+export function AccordionSkeletonPlus({ count = 3 }: { count?: number }) {
+  return (
+    <div className="w-full">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 py-4 border-b border-zinc-100 dark:border-zinc-800 last:border-0">
+          <SkeletonBar className="h-5 w-5 rounded-full shrink-0" />
+          <SkeletonBar className="h-4 w-2/3" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function AccordionSkeletonChevron({ count = 3 }: { count?: number }) {
+  return (
+    <div className="w-full">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center justify-between py-5 border-b border-zinc-100 dark:border-zinc-800 last:border-0">
+          <SkeletonBar className="h-4 w-1/2" />
+          <SkeletonBar className="h-4 w-4 rounded-sm shrink-0" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeletonGrid({ count = 3 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex flex-col gap-3">
+          <SkeletonBar className="aspect-video w-full rounded-md" />
+          <SkeletonBar className="h-4 w-full" />
+          <SkeletonBar className="h-4 w-[60%]" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="w-full space-y-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex flex-col gap-4 p-4 border border-zinc-100 dark:border-zinc-800 rounded-lg bg-white dark:bg-zinc-900/50">
+          <div className="flex items-center gap-3">
+            <SkeletonBar className="h-10 w-10 rounded-full shrink-0" />
+            <div className="flex flex-col gap-2">
+              <SkeletonBar className="h-3 w-24" />
+              <SkeletonBar className="h-3 w-40" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2 mt-1">
+            <SkeletonBar className="h-3 w-full" />
+            <SkeletonBar className="h-3 w-[92%]" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TableSkeleton({ count = 5 }: { count?: number }) {
+  return (
+    <div className="w-full overflow-hidden rounded-lg border border-zinc-100 dark:border-zinc-800">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left">
+          <thead className="bg-zinc-50/50 dark:bg-zinc-900/50 border-b border-zinc-100 dark:border-zinc-800 text-zinc-500">
+            <tr>
+              <th className="px-4 py-3 font-medium">Id</th>
+              <th className="px-4 py-3 font-medium">Image</th>
+              <th className="px-4 py-3 font-medium">Name</th>
+              <th className="px-4 py-3 font-medium">Category</th>
+              <th className="px-4 py-3 font-medium">Price</th>
+              <th className="px-4 py-3 font-medium">Stock</th>
+              <th className="px-4 py-3 font-medium">Description</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
+            {Array.from({ length: count }).map((_, i) => (
+              <tr key={i}>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-8" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-8 w-12 rounded" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-24" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-20" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-12" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-12" /></td>
+                <td className="px-4 py-4"><SkeletonBar className="h-4 w-48" /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}