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

package/dist/cjs/components/Sidebar.d.ts

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SidebarItemProps {
+  label: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+  badge?: string | number;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+  subItems?: SidebarItemProps[];
+}
+
+export interface SidebarProps {
+  items: SidebarItemProps[];
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  width?: string;
+  onItemClick?: (item: SidebarItemProps, index: number) => void;
+  className?: string;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+}
+
+const SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps & { onClick?: () => void; level?: number }>(
+  (
+    {
+      label,
+      icon,
+      active = false,
+      badge,
+      onClick,
+      children,
+      subItems,
+      className,
+      level = 0,
+    },
+    ref
+  ) => {
+    const [expanded, setExpanded] = useState(false);
+    const hasChildren = (subItems && subItems.length > 0) || children;
+
+    return (
+      <div ref={ref}>
+        <div
+          onClick={() => {
+            if (hasChildren) setExpanded(!expanded);
+            onClick?.();
+          }}
+          className={cn(
+            'flex items-center gap-3 px-4 py-2.5 text-sm cursor-pointer transition-colors',
+            {
+              'bg-blue-50 text-blue-700 font-medium': active,
+              'text-gray-700 hover:bg-gray-50': !active,
+            },
+            className,
+            `pl-${level * 4 + 4}`
+          )}
+        >
+          {icon && <span className="w-5 h-5 flex-shrink-0">{icon}</span>}
+          <span className="flex-1">{label}</span>
+          {badge && (
+            <span className="bg-red-500 text-white text-xs rounded-full px-2 py-0.5">
+              {badge}
+            </span>
+          )}
+          {hasChildren && (
+            <span
+              className={cn(
+                'transition-transform',
+                {
+                  'rotate-180': expanded,
+                }
+              )}
+            >
+              ▼
+            </span>
+          )}
+        </div>
+
+        {expanded && (
+          <div className="bg-gray-50">
+            {subItems?.map((subItem, index) => (
+              <SidebarItem
+                key={index}
+                {...subItem}
+                level={(level || 0) + 1}
+              />
+            ))}
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SidebarItem.displayName = 'SidebarItem';
+
+export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  (
+    {
+      items,
+      collapsible = true,
+      defaultCollapsed = false,
+      width = 'w-64',
+      onItemClick,
+      className,
+      headerSlot,
+      footerSlot,
+    },
+    ref
+  ) => {
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+    return (
+      <aside
+        ref={ref}
+        className={cn(
+          'bg-white border-r border-gray-200 transition-all duration-300 overflow-y-auto flex flex-col h-screen',
+          {
+            [width]: !collapsed,
+            'w-20': collapsed,
+          },
+          className
+        )}
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-200">
+          {collapsed ? (
+            <div className="text-2xl font-bold text-blue-600">≡</div>
+          ) : (
+            <div className="flex items-center justify-between">
+              {headerSlot || <h1 className="text-lg font-bold text-gray-900">Menu</h1>}
+              {collapsible && (
+                <button
+                  onClick={() => setCollapsed(!collapsed)}
+                  className="p-1 hover:bg-gray-100 rounded transition-colors"
+                  aria-label="Toggle sidebar"
+                >
+                  ≡
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <nav className="flex-1 overflow-y-auto">
+          {items.map((item, index) => (
+            <SidebarItem
+              key={index}
+              {...item}
+              onClick={() => onItemClick?.(item, index)}
+              className={collapsed ? 'justify-center px-2' : undefined}
+            />
+          ))}
+        </nav>
+
+        {/* Footer */}
+        {footerSlot && (
+          <div className="border-t border-gray-200 p-4">
+            {footerSlot}
+          </div>
+        )}
+      </aside>
+    );
+  }
+);
+
+Sidebar.displayName = 'Sidebar';
+
+export { SidebarItem };

package/dist/cjs/components/Sidebar.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SidebarItemProps {
+  label: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+  badge?: string | number;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+  subItems?: SidebarItemProps[];
+}
+
+export interface SidebarProps {
+  items: SidebarItemProps[];
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  width?: string;
+  onItemClick?: (item: SidebarItemProps, index: number) => void;
+  className?: string;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+}
+
+const SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps & { onClick?: () => void; level?: number }>(
+  (
+    {
+      label,
+      icon,
+      active = false,
+      badge,
+      onClick,
+      children,
+      subItems,
+      className,
+      level = 0,
+    },
+    ref
+  ) => {
+    const [expanded, setExpanded] = useState(false);
+    const hasChildren = (subItems && subItems.length > 0) || children;
+
+    return (
+      <div ref={ref}>
+        <div
+          onClick={() => {
+            if (hasChildren) setExpanded(!expanded);
+            onClick?.();
+          }}
+          className={cn(
+            'flex items-center gap-3 px-4 py-2.5 text-sm cursor-pointer transition-colors',
+            {
+              'bg-blue-50 text-blue-700 font-medium': active,
+              'text-gray-700 hover:bg-gray-50': !active,
+            },
+            className,
+            `pl-${level * 4 + 4}`
+          )}
+        >
+          {icon && <span className="w-5 h-5 flex-shrink-0">{icon}</span>}
+          <span className="flex-1">{label}</span>
+          {badge && (
+            <span className="bg-red-500 text-white text-xs rounded-full px-2 py-0.5">
+              {badge}
+            </span>
+          )}
+          {hasChildren && (
+            <span
+              className={cn(
+                'transition-transform',
+                {
+                  'rotate-180': expanded,
+                }
+              )}
+            >
+              ▼
+            </span>
+          )}
+        </div>
+
+        {expanded && (
+          <div className="bg-gray-50">
+            {subItems?.map((subItem, index) => (
+              <SidebarItem
+                key={index}
+                {...subItem}
+                level={(level || 0) + 1}
+              />
+            ))}
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SidebarItem.displayName = 'SidebarItem';
+
+export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  (
+    {
+      items,
+      collapsible = true,
+      defaultCollapsed = false,
+      width = 'w-64',
+      onItemClick,
+      className,
+      headerSlot,
+      footerSlot,
+    },
+    ref
+  ) => {
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+    return (
+      <aside
+        ref={ref}
+        className={cn(
+          'bg-white border-r border-gray-200 transition-all duration-300 overflow-y-auto flex flex-col h-screen',
+          {
+            [width]: !collapsed,
+            'w-20': collapsed,
+          },
+          className
+        )}
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-200">
+          {collapsed ? (
+            <div className="text-2xl font-bold text-blue-600">≡</div>
+          ) : (
+            <div className="flex items-center justify-between">
+              {headerSlot || <h1 className="text-lg font-bold text-gray-900">Menu</h1>}
+              {collapsible && (
+                <button
+                  onClick={() => setCollapsed(!collapsed)}
+                  className="p-1 hover:bg-gray-100 rounded transition-colors"
+                  aria-label="Toggle sidebar"
+                >
+                  ≡
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <nav className="flex-1 overflow-y-auto">
+          {items.map((item, index) => (
+            <SidebarItem
+              key={index}
+              {...item}
+              onClick={() => onItemClick?.(item, index)}
+              className={collapsed ? 'justify-center px-2' : undefined}
+            />
+          ))}
+        </nav>
+
+        {/* Footer */}
+        {footerSlot && (
+          <div className="border-t border-gray-200 p-4">
+            {footerSlot}
+          </div>
+        )}
+      </aside>
+    );
+  }
+);
+
+Sidebar.displayName = 'Sidebar';
+
+export { SidebarItem };

package/dist/cjs/components/Skeleton.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string | number;
+  height?: string | number;
+  variant?: 'text' | 'circle' | 'rectangular';
+  count?: number;
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      width = '100%',
+      height = '1rem',
+      variant = 'text',
+      count = 1,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const skeletons = Array.from({ length: count });
+
+    const getVariantClass = () => {
+      switch (variant) {
+        case 'circle':
+          return 'rounded-full w-10 h-10';
+        case 'rectangular':
+          return 'rounded-md';
+        default:
+          return 'rounded';
+      }
+    };
+
+    return (
+      <div className="space-y-2" ref={ref} {...props}>
+        {skeletons.map((_, index) => (
+          <div
+            key={index}
+            className={cn(
+              'bg-gray-200 animate-pulse',
+              getVariantClass(),
+              className,
+            )}
+            style={{
+              width: typeof width === 'number' ? `${width}px` : width,
+              height: typeof height === 'number' ? `${height}px` : height,
+            }}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+Skeleton.displayName = 'Skeleton';

package/dist/cjs/components/Skeleton.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string | number;
+  height?: string | number;
+  variant?: 'text' | 'circle' | 'rectangular';
+  count?: number;
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      width = '100%',
+      height = '1rem',
+      variant = 'text',
+      count = 1,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const skeletons = Array.from({ length: count });
+
+    const getVariantClass = () => {
+      switch (variant) {
+        case 'circle':
+          return 'rounded-full w-10 h-10';
+        case 'rectangular':
+          return 'rounded-md';
+        default:
+          return 'rounded';
+      }
+    };
+
+    return (
+      <div className="space-y-2" ref={ref} {...props}>
+        {skeletons.map((_, index) => (
+          <div
+            key={index}
+            className={cn(
+              'bg-gray-200 animate-pulse',
+              getVariantClass(),
+              className,
+            )}
+            style={{
+              width: typeof width === 'number' ? `${width}px` : width,
+              height: typeof height === 'number' ? `${height}px` : height,
+            }}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+Skeleton.displayName = 'Skeleton';

package/dist/cjs/components/Slider.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  showValue?: boolean;
+  step?: number;
+  marks?: boolean;
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      label,
+      showValue = false,
+      step = 1,
+      marks = false,
+      min = 0,
+      max = 100,
+      value = 50,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className={cn('w-full', className)}>
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            {label}
+          </label>
+        )}
+        <div className="flex items-center gap-4">
+          <input
+            ref={ref}
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            className={cn(
+              'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+            )}
+            {...props}
+          />
+          {showValue && (
+            <span className="text-sm font-medium text-gray-700 min-w-max">
+              {value}
+            </span>
+          )}
+        </div>
+        {marks && (
+          <div className="flex justify-between text-xs text-gray-500 mt-2">
+            <span>{min}</span>
+            <span>{max}</span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Slider.displayName = 'Slider';

package/dist/cjs/components/Slider.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  showValue?: boolean;
+  step?: number;
+  marks?: boolean;
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      label,
+      showValue = false,
+      step = 1,
+      marks = false,
+      min = 0,
+      max = 100,
+      value = 50,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className={cn('w-full', className)}>
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            {label}
+          </label>
+        )}
+        <div className="flex items-center gap-4">
+          <input
+            ref={ref}
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            className={cn(
+              'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+            )}
+            {...props}
+          />
+          {showValue && (
+            <span className="text-sm font-medium text-gray-700 min-w-max">
+              {value}
+            </span>
+          )}
+        </div>
+        {marks && (
+          <div className="flex justify-between text-xs text-gray-500 mt-2">
+            <span>{min}</span>
+            <span>{max}</span>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Slider.displayName = 'Slider';

package/dist/cjs/components/Spinner.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+}
+
+const sizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-8 h-8',
+  lg: 'w-12 h-12',
+};
+
+const variantStyles = {
+  primary: 'text-blue-600',
+  secondary: 'text-gray-600',
+  danger: 'text-red-600',
+  success: 'text-green-600',
+};
+
+export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  (
+    {
+      size = 'md',
+      variant = 'primary',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-block animate-spin',
+          sizeStyles[size],
+          variantStyles[variant],
+          className,
+        )}
+        role="status"
+        aria-label="Loading"
+        {...props}
+      >
+        <svg
+          className="w-full h-full"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';