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

package/src/components/progress-circle.tsx

@@ -0,0 +1,185 @@
+import type { ComponentProps, CSSProperties, JSX } from "react";
+import { useCallback, useMemo } from "react";
+
+import { useAnimatedValue } from "#/hooks/use-animated-value";
+import * as ProgressCirclePrimitive from "#/primitives/progress-circle";
+import type { ProgressCircleVariants } from "#/variants/progress-circle";
+import { progressCircleVariants } from "#/variants/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,41 @@
+import { Progress as ProgressPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * 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 flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted", className)}
+      data-slot="progress"
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="size-full flex-1 bg-primary transition-all"
+        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,66 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * 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="flex items-start gap-3 rounded-md border border-input p-3 transition has-focus-visible:border-ring has-disabled:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5"
+      data-slot="radio-card"
+    >
+      <RadioGroupPrimitive.Item
+        className={cn(
+          "peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+          className,
+        )}
+        data-slot="radio-card-item"
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className="flex size-4 items-center justify-center"
+          data-slot="radio-card-indicator"
+        >
+          <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+      {children}
+    </Label>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { RadioCards, RadioCardsItem };
+export type { RadioCardsItemProps, RadioCardsProps };

package/src/components/radio-group.tsx

@@ -0,0 +1,59 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * 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 w-full gap-3", 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(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
+      )}
+      data-slot="radio-group-item"
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        className="flex size-4 items-center justify-center"
+        data-slot="radio-group-indicator"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { RadioGroup, RadioGroupItem };
+export type { RadioGroupItemProps, RadioGroupProps };

package/src/components/radio.tsx

@@ -0,0 +1,40 @@
+import { composeEventHandlers } from "radix-ui/internal";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * 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 relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input shadow-xs outline-none before:size-full before:rounded-full before:bg-background after:absolute after:-inset-x-3 after:-inset-y-2 checked:border-primary checked:bg-primary checked:before:size-2 checked:before:bg-primary-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-checked:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 checked:aria-invalid:bg-destructive dark:not-checked:before:bg-input/30 dark:aria-invalid:border-destructive/50 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,78 @@
+import type { ComponentProps, JSX } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * 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 h-full w-full aria-[orientation=vertical]:flex-col", 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(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className,
+      )}
+      data-slot="resizable-separator"
+      {...props}
+    >
+      {withHandle ? <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" /> : null}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ResizableGroup, ResizablePanel, ResizableSeparator };
+export type { ResizableGroupProps, ResizablePanelProps, ResizableSeparatorProps };

package/src/components/scroll-area.tsx

@@ -0,0 +1,95 @@
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import type { ScrollAreaScrollbarVariants } from "#/variants/scroll-area";
+import { scrollAreaScrollbarVariants } from "#/variants/scroll-area";
+
+/* -----------------------------------------------------------------------------
+ * Context: ScrollArea
+ * -------------------------------------------------------------------------- */
+
+const SCROLL_AREA_NAME = "ScrollArea";
+
+type ScopedProps<P> = P & { __scopeScrollArea?: Context.Scope };
+
+const [createScrollAreaContext] = Context.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="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 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-orientation={orientation}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        className="relative flex-1 rounded-full bg-border"
+        data-slot="scroll-area-thumb"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ScrollArea, ScrollAreaScrollbar };
+export type { ScrollAreaProps, ScrollAreaScrollbarProps };