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

package/src/components/chart.tsx

@@ -0,0 +1,536 @@
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, ComponentType, CSSProperties, JSX, ReactNode } from "react";
+import { useId, useMemo } from "react";
+import type { TooltipContentProps, TooltipProps } from "recharts";
+import * as RechartsPrimitive from "recharts";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Type Definitions and Utilities
+ * -------------------------------------------------------------------------- */
+
+type ExtractProps<T> = T extends (props: infer P) => ReactNode ? P : never;
+
+type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/* -----------------------------------------------------------------------------
+ * Chart Configuration and Theme Constants
+ * --------------------------------------------------------------------------- */
+
+const THEMES = { dark: ".dark", light: "" } as const;
+
+const INITIAL_DIMENSION = { height: 200, width: 320 } as const;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ChartConfig = Record<
+  string,
+  {
+    label?: ReactNode;
+    icon?: ComponentType;
+  } & ({ color?: never; theme: Record<keyof typeof THEMES, string> } | { color?: string; theme?: never })
+>;
+
+/* -----------------------------------------------------------------------------
+ * Context: ChartProvider
+ * --------------------------------------------------------------------------- */
+
+const CHART_PROVIDER_NAME = "ChartProvider";
+
+type ScopedProps<P> = P & { __scopeChart?: Context.Scope };
+
+/**
+ * Value provided by Chart Context
+ */
+interface ChartContextValue {
+  /**
+   * Display configuration for the chart
+   */
+  config: ChartConfig;
+}
+
+const [createChartContext, createChartScope] = Context.createContextScope(CHART_PROVIDER_NAME);
+
+const [ChartContextProvider, useChartContext] = createChartContext<ChartContextValue>(CHART_PROVIDER_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: Chart
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ChartContainerProps extends ComponentProps<"div"> {
+  children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  config: ChartConfig;
+  initialDimension?: {
+    height: number;
+    width: number;
+  };
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ChartContainer({
+  __scopeChart,
+  children,
+  className,
+  config,
+  id,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: ScopedProps<ChartContainerProps>): JSX.Element {
+  const uniqueId = useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContextProvider config={config} scope={__scopeChart}>
+      <div
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        data-chart={chartId}
+        data-slot="chart"
+        {...props}
+      >
+        <ChartStyle config={config} id={chartId} />
+        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ChartStyle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ChartStyleProps {
+  config: ChartConfig;
+  id: string;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ChartStyle({ config, id }: ChartStyleProps): ReactNode {
+  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme ?? itemConfig.color);
+
+  if (colorConfig.length === 0) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: generateChartStyles(id, colorConfig),
+      }}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ChartTooltip
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+/* -----------------------------------------------------------------------------
+ * Component: ChartTooltipContent
+ * -------------------------------------------------------------------------- */
+
+const CHART_TOOLTIP_CONTENT_NAME = "ChartTooltipContent";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<
+  MakeOptional<
+    TooltipContentProps<TValue, TName>,
+    "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload"
+  >,
+  "payload"
+> & {
+  hideIndicator?: boolean;
+  hideLabel?: boolean;
+  indicator?: "dashed" | "dot" | "line";
+  labelKey?: string;
+  nameKey?: string;
+  color?: string | undefined;
+  className?: string | undefined;
+  payload?: Array<Payload<TValue, TName>>;
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
+  __scopeChart,
+  active,
+  className,
+  color,
+  formatter,
+  hideIndicator = false,
+  hideLabel = false,
+  indicator = "dot",
+  label,
+  labelClassName,
+  labelFormatter,
+  labelKey,
+  nameKey,
+  payload = [],
+}: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode {
+  const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
+
+  const tooltipLabel = useMemo((): ReactNode => {
+    if (hideLabel || payload.length === 0) {
+      return null;
+    }
+
+    const item = payload[0];
+    if (item === undefined) {
+      return null;
+    }
+    const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? "value");
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const configEntry = typeof label === "string" && label in config ? config[label] : undefined;
+    const value =
+      !labelKey && typeof label === "string"
+        ? configEntry !== undefined
+          ? (configEntry.label ?? label)
+          : label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+  if (!active || payload.length === 0) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {nestLabel ? null : tooltipLabel}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? "value");
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor =
+            color ??
+            (isRecord(item.payload) && "fill" in item.payload && typeof item.payload.fill === "string"
+              ? item.payload.fill
+              : undefined) ??
+            item.color;
+
+          return (
+            <div
+              key={key}
+              className={cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center",
+              )}
+            >
+              {formatter && item.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, [item])
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "my-0.5": nestLabel && indicator === "dashed",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                          "w-1": indicator === "line",
+                        })}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center")}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">{itemConfig?.label ?? item.name}</span>
+                    </div>
+                    {item.value != null && (
+                      <span className="font-mono font-medium text-foreground tabular-nums">
+                        {typeof item.value === "number" ? item.value.toLocaleString() : safeToString(item.value)}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ChartLegend
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const ChartLegend: typeof RechartsPrimitive.Legend = RechartsPrimitive.Legend;
+
+/* -----------------------------------------------------------------------------
+ * Component: ChartLegendContent
+ * -------------------------------------------------------------------------- */
+
+const CHART_LEGEND_CONTENT_NAME = "ChartLegendContent";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ChartLegendContentProps = ComponentProps<"div"> &
+  ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  };
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ChartLegendContent({
+  __scopeChart,
+  className,
+  hideIcon = false,
+  nameKey,
+  payload,
+  verticalAlign = "bottom",
+}: ScopedProps<ChartLegendContentProps>): ReactNode {
+  const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
+      {payload.map((item) => {
+        let key = "value";
+
+        if (nameKey) {
+          key = nameKey;
+        } else if (item.dataKey != null) {
+          key = safeToString(item.dataKey);
+        }
+
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? "")}
+            className="flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-xs"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Helpers
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Type guard to check if an unknown value is a record with string keys
+ */
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+/**
+ * Safely gets a string value from a record by key
+ */
+function getStringValue(record: Record<string, unknown>, key: string): string | undefined {
+  if (key in record) {
+    const value = record[key];
+
+    return typeof value === "string" ? value : undefined;
+  }
+
+  return undefined;
+}
+
+/**
+ * Safely converts a value to string without type coercion
+ */
+function safeToString(value: unknown): string {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (typeof value === "number") {
+    return value.toString();
+  }
+
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  if (typeof value === "boolean") {
+    return value.toString();
+  }
+
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
+
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+
+  // For objects, arrays, functions, and other complex types, return empty string to avoid [object Object]
+  return "";
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+): ChartConfig[string] | undefined {
+  if (!isRecord(payload)) {
+    return undefined;
+  }
+
+  const payloadPayload = isRecord(payload.payload) ? payload.payload : undefined;
+  let configLabelKey: string = key;
+
+  // Try to get the config key from the payload first
+  const payloadValue = getStringValue(payload, key);
+
+  if (payloadValue) {
+    configLabelKey = payloadValue;
+  } else if (payloadPayload) {
+    // If not found in the payload, try the nested payload
+    const nestedValue = getStringValue(payloadPayload, key);
+
+    if (nestedValue) {
+      configLabelKey = nestedValue;
+    }
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+/**
+ * Generates CSS custom property for a specific theme and config item
+ */
+function generateCssVariable(key: string, itemConfig: ChartConfig[string], theme: string): null | string {
+  const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;
+
+  return color ? `  --color-${key}: ${color};` : null;
+}
+
+/**
+ * Generates CSS rules for a specific theme
+ */
+function generateThemeStyles(
+  theme: string,
+  prefix: string,
+  id: string,
+  colorConfig: Array<[string, ChartConfig[string]]>,
+): string {
+  const cssVariables = colorConfig
+    .map(([key, itemConfig]) => generateCssVariable(key, itemConfig, theme))
+    .filter(Boolean)
+    .join("\n");
+
+  return `${prefix} [data-chart=${id}] {\n${cssVariables}\n}`;
+}
+
+/**
+ * Generates complete CSS styles for all themes
+ */
+function generateChartStyles(id: string, colorConfig: Array<[string, ChartConfig[string]]>): string {
+  return Object.entries(THEMES)
+    .map(([theme, prefix]) => generateThemeStyles(theme, prefix, id, colorConfig))
+    .join("\n\n");
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export type {
+  ChartConfig,
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartLegendProps,
+  ChartStyleProps,
+  ChartTooltipContentProps,
+  ChartTooltipProps,
+};
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  createChartScope,
+};

package/src/components/checkbox-cards.tsx

@@ -0,0 +1,72 @@
+import { CheckIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
+
+import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
+import * as CheckboxGroupPrimitive from "#/primitives/checkbox-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCards
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CheckboxCardsProps = ComponentProps<typeof CheckboxGroupPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CheckboxCards(props: CheckboxCardsProps): JSX.Element {
+  return <CheckboxGroupPrimitive.Root data-slot="checkbox-cards" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCardsItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface CheckboxCardsItemProps extends ComponentProps<typeof CheckboxGroupPrimitive.Item> {
+  checkboxClassName?: string;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CheckboxCardsItem({ checkboxClassName, children, className, ...props }: CheckboxCardsItemProps): JSX.Element {
+  return (
+    <Label
+      className={cn(
+        "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",
+        className,
+      )}
+      data-slot="checkbox-card"
+    >
+      <CheckboxGroupPrimitive.Item
+        className={cn(
+          "peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 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",
+          checkboxClassName,
+        )}
+        data-slot="checkbox-card-item"
+        {...props}
+      >
+        <CheckboxGroupPrimitive.CheckboxGroupIndicator
+          className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+          data-slot="checkbox-card-indicator"
+        >
+          <CheckIcon />
+        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+      </CheckboxGroupPrimitive.Item>
+      {children}
+    </Label>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxCards, CheckboxCardsItem };
+export type { CheckboxCardsItemProps, CheckboxCardsProps };

package/src/components/checkbox-group.tsx

@@ -0,0 +1,60 @@
+import { CheckIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as CheckboxGroupPrimitive from "#/primitives/checkbox-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CheckboxGroup({ className, ...props }: CheckboxGroupProps): JSX.Element {
+  return <CheckboxGroupPrimitive.Root className={cn("grid gap-2", className)} data-slot="checkbox-group" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroupItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CheckboxGroupItemProps = ComponentProps<typeof CheckboxGroupPrimitive.Item>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CheckboxGroupItem({ className, ...props }: CheckboxGroupItemProps): JSX.Element {
+  return (
+    <CheckboxGroupPrimitive.Item
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 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="checkbox-group-item"
+      {...props}
+    >
+      <CheckboxGroupPrimitive.CheckboxGroupIndicator
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+        data-slot="checkbox-group-indicator"
+      >
+        <CheckIcon />
+      </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+    </CheckboxGroupPrimitive.Item>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxGroup, CheckboxGroupItem };
+export type { CheckboxGroupItemProps, CheckboxGroupProps };