@hyunsdev/ui 0.1.0

package/dist/components/chart.js

@@ -0,0 +1,254 @@
+"use client";
+import {
+  cn
+} from "../chunk-DN2AEEA2.js";
+
+// src/components/chart.tsx
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var THEMES = { light: "", dark: ".dark" };
+var INITIAL_DIMENSION = { width: 320, height: 200 };
+var THEME_ENTRIES = [
+  ["light", THEMES.light],
+  ["dark", THEMES.dark]
+];
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension, children })
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([, config2]) => config2.theme ?? config2.color);
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: THEME_ENTRIES.map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-border/50 bg-background-primary grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color ?? item.payload?.fill ?? item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-text-muted flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && (() => {
+                  const indicatorStyle = {
+                    "--color-bg": indicatorColor,
+                    "--color-border": indicatorColor
+                  };
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                        {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed"
+                        }
+                      ),
+                      style: indicatorStyle
+                    }
+                  );
+                })(),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: itemConfig?.label ?? item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsx("span", { className: "text-text-normal font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${nameKey ?? item.dataKey ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-text-muted flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
+function getStringProperty(source, key) {
+  const entry = Object.entries(source).find(([entryKey]) => entryKey === key);
+  const value = entry?.[1];
+  return typeof value === "string" ? value : void 0;
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  const payloadValue = getStringProperty(payload, key);
+  const nestedPayloadValue = payloadPayload ? getStringProperty(payloadPayload, key) : void 0;
+  if (payloadValue !== void 0) {
+    configLabelKey = payloadValue;
+  } else if (nestedPayloadValue !== void 0) {
+    configLabelKey = nestedPayloadValue;
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nimport type { TooltipValueType } from \"recharts\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\nconst THEME_ENTRIES = [\n  [\"light\", THEMES.light],\n  [\"dark\", THEMES.dark],\n] as const\ntype TooltipNameType = number | string\ntype ChartIndicatorStyle = React.CSSProperties & {\n  \"--color-bg\"?: string\n  \"--color-border\"?: string\n}\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"]\n  initialDimension?: {\n    width: number\n    height: number\n  }\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color)\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: THEME_ENTRIES.map(\n          ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme] ?? itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`,\n        ).join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background-primary grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"[&>svg]:text-text-muted flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator &&\n                      (() => {\n                        const indicatorStyle: ChartIndicatorStyle = {\n                          \"--color-bg\": indicatorColor,\n                          \"--color-border\": indicatorColor,\n                        }\n\n                        return (\n                          <div\n                            className={cn(\n                              \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                              {\n                                \"h-2.5 w-2.5\": indicator === \"dot\",\n                                \"w-1\": indicator === \"line\",\n                                \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                  indicator === \"dashed\",\n                                \"my-0.5\": nestLabel && indicator === \"dashed\",\n                              },\n                            )}\n                            style={indicatorStyle}\n                          />\n                        )\n                      })()\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\",\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-text-muted\">{itemConfig?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"text-text-normal font-mono font-medium tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean\n  nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"[&>svg]:text-text-muted flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getStringProperty(source: object, key: string) {\n  const entry = Object.entries(source).find(([entryKey]) => entryKey === key)\n  const value = entry?.[1]\n\n  return typeof value === \"string\" ? value : undefined\n}\n\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  const payloadValue = getStringProperty(payload, key)\n  const nestedPayloadValue = payloadPayload ? getStringProperty(payloadPayload, key) : undefined\n\n  if (payloadValue !== undefined) {\n    configLabelKey = payloadValue\n  } else if (nestedPayloadValue !== undefined) {\n    configLabelKey = nestedPayloadValue\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"],"mappings":"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","names":["config"]}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  fieldFocusClass,
+  fieldInvalidClass
+} from "../chunk-O2BG2KSY.js";
+import {
+  cn
+} from "../chunk-DN2AEEA2.js";
+
+// src/components/checkbox.tsx
+import "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-field-border bg-field-background text-field-text disabled:bg-field-background-disabled aria-invalid:aria-checked:border-interactive-accent data-checked:border-interactive-accent data-checked:bg-interactive-accent data-checked:text-text-on-accent data-checked:hover:bg-interactive-accent-hover data-checked:hover:border-interactive-accent-hover data-checked:active:bg-interactive-accent-active-hover data-checked:active:border-interactive-accent-active-hover relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        fieldFocusClass,
+        fieldInvalidClass,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      )
+    }
+  );
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@hyunsdev/ui/lib/utils\"\n\nimport { fieldFocusClass, fieldInvalidClass } from \"./_styles\"\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-field-border bg-field-background text-field-text disabled:bg-field-background-disabled aria-invalid:aria-checked:border-interactive-accent data-checked:border-interactive-accent data-checked:bg-interactive-accent data-checked:text-text-on-accent data-checked:hover:bg-interactive-accent-hover data-checked:hover:border-interactive-accent-hover data-checked:active:bg-interactive-accent-active-hover data-checked:active:border-interactive-accent-active-hover relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        fieldFocusClass,\n        fieldInvalidClass,\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <CheckIcon />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;;AAEA,OAAuB;AAEvB,YAAY,uBAAuB;AACnC,SAAS,iBAAiB;AAsBlB;AAhBR,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAwD;AAC9F,SACE;AAAA,IAAmB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAmB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAEV,8BAAC,aAAU;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/code-block-core.d.ts

@@ -0,0 +1,3 @@
+export { d as CodeBlock, b as CodeBlockHighlighter, c as CodeBlockLineNumbers, e as CodeBlockProps, a as CodeBlockThemeMap } from '../code-block-core-xkE94Rk5.js';
+import 'react';
+import 'shiki';

package/dist/components/code-block-core.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  CodeBlockCore
+} from "../chunk-5JCWC7IU.js";
+import "../chunk-UXCBLYG6.js";
+import "../chunk-3RTSANKB.js";
+import "../chunk-TU5CYBB4.js";
+import "../chunk-O2BG2KSY.js";
+import "../chunk-DN2AEEA2.js";
+export {
+  CodeBlockCore as CodeBlock
+};
+//# sourceMappingURL=code-block-core.js.map

package/dist/components/code-block-core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/code-block-custom.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { C as CodeBlockCommonProps, a as CodeBlockThemeMap, b as CodeBlockHighlighter } from '../code-block-core-xkE94Rk5.js';
+export { c as CodeBlockLineNumbers } from '../code-block-core-xkE94Rk5.js';
+import { Awaitable, RegexEngine, LanguageInput, ThemeInput } from 'shiki';
+
+type CodeBlockShikiBundle<LanguageName extends string = string, ThemeName extends string = string> = {
+    engine?: () => Awaitable<RegexEngine>;
+    fallbackLanguage?: LanguageName | string;
+    languages: Record<LanguageName, LanguageInput>;
+    themeNames: CodeBlockThemeMap<ThemeName>;
+    themes: Record<ThemeName, ThemeInput>;
+};
+type CodeBlockCustomProps = CodeBlockCommonProps & {
+    fallbackLanguage?: string | undefined;
+    shiki: CodeBlockShikiBundle;
+};
+declare function createCodeBlockShikiHighlighter(shiki: CodeBlockShikiBundle): () => Promise<CodeBlockHighlighter>;
+declare function CodeBlockCustom({ fallbackLanguage, shiki, ...props }: CodeBlockCustomProps): React.JSX.Element;
+
+export { CodeBlockCustom as CodeBlock, CodeBlockHighlighter, type CodeBlockCustomProps as CodeBlockProps, type CodeBlockShikiBundle, CodeBlockThemeMap, createCodeBlockShikiHighlighter };

package/dist/components/code-block-custom.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  CodeBlockCustom,
+  createCodeBlockShikiHighlighter
+} from "../chunk-T64WPXSC.js";
+import "../chunk-5JCWC7IU.js";
+import "../chunk-UXCBLYG6.js";
+import "../chunk-3RTSANKB.js";
+import "../chunk-TU5CYBB4.js";
+import "../chunk-O2BG2KSY.js";
+import "../chunk-DN2AEEA2.js";
+export {
+  CodeBlockCustom as CodeBlock,
+  createCodeBlockShikiHighlighter
+};
+//# sourceMappingURL=code-block-custom.js.map

package/dist/components/code-block-custom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/code-block-shiki.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { C as CodeBlockCommonProps } from '../code-block-core-xkE94Rk5.js';
+export { c as CodeBlockLineNumbers, a as CodeBlockThemeMap } from '../code-block-core-xkE94Rk5.js';
+import { CodeBlockShikiBundle } from './code-block-custom.js';
+import 'shiki';
+
+type CodeBlockProps = CodeBlockCommonProps & {
+    fallbackLanguage?: string | undefined;
+    shiki?: CodeBlockShikiBundle;
+};
+declare function CodeBlock({ fallbackLanguage, shiki, ...props }: CodeBlockProps): React.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps, CodeBlockShikiBundle };

package/dist/components/code-block-shiki.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  CodeBlock
+} from "../chunk-D7W4RSQX.js";
+import "../chunk-T64WPXSC.js";
+import "../chunk-5JCWC7IU.js";
+import "../chunk-UXCBLYG6.js";
+import "../chunk-3RTSANKB.js";
+import "../chunk-TU5CYBB4.js";
+import "../chunk-O2BG2KSY.js";
+import "../chunk-DN2AEEA2.js";
+export {
+  CodeBlock
+};
+//# sourceMappingURL=code-block-shiki.js.map

package/dist/components/code-block-shiki.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/code-block.d.ts

@@ -0,0 +1,5 @@
+export { CodeBlock, CodeBlockProps } from './code-block-shiki.js';
+export { c as CodeBlockLineNumbers, a as CodeBlockThemeMap } from '../code-block-core-xkE94Rk5.js';
+export { CodeBlockShikiBundle } from './code-block-custom.js';
+import 'react';
+import 'shiki';

package/dist/components/code-block.js

@@ -0,0 +1,14 @@
+import {
+  CodeBlock
+} from "../chunk-D7W4RSQX.js";
+import "../chunk-T64WPXSC.js";
+import "../chunk-5JCWC7IU.js";
+import "../chunk-UXCBLYG6.js";
+import "../chunk-3RTSANKB.js";
+import "../chunk-TU5CYBB4.js";
+import "../chunk-O2BG2KSY.js";
+import "../chunk-DN2AEEA2.js";
+export {
+  CodeBlock
+};
+//# sourceMappingURL=code-block.js.map

package/dist/components/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/collapsible.d.ts

@@ -0,0 +1,8 @@
+import * as React$1 from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React$1.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React$1.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React$1.JSX.Element;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -0,0 +1,24 @@
+"use client";
+
+// src/components/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
+export {
+  Collapsible,
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleTrigger2 as CollapsibleTrigger
+};
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return <CollapsiblePrimitive.CollapsibleTrigger data-slot=\"collapsible-trigger\" {...props} />\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return <CollapsiblePrimitive.CollapsibleContent data-slot=\"collapsible-content\" {...props} />\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"],"mappings":";;;AAEA,YAAY,0BAA0B;AAG7B;AADT,SAAS,YAAY,EAAE,GAAG,MAAM,GAA2D;AACzF,SAAO,oBAAsB,2BAArB,EAA0B,aAAU,eAAe,GAAG,OAAO;AACvE;AAEA,SAASA,oBAAmB;AAAA,EAC1B,GAAG;AACL,GAAyE;AACvE,SAAO,oBAAsB,yCAArB,EAAwC,aAAU,uBAAuB,GAAG,OAAO;AAC7F;AAEA,SAASC,oBAAmB;AAAA,EAC1B,GAAG;AACL,GAAyE;AACvE,SAAO,oBAAsB,yCAArB,EAAwC,aAAU,uBAAuB,GAAG,OAAO;AAC7F;","names":["CollapsibleTrigger","CollapsibleContent"]}

package/dist/components/collection.d.ts

@@ -0,0 +1,63 @@
+import * as React$1 from 'react';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare function Collection({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionViewport({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+type PaginationItem = number | "ellipsis";
+declare function CollectionFooter({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionFooterStart({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionFooterCenter({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionFooterEnd({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function getPaginationItems(currentPage: number, totalPages: number): PaginationItem[];
+declare function CollectionPagination({ className, ...props }: React.ComponentProps<"nav">): React$1.JSX.Element;
+declare function CollectionPaginationPrev({ className, variant, size, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function CollectionPaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React$1.JSX.Element;
+type CollectionPaginationValueProps = React.ComponentProps<typeof Button> & {
+    isActive?: boolean;
+};
+declare function CollectionPaginationValue({ className, variant, size, isActive, applied, ...props }: CollectionPaginationValueProps): React$1.JSX.Element;
+declare function CollectionPaginationNext({ className, variant, size, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button>): React$1.JSX.Element;
+
+declare function CollectionGrid({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItem({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItemHeader({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItemContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItemTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItemDescription({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionGridItemFooter({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function CollectionHeader({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionActionBar({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionActionBarStart({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionActionBarEnd({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionActionButton({ className, variant, size, tooltip, ...props }: React.ComponentProps<typeof Button> & {
+    tooltip?: React.ReactNode;
+}): React$1.JSX.Element;
+declare function CollectionQueryBar({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionQueryBarStart({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionQueryBarEnd({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionQueryBarStatus({ className, children, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function CollectionList({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionListItem({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionListItemContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionListItemTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionListItemDescription({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionListItemMeta({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function CollectionTable({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function CollectionTableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function CollectionTableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function CollectionTableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function CollectionTableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function CollectionTableTextHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function CollectionTableMenuHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function CollectionTableMenuHeadInner({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionTableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function CollectionTableCellActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CollectionTableCellAction({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+
+export { Collection, CollectionActionBar, CollectionActionBarEnd, CollectionActionBarStart, CollectionActionButton, CollectionFooter, CollectionFooterCenter, CollectionFooterEnd, CollectionFooterStart, CollectionGrid, CollectionGridItem, CollectionGridItemContent, CollectionGridItemDescription, CollectionGridItemFooter, CollectionGridItemHeader, CollectionGridItemTitle, CollectionHeader, CollectionList, CollectionListItem, CollectionListItemContent, CollectionListItemDescription, CollectionListItemMeta, CollectionListItemTitle, CollectionPagination, CollectionPaginationEllipsis, CollectionPaginationNext, CollectionPaginationPrev, CollectionPaginationValue, CollectionQueryBar, CollectionQueryBarEnd, CollectionQueryBarStart, CollectionQueryBarStatus, CollectionTable, CollectionTableBody, CollectionTableCell, CollectionTableCellAction, CollectionTableCellActions, CollectionTableFooter, CollectionTableHeader, CollectionTableMenuHead, CollectionTableMenuHeadInner, CollectionTableRow, CollectionTableTextHead, CollectionViewport, getPaginationItems };