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

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'success' | 'warning' | 'danger';
+  animated?: boolean;
+  showLabel?: boolean;
+}
+
+const sizeStyles = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+};
+
+const variantStyles = {
+  primary: 'bg-blue-600',
+  success: 'bg-green-600',
+  warning: 'bg-yellow-600',
+  danger: 'bg-red-600',
+};
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      value,
+      max = 100,
+      size = 'md',
+      variant = 'primary',
+      animated = false,
+      showLabel = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const percentage = Math.min((value / max) * 100, 100);
+
+    return (
+      <div ref={ref} className={cn('', className)} {...props}>
+        <div className={cn('w-full bg-gray-200 rounded-full overflow-hidden', sizeStyles[size])}>
+          <div
+            className={cn(
+              'h-full transition-all duration-300',
+              variantStyles[variant],
+              animated && 'animate-pulse',
+            )}
+            style={{ width: `${percentage}%` }}
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={0}
+            aria-valuemax={max}
+          />
+        </div>
+        {showLabel && (
+          <p className="mt-2 text-sm text-gray-600">
+            {Math.round(percentage)}%
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+Progress.displayName = 'Progress';

package/dist/cjs/components/Progress.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'success' | 'warning' | 'danger';
+  animated?: boolean;
+  showLabel?: boolean;
+}
+
+const sizeStyles = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+};
+
+const variantStyles = {
+  primary: 'bg-blue-600',
+  success: 'bg-green-600',
+  warning: 'bg-yellow-600',
+  danger: 'bg-red-600',
+};
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      value,
+      max = 100,
+      size = 'md',
+      variant = 'primary',
+      animated = false,
+      showLabel = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const percentage = Math.min((value / max) * 100, 100);
+
+    return (
+      <div ref={ref} className={cn('', className)} {...props}>
+        <div className={cn('w-full bg-gray-200 rounded-full overflow-hidden', sizeStyles[size])}>
+          <div
+            className={cn(
+              'h-full transition-all duration-300',
+              variantStyles[variant],
+              animated && 'animate-pulse',
+            )}
+            style={{ width: `${percentage}%` }}
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={0}
+            aria-valuemax={max}
+          />
+        </div>
+        {showLabel && (
+          <p className="mt-2 text-sm text-gray-600">
+            {Math.round(percentage)}%
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+Progress.displayName = 'Progress';

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      id,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className="flex flex-col gap-1">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            ref={ref}
+            id={inputId}
+            type="radio"
+            className={cn(
+              'w-4 h-4 rounded-full border border-gray-300 text-blue-600',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              error && 'border-red-500',
+              className,
+            )}
+            {...props}
+          />
+          {label && <span className="text-sm text-gray-700">{label}</span>}
+        </label>
+        {error && errorMessage && (
+          <p className="text-sm text-red-600">{errorMessage}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: Array<{ value: string; label: string }>;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      error = false,
+      errorMessage,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>
+        {options.map((option) => (
+          <Radio
+            key={option.value}
+            label={option.label}
+            value={option.value}
+            checked={value === option.value}
+            onChange={(e) => onChange?.(e.target.value)}
+            error={error}
+          />
+        ))}
+        {error && errorMessage && (
+          <p className="text-sm text-red-600">{errorMessage}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/dist/cjs/components/Radio.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      id,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className="flex flex-col gap-1">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            ref={ref}
+            id={inputId}
+            type="radio"
+            className={cn(
+              'w-4 h-4 rounded-full border border-gray-300 text-blue-600',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              error && 'border-red-500',
+              className,
+            )}
+            {...props}
+          />
+          {label && <span className="text-sm text-gray-700">{label}</span>}
+        </label>
+        {error && errorMessage && (
+          <p className="text-sm text-red-600">{errorMessage}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: Array<{ value: string; label: string }>;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      error = false,
+      errorMessage,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>
+        {options.map((option) => (
+          <Radio
+            key={option.value}
+            label={option.label}
+            value={option.value}
+            checked={value === option.value}
+            onChange={(e) => onChange?.(e.target.value)}
+            error={error}
+          />
+        ))}
+        {error && errorMessage && (
+          <p className="text-sm text-red-600">{errorMessage}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface RatingProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  onChange?: (value: number) => void;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  readonly?: boolean;
+  color?: 'primary' | 'warning' | 'danger';
+}
+
+const sizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+};
+
+const colorStyles = {
+  primary: 'text-blue-600',
+  warning: 'text-yellow-500',
+  danger: 'text-red-600',
+};
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      value = 0,
+      onChange,
+      max = 5,
+      size = 'md',
+      readonly = false,
+      color = 'warning',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [hoverValue, setHoverValue] = React.useState(0);
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex gap-1', className)}
+        role="radiogroup"
+        {...props}
+      >
+        {Array.from({ length: max }).map((_, index) => {
+          const starValue = index + 1;
+          const displayValue = hoverValue || value;
+          const isFilled = starValue <= displayValue;
+
+          return (
+            <button
+              key={index}
+              className={cn(
+                sizeStyles[size],
+                readonly && 'cursor-default',
+                !readonly && 'cursor-pointer hover:scale-110 transition-transform',
+                colorStyles[color],
+              )}
+              onClick={() => !readonly && onChange?.(starValue)}
+              onMouseEnter={() => !readonly && setHoverValue(starValue)}
+              onMouseLeave={() => setHoverValue(0)}
+              aria-label={`Rate ${starValue}`}
+              disabled={readonly}
+            >
+              <svg
+                className={cn('w-full h-full', isFilled ? 'fill-current' : 'fill-none stroke-current stroke-2')}
+                viewBox="0 0 20 20"
+              >
+                <path d="M10 1.27l2.756 5.58h6.147l-4.97 3.613 1.897 5.835-4.83-3.512-4.83 3.512 1.897-5.835-4.97-3.613h6.147z" />
+              </svg>
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Rating.displayName = 'Rating';

package/dist/cjs/components/Rating.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface RatingProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  onChange?: (value: number) => void;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  readonly?: boolean;
+  color?: 'primary' | 'warning' | 'danger';
+}
+
+const sizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+};
+
+const colorStyles = {
+  primary: 'text-blue-600',
+  warning: 'text-yellow-500',
+  danger: 'text-red-600',
+};
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      value = 0,
+      onChange,
+      max = 5,
+      size = 'md',
+      readonly = false,
+      color = 'warning',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [hoverValue, setHoverValue] = React.useState(0);
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex gap-1', className)}
+        role="radiogroup"
+        {...props}
+      >
+        {Array.from({ length: max }).map((_, index) => {
+          const starValue = index + 1;
+          const displayValue = hoverValue || value;
+          const isFilled = starValue <= displayValue;
+
+          return (
+            <button
+              key={index}
+              className={cn(
+                sizeStyles[size],
+                readonly && 'cursor-default',
+                !readonly && 'cursor-pointer hover:scale-110 transition-transform',
+                colorStyles[color],
+              )}
+              onClick={() => !readonly && onChange?.(starValue)}
+              onMouseEnter={() => !readonly && setHoverValue(starValue)}
+              onMouseLeave={() => setHoverValue(0)}
+              aria-label={`Rate ${starValue}`}
+              disabled={readonly}
+            >
+              <svg
+                className={cn('w-full h-full', isFilled ? 'fill-current' : 'fill-none stroke-current stroke-2')}
+                viewBox="0 0 20 20"
+              >
+                <path d="M10 1.27l2.756 5.58h6.147l-4.97 3.613 1.897 5.835-4.83-3.512-4.83 3.512 1.897-5.835-4.97-3.613h6.147z" />
+              </svg>
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Rating.displayName = 'Rating';

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helpText?: string;
+  options: Array<{ value: string; label: string }>;
+  fullWidth?: boolean;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      helpText,
+      options,
+      fullWidth = false,
+      id,
+      className,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className={cn(fullWidth && 'w-full')}>
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="block text-sm font-medium text-gray-700 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={selectId}
+          className={cn(
+            'w-full px-3 py-2 border rounded-md text-base appearance-none',
+            'focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-200',
+            'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
+            error
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500',
+            className,
+          )}
+          disabled={disabled}
+          {...props}
+        >
+          <option value="">Select an option</option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && errorMessage && (
+          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
+        )}
+        {!error && helpText && (
+          <p className="mt-1 text-sm text-gray-500">{helpText}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Select.displayName = 'Select';

package/dist/cjs/components/Select.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helpText?: string;
+  options: Array<{ value: string; label: string }>;
+  fullWidth?: boolean;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      helpText,
+      options,
+      fullWidth = false,
+      id,
+      className,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className={cn(fullWidth && 'w-full')}>
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="block text-sm font-medium text-gray-700 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={selectId}
+          className={cn(
+            'w-full px-3 py-2 border rounded-md text-base appearance-none',
+            'focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-200',
+            'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
+            error
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500',
+            className,
+          )}
+          disabled={disabled}
+          {...props}
+        >
+          <option value="">Select an option</option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && errorMessage && (
+          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
+        )}
+        {!error && helpText && (
+          <p className="mt-1 text-sm text-gray-500">{helpText}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Select.displayName = 'Select';