@aiready/components 0.1.0

package/src/components/radio-group.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: RadioOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  name: string;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      className,
+      options,
+      value,
+      onChange,
+      name,
+      orientation = 'vertical',
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4',
+          className
+        )}
+        {...props}
+      >
+        {options.map((option) => {
+          const id = `${name}-${option.value}`;
+          return (
+            <div key={option.value} className="flex items-center">
+              <input
+                type="radio"
+                id={id}
+                name={name}
+                value={option.value}
+                checked={value === option.value}
+                disabled={option.disabled}
+                onChange={(e) => onChange?.(e.target.value)}
+                className="h-4 w-4 border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <label
+                htmlFor={id}
+                className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                {option.label}
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup };

package/src/components/select.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  options: SelectOption[];
+  placeholder?: string;
+  onChange?: (value: string) => void;
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, options, placeholder, onChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange?.(e.target.value);
+    };
+
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        onChange={handleChange}
+        {...props}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+    );
+  }
+);
+Select.displayName = 'Select';
+
+export { Select };

package/src/components/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      role={decorative ? 'none' : 'separator'}
+      aria-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = 'Separator';
+
+export { Separator };

package/src/components/stack.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export 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';
+}
+
+const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      className,
+      direction = 'vertical',
+      spacing = 'md',
+      align = 'stretch',
+      justify = 'start',
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={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 };

package/src/components/switch.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {
+    const switchId = id || React.useId();
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    
+    return (
+      <div className="flex items-center">
+        <label htmlFor={switchId} className="relative inline-flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            id={switchId}
+            ref={ref}
+            checked={checked}
+            onChange={handleChange}
+            className="peer sr-only"
+            {...props}
+          />
+          <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>
+        {label && (
+          <span className="ml-3 text-sm font-medium text-foreground">
+            {label}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+Switch.displayName = 'Switch';
+
+export { Switch };

package/src/components/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <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={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/hooks/useD3.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+
+/**
+ * Hook for managing D3 selections with React lifecycle
+ * Provides a ref to the SVG/container element and runs a render function when dependencies change
+ *
+ * @param renderFn - Function that receives the D3 selection and performs rendering
+ * @param dependencies - Array of dependencies that trigger re-render
+ * @returns Ref to attach to the SVG/container element
+ *
+ * @example
+ * ```tsx
+ * function BarChart({ data }: { data: number[] }) {
+ *   const ref = useD3(
+ *     (svg) => {
+ *       const width = 600;
+ *       const height = 400;
+ *       const margin = { top: 20, right: 20, bottom: 30, left: 40 };
+ *
+ *       // Clear previous content
+ *       svg.selectAll('*').remove();
+ *
+ *       // Set up scales
+ *       const x = d3.scaleBand()
+ *         .domain(data.map((_, i) => i.toString()))
+ *         .range([margin.left, width - margin.right])
+ *         .padding(0.1);
+ *
+ *       const y = d3.scaleLinear()
+ *         .domain([0, d3.max(data) || 0])
+ *         .range([height - margin.bottom, margin.top]);
+ *
+ *       // Draw bars
+ *       svg.selectAll('rect')
+ *         .data(data)
+ *         .join('rect')
+ *         .attr('x', (_, i) => x(i.toString())!)
+ *         .attr('y', d => y(d))
+ *         .attr('width', x.bandwidth())
+ *         .attr('height', d => y(0) - y(d))
+ *         .attr('fill', 'steelblue');
+ *     },
+ *     [data]
+ *   );
+ *
+ *   return <svg ref={ref} width={600} height={400} />;
+ * }
+ * ```
+ */
+export function useD3<T extends SVGSVGElement | HTMLDivElement>(
+  renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void,
+  dependencies: React.DependencyList = []
+): React.RefObject<T | null> {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const selection = d3.select(ref.current);
+      renderFn(selection);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+
+  return ref;
+}
+
+/**
+ * Hook for managing D3 selections with automatic resize handling
+ * Similar to useD3 but also triggers re-render on window resize
+ *
+ * @param renderFn - Function that receives the D3 selection and performs rendering
+ * @param dependencies - Array of dependencies that trigger re-render
+ * @returns Ref to attach to the SVG/container element
+ *
+ * @example
+ * ```tsx
+ * function ResponsiveChart({ data }: { data: number[] }) {
+ *   const ref = useD3WithResize(
+ *     (svg) => {
+ *       const container = svg.node();
+ *       const width = container?.clientWidth || 600;
+ *       const height = container?.clientHeight || 400;
+ *
+ *       // Render with responsive dimensions
+ *       // ...
+ *     },
+ *     [data]
+ *   );
+ *
+ *   return <svg ref={ref} style={{ width: '100%', height: '400px' }} />;
+ * }
+ * ```
+ */
+export function useD3WithResize<T extends SVGSVGElement | HTMLDivElement>(
+  renderFn: (selection: d3.Selection<T, unknown, null, undefined>) => void,
+  dependencies: React.DependencyList = []
+): React.RefObject<T | null> {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const selection = d3.select(ref.current);
+    const render = () => renderFn(selection);
+
+    // Initial render
+    render();
+
+    // Set up resize observer
+    const resizeObserver = new ResizeObserver(() => {
+      render();
+    });
+
+    resizeObserver.observe(ref.current);
+
+    // Cleanup
+    return () => {
+      resizeObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+
+  return ref;
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Debounce a value with a specified delay
+ * Useful for search inputs, filters, and other frequently changing values
+ *
+ * @param value - The value to debounce
+ * @param delay - Delay in milliseconds (default: 300ms)
+ * @returns The debounced value
+ *
+ * @example
+ * ```tsx
+ * function SearchInput() {
+ *   const [searchTerm, setSearchTerm] = useState('');
+ *   const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ *   useEffect(() => {
+ *     // This will only run when user stops typing for 500ms
+ *     if (debouncedSearchTerm) {
+ *       performSearch(debouncedSearchTerm);
+ *     }
+ *   }, [debouncedSearchTerm]);
+ *
+ *   return <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />;
+ * }
+ * ```
+ */
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Set up the timeout to update debounced value after delay
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Clean up the timeout if value changes or component unmounts
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}