@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/skeleton.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const skeletonVariants = cva(
+  'relative inline-block shrink-0 overflow-hidden bg-surface-container-low animate-pulse',
+  {
+    variants: {
+      variant: {
+        text: 'rounded-sm',
+        circular: 'rounded-full',
+        rectangular: 'rounded-sm',
+        rounded: 'rounded-md',
+      },
+    },
+    defaultVariants: {
+      variant: 'rectangular',
+    },
+  },
+);
+
+export type SkeletonProps = VariantProps<typeof skeletonVariants> & {
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+
+  children?: React.ReactNode;
+};
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  variant = 'rectangular',
+  width,
+  height,
+  className,
+  style,
+  children,
+}) => {
+  if (children) {
+    return (
+      <span
+        className={cn(skeletonVariants({ variant, className }))}
+        style={style}
+        aria-hidden="true"
+      >
+        <span className="invisible">{children}</span>
+      </span>
+    );
+  }
+
+  const skeletonStyle: React.CSSProperties = {
+    width,
+    height,
+    ...style,
+  };
+
+  return (
+    <span
+      className={cn(skeletonVariants({ variant, className }))}
+      style={skeletonStyle}
+      aria-hidden="true"
+    />
+  );
+};
+
+export const SkeletonText: React.FC<{
+  lines?: number;
+  width?: number | string;
+  className?: string;
+}> = ({ lines = 3, width = '100%', className }) => {
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} variant="text" width={i === lines - 1 ? '60%' : width} height="4u" />
+      ))}
+    </div>
+  );
+};
+
+export const SkeletonAvatar: React.FC<{
+  size?: number | string;
+  className?: string;
+}> = ({ size = '10u', className }) => {
+  return <Skeleton variant="circular" width={size} height={size} className={className} />;
+};
+
+export const SkeletonCard: React.FC<{
+  className?: string;
+}> = ({ className }) => {
+  return (
+    <div className={cn('space-y-4 p-4', className)}>
+      <div className="flex items-center gap-3">
+        <SkeletonAvatar size="10u" />
+        <div className="flex-1 space-y-2">
+          <Skeleton variant="text" width="60%" height="4u" />
+          <Skeleton variant="text" width="40%" height="3u" />
+        </div>
+      </div>
+      <Skeleton variant="rectangular" width="100%" height="38u" />
+      <SkeletonText lines={2} />
+    </div>
+  );
+};

package/registry/components/slider.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+
+export interface SliderProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'defaultValue' | 'onChange'
+> {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onValueChange?: (value: number) => void;
+  withLabel?: boolean;
+  withTicks?: boolean;
+  showValue?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue = 50,
+  onValueChange,
+  className,
+  disabled,
+  withLabel = false,
+  withTicks = false,
+  showValue = false,
+  ...props
+}) => {
+  const [currentValue, setCurrentValue] = useControllableState<number>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const val = currentValue ?? defaultValue;
+
+  const percentage = ((val - min) / (max - min)) * 100;
+
+  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    setCurrentValue(newValue);
+  };
+
+  const ticks: number[] = [];
+  if (withTicks && step > 0) {
+    const count = Math.floor((max - min) / step);
+    if (count < 50) {
+      for (let i = 0; i <= count; i++) {
+        ticks.push((i / count) * 100);
+      }
+    }
+  }
+
+  const shouldShowLabel = withLabel || showValue;
+
+  return (
+    <div
+      className={cn(
+        'group relative flex h-10 w-full touch-none items-center select-none',
+        className,
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        setIsPressed(false);
+      }}
+      onMouseDown={() => !disabled && setIsPressed(true)}
+      onMouseUp={() => setIsPressed(false)}
+    >
+      <input
+        ref={inputRef}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={val}
+        disabled={disabled}
+        onChange={handleValueChange}
+        onFocus={() => setIsHovered(true)}
+        onBlur={() => setIsHovered(false)}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={val}
+        aria-orientation="horizontal"
+        className="absolute inset-0 z-30 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+        {...props}
+      />
+
+      <div className="relative flex h-1 w-full items-center rounded-sm">
+        <div
+          className={cn(
+            'absolute h-full w-full rounded-sm transition-colors',
+            disabled ? 'bg-outline-weak' : 'bg-surface-container-highest',
+          )}
+        />
+
+        <div
+          className={cn(
+            'duration-snappy absolute h-full rounded-sm transition-all',
+            disabled ? 'bg-outline-muted' : 'bg-primary',
+          )}
+          style={{ width: `${percentage}%` }}
+        />
+
+        {withTicks &&
+          ticks.map((tick, i) => (
+            <div
+              key={i}
+              className={cn(
+                'absolute z-10 h-0.5 w-0.5 rounded-full',
+                tick <= percentage ? 'bg-on-primary' : 'bg-outline-medium',
+              )}
+              style={{ left: `${tick}%` }}
+            />
+          ))}
+      </div>
+
+      <div
+        className="pointer-events-none absolute z-20 flex h-full items-center justify-center"
+        style={{ left: `${percentage}%`, transform: 'translateX(-50%)' }}
+      >
+        {!disabled && (
+          <div
+            className={cn(
+              'bg-primary duration-medium absolute h-10 w-10 rounded-full transition-opacity',
+              isHovered || isPressed ? 'opacity-10' : 'opacity-0',
+              isPressed && 'opacity-20',
+            )}
+          />
+        )}
+
+        <div
+          className={cn(
+            'duration-medium ease-emphasized rounded-full transition-all',
+            disabled
+              ? 'bg-outline-muted h-3 w-3'
+              : 'bg-primary size-icon-sm group-active:scale-125',
+          )}
+        >
+          {shouldShowLabel && !disabled && (
+            <div
+              className={cn(
+                'absolute bottom-8 left-1/2 h-7 min-w-7 -translate-x-1/2 px-2',
+                'bg-inverse-surface text-inverse-on-surface text-label-small shadow-2 flex items-center justify-center rounded-sm font-medium',
+                'duration-medium ease-emphasized origin-bottom transition-all',
+                isHovered || isPressed
+                  ? 'translate-y-0 scale-100 opacity-100'
+                  : 'translate-y-2 scale-50 opacity-0',
+              )}
+            >
+              {val}
+              <div className="bg-inverse-surface absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 rounded-[calc(var(--unit)/4)]" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/registry/components/stat-card.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Card } from '@/components/ui/card';
+import { Text } from '@/primitives/text';
+import { Icon } from '@/components/ui/icon';
+
+export interface StatCardProps {
+  label: string;
+  value: React.ReactNode;
+
+  icon?: string;
+  description?: string;
+  trend?: {
+    value: number;
+    direction: 'up' | 'down' | 'neutral';
+  };
+  className?: string;
+}
+
+export function StatCard({ label, value, icon, description, trend, className }: StatCardProps) {
+  return (
+    <Card className={cn('p-4', className)}>
+      <div className="mb-1 flex items-center gap-2">
+        {icon && <Icon symbol={icon} size="sm" className="text-on-surface-variant" />}
+        <Text variant="labelSmall" color="onSurfaceVariant" className="tracking-wide uppercase">
+          {label}
+        </Text>
+      </div>
+      <Text variant="headlineMedium" weight="semibold">
+        {value}
+      </Text>
+      {description && (
+        <Text variant="bodySmall" color="onSurfaceVariant" className="mt-1">
+          {description}
+        </Text>
+      )}
+      {trend && (
+        <Text
+          variant="labelSmall"
+          className={cn(
+            'mt-1 flex items-center gap-1',
+            trend.direction === 'up' && 'text-success',
+            trend.direction === 'down' && 'text-error',
+            trend.direction === 'neutral' && 'text-on-surface-variant',
+          )}
+        >
+          {trend.direction === 'up' && '↑'}
+          {trend.direction === 'down' && '↓'}
+          {trend.value}%
+        </Text>
+      )}
+    </Card>
+  );
+}
+
+export interface StatGridProps {
+  children: React.ReactNode;
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+export function StatGrid({ children, columns = 4, className }: StatGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-4',
+        columns === 2 && 'grid-cols-2',
+        columns === 3 && 'grid-cols-2 md:grid-cols-3',
+        columns === 4 && 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/registry/components/stepper.tsx

@@ -0,0 +1,183 @@
+import React, { forwardRef } from 'react';
+import { cn, focusRing } from '@/lib/utils';
+import { Text } from '@/primitives/text';
+import { Icon } from '@/components/ui/icon';
+import { Ripple } from '@/components/ui/ripple';
+
+export interface StepperStep {
+  value: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  completed?: boolean;
+  disabled?: boolean;
+}
+
+export interface StepperLabels {
+  step: (position: number, total: number) => string;
+  completed: string;
+}
+
+export interface StepperProps extends Omit<
+  React.OlHTMLAttributes<HTMLOListElement>,
+  'children' | 'onChange'
+> {
+  steps: StepperStep[];
+  value: string;
+  onValueChange?: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  labels?: Partial<StepperLabels>;
+}
+
+const defaultLabels: StepperLabels = {
+  step: (position, total) => `Step ${position} of ${total}`,
+  completed: 'Completed',
+};
+
+function resolveActiveIndex(steps: StepperStep[], value: string) {
+  const requestedIndex = steps.findIndex((step) => step.value === value && !step.disabled);
+  if (requestedIndex >= 0) return requestedIndex;
+
+  const firstAvailableIndex = steps.findIndex((step) => !step.disabled);
+  return firstAvailableIndex >= 0 ? firstAvailableIndex : 0;
+}
+
+export const Stepper = forwardRef<HTMLOListElement, StepperProps>(
+  (
+    { steps, value, onValueChange, orientation = 'horizontal', labels, className, ...props },
+    ref,
+  ) => {
+    if (steps.length === 0) return null;
+
+    const activeIndex = resolveActiveIndex(steps, value);
+    const resolvedLabels = { ...defaultLabels, ...labels };
+    const interactive = onValueChange !== undefined;
+
+    return (
+      <ol
+        {...props}
+        ref={ref}
+        className={cn(
+          'm-0 flex w-full list-none p-0',
+          orientation === 'horizontal' ? 'items-start' : 'flex-col',
+          className,
+        )}
+      >
+        {steps.map((step, index) => {
+          const current = index === activeIndex;
+          const completed = !current && (step.completed ?? index < activeIndex);
+          const last = index === steps.length - 1;
+          const positionLabel = resolvedLabels.step(index + 1, steps.length);
+          const content = (
+            <>
+              {interactive && !step.disabled && <Ripple />}
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'duration-medium ease-standard rounded-button relative z-10 flex h-8 w-8 shrink-0 items-center justify-center border-2 transition-all',
+                  current && 'border-primary bg-primary text-on-primary scale-110',
+                  completed &&
+                    'border-primary-container bg-primary-container text-on-primary-container',
+                  !current &&
+                    !completed &&
+                    'border-outline-subtle bg-surface text-on-surface-variant',
+                )}
+              >
+                {completed ? (
+                  <Icon symbol="check" size="sm" />
+                ) : (
+                  <Text variant="labelLarge">{index + 1}</Text>
+                )}
+              </span>
+
+              <span
+                className={cn(
+                  'relative z-10 min-w-0',
+                  orientation === 'horizontal' ? 'mt-3 max-w-30 px-2 text-center' : 'flex-1',
+                )}
+              >
+                <span className="sr-only">
+                  {positionLabel}
+                  {completed ? `, ${resolvedLabels.completed}` : ''}.{' '}
+                </span>
+                <Text
+                  as="span"
+                  variant="labelLarge"
+                  className={cn(
+                    'block font-medium',
+                    current ? 'text-on-surface' : 'text-on-surface-variant',
+                  )}
+                >
+                  {step.label}
+                </Text>
+                {step.description !== undefined && (
+                  <Text
+                    as="span"
+                    variant="labelSmall"
+                    className="text-on-surface-variant mt-1 block"
+                  >
+                    {step.description}
+                  </Text>
+                )}
+              </span>
+            </>
+          );
+          const actionClassName = cn(
+            'relative flex min-w-0 overflow-hidden rounded-button',
+            orientation === 'horizontal'
+              ? 'flex-col items-center'
+              : 'w-full flex-row items-start gap-3 text-left',
+            step.disabled && 'opacity-38',
+            interactive && !step.disabled && cn('cursor-pointer', focusRing),
+          );
+
+          return (
+            <li
+              key={step.value}
+              className={cn(
+                'relative min-w-0',
+                orientation === 'horizontal'
+                  ? last
+                    ? 'flex-none'
+                    : 'flex-1'
+                  : 'w-full pb-6 last:pb-0',
+              )}
+            >
+              {!last && (
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    'duration-medium absolute z-0 transition-colors',
+                    orientation === 'horizontal'
+                      ? 'top-4 left-1/2 h-0.5 w-full'
+                      : 'top-8 bottom-0 left-[15px] w-0.5',
+                    completed ? 'bg-primary' : 'bg-outline-subtle',
+                  )}
+                />
+              )}
+
+              {interactive ? (
+                <button
+                  type="button"
+                  className={actionClassName}
+                  disabled={step.disabled}
+                  aria-current={current ? 'step' : undefined}
+                  onClick={() => {
+                    if (!current) onValueChange?.(step.value);
+                  }}
+                >
+                  {content}
+                </button>
+              ) : (
+                <div className={actionClassName} aria-current={current ? 'step' : undefined}>
+                  {content}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    );
+  },
+);
+
+Stepper.displayName = 'Stepper';

package/registry/components/switch.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SwitchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'type'
+> {
+  invalid?: boolean;
+  label?: React.ReactNode;
+  showIcons?: boolean;
+}
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  (
+    {
+      'aria-invalid': ariaInvalid,
+      className,
+      disabled = false,
+      id: providedId,
+      invalid = false,
+      label,
+      showIcons = false,
+      ...inputProps
+    },
+    forwardedRef,
+  ) => {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    const resolvedInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';
+
+    return (
+      <label
+        htmlFor={id}
+        className={cn(
+          'group relative inline-flex min-h-8 cursor-pointer items-center gap-3 select-none',
+          disabled && 'cursor-not-allowed opacity-38',
+          className,
+        )}
+      >
+        <span className="group/switch relative h-[calc(var(--unit)*8)] w-[calc(var(--unit)*13)] shrink-0">
+          <input
+            {...inputProps}
+            ref={forwardedRef}
+            id={id}
+            type="checkbox"
+            role="switch"
+            disabled={disabled}
+            aria-invalid={resolvedInvalid || undefined}
+            className="peer sr-only"
+          />
+
+          <span
+            aria-hidden="true"
+            className={cn(
+              'duration-medium ease-standard absolute inset-0 rounded-full border-2 transition-colors',
+              resolvedInvalid
+                ? 'border-error bg-error-container peer-checked:bg-error peer-checked:border-error'
+                : 'border-control-outline bg-surface-container-highest peer-checked:bg-primary peer-checked:border-primary',
+              'peer-focus-visible:ring-focus-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',
+            )}
+          />
+
+          <span
+            aria-hidden="true"
+            className={cn(
+              'duration-emphasized ease-emphasized absolute top-1/2 z-10 flex -translate-y-1/2 items-center justify-center overflow-hidden rounded-full transition-all',
+              resolvedInvalid
+                ? 'bg-error peer-checked:bg-on-error'
+                : 'bg-control-outline group-hover:bg-on-surface-variant peer-checked:bg-on-primary',
+              showIcons && [
+                '[&_.switch-icon-off]:opacity-100',
+                'peer-checked:[&_.switch-icon-off]:opacity-0',
+                '[&_.switch-icon-on]:opacity-0',
+                'peer-checked:[&_.switch-icon-on]:opacity-100',
+              ],
+              showIcons
+                ? 'size-icon-md left-[var(--unit)] peer-checked:left-[calc(var(--unit)*13-var(--icon-md)-var(--unit))]'
+                : 'size-icon-xs peer-checked:size-icon-md left-[calc(var(--unit)*2)] peer-checked:left-[calc(var(--unit)*13-var(--icon-md)-var(--unit))]',
+            )}
+          >
+            {showIcons ? (
+              <>
+                <span className="switch-icon-off duration-snappy ease-standard pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity">
+                  <svg
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    className="size-icon-xs"
+                    stroke="currentColor"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                  >
+                    <path d="M3 3L9 9M9 3L3 9" />
+                  </svg>
+                </span>
+                <span className="switch-icon-on duration-snappy ease-standard pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity">
+                  <svg
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    className="size-icon-xs"
+                    stroke="currentColor"
+                    strokeWidth="2.2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M2.5 6.5L4.8 8.8L9.5 4" />
+                  </svg>
+                </span>
+              </>
+            ) : null}
+          </span>
+        </span>
+
+        {label !== undefined && label !== null ? (
+          <span className="text-body-medium text-on-surface leading-none font-medium">{label}</span>
+        ) : null}
+      </label>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';