@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/cjs/utilities/styles.js

@@ -0,0 +1,94 @@
+/**
+ * CSS-in-JS style utilities for dynamic styling
+ */
+
+export interface StyleObject {
+  [key: string]: string | number | undefined;
+}
+
+export function createStyles(styles: StyleObject): React.CSSProperties {
+  const result: React.CSSProperties = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (value !== undefined) {
+      // Convert camelCase CSS property names to kebab-case if needed
+      const cssKey = key as keyof React.CSSProperties;
+      result[cssKey] = value;
+    }
+  }
+
+  return result;
+}
+
+export function combineStyles(...styles: (StyleObject | undefined | null)[]): React.CSSProperties {
+  const result: React.CSSProperties = {};
+
+  for (const style of styles) {
+    if (style) {
+      Object.assign(result, createStyles(style));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Media query builder
+ */
+export const media = {
+  sm: '@media (min-width: 640px)',
+  md: '@media (min-width: 768px)',
+  lg: '@media (min-width: 1024px)',
+  xl: '@media (min-width: 1280px)',
+  '2xl': '@media (min-width: 1536px)',
+  dark: '@media (prefers-color-scheme: dark)',
+  light: '@media (prefers-color-scheme: light)',
+  motion: '@media (prefers-reduced-motion: no-preference)',
+};
+
+/**
+ * CSS variable builder
+ */
+export function createCSSVariables(variables: Record<string, string>): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(variables)) {
+    result[`--${key}`] = value;
+  }
+
+  return result;
+}
+
+/**
+ * Get CSS variable value
+ */
+export function getCSSVariable(name: string): string {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+}
+
+/**
+ * Set CSS variable value
+ */
+export function setCSSVariable(name: string, value: string): void {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+
+/**
+ * CSS animation utilities
+ */
+export const animations = {
+  fadeIn: 'animation: fadeIn 0.3s ease-in-out',
+  fadeOut: 'animation: fadeOut 0.3s ease-in-out',
+  slideInUp: 'animation: slideInUp 0.3s ease-in-out',
+  slideOutDown: 'animation: slideOutDown 0.3s ease-in-out',
+  slideInRight: 'animation: slideInRight 0.3s ease-in-out',
+  slideOutLeft: 'animation: slideOutLeft 0.3s ease-in-out',
+  scaleIn: 'animation: scaleIn 0.3s ease-in-out',
+  scaleOut: 'animation: scaleOut 0.3s ease-in-out',
+};

package/dist/esm/components/Accordion.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+  }>;
+  allowMultiple?: boolean;
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      items,
+      allowMultiple = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());
+
+    const toggleItem = (id: string) => {
+      const newOpen = new Set(openItems);
+      if (newOpen.has(id)) {
+        newOpen.delete(id);
+      } else {
+        if (!allowMultiple) {
+          newOpen.clear();
+        }
+        newOpen.add(id);
+      }
+      setOpenItems(newOpen);
+    };
+
+    return (
+      <div ref={ref} className={cn('border border-gray-200 rounded-lg', className)} {...props}>
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className={cn(
+              'border-b border-gray-200',
+              index === items.length - 1 && 'border-b-0',
+            )}
+          >
+            <button
+              onClick={() => toggleItem(item.id)}
+              className="w-full px-4 py-4 text-left font-medium hover:bg-gray-50 flex justify-between items-center transition-colors"
+              aria-expanded={openItems.has(item.id)}
+            >
+              {item.title}
+              <svg
+                className={cn(
+                  'w-5 h-5 transition-transform',
+                  openItems.has(item.id) && 'transform rotate-180',
+                )}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+              </svg>
+            </button>
+            {openItems.has(item.id) && (
+              <div className="px-4 py-4 text-gray-700 border-t border-gray-200">
+                {item.content}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/dist/esm/components/Accordion.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+  }>;
+  allowMultiple?: boolean;
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      items,
+      allowMultiple = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());
+
+    const toggleItem = (id: string) => {
+      const newOpen = new Set(openItems);
+      if (newOpen.has(id)) {
+        newOpen.delete(id);
+      } else {
+        if (!allowMultiple) {
+          newOpen.clear();
+        }
+        newOpen.add(id);
+      }
+      setOpenItems(newOpen);
+    };
+
+    return (
+      <div ref={ref} className={cn('border border-gray-200 rounded-lg', className)} {...props}>
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className={cn(
+              'border-b border-gray-200',
+              index === items.length - 1 && 'border-b-0',
+            )}
+          >
+            <button
+              onClick={() => toggleItem(item.id)}
+              className="w-full px-4 py-4 text-left font-medium hover:bg-gray-50 flex justify-between items-center transition-colors"
+              aria-expanded={openItems.has(item.id)}
+            >
+              {item.title}
+              <svg
+                className={cn(
+                  'w-5 h-5 transition-transform',
+                  openItems.has(item.id) && 'transform rotate-180',
+                )}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+              </svg>
+            </button>
+            {openItems.has(item.id) && (
+              <div className="px-4 py-4 text-gray-700 border-t border-gray-200">
+                {item.content}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/dist/esm/components/AdvancedComponents.d.ts

@@ -0,0 +1,353 @@
+import React from 'react';
+
+export interface AdvancedComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const FormBuilder: React.FC<
+  AdvancedComponentProps & {
+    fields: Array<{
+      id: string;
+      type: 'text' | 'email' | 'password' | 'number' | 'date' | 'select' | 'checkbox' | 'radio';
+      label: string;
+      required?: boolean;
+      options?: Array<{ label: string; value: string }>;
+    }>;
+    onSubmit?: (data: Record<string, any>) => void;
+  }
+> = ({
+  fields,
+  onSubmit,
+  className = '',
+  ...props
+}) => {
+  const [formData, setFormData] = React.useState<Record<string, any>>({});
+
+  const handleChange = (id: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [id]: value }));
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit?.(formData);
+      }}
+      className={`space-y-4 ${className}`}
+      {...props}
+    >
+      {fields.map((field) => (
+        <div key={field.id}>
+          <label className="block text-sm font-medium mb-1">
+            {field.label}
+            {field.required && <span className="text-red-600">*</span>}
+          </label>
+          {field.type === 'select' && (
+            <select
+              value={formData[field.id] || ''}
+              onChange={(e) => handleChange(field.id, e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+            >
+              <option value="">Select...</option>
+              {field.options?.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          )}
+          {field.type === 'checkbox' && (
+            <input
+              type="checkbox"
+              checked={formData[field.id] || false}
+              onChange={(e) => handleChange(field.id, e.target.checked)}
+              className="w-4 h-4"
+            />
+          )}
+          {field.type !== 'select' && field.type !== 'checkbox' && (
+            <input
+              type={field.type}
+              value={formData[field.id] || ''}
+              onChange={(e) => handleChange(field.id, e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+            />
+          )}
+        </div>
+      ))}
+      <button
+        type="submit"
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+      >
+        Submit
+      </button>
+    </form>
+  );
+};
+
+export const TableBuilder: React.FC<
+  AdvancedComponentProps & {
+    data: Array<Record<string, any>>;
+    columns: Array<{ key: string; label: string }>;
+    editable?: boolean;
+  }
+> = ({
+  data,
+  columns,
+  editable = false,
+  className = '',
+  ...props
+}) => {
+  const [editingRow, setEditingRow] = React.useState<number | null>(null);
+  const [editValues, setEditValues] = React.useState<Record<string, any>>({});
+
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className="w-full border border-gray-300">
+        <thead className="bg-gray-100">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-4 py-2 text-left font-semibold border-b">
+                {col.label}
+              </th>
+            ))}
+            {editable && <th className="px-4 py-2 text-left font-semibold border-b">Actions</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx} className="hover:bg-gray-50 border-b">
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-2">
+                  {editingRow === idx ? (
+                    <input
+                      type="text"
+                      value={editValues[col.key] || ''}
+                      onChange={(e) =>
+                        setEditValues((prev) => ({
+                          ...prev,
+                          [col.key]: e.target.value,
+                        }))
+                      }
+                      className="w-full px-2 py-1 border border-gray-300 rounded"
+                    />
+                  ) : (
+                    row[col.key]
+                  )}
+                </td>
+              ))}
+              {editable && (
+                <td className="px-4 py-2 flex gap-2">
+                  {editingRow === idx ? (
+                    <>
+                      <button className="px-2 py-1 bg-green-600 text-white rounded">Save</button>
+                      <button
+                        onClick={() => setEditingRow(null)}
+                        className="px-2 py-1 bg-gray-600 text-white rounded"
+                      >
+                        Cancel
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => {
+                          setEditingRow(idx);
+                          setEditValues(row);
+                        }}
+                        className="px-2 py-1 bg-blue-600 text-white rounded"
+                      >
+                        Edit
+                      </button>
+                      <button className="px-2 py-1 bg-red-600 text-white rounded">Delete</button>
+                    </>
+                  )}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const Dashboard: React.FC<
+  AdvancedComponentProps & {
+    title?: string;
+    widgets: Array<{ id: string; title: string; content: React.ReactNode }>;
+    columns?: number;
+  }
+> = ({
+  title,
+  widgets,
+  columns = 3,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={className} {...props}>
+      {title && <h1 className="text-3xl font-bold mb-8">{title}</h1>}
+      <div className={`grid grid-cols-1 md:grid-cols-${columns} gap-6`}>
+        {widgets.map((widget) => (
+          <div key={widget.id} className="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+            <h2 className="text-lg font-semibold mb-4">{widget.title}</h2>
+            {widget.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Wizard: React.FC<
+  AdvancedComponentProps & {
+    steps: Array<{ title: string; content: React.ReactNode }>;
+    onComplete?: () => void;
+  }
+> = ({
+  steps,
+  onComplete,
+  className = '',
+  ...props
+}) => {
+  const [currentStep, setCurrentStep] = React.useState(0);
+
+  return (
+    <div className={`max-w-2xl mx-auto ${className}`} {...props}>
+      <div className="mb-8">
+        <div className="flex justify-between mb-4">
+          {steps.map((step, idx) => (
+            <button
+              key={idx}
+              onClick={() => setCurrentStep(idx)}
+              className={`flex-1 text-center py-2 border-b-4 ${
+                idx === currentStep ? 'border-blue-600 text-blue-600' : 'border-gray-300 text-gray-600'
+              }`}
+            >
+              {step.title}
+            </button>
+          ))}
+        </div>
+        <div className="bg-white p-6 border border-gray-200 rounded-lg">{steps[currentStep].content}</div>
+      </div>
+      <div className="flex gap-4 justify-between">
+        <button
+          onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+          disabled={currentStep === 0}
+          className="px-4 py-2 bg-gray-600 text-white rounded-lg disabled:opacity-50"
+        >
+          Previous
+        </button>
+        {currentStep === steps.length - 1 ? (
+          <button
+            onClick={onComplete}
+            className="px-4 py-2 bg-green-600 text-white rounded-lg"
+          >
+            Complete
+          </button>
+        ) : (
+          <button
+            onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg"
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const KanbanBoard: React.FC<
+  AdvancedComponentProps & {
+    columns: Array<{
+      id: string;
+      title: string;
+      cards: Array<{ id: string; title: string; description?: string }>;
+    }>;
+  }
+> = ({
+  columns,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 overflow-x-auto ${className}`} {...props}>
+      {columns.map((col) => (
+        <div key={col.id} className="bg-gray-100 rounded-lg p-4 min-w-sm">
+          <h3 className="font-semibold mb-4">{col.title}</h3>
+          <div className="space-y-2">
+            {col.cards.map((card) => (
+              <div key={card.id} className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-600">
+                <p className="font-medium">{card.title}</p>
+                {card.description && <p className="text-sm text-gray-600 mt-1">{card.description}</p>}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Timeline: React.FC<
+  AdvancedComponentProps & {
+    items: Array<{
+      id: string;
+      title: string;
+      description?: string;
+      timestamp?: string;
+      icon?: React.ReactNode;
+    }>;
+  }
+> = ({
+  items,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`space-y-6 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <div key={item.id} className="flex gap-4">
+          <div className="flex flex-col items-center">
+            <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center">
+              {item.icon || '●'}
+            </div>
+            {idx < items.length - 1 && <div className="w-0.5 h-20 bg-gray-300 mt-2"></div>}
+          </div>
+          <div className="pb-6">
+            <h4 className="font-semibold">{item.title}</h4>
+            {item.description && <p className="text-gray-600 text-sm mt-1">{item.description}</p>}
+            {item.timestamp && <p className="text-gray-500 text-xs mt-2">{item.timestamp}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const OrgChart: React.FC<
+  AdvancedComponentProps & {
+    root: { name: string; children?: any[] };
+  }
+> = ({
+  root,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`flex flex-col items-center gap-4 ${className}`} {...props}>
+      <div className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">{root.name}</div>
+      {root.children && root.children.length > 0 && (
+        <>
+          <div className="w-0.5 h-6 bg-gray-300"></div>
+          <div className="flex gap-8">
+            {root.children.map((child, idx) => (
+              <OrgChart key={idx} root={child} />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};