@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/primitives/progress-circle.tsx

@@ -0,0 +1,507 @@
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, ReactNode } from "react";
+import { useId, useMemo } from "react";
+
+/* -----------------------------------------------------------------------------
+ * Context: ProgressCircleProvider
+ * --------------------------------------------------------------------------- */
+
+const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
+
+type ScopedProps<P> = P & { __scopeProgressCircle?: Context.Scope };
+
+/**
+ * Defines color thresholds based on progress values
+ */
+interface Threshold {
+  /**
+   * Background color to be applied
+   */
+  background: string;
+
+  /**
+   * Foreground color to be applied
+   */
+  color: string;
+
+  /**
+   * The value at which this threshold becomes active
+   */
+  value: number;
+}
+
+/**
+ * Props for the ProgressCircleProvider context
+ */
+interface ProgressCircleContextValue {
+  /**
+   * Center coordinate of the circle (half of size)
+   */
+  center: number;
+
+  /**
+   * Total circumference of the circle for stroke calculations
+   */
+  circumference: number;
+
+  /**
+   * Clamped progress value, undefined for indeterminate state
+   */
+  clampedValue: number | undefined;
+
+  /**
+   * Unique identifier for the progress circle
+   */
+  id: string;
+
+  /**
+   * Maximum progress value
+   */
+  max: number;
+
+  /**
+   * Minimum progress value
+   */
+  min: number;
+
+  /**
+   * Radius of the circle for SVG rendering
+   */
+  radius: number;
+
+  /**
+   * CSS transform for rotating the progress indicator
+   */
+  rotationTransform: string;
+
+  /**
+   * Size of the progress circle in pixels
+   */
+  size: number;
+
+  /**
+   * Stroke dash offset for progress visualization
+   */
+  strokeDashoffset: number;
+
+  /**
+   * Width of the stroke for the progress circle
+   */
+  strokeWidth: number;
+
+  /**
+   * Threshold configuration for color changes
+   */
+  threshold: Threshold | undefined;
+
+  /**
+   * Raw progress value (can be null/undefined for indeterminate)
+   */
+  value: null | number | undefined;
+
+  /**
+   * Text representation of the current value for accessibility
+   */
+  valueText: string;
+}
+
+const [createProgressCircleContext, createProgressCircleScope] =
+  Context.createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
+
+const [ProgressCircleContextProvider, useProgressCircleContext] =
+  createProgressCircleContext<ProgressCircleContextValue>(PROGRESS_CIRCLE_PROVIDER_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleProvider
+ * --------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ProgressCircleProviderProps {
+  /**
+   * React children to be rendered inside the progress circle
+   */
+  children: ReactNode;
+
+  /**
+   * Custom function to format the numeric value for display
+   */
+  formatValue?: (value: number) => string;
+
+  /**
+   * Unique identifier for the progress circle component
+   */
+  id?: string;
+
+  /**
+   * Maximum value of the progress (defaults to 100)
+   */
+  max?: number;
+
+  /**
+   * Minimum value of the progress (defaults to 0)
+   */
+  min?: number;
+
+  /**
+   * Size of the progress circle in pixels
+   */
+  size?: number;
+
+  /**
+   * Starting angle of the progress circle in degrees (0 = top)
+   */
+  startAngle?: number;
+
+  /**
+   * Width of the progress circle's stroke in pixels
+   */
+  strokeWidth?: number;
+
+  /**
+   * Array of threshold configurations for different value ranges
+   */
+  thresholds?: Array<Threshold>;
+
+  /**
+   * Current progress value (null for indeterminate state)
+   */
+  value?: null | number;
+}
+
+/**
+ * Provides context for the ProgressCircle component
+ *
+ * Manages calculations for rendering the circular progress indicator,
+ * including value clamping, sizing, thresholds, and indeterminate state.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircleProvider
+ *   value={75}
+ *   min={0}
+ *   max={100}
+ *   size={64}
+ *   thresholds={[
+ *     { value: 30, color: 'red', background: 'pink' },
+ *     { value: 70, color: 'yellow', background: 'lightyellow' },
+ *     { value: 100, color: 'green', background: 'lightgreen' }
+ *   ]}
+ * >
+ *   <ProgressCircleSVG>
+ *     <ProgressCircleIndicator />
+ *     <ProgressCircleTrack />
+ *   </ProgressCircleSVG>
+ *   <ProgressCircleValue />
+ * </ProgressCircleProvider>
+ * ```
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircleProvider({
+  __scopeProgressCircle,
+  children,
+  formatValue,
+  id: propertyId,
+  max = 100,
+  min = 0,
+  size = 48,
+  startAngle = -90,
+  strokeWidth = 4,
+  thresholds,
+  value,
+}: ScopedProps<ProgressCircleProviderProps>): ReactNode {
+  const uniqueId = useId();
+  const id = propertyId ?? uniqueId;
+
+  // Ensure size and stroke width are non-negative
+  const validSize = Math.max(0, size);
+  const validStrokeWidth = Math.max(0, strokeWidth);
+  const validStartAngle = startAngle % 360;
+
+  // Validate min and max, swap if min > max
+  let validMin = min;
+  let validMax = max;
+
+  if (validMin > validMax) {
+    [validMin, validMax] = [validMax, validMin];
+  }
+
+  // Handle indeterminate state
+  const isIndeterminate = value === null || value === undefined;
+  const clampedValue = isIndeterminate ? undefined : clamp(validMin, validMax, value);
+  const range = validMax - validMin;
+  const percentage = clampedValue !== undefined && range > 0 ? ((clampedValue - validMin) / range) * 100 : 0;
+  const valueText =
+    clampedValue !== undefined && formatValue ? formatValue(clampedValue) : `${Math.round(percentage).toString()}%`;
+
+  // Sort thresholds by value
+  const sortedThresholds = useMemo(
+    () => (thresholds && thresholds.length > 0 ? [...thresholds].toSorted((a, b) => a.value - b.value) : []),
+    [thresholds],
+  );
+
+  // Determine an active threshold based on a clamped value
+  const threshold = useMemo(() => {
+    if (clampedValue === undefined) {
+      return;
+    }
+
+    for (const sortedThreshold of sortedThresholds) {
+      if (clampedValue <= sortedThreshold.value) {
+        return sortedThreshold;
+      }
+    }
+
+    return sortedThresholds.at(-1);
+  }, [sortedThresholds, clampedValue]);
+
+  // Calculate circle properties
+  const center = validSize / 2;
+  const radius = Math.max(0, center - validStrokeWidth / 2);
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+  const rotationTransform = `rotate(${validStartAngle.toString()}, 0, 0)`;
+
+  return (
+    <ProgressCircleContextProvider
+      center={center}
+      circumference={circumference}
+      clampedValue={clampedValue} // Undefined for indeterminate
+      id={id}
+      max={validMax}
+      min={validMin}
+      radius={radius}
+      rotationTransform={rotationTransform}
+      scope={__scopeProgressCircle}
+      size={validSize}
+      strokeDashoffset={strokeDashoffset}
+      strokeWidth={validStrokeWidth}
+      threshold={threshold}
+      value={value ?? 0}
+      valueText={valueText}
+    >
+      {children}
+    </ProgressCircleContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircle
+ * --------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleProps = ComponentProps<"div">;
+
+/**
+ * Root component for the progress circle
+ *
+ * Serves as a wrapper for other progress circle components.
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircle({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleProps>): ReactNode {
+  return <div {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleSVG
+ * --------------------------------------------------------------------------- */
+
+const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleSVGProps = ComponentProps<"svg">;
+
+/**
+ * SVG container for the progress circle
+ *
+ * Renders the SVG with accessibility attributes and supports indeterminate state.
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircleSVG({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleSVGProps>): ReactNode {
+  const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(
+    PROGRESS_CIRCLE_SVG_NAME,
+    __scopeProgressCircle,
+  );
+
+  return (
+    <svg
+      aria-label="Progress"
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-valuenow={clampedValue} // Undefined for indeterminate state
+      aria-valuetext={clampedValue === undefined ? undefined : valueText}
+      height={size}
+      id={id}
+      role="progressbar"
+      viewBox={`0 0 ${size.toString()} ${size.toString()}`}
+      width={size}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleTrack
+ * --------------------------------------------------------------------------- */
+
+const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleTrackProps = ComponentProps<"circle">;
+
+/**
+ * Background circle for the progress indicator
+ *
+ * Renders the static track of the progress circle.
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircleTrack({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleTrackProps>): ReactNode {
+  const { center, radius, strokeWidth, threshold } = useProgressCircleContext(
+    PROGRESS_CIRCLE_TRACK_NAME,
+    __scopeProgressCircle,
+  );
+
+  return (
+    <circle
+      cx={center}
+      cy={center}
+      fill="transparent"
+      r={radius}
+      stroke={threshold?.background ?? "currentColor"}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleIndicator
+ * --------------------------------------------------------------------------- */
+
+const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleIndicatorProps = ComponentProps<"circle">;
+
+/**
+ * Foreground circle showing progress
+ *
+ * Renders the dynamic progress indicator with stroke dash properties.
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircleIndicator({
+  __scopeProgressCircle,
+  ...props
+}: ScopedProps<ProgressCircleIndicatorProps>): ReactNode {
+  const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold } =
+    useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
+
+  return (
+    <circle
+      cx={center}
+      cy={center}
+      fill="transparent"
+      r={radius}
+      stroke={threshold?.color ?? "currentColor"}
+      strokeDasharray={circumference}
+      strokeDashoffset={strokeDashoffset}
+      strokeLinecap="round"
+      strokeWidth={strokeWidth}
+      transform={rotationTransform}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ProgressCircleValue
+ * --------------------------------------------------------------------------- */
+
+const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ProgressCircleValueProps extends Omit<ComponentProps<"div">, "children"> {
+  children?: ((context: { value: number | undefined; valueText: string }) => ReactNode) | ReactNode;
+}
+
+/**
+ * Displays the current progress value
+ *
+ * Supports custom content or default value text rendering.
+ *
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircleValue({
+  __scopeProgressCircle,
+  children,
+  ...props
+}: ScopedProps<ProgressCircleValueProps>): ReactNode {
+  const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
+
+  if (typeof children === "function") {
+    return children({ value: clampedValue, valueText });
+  }
+
+  return <div {...props}>{children ?? valueText}</div>;
+}
+
+/* -----------------------------------------------------------------------------
+ * Helpers
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Clamps a value within a specified min/max range
+ *
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param value - Value to clamp
+ * @returns Clamped value
+ */
+function clamp(min: number, max: number, value: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  createProgressCircleScope,
+  ProgressCircleIndicator as Indicator,
+  ProgressCircle,
+  ProgressCircleIndicator,
+  ProgressCircleProvider,
+  ProgressCircleSVG,
+  ProgressCircleTrack,
+  ProgressCircleValue,
+  ProgressCircleProvider as Provider,
+  ProgressCircle as Root,
+  ProgressCircleSVG as SVG,
+  ProgressCircleTrack as Track,
+  ProgressCircleValue as Value,
+};
+
+export type {
+  ProgressCircleIndicatorProps,
+  ProgressCircleProps,
+  ProgressCircleProviderProps,
+  ProgressCircleSVGProps,
+  ProgressCircleTrackProps,
+  ProgressCircleValueProps,
+};

package/src/variants/alert.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Alert
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const alertVariants = tv({
+  base: "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertVariants = VariantProps<typeof alertVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { alertVariants };
+export type { AlertVariants };

package/src/variants/badge.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Badge
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const badgeVariants = tv({
+  base: "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+      destructive:
+        "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+      ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+      link: "text-primary underline-offset-4 hover:underline",
+      outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+      secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { badgeVariants };
+export type { BadgeVariants };

package/src/variants/button-group.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: ButtonGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const buttonGroupVariants = tv({
+  base: "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+  variants: {
+    orientation: {
+      horizontal:
+        "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
+      vertical:
+        "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { buttonGroupVariants };
+export type { ButtonGroupVariants };

package/src/variants/button.ts

@@ -0,0 +1,56 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Button
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const buttonVariants = tv({
+  base: "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    size: {
+      default:
+        "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", // 36px
+      xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", // 24px
+      sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", // 32px
+      lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", // 40px
+
+      icon: "size-9", // 36px
+      "icon-xs":
+        "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", // 24px
+      "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", // 32px
+      "icon-lg": "size-10", // 40px
+    },
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/80",
+      destructive:
+        "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+      ghost:
+        "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+      link: "text-primary underline-offset-4 hover:underline",
+      outline:
+        "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { buttonVariants };
+export type { ButtonVariants };