@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/rating.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, { useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { Text } from '@/primitives/text';
+import { Ripple } from '@/components/ui/ripple';
+
+const ratingVariants = cva('flex items-center gap-1', {
+  variants: {
+    size: {
+      sm: 'text-label-medium',
+      md: 'text-body-medium',
+      lg: 'text-body-large',
+    },
+    disabled: {
+      true: 'opacity-38 cursor-not-allowed',
+      false: 'cursor-pointer',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    disabled: false,
+  },
+});
+
+export type RatingProps = VariantProps<typeof ratingVariants> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  allowHalf?: boolean;
+  showValue?: boolean;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Rating: React.FC<RatingProps> = ({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  allowHalf = false,
+  showValue = false,
+  className,
+  disabled = false,
+  size = 'md',
+}) => {
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const [currentValue, setCurrentValue] = useControllableState<number>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const ratingValue = currentValue ?? defaultValue;
+
+  const displayValue = hoverValue ?? ratingValue;
+
+  const handleStarClick = (starValue: number) => {
+    if (disabled) return;
+    setCurrentValue(starValue);
+  };
+
+  const handleStarMouseEnter = (starValue: number) => {
+    if (disabled) return;
+    setHoverValue(starValue);
+  };
+
+  const handleStarMouseLeave = () => {
+    setHoverValue(null);
+  };
+
+  const getStarFill = (starIndex: number) => {
+    if (allowHalf) {
+      if (displayValue >= starIndex + 1) return 'full';
+      if (displayValue >= starIndex + 0.5) return 'half';
+      return 'empty';
+    }
+    return displayValue >= starIndex + 1 ? 'full' : 'empty';
+  };
+
+  return (
+    <div
+      className={cn(ratingVariants({ size, disabled, className }))}
+      role="radiogroup"
+      aria-label={`Rating: ${ratingValue} out of ${max} stars`}
+    >
+      {Array.from({ length: max }, (_, index) => {
+        const fill = getStarFill(index);
+        const isSelected = ratingValue === index + 1;
+
+        return (
+          <button
+            key={index}
+            className="rounded-icon-button hover:bg-state-hover relative overflow-hidden p-1 transition-colors"
+            onClick={() => handleStarClick(index + 1)}
+            onMouseEnter={() => handleStarMouseEnter(index + 1)}
+            onMouseLeave={handleStarMouseLeave}
+            disabled={disabled}
+            role="radio"
+            aria-checked={isSelected}
+            aria-label={`Rate ${index + 1} out of ${max} stars`}
+          >
+            <Ripple disabled={disabled} />
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              className={cn(
+                'size-icon-sm relative z-10',
+                fill === 'full' && 'text-primary',
+                fill === 'half' && 'text-primary',
+                fill === 'empty' && 'text-outline',
+              )}
+            >
+              {fill === 'half' ? (
+                <defs>
+                  <linearGradient id={`half-gradient-${index}`}>
+                    <stop offset="50%" stopColor="currentColor" />
+                    <stop offset="50%" stopColor="transparent" />
+                  </linearGradient>
+                  <path
+                    d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+                    fill={`url(#half-gradient-${index})`}
+                    stroke="currentColor"
+                    strokeWidth="1"
+                  />
+                </defs>
+              ) : (
+                <path
+                  d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+                  fill={fill === 'full' ? 'currentColor' : 'none'}
+                  stroke="currentColor"
+                  strokeWidth="1"
+                />
+              )}
+            </svg>
+          </button>
+        );
+      })}
+
+      {showValue && (
+        <Text variant="bodyMedium" className="text-on-surface-variant ml-2">
+          {ratingValue.toFixed(allowHalf ? 1 : 0)} / {max}
+        </Text>
+      )}
+    </div>
+  );
+};

package/registry/components/ripple.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState, useLayoutEffect, useCallback, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+
+interface RippleProps {
+  color?: string;
+  center?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface RippleEffect {
+  x: number;
+  y: number;
+  size: number;
+  id: number;
+}
+
+export const Ripple: React.FC<RippleProps> = ({ center = false, disabled = false, className }) => {
+  const [ripples, setRipples] = useState<RippleEffect[]>([]);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setPrefersReducedMotion(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const addRipple = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled || prefersReducedMotion) return;
+
+      const container = e.currentTarget.getBoundingClientRect();
+      const size = container.width > container.height ? container.width : container.height;
+
+      const x = center ? container.width / 2 : e.clientX - container.left;
+      const y = center ? container.height / 2 : e.clientY - container.top;
+
+      const newRipple = { x, y, size, id: Date.now() };
+      setRipples((prev) => [...prev, newRipple]);
+    },
+    [disabled, center, prefersReducedMotion],
+  );
+
+  useLayoutEffect(() => {
+    if (ripples.length > 0) {
+      const timer = setTimeout(() => {
+        setRipples([]);
+      }, 600);
+      return () => clearTimeout(timer);
+    }
+  }, [ripples]);
+
+  return (
+    <div
+      className={cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit]', className)}
+      onMouseDown={addRipple}
+    >
+      {ripples.map((ripple) => (
+        <span
+          key={ripple.id}
+          className="opacity-pressed animate-ripple pointer-events-none absolute rounded-full bg-current"
+          style={{
+            top: ripple.y,
+            left: ripple.x,
+            width: ripple.size * 2,
+            height: ripple.size * 2,
+            marginTop: -ripple.size,
+            marginLeft: -ripple.size,
+          }}
+        />
+      ))}
+    </div>
+  );
+};

package/registry/components/scroll-area.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'vertical' | 'horizontal' | 'both';
+}
+
+export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ children, className, orientation = 'vertical', tabIndex = 0, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      tabIndex={tabIndex}
+      className={cn(
+        orientation === 'vertical' && 'overflow-x-hidden overflow-y-auto',
+        orientation === 'horizontal' && 'overflow-x-auto overflow-y-hidden',
+        orientation === 'both' && 'overflow-auto',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+ScrollArea.displayName = 'ScrollArea';

package/registry/components/search-bar.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import React, { useMemo, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Icon, type IconProps } from '@/components/ui/icon';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+
+function isIconElement(node: React.ReactNode): node is React.ReactElement<IconProps> {
+  return React.isValidElement(node) && node.type === Icon;
+}
+
+function normalizeIconNode(
+  node: React.ReactNode,
+  size: NonNullable<IconProps['size']>,
+): React.ReactNode {
+  if (!isIconElement(node) || node.props.size !== undefined) {
+    return node;
+  }
+  return React.cloneElement(node, { size });
+}
+
+export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  onTrailingIconClick?: () => void;
+  size?: FieldSize;
+  iconSize?: NonNullable<IconProps['size']>;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconClick,
+  iconSize,
+  className,
+  placeholder = 'Search',
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  readOnly,
+  type,
+  size = 'md',
+  ...props
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(() => {
+    if (typeof defaultValue === 'string') return defaultValue;
+    if (typeof defaultValue === 'number') return String(defaultValue);
+    return '';
+  });
+
+  const currentValue = useMemo(() => {
+    if (!isControlled) return internalValue;
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number') return String(value);
+    return '';
+  }, [internalValue, isControlled, value]);
+
+  const canClear = !disabled && !readOnly;
+  const shouldShowDefaultClear = !trailingIcon && canClear && currentValue.length > 0;
+  const fieldSize = getFieldSizeStyles(size);
+  const resolvedIconSize: NonNullable<IconProps['size']> =
+    iconSize ?? (size === 'lg' ? 'md' : 'sm');
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isControlled) {
+      setInternalValue(event.target.value);
+    }
+    onChange?.(event);
+  };
+
+  const handleTrailingAction = () => {
+    if (onTrailingIconClick) {
+      onTrailingIconClick();
+      return;
+    }
+    if (!shouldShowDefaultClear) return;
+    const input = inputRef.current;
+    if (!input) return;
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    const valueSetter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value',
+    )?.set;
+    valueSetter?.call(input, '');
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.focus();
+  };
+
+  const trailing = normalizeIconNode(
+    trailingIcon ??
+      (shouldShowDefaultClear ? <Icon symbol="close" size={resolvedIconSize} /> : null),
+    resolvedIconSize,
+  );
+  const trailingIsAction = Boolean(onTrailingIconClick || shouldShowDefaultClear);
+  const resolvedLeadingIcon = normalizeIconNode(
+    leadingIcon ?? <Icon symbol="search" size={resolvedIconSize} />,
+    resolvedIconSize,
+  );
+
+  return (
+    <div
+      role="search"
+      className={cn(
+        'group bg-surface-container-low border-control-outline hover:bg-surface-container focus-within:bg-surface-container focus-within:border-primary duration-medium ease-standard relative w-full cursor-text rounded-sm border transition-all',
+        fieldSize.containerHeight,
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'text-on-surface pointer-events-none absolute inset-y-0 left-0 flex items-center',
+          fieldSize.searchTriggerPadding,
+        )}
+      >
+        {resolvedLeadingIcon}
+      </div>
+
+      <input
+        ref={inputRef}
+        type={type ?? 'search'}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleInputChange}
+        disabled={disabled}
+        readOnly={readOnly}
+        className={cn(
+          'text-on-surface placeholder:text-on-surface-variant h-full w-full [appearance:textfield] border-none bg-transparent outline-none [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none',
+          fieldSize.searchText,
+          fieldSize.searchInputPaddingLeft,
+          trailing
+            ? fieldSize.searchInputPaddingRightWithTrailing
+            : fieldSize.searchInputPaddingRightWithoutTrailing,
+        )}
+        placeholder={placeholder}
+        {...props}
+      />
+
+      {trailing ? (
+        trailingIsAction ? (
+          <button
+            type="button"
+            onClick={handleTrailingAction}
+            aria-label={shouldShowDefaultClear ? 'Clear search' : 'Search action'}
+            className={cn(
+              'text-on-surface-variant hover:bg-state-hover hover:text-on-surface focus-visible:outline-focus-ring rounded-icon-button absolute top-1/2 inline-flex -translate-y-1/2 items-center justify-center transition-colors focus-visible:outline focus-visible:outline-2',
+              fieldSize.actionInset,
+              fieldSize.actionSize,
+            )}
+          >
+            {trailing}
+          </button>
+        ) : (
+          <div
+            className={cn(
+              'text-on-surface-variant pointer-events-none absolute top-1/2 inline-flex -translate-y-1/2 items-center justify-center',
+              fieldSize.passiveTrailingInset,
+              fieldSize.passiveTrailingSize,
+            )}
+          >
+            {trailing}
+          </div>
+        )
+      ) : null}
+    </div>
+  );
+};