@codefast/ui 0.3.16-canary.1 → 0.3.16-canary.3

package/src/components/progress-circle.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import type { ProgressCircleVariants } from "#/variants/progress-circle";
+import type { ComponentProps, CSSProperties, JSX } from "react";
+
+import { useCallback, useMemo } from "react";
+
+import { progressCircleVariants } from "#/variants/progress-circle";
+
+import { useAnimatedValue } from "#/hooks/use-animated-value";
+import * as ProgressCirclePrimitive from "#/primitives/progress-circle";
+
+/* -------------------------------------------------------------------------------------------------
+ * Component: ProgressCircle
+ * ----------------------------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ProgressCircleProps
+  extends
+    Omit<ComponentProps<typeof ProgressCirclePrimitive.Provider>, "children" | "size">,
+    ProgressCircleVariants {
+  /**
+   * Enables animation effect when value changes
+   */
+  animate?: boolean;
+
+  /**
+   * Duration of the animation in milliseconds
+   */
+  animationDuration?: number;
+
+  /**
+   * CSS class to customize the entire component
+   */
+  className?: string;
+
+  /**
+   * CSS classes to customize specific parts of the component
+   */
+  classNames?: {
+    /**
+     * Class for the progress indicator
+     */
+    indicator?: string;
+
+    /**
+     * Class for the label in the center of the circle
+     */
+    label?: string;
+
+    /**
+     * Class for the root element of the component
+     */
+    root?: string;
+
+    /**
+     * Class for the SVG element
+     */
+    svg?: string;
+
+    /**
+     * Class for the circle track
+     */
+    track?: string;
+  };
+
+  /**
+   * Custom function to render content in the center of the circle
+   * @param value - Current value of the component
+   * @returns React element to display in the center of the circle
+   */
+  customLabel?: ({ value }: { value: number }) => JSX.Element;
+
+  /**
+   * Display the numeric value in the center of the circle
+   */
+  showValue?: boolean;
+
+  /**
+   * Custom size in pixels
+   * When provided, this value overrides the size variant option
+   */
+  sizeInPixels?: number;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ProgressCircle({
+  animate = true,
+  animationDuration = 1000,
+  className,
+  classNames,
+  customLabel,
+  showValue = false,
+  size,
+  sizeInPixels,
+  strokeWidth,
+  thickness = "regular",
+  value = 0,
+  variant = "default",
+  ...props
+}: ProgressCircleProps): JSX.Element {
+  const displayValue = useAnimatedValue(value, animationDuration, animate);
+
+  const actualSize = useMemo(() => sizeInPixels ?? getActualSize(size), [sizeInPixels, size]);
+
+  const actualThickness = useMemo(
+    () => strokeWidth ?? getStrokeWidth(thickness, actualSize),
+    [strokeWidth, thickness, actualSize],
+  );
+
+  const slots = useMemo(
+    () => progressCircleVariants({ size, thickness, variant }),
+    [variant, size, thickness],
+  );
+
+  const shouldShowLabel = showValue || Boolean(customLabel);
+
+  const renderLabel = useCallback(() => {
+    if (customLabel) {
+      return customLabel({ value: displayValue });
+    }
+
+    return `${displayValue.toString()}%`;
+  }, [customLabel, displayValue]);
+
+  return (
+    <ProgressCirclePrimitive.Provider
+      size={actualSize}
+      strokeWidth={actualThickness}
+      value={value}
+      {...props}
+    >
+      <ProgressCirclePrimitive.Root
+        className={slots.root({ className: [className, classNames?.root] })}
+      >
+        <ProgressCirclePrimitive.SVG className={slots.svg({ className: classNames?.svg })}>
+          <ProgressCirclePrimitive.Track
+            className={slots.track({ className: classNames?.track })}
+          />
+          <ProgressCirclePrimitive.Indicator
+            className={slots.indicator({ className: classNames?.indicator })}
+            style={
+              {
+                transitionDuration: `${animationDuration.toString()}ms`,
+                transitionProperty: "stroke-dashoffset",
+              } as CSSProperties
+            }
+          />
+        </ProgressCirclePrimitive.SVG>
+        {shouldShowLabel ? (
+          <ProgressCirclePrimitive.Value className={slots.label({ className: classNames?.label })}>
+            {renderLabel()}
+          </ProgressCirclePrimitive.Value>
+        ) : null}
+      </ProgressCirclePrimitive.Root>
+    </ProgressCirclePrimitive.Provider>
+  );
+}
+
+ProgressCircle.displayName = "ProgressCircle";
+
+/* -----------------------------------------------------------------------------
+ * Helpers
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Maps size variants to actual pixel sizes
+ */
+const getActualSize = (size?: ProgressCircleVariants["size"]): number => {
+  const sizeMap: Record<NonNullable<typeof size>, number> = {
+    "2xl": 128,
+    lg: 64,
+    md: 48,
+    sm: 32,
+    xl: 96,
+  };
+
+  return size ? sizeMap[size] : 48;
+};
+
+/**
+ * Calculates stroke width based on thickness variant and circle size
+ */
+const getStrokeWidth = (thickness: ProgressCircleVariants["thickness"], size: number): number => {
+  const thicknessMap: Record<NonNullable<typeof thickness>, number> = {
+    regular: Math.max(3, size * 0.05),
+    thick: Math.max(4, size * 0.075),
+    thin: Math.max(2, size * 0.025),
+  };
+
+  return thickness ? thicknessMap[thickness] : Math.max(3, size * 0.05);
+};
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ProgressCircle };
+export type { ProgressCircleProps };

package/src/components/progress.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+/* -----------------------------------------------------------------------------
+ * Component: Progress
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Progress({ className, value, ...props }: ProgressProps): JSX.Element {
+  return (
+    <ProgressPrimitive.Root
+      className={cn(
+        "relative",
+        "h-2 w-full overflow-hidden",
+        "rounded-full",
+        "bg-primary/20",
+        className,
+      )}
+      data-slot="progress"
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className={cn(
+          "size-full flex-1",
+          "bg-primary",
+          "transition-[transform] duration-500 ease-gentle",
+          "motion-reduce:transition-none motion-reduce:duration-0",
+        )}
+        data-slot="progress-indicator"
+        style={{
+          transform: `translateX(-${(100 - (value ?? 0)).toString()}%)`,
+        }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Progress };
+export type { ProgressProps };

package/src/components/radio-cards.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+import { Label } from "#/components/label";
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioCards
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type RadioCardsProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function RadioCards(props: RadioCardsProps): JSX.Element {
+  return <RadioGroupPrimitive.Root data-slot="radio-cards" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioCardsItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type RadioCardsItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function RadioCardsItem({ children, className, ...props }: RadioCardsItemProps): JSX.Element {
+  return (
+    <Label
+      className={cn(
+        "flex items-start gap-3",
+        "p-3",
+        "rounded-lg border border-input",
+        "transition",
+        "hover:not-has-disabled:not-has-aria-checked:bg-secondary",
+        "has-focus-visible:border-ring",
+        "has-disabled:opacity-50",
+        "has-aria-checked:border-primary has-aria-checked:bg-primary/10",
+      )}
+      data-slot="radio-card"
+    >
+      <RadioGroupPrimitive.Item
+        className={cn(
+          "peer flex size-4 shrink-0 items-center justify-center",
+          "rounded-full border border-input shadow-xs outline-hidden",
+          "text-primary-foreground",
+          "transition",
+          "focus-visible:ring-3 focus-visible:ring-ring/50",
+          "focus-visible:not-aria-checked:border-ring",
+          "aria-checked:border-primary aria-checked:bg-primary",
+          "focus-visible:aria-checked:ring-primary/20",
+          "dark:bg-input/30",
+          "dark:focus-visible:aria-checked:ring-primary/40",
+          className,
+        )}
+        data-slot="radio-card-item"
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className={cn("size-1", "rounded-full", "bg-background")}
+          data-slot="radio-card-indicator"
+        />
+      </RadioGroupPrimitive.Item>
+      {children}
+    </Label>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { RadioCards, RadioCardsItem };
+export type { RadioCardsItemProps, RadioCardsProps };

package/src/components/radio-group.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function RadioGroup({ className, ...props }: RadioGroupProps): JSX.Element {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      data-slot="radio-group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioGroupItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function RadioGroupItem({ className, ...props }: RadioGroupItemProps): JSX.Element {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        "peer inline-flex size-4 shrink-0 items-center justify-center",
+        "rounded-full border border-input shadow-xs outline-hidden",
+        "transition-[border-color,background-color,box-shadow] duration-150 ease-spring",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        "hover:not-disabled:not-aria-checked:border-ring/60",
+        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:opacity-50",
+        "aria-checked:border-primary aria-checked:bg-primary",
+        "focus-visible:aria-checked:ring-primary/20",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60",
+        "aria-checked:aria-invalid:bg-destructive",
+        "dark:bg-input/30",
+        "dark:focus-visible:aria-checked:ring-primary/40",
+        "dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-slot="radio-group-item"
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        className={cn("size-1", "rounded-full", "bg-background")}
+        data-slot="radio-group-indicator"
+      />
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { RadioGroup, RadioGroupItem };
+export type { RadioGroupItemProps, RadioGroupProps };

package/src/components/radio.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import { composeEventHandlers } from "@radix-ui/primitive";
+
+/* -----------------------------------------------------------------------------
+ * Component: Radio
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface RadioProps extends Omit<ComponentProps<"input">, "type"> {
+  onValueChange?: (value: string) => void;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Radio({ className, onChange, onValueChange, ...props }: RadioProps): JSX.Element {
+  return (
+    <input
+      className={cn(
+        "peer inline-flex size-4 shrink-0 items-center justify-center",
+        "rounded-full border border-input shadow-xs outline-hidden",
+        "appearance-none",
+        "after:size-full after:rounded-full after:bg-background after:transition-[width,height] after:duration-200 after:ease-spring",
+        "motion-reduce:after:transition-none motion-reduce:after:duration-0",
+        "checked:border-primary checked:bg-primary",
+        "checked:after:size-1",
+        "hover:not-disabled:not-checked:border-ring/60",
+        "focus-visible:ring-3 focus-visible:ring-ring/50",
+        "focus-visible:not-checked:border-ring",
+        "focus-visible:checked:ring-primary/20",
+        "disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "checked:aria-invalid:bg-destructive",
+        "hover:not-disabled:not-checked:aria-invalid:border-destructive/60",
+        "dark:not-checked:after:bg-input/30",
+        "dark:focus-visible:checked:ring-primary/40",
+        "dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-slot="radio"
+      type="radio"
+      onChange={composeEventHandlers(onChange, (event) =>
+        onValueChange?.(event.currentTarget.value),
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Radio };
+export type { RadioProps };

package/src/components/resizable.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizableGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ResizableGroupProps = ComponentProps<typeof ResizablePrimitive.Group>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ResizableGroup({ className, ...props }: ResizableGroupProps): JSX.Element {
+  return (
+    <ResizablePrimitive.Group
+      className={cn("flex size-full", className)}
+      data-slot="resizable-group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizablePanel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ResizablePanelProps = ComponentProps<typeof ResizablePrimitive.Panel>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ResizablePanel({ ...props }: ResizablePanelProps): JSX.Element {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizableSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ResizableSeparatorProps extends ComponentProps<typeof ResizablePrimitive.Separator> {
+  withHandle?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ResizableSeparator({
+  className,
+  withHandle,
+  ...props
+}: ResizableSeparatorProps): JSX.Element {
+  return (
+    <ResizablePrimitive.Separator
+      className={cn(
+        "flex items-center justify-center",
+        "bg-border outline-hidden",
+        "focus-visible:bg-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "aria-[orientation=horizontal]:h-px",
+        "aria-[orientation=vertical]:w-px",
+        className,
+      )}
+      data-slot="resizable-separator"
+      {...props}
+    >
+      {withHandle ? (
+        <div
+          className={cn(
+            "z-10 flex h-4 w-3 items-center justify-center",
+            "rounded-sm border",
+            "bg-border",
+          )}
+        >
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      ) : null}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ResizableGroup, ResizablePanel, ResizableSeparator };
+export type { ResizableGroupProps, ResizablePanelProps, ResizableSeparatorProps };

package/src/components/scroll-area.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import type { ScrollAreaScrollbarVariants } from "#/variants/scroll-area";
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+import { scrollAreaScrollbarVariants } from "#/variants/scroll-area";
+import { createContextScope } from "@radix-ui/react-context";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+/* -----------------------------------------------------------------------------
+ * Context: ScrollArea
+ * -------------------------------------------------------------------------- */
+
+const SCROLL_AREA_NAME = "ScrollArea";
+
+type ScopedProps<P> = P & { __scopeScrollArea?: Scope };
+
+const [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
+
+type ScrollAreaContextValue = Pick<ScrollAreaScrollbarVariants, "size">;
+
+const [ScrollAreaContextProvider, useScrollAreaContext] =
+  createScrollAreaContext<ScrollAreaContextValue>(SCROLL_AREA_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: ScrollArea
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ScrollAreaProps = ScopedProps<
+  ComponentProps<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue
+>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ScrollArea({
+  __scopeScrollArea,
+  children,
+  className,
+  size,
+  ...props
+}: ScrollAreaProps): JSX.Element {
+  return (
+    <ScrollAreaContextProvider scope={__scopeScrollArea} size={size}>
+      <ScrollAreaPrimitive.Root
+        className={cn("relative", className)}
+        data-slot="scroll-area"
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          className={cn(
+            "size-full",
+            "rounded-[inherit] ring-ring/50 outline-ring",
+            "transition-[box-shadow] duration-150 ease-snappy",
+            "motion-reduce:transition-none motion-reduce:duration-0",
+            "focus-visible:ring-4 focus-visible:outline-1",
+          )}
+          data-slot="scroll-area-viewport"
+        >
+          {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollAreaScrollbar orientation="vertical" />
+        <ScrollAreaScrollbar orientation="horizontal" />
+        <ScrollAreaPrimitive.Corner />
+      </ScrollAreaPrimitive.Root>
+    </ScrollAreaContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ScrollAreaScrollbar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ScrollAreaScrollbarProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ScrollAreaScrollbar({
+  __scopeScrollArea,
+  className,
+  orientation,
+  ...props
+}: ScrollAreaScrollbarProps): JSX.Element {
+  const { size } = useScrollAreaContext(SCROLL_AREA_NAME, __scopeScrollArea);
+
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={scrollAreaScrollbarVariants({ className, orientation, size })}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        className={cn("relative flex-1", "rounded-full", "bg-border")}
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ScrollArea, ScrollAreaScrollbar };
+export type { ScrollAreaProps, ScrollAreaScrollbarProps };