ruler-components 0.1.0 → 0.1.2

package/components/ui/progress.tsx

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

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

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