@aiready/components 0.1.0

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/separator.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACFA,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACtB,CACE,EAAE,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,aAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EACrE,GAAA,qBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAM,aAAa,MAAA,GAAS,WAAA;AAAA,MAC5B,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,WAAA,KAAgB,eAAe,gBAAA,GAAmB,gBAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"separator.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n  decorative?: boolean;\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative = true, ...props },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={orientation}\n      className={cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = 'Separator';\n\nexport { Separator };"]}

package/dist/components/stack.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'horizontal' | 'vertical';
+    spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+}
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Stack, type StackProps };

package/dist/components/stack.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/stack.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Stack = React.forwardRef(
+  ({
+    className,
+    direction = "vertical",
+    spacing = "md",
+    align = "stretch",
+    justify = "start",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex",
+          {
+            "flex-col": direction === "vertical",
+            "flex-row": direction === "horizontal"
+          },
+          {
+            "gap-1": spacing === "xs",
+            "gap-2": spacing === "sm",
+            "gap-4": spacing === "md",
+            "gap-6": spacing === "lg",
+            "gap-8": spacing === "xl"
+          },
+          {
+            "items-start": align === "start",
+            "items-center": align === "center",
+            "items-end": align === "end",
+            "items-stretch": align === "stretch"
+          },
+          {
+            "justify-start": justify === "start",
+            "justify-center": justify === "center",
+            "justify-end": justify === "end",
+            "justify-between": justify === "between",
+            "justify-around": justify === "around"
+          },
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+
+export { Stack };
+//# sourceMappingURL=stack.js.map
+//# sourceMappingURL=stack.js.map

package/dist/components/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/stack.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,SAAA,GAAY,UAAA;AAAA,IACZ,OAAA,GAAU,IAAA;AAAA,IACV,KAAA,GAAQ,SAAA;AAAA,IACR,OAAA,GAAU,OAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,MAAA;AAAA,UACA;AAAA,YACE,YAAY,SAAA,KAAc,UAAA;AAAA,YAC1B,YAAY,SAAA,KAAc;AAAA,WAC5B;AAAA,UACA;AAAA,YACE,SAAS,OAAA,KAAY,IAAA;AAAA,YACrB,SAAS,OAAA,KAAY,IAAA;AAAA,YACrB,SAAS,OAAA,KAAY,IAAA;AAAA,YACrB,SAAS,OAAA,KAAY,IAAA;AAAA,YACrB,SAAS,OAAA,KAAY;AAAA,WACvB;AAAA,UACA;AAAA,YACE,eAAe,KAAA,KAAU,OAAA;AAAA,YACzB,gBAAgB,KAAA,KAAU,QAAA;AAAA,YAC1B,aAAa,KAAA,KAAU,KAAA;AAAA,YACvB,iBAAiB,KAAA,KAAU;AAAA,WAC7B;AAAA,UACA;AAAA,YACE,iBAAiB,OAAA,KAAY,OAAA;AAAA,YAC7B,kBAAkB,OAAA,KAAY,QAAA;AAAA,YAC9B,eAAe,OAAA,KAAY,KAAA;AAAA,YAC3B,mBAAmB,OAAA,KAAY,SAAA;AAAA,YAC/B,kBAAkB,OAAA,KAAY;AAAA,WAChC;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"stack.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'horizontal' | 'vertical';\n  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around';\n}\n\nconst Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  (\n    {\n      className,\n      direction = 'vertical',\n      spacing = 'md',\n      align = 'stretch',\n      justify = 'start',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          {\n            'flex-col': direction === 'vertical',\n            'flex-row': direction === 'horizontal',\n          },\n          {\n            'gap-1': spacing === 'xs',\n            'gap-2': spacing === 'sm',\n            'gap-4': spacing === 'md',\n            'gap-6': spacing === 'lg',\n            'gap-8': spacing === 'xl',\n          },\n          {\n            'items-start': align === 'start',\n            'items-center': align === 'center',\n            'items-end': align === 'end',\n            'items-stretch': align === 'stretch',\n          },\n          {\n            'justify-start': justify === 'start',\n            'justify-center': justify === 'center',\n            'justify-end': justify === 'end',\n            'justify-between': justify === 'between',\n            'justify-around': justify === 'around',\n          },\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nStack.displayName = 'Stack';\n\nexport { Stack };"]}

package/dist/components/switch.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Switch, type SwitchProps };

package/dist/components/switch.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/switch.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Switch = React.forwardRef(
+  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {
+    const switchId = id || React.useId();
+    const handleChange = (e) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: switchId, className: "relative inline-flex cursor-pointer items-center", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: switchId,
+            ref,
+            checked,
+            onChange: handleChange,
+            className: "peer sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              'peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+              className
+            )
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/switch.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,EAAA,EAAI,OAAA,EAAS,eAAA,EAAiB,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC/E,IAAA,MAAM,QAAA,GAAW,MAAY,KAAA,CAAA,KAAA,EAAM;AAEnC,IAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,MAAA,QAAA,GAAW,CAAC,CAAA;AACZ,MAAA,eAAA,GAAkB,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,IACpC,CAAA;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,OAAA,EAAS,QAAA,EAAU,SAAA,EAAU,kDAAA,EAClC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,UAAA;AAAA,YACL,EAAA,EAAI,QAAA;AAAA,YACJ,GAAA;AAAA,YACA,OAAA;AAAA,YACA,QAAA,EAAU,YAAA;AAAA,YACV,SAAA,EAAU,cAAA;AAAA,YACT,GAAG;AAAA;AAAA,SACN;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,ucAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF,OAAA,EACF,CAAA;AAAA,MACC,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4CACb,QAAA,EAAA,KAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"switch.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface SwitchProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {\n    const switchId = id || React.useId();\n    \n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e);\n      onCheckedChange?.(e.target.checked);\n    };\n    \n    return (\n      <div className=\"flex items-center\">\n        <label htmlFor={switchId} className=\"relative inline-flex cursor-pointer items-center\">\n          <input\n            type=\"checkbox\"\n            id={switchId}\n            ref={ref}\n            checked={checked}\n            onChange={handleChange}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          <div\n            className={cn(\n              'peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[\"\"] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n              className\n            )}\n          />\n        </label>\n        {label && (\n          <span className=\"ml-3 text-sm font-medium text-foreground\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nSwitch.displayName = 'Switch';\n\nexport { Switch };"]}

package/dist/components/textarea.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/textarea.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+//# sourceMappingURL=textarea.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/textarea.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACJA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChC,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sSAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"textarea.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names using clsx and tailwind-merge\n * @param inputs - Class values to merge\n * @returns Merged class names\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import * as React from 'react';\nimport { cn } from '../utils/cn';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };"]}

package/dist/hooks/useD3.d.ts

@@ -0,0 +1,6 @@
+import * as d3 from 'd3';
+
+declare function useD3<T extends SVGSVGElement | HTMLDivElement>(renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void, dependencies?: React.DependencyList): React.RefObject<T | null>;
+declare function useD3WithResize<T extends SVGSVGElement | HTMLDivElement>(renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void, dependencies?: React.DependencyList): React.RefObject<T | null>;
+
+export { useD3, useD3WithResize };

package/dist/hooks/useD3.js

@@ -0,0 +1,35 @@
+import { useRef, useEffect } from 'react';
+import * as d3 from 'd3';
+
+// src/hooks/useD3.ts
+function useD3(renderFn, dependencies = []) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      const selection = d3.select(ref.current);
+      renderFn(selection);
+    }
+  }, dependencies);
+  return ref;
+}
+function useD3WithResize(renderFn, dependencies = []) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const selection = d3.select(ref.current);
+    const render = () => renderFn(selection);
+    render();
+    const resizeObserver = new ResizeObserver(() => {
+      render();
+    });
+    resizeObserver.observe(ref.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, dependencies);
+  return ref;
+}
+
+export { useD3, useD3WithResize };
+//# sourceMappingURL=useD3.js.map
+//# sourceMappingURL=useD3.js.map

package/dist/hooks/useD3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useD3.ts"],"names":[],"mappings":";;;;AAkDO,SAAS,KAAA,CACd,QAAA,EACA,YAAA,GAAqC,EAAC,EACX;AAC3B,EAAA,MAAM,GAAA,GAAM,OAAiB,IAAI,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAA,EAAS;AACf,MAAA,MAAM,SAAA,GAAe,EAAA,CAAA,MAAA,CAAO,GAAA,CAAI,OAAO,CAAA;AACvC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA,IACpB;AAAA,EAEF,GAAG,YAAY,CAAA;AAEf,EAAA,OAAO,GAAA;AACT;AA6BO,SAAS,eAAA,CACd,QAAA,EACA,YAAA,GAAqC,EAAC,EACX;AAC3B,EAAA,MAAM,GAAA,GAAM,OAAiB,IAAI,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,MAAM,SAAA,GAAe,EAAA,CAAA,MAAA,CAAO,GAAA,CAAI,OAAO,CAAA;AACvC,IAAA,MAAM,MAAA,GAAS,MAAM,QAAA,CAAS,SAAS,CAAA;AAGvC,IAAA,MAAA,EAAO;AAGP,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,MAAM;AAC9C,MAAA,MAAA,EAAO;AAAA,IACT,CAAC,CAAA;AAED,IAAA,cAAA,CAAe,OAAA,CAAQ,IAAI,OAAO,CAAA;AAGlC,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,UAAA,EAAW;AAAA,IAC5B,CAAA;AAAA,EAEF,GAAG,YAAY,CAAA;AAEf,EAAA,OAAO,GAAA;AACT","file":"useD3.js","sourcesContent":["import { useEffect, useRef } from 'react';\nimport * as d3 from 'd3';\n\n/**\n * Hook for managing D3 selections with React lifecycle\n * Provides a ref to the SVG/container element and runs a render function when dependencies change\n *\n * @param renderFn - Function that receives the D3 selection and performs rendering\n * @param dependencies - Array of dependencies that trigger re-render\n * @returns Ref to attach to the SVG/container element\n *\n * @example\n * ```tsx\n * function BarChart({ data }: { data: number[] }) {\n *   const ref = useD3(\n *     (svg) => {\n *       const width = 600;\n *       const height = 400;\n *       const margin = { top: 20, right: 20, bottom: 30, left: 40 };\n *\n *       // Clear previous content\n *       svg.selectAll('*').remove();\n *\n *       // Set up scales\n *       const x = d3.scaleBand()\n *         .domain(data.map((_, i) => i.toString()))\n *         .range([margin.left, width - margin.right])\n *         .padding(0.1);\n *\n *       const y = d3.scaleLinear()\n *         .domain([0, d3.max(data) || 0])\n *         .range([height - margin.bottom, margin.top]);\n *\n *       // Draw bars\n *       svg.selectAll('rect')\n *         .data(data)\n *         .join('rect')\n *         .attr('x', (_, i) => x(i.toString())!)\n *         .attr('y', d => y(d))\n *         .attr('width', x.bandwidth())\n *         .attr('height', d => y(0) - y(d))\n *         .attr('fill', 'steelblue');\n *     },\n *     [data]\n *   );\n *\n *   return <svg ref={ref} width={600} height={400} />;\n * }\n * ```\n */\nexport function useD3<T extends SVGSVGElement | HTMLDivElement>(\n  renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void,\n  dependencies: React.DependencyList = []\n): React.RefObject<T | null> {\n  const ref = useRef<T | null>(null);\n\n  useEffect(() => {\n    if (ref.current) {\n      const selection = d3.select(ref.current);\n      renderFn(selection);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return ref;\n}\n\n/**\n * Hook for managing D3 selections with automatic resize handling\n * Similar to useD3 but also triggers re-render on window resize\n *\n * @param renderFn - Function that receives the D3 selection and performs rendering\n * @param dependencies - Array of dependencies that trigger re-render\n * @returns Ref to attach to the SVG/container element\n *\n * @example\n * ```tsx\n * function ResponsiveChart({ data }: { data: number[] }) {\n *   const ref = useD3WithResize(\n *     (svg) => {\n *       const container = svg.node();\n *       const width = container?.clientWidth || 600;\n *       const height = container?.clientHeight || 400;\n *\n *       // Render with responsive dimensions\n *       // ...\n *     },\n *     [data]\n *   );\n *\n *   return <svg ref={ref} style={{ width: '100%', height: '400px' }} />;\n * }\n * ```\n */\nexport function useD3WithResize<T extends SVGSVGElement | HTMLDivElement>(\n  renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void,\n  dependencies: React.DependencyList = []\n): React.RefObject<T | null> {\n  const ref = useRef<T | null>(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const selection = d3.select(ref.current);\n    const render = () => renderFn(selection);\n\n    // Initial render\n    render();\n\n    // Set up resize observer\n    const resizeObserver = new ResizeObserver(() => {\n      render();\n    });\n\n    resizeObserver.observe(ref.current);\n\n    // Cleanup\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return ref;\n}"]}

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,3 @@
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+export { useDebounce };

package/dist/hooks/useDebounce.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+// src/hooks/useDebounce.ts
+function useDebounce(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export { useDebounce };
+//# sourceMappingURL=useDebounce.js.map
+//# sourceMappingURL=useDebounce.js.map

package/dist/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useDebounce.ts"],"names":[],"mappings":";;;AA2BO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAgB,GAAA,EAAQ;AAC/D,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAY,KAAK,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,KAAA,GAAQ,WAAW,MAAM;AAC7B,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,IACzB,GAAG,KAAK,CAAA;AAGR,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT","file":"useDebounce.js","sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Debounce a value with a specified delay\n * Useful for search inputs, filters, and other frequently changing values\n *\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds (default: 300ms)\n * @returns The debounced value\n *\n * @example\n * ```tsx\n * function SearchInput() {\n *   const [searchTerm, setSearchTerm] = useState('');\n *   const debouncedSearchTerm = useDebounce(searchTerm, 500);\n *\n *   useEffect(() => {\n *     // This will only run when user stops typing for 500ms\n *     if (debouncedSearchTerm) {\n *       performSearch(debouncedSearchTerm);\n *     }\n *   }, [debouncedSearchTerm]);\n *\n *   return <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />;\n * }\n * ```\n */\nexport function useDebounce<T>(value: T, delay: number = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    // Set up the timeout to update debounced value after delay\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Clean up the timeout if value changes or component unmounts\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}"]}

package/dist/hooks/useForceSimulation.d.ts

@@ -0,0 +1,39 @@
+import * as d3 from 'd3';
+
+interface SimulationNode extends d3.SimulationNodeDatum {
+    id: string;
+    [key: string]: any;
+}
+interface SimulationLink extends d3.SimulationLinkDatum<SimulationNode> {
+    source: string | SimulationNode;
+    target: string | SimulationNode;
+    [key: string]: any;
+}
+interface ForceSimulationOptions {
+    chargeStrength?: number;
+    linkDistance?: number;
+    linkStrength?: number;
+    collisionStrength?: number;
+    collisionRadius?: number;
+    centerStrength?: number;
+    width: number;
+    height: number;
+    alphaDecay?: number;
+    velocityDecay?: number;
+}
+interface UseForceSimulationReturn {
+    nodes: SimulationNode[];
+    links: SimulationLink[];
+    restart: () => void;
+    stop: () => void;
+    isRunning: boolean;
+    alpha: number;
+}
+declare function useForceSimulation(initialNodes: SimulationNode[], initialLinks: SimulationLink[], options: ForceSimulationOptions): UseForceSimulationReturn;
+declare function useDrag(simulation: d3.Simulation<SimulationNode, any> | null | undefined): {
+    onDragStart: (event: any, node: SimulationNode) => void;
+    onDrag: (event: any, node: SimulationNode) => void;
+    onDragEnd: (event: any, node: SimulationNode) => void;
+};
+
+export { type ForceSimulationOptions, type SimulationLink, type SimulationNode, type UseForceSimulationReturn, useDrag, useForceSimulation };

package/dist/hooks/useForceSimulation.js

@@ -0,0 +1,107 @@
+import { useState, useRef, useEffect } from 'react';
+import * as d3 from 'd3';
+
+// src/hooks/useForceSimulation.ts
+function useForceSimulation(initialNodes, initialLinks, options) {
+  const {
+    chargeStrength = -300,
+    linkDistance = 100,
+    linkStrength = 1,
+    collisionStrength = 1,
+    collisionRadius = 10,
+    centerStrength = 0.1,
+    width,
+    height,
+    alphaDecay = 0.0228,
+    velocityDecay = 0.4
+  } = options;
+  const [nodes, setNodes] = useState(initialNodes);
+  const [links, setLinks] = useState(initialLinks);
+  const [isRunning, setIsRunning] = useState(false);
+  const [alpha, setAlpha] = useState(1);
+  const simulationRef = useRef(null);
+  useEffect(() => {
+    const nodesCopy = initialNodes.map((node) => ({ ...node }));
+    const linksCopy = initialLinks.map((link) => ({ ...link }));
+    const simulation = d3.forceSimulation(nodesCopy).force(
+      "link",
+      d3.forceLink(linksCopy).id((d) => d.id).distance(linkDistance).strength(linkStrength)
+    ).force("charge", d3.forceManyBody().strength(chargeStrength)).force("center", d3.forceCenter(width / 2, height / 2).strength(centerStrength)).force(
+      "collision",
+      d3.forceCollide().radius(collisionRadius).strength(collisionStrength)
+    ).alphaDecay(alphaDecay).velocityDecay(velocityDecay);
+    simulationRef.current = simulation;
+    simulation.on("tick", () => {
+      setNodes([...nodesCopy]);
+      setLinks([...linksCopy]);
+      setAlpha(simulation.alpha());
+      setIsRunning(simulation.alpha() > simulation.alphaMin());
+    });
+    simulation.on("end", () => {
+      setIsRunning(false);
+    });
+    return () => {
+      simulation.stop();
+    };
+  }, [
+    initialNodes,
+    initialLinks,
+    chargeStrength,
+    linkDistance,
+    linkStrength,
+    collisionStrength,
+    collisionRadius,
+    centerStrength,
+    width,
+    height,
+    alphaDecay,
+    velocityDecay
+  ]);
+  const restart = () => {
+    if (simulationRef.current) {
+      simulationRef.current.alpha(1).restart();
+      setIsRunning(true);
+    }
+  };
+  const stop = () => {
+    if (simulationRef.current) {
+      simulationRef.current.stop();
+      setIsRunning(false);
+    }
+  };
+  return {
+    nodes,
+    links,
+    restart,
+    stop,
+    isRunning,
+    alpha
+  };
+}
+function useDrag(simulation) {
+  const dragStarted = (event, node) => {
+    if (!simulation) return;
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    node.fx = node.x;
+    node.fy = node.y;
+  };
+  const dragged = (event, node) => {
+    node.fx = event.x;
+    node.fy = event.y;
+  };
+  const dragEnded = (event, node) => {
+    if (!simulation) return;
+    if (!event.active) simulation.alphaTarget(0);
+    node.fx = null;
+    node.fy = null;
+  };
+  return {
+    onDragStart: dragStarted,
+    onDrag: dragged,
+    onDragEnd: dragEnded
+  };
+}
+
+export { useDrag, useForceSimulation };
+//# sourceMappingURL=useForceSimulation.js.map
+//# sourceMappingURL=useForceSimulation.js.map

package/dist/hooks/useForceSimulation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useForceSimulation.ts"],"names":[],"mappings":"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","file":"useForceSimulation.js","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface SimulationNode extends d3.SimulationNodeDatum {\n  id: string;\n  [key: string]: any;\n}\n\nexport interface SimulationLink extends d3.SimulationLinkDatum<SimulationNode> {\n  source: string | SimulationNode;\n  target: string | SimulationNode;\n  [key: string]: any;\n}\n\nexport interface ForceSimulationOptions {\n  /**\n   * Strength of the charge force (repulsion between nodes)\n   * @default -300\n   */\n  chargeStrength?: number;\n\n  /**\n   * Distance for links between nodes\n   * @default 100\n   */\n  linkDistance?: number;\n\n  /**\n   * Strength of the link force\n   * @default 1\n   */\n  linkStrength?: number;\n\n  /**\n   * Strength of collision detection\n   * @default 1\n   */\n  collisionStrength?: number;\n\n  /**\n   * Radius for collision detection (node size)\n   * @default 10\n   */\n  collisionRadius?: number;\n\n  /**\n   * Strength of centering force\n   * @default 0.1\n   */\n  centerStrength?: number;\n\n  /**\n   * Width of the simulation space\n   */\n  width: number;\n\n  /**\n   * Height of the simulation space\n   */\n  height: number;\n\n  /**\n   * Alpha decay rate (how quickly the simulation cools down)\n   * @default 0.0228\n   */\n  alphaDecay?: number;\n\n  /**\n   * Velocity decay (friction)\n   * @default 0.4\n   */\n  velocityDecay?: number;\n}\n\nexport interface UseForceSimulationReturn {\n  /**\n   * Current nodes with positions\n   */\n  nodes: SimulationNode[];\n\n  /**\n   * Current links\n   */\n  links: SimulationLink[];\n\n  /**\n   * Restart the simulation\n   */\n  restart: () => void;\n\n  /**\n   * Stop the simulation\n   */\n  stop: () => void;\n\n  /**\n   * Whether the simulation is currently running\n   */\n  isRunning: boolean;\n\n  /**\n   * Current alpha value (simulation heat)\n   */\n  alpha: number;\n}\n\n/**\n * Hook for managing d3-force simulations\n * Automatically handles simulation lifecycle, tick updates, and cleanup\n *\n * @param initialNodes - Initial nodes for the simulation\n * @param initialLinks - Initial links for the simulation\n * @param options - Configuration options for the force simulation\n * @returns Simulation state and control functions\n *\n * @example\n * ```tsx\n * function NetworkGraph() {\n *   const nodes = [\n *     { id: 'node1', name: 'Node 1' },\n *     { id: 'node2', name: 'Node 2' },\n *     { id: 'node3', name: 'Node 3' },\n *   ];\n *\n *   const links = [\n *     { source: 'node1', target: 'node2' },\n *     { source: 'node2', target: 'node3' },\n *   ];\n *\n *   const { nodes: simulatedNodes, links: simulatedLinks, restart } = useForceSimulation(\n *     nodes,\n *     links,\n *     {\n *       width: 800,\n *       height: 600,\n *       chargeStrength: -500,\n *       linkDistance: 150,\n *     }\n *   );\n *\n *   return (\n *     <svg width={800} height={600}>\n *       {simulatedLinks.map((link, i) => (\n *         <line\n *           key={i}\n *           x1={(link.source as SimulationNode).x}\n *           y1={(link.source as SimulationNode).y}\n *           x2={(link.target as SimulationNode).x}\n *           y2={(link.target as SimulationNode).y}\n *           stroke=\"#999\"\n *         />\n *       ))}\n *       {simulatedNodes.map((node) => (\n *         <circle\n *           key={node.id}\n *           cx={node.x}\n *           cy={node.y}\n *           r={10}\n *           fill=\"#69b3a2\"\n *         />\n *       ))}\n *     </svg>\n *   );\n * }\n * ```\n */\nexport function useForceSimulation(\n  initialNodes: SimulationNode[],\n  initialLinks: SimulationLink[],\n  options: ForceSimulationOptions\n): UseForceSimulationReturn {\n  const {\n    chargeStrength = -300,\n    linkDistance = 100,\n    linkStrength = 1,\n    collisionStrength = 1,\n    collisionRadius = 10,\n    centerStrength = 0.1,\n    width,\n    height,\n    alphaDecay = 0.0228,\n    velocityDecay = 0.4,\n  } = options;\n\n  const [nodes, setNodes] = useState<SimulationNode[]>(initialNodes);\n  const [links, setLinks] = useState<SimulationLink[]>(initialLinks);\n  const [isRunning, setIsRunning] = useState(false);\n  const [alpha, setAlpha] = useState(1);\n\n  const simulationRef = useRef<d3.Simulation<SimulationNode, SimulationLink> | null>(null);\n\n  useEffect(() => {\n    // Create a copy of nodes and links to avoid mutating the original data\n    const nodesCopy = initialNodes.map((node) => ({ ...node }));\n    const linksCopy = initialLinks.map((link) => ({ ...link }));\n\n    // Create the simulation\n    const simulation = d3\n      .forceSimulation<SimulationNode>(nodesCopy)\n      .force(\n        'link',\n        d3\n          .forceLink<SimulationNode, SimulationLink>(linksCopy)\n          .id((d) => d.id)\n          .distance(linkDistance)\n          .strength(linkStrength)\n      )\n      .force('charge', d3.forceManyBody().strength(chargeStrength))\n      .force('center', d3.forceCenter(width / 2, height / 2).strength(centerStrength))\n      .force(\n        'collision',\n        d3.forceCollide<SimulationNode>().radius(collisionRadius).strength(collisionStrength)\n      )\n      .alphaDecay(alphaDecay)\n      .velocityDecay(velocityDecay);\n\n    simulationRef.current = simulation;\n\n    // Update state on each tick\n    simulation.on('tick', () => {\n      setNodes([...nodesCopy]);\n      setLinks([...linksCopy]);\n      setAlpha(simulation.alpha());\n      setIsRunning(simulation.alpha() > simulation.alphaMin());\n    });\n\n    simulation.on('end', () => {\n      setIsRunning(false);\n    });\n\n    // Cleanup on unmount\n    return () => {\n      simulation.stop();\n    };\n  }, [\n    initialNodes,\n    initialLinks,\n    chargeStrength,\n    linkDistance,\n    linkStrength,\n    collisionStrength,\n    collisionRadius,\n    centerStrength,\n    width,\n    height,\n    alphaDecay,\n    velocityDecay,\n  ]);\n\n  const restart = () => {\n    if (simulationRef.current) {\n      simulationRef.current.alpha(1).restart();\n      setIsRunning(true);\n    }\n  };\n\n  const stop = () => {\n    if (simulationRef.current) {\n      simulationRef.current.stop();\n      setIsRunning(false);\n    }\n  };\n\n  return {\n    nodes,\n    links,\n    restart,\n    stop,\n    isRunning,\n    alpha,\n  };\n}\n\n/**\n * Hook for creating a draggable force simulation\n * Provides drag handlers that can be attached to node elements\n *\n * @param simulation - The d3 force simulation instance\n * @returns Drag behavior that can be applied to nodes\n *\n * @example\n * ```tsx\n * function DraggableNetworkGraph() {\n *   const simulation = useRef<d3.Simulation<SimulationNode, SimulationLink>>();\n *   const drag = useDrag(simulation.current);\n *\n *   return (\n *     <svg>\n *       {nodes.map((node) => (\n *         <circle\n *           key={node.id}\n *           {...drag}\n *           cx={node.x}\n *           cy={node.y}\n *           r={10}\n *         />\n *       ))}\n *     </svg>\n *   );\n * }\n * ```\n */\nexport function useDrag(simulation: d3.Simulation<SimulationNode, any> | null | undefined) {\n  const dragStarted = (event: any, node: SimulationNode) => {\n    if (!simulation) return;\n    if (!event.active) simulation.alphaTarget(0.3).restart();\n    node.fx = node.x;\n    node.fy = node.y;\n  };\n\n  const dragged = (event: any, node: SimulationNode) => {\n    node.fx = event.x;\n    node.fy = event.y;\n  };\n\n  const dragEnded = (event: any, node: SimulationNode) => {\n    if (!simulation) return;\n    if (!event.active) simulation.alphaTarget(0);\n    node.fx = null;\n    node.fy = null;\n  };\n\n  return {\n    onDragStart: dragStarted,\n    onDrag: dragged,\n    onDragEnd: dragEnded,\n  };\n}"]}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { Button, ButtonProps, buttonVariants } from './components/button.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export { Input, InputProps } from './components/input.js';
+export { Label, LabelProps } from './components/label.js';
+export { Badge, BadgeProps, badgeVariants } from './components/badge.js';
+export { Container, ContainerProps } from './components/container.js';
+export { Grid, GridProps } from './components/grid.js';
+export { Stack, StackProps } from './components/stack.js';
+export { Separator, SeparatorProps } from './components/separator.js';
+export { Checkbox, CheckboxProps } from './components/checkbox.js';
+export { RadioGroup, RadioGroupProps, RadioOption } from './components/radio-group.js';
+export { Switch, SwitchProps } from './components/switch.js';
+export { Textarea, TextareaProps } from './components/textarea.js';
+export { Select, SelectOption, SelectProps } from './components/select.js';
+export { cn } from './utils/cn.js';
+export { chartColors, domainColors, getDomainColor, getSeverityColor, hexToRgba, severityColors } from './utils/colors.js';
+export { formatCompactNumber, formatDate, formatDateTime, formatDecimal, formatDuration, formatFileSize, formatMetric, formatNumber, formatPercentage, formatRange, formatRelativeTime } from './utils/formatters.js';
+export { useDebounce } from './hooks/useDebounce.js';
+export { useD3, useD3WithResize } from './hooks/useD3.js';
+export { ForceSimulationOptions, SimulationLink, SimulationNode, UseForceSimulationReturn, useDrag, useForceSimulation } from './hooks/useForceSimulation.js';
+export { ForceDirectedGraph, ForceDirectedGraphProps, GraphLink, GraphNode } from './charts/ForceDirectedGraph.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'd3';