@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/table.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <table
+    className={cn('text-body-small w-full min-w-max caption-bottom border-collapse', className)}
+    {...props}
+  >
+    {children}
+  </table>
+);
+
+export const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => (
+  <thead
+    className={cn(
+      'bg-surface-container-low border-outline-weak sticky top-0 z-10 border-b',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
+
+export const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
+  className,
+  ...props
+}) => (
+  <tr
+    className={cn(
+      'border-outline-weak hover:bg-surface-container-low border-b transition-colors',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  scope = 'col',
+  ...props
+}) => (
+  <th
+    scope={scope}
+    className={cn(
+      'text-label-medium text-on-surface-variant h-11 px-6 text-left align-middle font-medium whitespace-nowrap select-none',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  ...props
+}) => (
+  <td
+    className={cn('text-on-surface px-6 py-4 align-middle font-medium tabular-nums', className)}
+    {...props}
+  />
+);

package/registry/components/tabs.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import React, { createContext, useContext, useId } from 'react';
+import { cn } from '@/lib/utils';
+import { actionFrameHeightClasses, actionFramePaddingXClasses } from '@/lib/action-size';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { Ripple } from '@/components/ui/ripple';
+
+export type TabsSize = 'sm' | 'md' | 'lg';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  baseId: string;
+  size: TabsSize;
+}
+
+const TabsContext = createContext<TabsContextValue | undefined>(undefined);
+
+export interface TabsProps {
+  id?: string;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+  size?: TabsSize;
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+  id,
+  defaultValue,
+  value,
+  onValueChange,
+  children,
+  className,
+  size = 'md',
+}) => {
+  const [currentValue = '', setCurrentValue] = useControllableState<string>({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onValueChange,
+  });
+  const generatedBaseId = useId();
+  const baseId = id ?? generatedBaseId;
+
+  return (
+    <TabsContext.Provider
+      value={{ value: currentValue, onValueChange: setCurrentValue, baseId, size }}
+    >
+      <div className={cn('flex w-full flex-col', className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+};
+
+export const TabsList: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('TabsList must be used within Tabs');
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement | null;
+    if (!target || target.getAttribute('role') !== 'tab') return;
+
+    const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+    if (!keys.includes(event.key)) return;
+
+    const tabs = Array.from(
+      event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
+    ).filter((tab) => !tab.disabled);
+
+    if (tabs.length === 0) return;
+
+    const currentIndex = tabs.indexOf(target as HTMLButtonElement);
+    if (currentIndex === -1) return;
+
+    event.preventDefault();
+
+    let nextIndex = currentIndex;
+    if (event.key === 'ArrowRight') {
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (event.key === 'ArrowLeft') {
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (event.key === 'Home') {
+      nextIndex = 0;
+    } else if (event.key === 'End') {
+      nextIndex = tabs.length - 1;
+    }
+
+    const nextTab = tabs[nextIndex];
+    if (!nextTab) return;
+    const nextValue = nextTab.dataset.value;
+    if (!nextValue) return;
+
+    nextTab.focus();
+    context.onValueChange(nextValue);
+  };
+
+  return (
+    <div
+      className={cn(
+        'border-outline-weak bg-surface no-scrollbar flex w-full overflow-x-auto border-b',
+        className,
+      )}
+      role="tablist"
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  icon?: React.ReactNode;
+  size?: TabsSize;
+}
+
+function getTabsTriggerSizeStyles(size: TabsSize) {
+  return {
+    containerHeight: actionFrameHeightClasses[size],
+    gap: 'gap-2.5',
+    paddingX: actionFramePaddingXClasses[size],
+    text: size === 'sm' ? 'text-label-medium' : 'text-label-large',
+  };
+}
+
+export const TabsTrigger: React.FC<TabsTriggerProps> = ({
+  value,
+  icon,
+  size,
+  className,
+  children,
+  onClick,
+  type = 'button',
+  ...props
+}) => {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('TabsTrigger must be used within Tabs');
+
+  const isSelected = context.value === value;
+  const triggerSize = getTabsTriggerSizeStyles(size ?? context.size);
+  const triggerId = `${context.baseId}-trigger-${value}`;
+  const panelId = `${context.baseId}-panel-${value}`;
+
+  return (
+    <button
+      type={type}
+      id={triggerId}
+      data-value={value}
+      role="tab"
+      aria-selected={isSelected}
+      aria-controls={panelId}
+      tabIndex={isSelected ? 0 : -1}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          context.onValueChange(value);
+        }
+      }}
+      className={cn(
+        'focus-visible:outline-focus-ring relative flex min-w-fit shrink-0 cursor-pointer items-center justify-center overflow-hidden transition-all select-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
+        triggerSize.containerHeight,
+        triggerSize.gap,
+        triggerSize.paddingX,
+        isSelected
+          ? 'text-primary'
+          : 'text-on-surface-variant hover:text-on-surface hover:bg-surface-container-low',
+        className,
+      )}
+      {...props}
+    >
+      <Ripple disabled={props.disabled} />
+
+      {icon && (
+        <span
+          className={cn(
+            'size-icon-sm z-10 flex shrink-0 items-center justify-center transition-colors',
+            isSelected ? 'text-primary' : 'text-on-surface-variant',
+          )}
+        >
+          {icon}
+        </span>
+      )}
+      <span
+        className={cn(
+          'z-10 inline-flex items-center gap-2 leading-none font-medium whitespace-nowrap transition-all',
+          triggerSize.text,
+          isSelected ? 'opacity-100' : 'opacity-60',
+        )}
+      >
+        {children}
+      </span>
+
+      {isSelected && (
+        <div className="bg-primary animate-scale-x-enter absolute bottom-0 z-20 h-[calc(var(--unit)*0.75)] w-full rounded-t-full" />
+      )}
+    </button>
+  );
+};
+
+export const TabsContent: React.FC<React.HTMLAttributes<HTMLDivElement> & { value: string }> = ({
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('TabsContent must be used within Tabs');
+
+  const triggerId = `${context.baseId}-trigger-${value}`;
+  const panelId = `${context.baseId}-panel-${value}`;
+
+  if (context.value !== value) return null;
+
+  return (
+    <div
+      id={panelId}
+      role="tabpanel"
+      aria-labelledby={triggerId}
+      tabIndex={0}
+      className={cn(
+        'animate-panel-enter focus-visible:outline-focus-ring mt-4 focus-visible:outline-2 focus-visible:outline-offset-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/registry/components/text-field.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import * as React from 'react';
+import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+import {
+  fieldContainerVariants,
+  getFieldAffixClasses,
+  getFieldHelperTextClasses,
+  getFieldLabelClasses,
+  type FieldShellVariant,
+} from '@/lib/field-shell';
+
+type TextFieldControl = HTMLInputElement | HTMLTextAreaElement;
+
+type TextFieldCommonProps = {
+  autoResize?: boolean;
+  autoResizeMaxHeight?: number;
+  className?: string;
+  defaultValue?: string | number;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  hideLabel?: boolean;
+  invalid?: boolean;
+  label: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  onValueChange?: (value: string) => void;
+  size?: FieldSize;
+  trailingIcon?: React.ReactNode;
+  value?: string | number;
+  variant?: FieldShellVariant;
+};
+
+type ReplacedNativeProps =
+  | 'children'
+  | 'className'
+  | 'defaultValue'
+  | 'onChange'
+  | 'size'
+  | 'value';
+
+type TextFieldEvents = Omit<
+  React.DOMAttributes<TextFieldControl>,
+  'children' | 'dangerouslySetInnerHTML' | 'onChange'
+>;
+
+type TextFieldInputAttributes = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  ReplacedNativeProps | keyof React.DOMAttributes<HTMLInputElement>
+>;
+
+type TextFieldTextareaAttributes = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  ReplacedNativeProps | keyof React.DOMAttributes<HTMLTextAreaElement>
+>;
+
+export type TextFieldProps = TextFieldCommonProps &
+  TextFieldEvents &
+  (TextFieldInputAttributes | TextFieldTextareaAttributes) & {
+    multiline?: boolean;
+  };
+
+export const TextField = React.forwardRef<TextFieldControl, TextFieldProps>(
+  (props, forwardedRef) => {
+    const {
+      autoResize = false,
+      autoResizeMaxHeight = 360,
+      className,
+      defaultValue = '',
+      description,
+      errorMessage,
+      hideLabel = false,
+      invalid = false,
+      label,
+      leadingIcon,
+      multiline = false,
+      onValueChange,
+      size = 'md',
+      trailingIcon,
+      value,
+      variant = 'outlined',
+      ...nativeControlProps
+    } = props;
+    const inputProps = nativeControlProps as TextFieldInputAttributes & TextFieldEvents;
+    const textareaProps = nativeControlProps as TextFieldTextareaAttributes & TextFieldEvents;
+    const id = nativeControlProps.id;
+    const disabled = nativeControlProps.disabled;
+    const placeholder = nativeControlProps.placeholder;
+    const required = nativeControlProps.required;
+    const externalDescribedBy = nativeControlProps['aria-describedby'];
+    const generatedId = React.useId();
+    const fieldId = id ?? `textfield-${generatedId}`;
+    const descriptionId = description ? `${fieldId}-description` : undefined;
+    const errorId = errorMessage ? `${fieldId}-error` : undefined;
+    const resolvedInvalid = invalid || Boolean(errorMessage);
+    const messageId = errorMessage ? errorId : descriptionId;
+    const describedBy = mergeIds(externalDescribedBy, messageId);
+    const fieldSize = getFieldSizeStyles(size);
+    const internalRef = React.useRef<TextFieldControl | null>(null);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(String(defaultValue));
+    const currentValue = value === undefined ? uncontrolledValue : String(value);
+    const hasValue = currentValue.length > 0;
+    const isFloating = hideLabel || Boolean(placeholder) || isFocused || hasValue;
+
+    const setControlRef = React.useCallback(
+      (node: TextFieldControl | null) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    React.useLayoutEffect(() => {
+      if (!multiline || !autoResize) return;
+      resizeTextarea(internalRef.current, autoResizeMaxHeight);
+    }, [autoResize, autoResizeMaxHeight, currentValue, multiline]);
+
+    function handleValueChange(nextValue: string) {
+      if (value === undefined) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    }
+
+    const controlClasses = cn(
+      'unisane-text-field-control text-on-surface caret-primary h-full w-full border-none bg-transparent outline-none focus:ring-0',
+      'placeholder:text-on-surface-variant',
+      fieldSize.horizontalPadding,
+      fieldSize.valueText,
+      variant === 'filled' ? fieldSize.filledInputPadding : '',
+    );
+
+    return (
+      <Field className={className} invalid={resolvedInvalid}>
+        <div
+          className={cn(
+            fieldContainerVariants({ variant, error: resolvedInvalid, disabled }),
+            multiline ? 'items-start py-0' : ['items-center', fieldSize.containerHeight],
+          )}
+        >
+          {leadingIcon ? (
+            <span
+              className={getFieldAffixClasses({
+                size,
+                error: resolvedInvalid,
+                active: isFocused,
+                multiline,
+                side: 'leading',
+              })}
+            >
+              <span className={cn(fieldSize.iconSize, 'flex items-center justify-center')}>
+                {leadingIcon}
+              </span>
+            </span>
+          ) : null}
+          <div className="relative h-full min-w-0 flex-1">
+            {multiline ? (
+              <textarea
+                {...textareaProps}
+                ref={setControlRef as React.RefCallback<HTMLTextAreaElement>}
+                id={fieldId}
+                value={value}
+                defaultValue={value === undefined ? defaultValue : undefined}
+                aria-describedby={describedBy}
+                aria-invalid={resolvedInvalid || undefined}
+                className={cn(
+                  controlClasses,
+                  'min-h-24 resize-none',
+                  fieldSize.multilinePaddingY,
+                  variant === 'filled' ? fieldSize.filledTextareaPadding : '',
+                )}
+                onBlur={(event) => {
+                  setIsFocused(false);
+                  textareaProps.onBlur?.(event);
+                }}
+                onChange={(event) => {
+                  handleValueChange(event.currentTarget.value);
+                  if (autoResize) resizeTextarea(event.currentTarget, autoResizeMaxHeight);
+                }}
+                onFocus={(event) => {
+                  setIsFocused(true);
+                  textareaProps.onFocus?.(event);
+                }}
+              />
+            ) : (
+              <input
+                {...inputProps}
+                ref={setControlRef as React.RefCallback<HTMLInputElement>}
+                id={fieldId}
+                value={value}
+                defaultValue={value === undefined ? defaultValue : undefined}
+                aria-describedby={describedBy}
+                aria-invalid={resolvedInvalid || undefined}
+                className={controlClasses}
+                onBlur={(event) => {
+                  setIsFocused(false);
+                  inputProps.onBlur?.(event);
+                }}
+                onChange={(event) => handleValueChange(event.currentTarget.value)}
+                onFocus={(event) => {
+                  setIsFocused(true);
+                  inputProps.onFocus?.(event);
+                }}
+              />
+            )}
+            <FieldLabel
+              htmlFor={fieldId}
+              required={required}
+              className={
+                hideLabel
+                  ? 'sr-only'
+                  : getFieldLabelClasses({
+                      size,
+                      variant,
+                      floating: isFloating,
+                      error: resolvedInvalid,
+                      active: isFocused,
+                      multiline,
+                    })
+              }
+            >
+              {label}
+            </FieldLabel>
+          </div>
+          {trailingIcon ? (
+            <span
+              className={getFieldAffixClasses({
+                size,
+                error: resolvedInvalid,
+                multiline,
+                side: 'trailing',
+              })}
+            >
+              <span className={cn(fieldSize.iconSize, 'flex items-center justify-center')}>
+                {trailingIcon}
+              </span>
+            </span>
+          ) : null}
+        </div>
+        {errorMessage ? (
+          <FieldError id={errorId} className={getFieldHelperTextClasses(size, true)}>
+            {errorMessage}
+          </FieldError>
+        ) : description ? (
+          <FieldDescription id={descriptionId} className={getFieldHelperTextClasses(size)}>
+            {description}
+          </FieldDescription>
+        ) : null}
+      </Field>
+    );
+  },
+);
+TextField.displayName = 'TextField';
+
+function mergeIds(...ids: Array<string | undefined>) {
+  const merged = ids.filter(Boolean).join(' ');
+  return merged || undefined;
+}
+
+function resizeTextarea(field: TextFieldControl | null, maxHeight: number) {
+  if (!(field instanceof HTMLTextAreaElement)) return;
+
+  field.style.height = 'auto';
+  const nextHeight = Math.min(field.scrollHeight, maxHeight);
+  field.style.height = `${nextHeight}px`;
+  field.style.overflowY = field.scrollHeight > maxHeight ? 'auto' : 'hidden';
+}