@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/accordion.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import React, { useState, useId } from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/components/ui/icon';
+import { Ripple } from '@/components/ui/ripple';
+
+interface AccordionContextValue {
+  expanded: string[];
+  toggle: (value: string) => void;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+export interface AccordionProps {
+  type?: 'single' | 'multiple';
+  defaultValue?: string[];
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  type = 'single',
+  defaultValue = [],
+  children,
+  className,
+}) => {
+  const [expanded, setExpanded] = useState<string[]>(defaultValue);
+
+  const toggle = (value: string) => {
+    if (type === 'single') {
+      setExpanded((prev) => (prev.includes(value) ? [] : [value]));
+      return;
+    }
+
+    setExpanded((prev) =>
+      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
+    );
+  };
+
+  return (
+    <AccordionContext.Provider value={{ expanded, toggle }}>
+      <div
+        className={cn(
+          'border-outline-soft bg-surface flex flex-col overflow-hidden rounded-sm border',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+};
+
+export interface AccordionItemProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({ value, children, className }) => {
+  const context = React.useContext(AccordionContext);
+  const isExpanded = context?.expanded.includes(value);
+  const contentId = useId();
+  const triggerId = useId();
+
+  return (
+    <div
+      className={cn(
+        'border-outline-weak border-b last:border-none',
+        isExpanded && 'bg-surface-container-low',
+        className,
+      )}
+    >
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+            value,
+            isExpanded,
+            contentId,
+            triggerId,
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+};
+
+export interface AccordionTriggerProps {
+  children: React.ReactNode;
+  value?: string;
+  isExpanded?: boolean;
+  contentId?: string;
+  triggerId?: string;
+}
+
+export const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
+  children,
+  value,
+  isExpanded,
+  contentId,
+  triggerId,
+}) => {
+  const context = React.useContext(AccordionContext);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      context?.toggle(value!);
+    }
+  };
+
+  return (
+    <button
+      id={triggerId}
+      onClick={() => context?.toggle(value!)}
+      onKeyDown={handleKeyDown}
+      aria-expanded={isExpanded}
+      aria-controls={contentId}
+      className={cn(
+        'text-label-medium group relative flex h-12 w-full items-center justify-between overflow-hidden px-4 font-medium transition-all',
+        isExpanded ? 'text-primary' : 'text-on-surface hover:bg-state-hover',
+      )}
+    >
+      <Ripple />
+      <span className="relative z-10 flex-1 pt-0.5 text-left">{children}</span>
+      <Icon
+        symbol="expand_more"
+        className={cn(
+          'duration-medium ease-emphasized relative z-10 transition-transform',
+          isExpanded && 'rotate-180',
+        )}
+      />
+    </button>
+  );
+};
+
+export interface AccordionContentProps {
+  children: React.ReactNode;
+  isExpanded?: boolean;
+  contentId?: string;
+  triggerId?: string;
+}
+
+export const AccordionContent: React.FC<AccordionContentProps> = ({
+  children,
+  isExpanded,
+  contentId,
+  triggerId,
+}) => (
+  <div
+    id={contentId}
+    role="region"
+    aria-labelledby={triggerId}
+    aria-hidden={!isExpanded}
+    className={cn(
+      'duration-medium ease-emphasized overflow-hidden transition-all',
+      isExpanded ? 'max-h-250 opacity-100' : 'max-h-0 opacity-0',
+    )}
+  >
+    <div className="text-on-surface-variant text-body-small px-4 pt-1 pb-4 leading-relaxed font-medium">
+      {children}
+    </div>
+  </div>
+);

package/registry/components/alert.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/components/ui/icon';
+import { Typography } from '@/components/ui/typography';
+
+const alertVariants = cva('relative flex w-full items-start gap-3 rounded-sm border-l-4 p-4', {
+  variants: {
+    variant: {
+      info: 'bg-info-container border-info text-on-info-container',
+      error: 'bg-error-container border-error text-on-error-container',
+      warning: 'bg-warning-container border-warning text-on-warning-container',
+      success: 'bg-success-container border-success text-on-success-container',
+    },
+  },
+  defaultVariants: {
+    variant: 'info',
+  },
+});
+
+export type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
+
+export interface AlertProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertVariants> {
+  icon?: ReactNode | string | false;
+  title?: ReactNode;
+}
+
+const DEFAULT_ICONS: Record<AlertVariant, string> = {
+  info: 'info',
+  error: 'error',
+  warning: 'warning',
+  success: 'check_circle',
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'info',
+      icon,
+      title,
+      children,
+      className,
+      role,
+      'aria-live': ariaLive,
+      'aria-atomic': ariaAtomic,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedVariant = variant ?? 'info';
+    const isAssertive = resolvedVariant === 'error' || resolvedVariant === 'warning';
+    const iconNode =
+      icon === false ? null : typeof icon === 'string' || icon === undefined ? (
+        <Icon symbol={icon ?? DEFAULT_ICONS[resolvedVariant]} size="sm" />
+      ) : (
+        icon
+      );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(alertVariants({ variant: resolvedVariant, className }))}
+        role={role ?? (isAssertive ? 'alert' : 'status')}
+        aria-live={ariaLive ?? (isAssertive ? 'assertive' : 'polite')}
+        aria-atomic={ariaAtomic ?? true}
+        {...props}
+      >
+        {iconNode ? (
+          <div
+            aria-hidden="true"
+            className="size-icon-sm flex shrink-0 items-center justify-center opacity-80"
+          >
+            {iconNode}
+          </div>
+        ) : null}
+        <div className="flex flex-1 flex-col gap-1">
+          {title ? (
+            <Typography variant="labelMedium" className="text-inherit">
+              {title}
+            </Typography>
+          ) : null}
+          <div className="text-body-small leading-snug opacity-90">{children}</div>
+        </div>
+      </div>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/registry/components/avatar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { avatarSizeClasses } from '@/lib/action-size';
+import { Surface } from '@/primitives/surface';
+import { Text } from '@/primitives/text';
+
+const avatarVariants = cva(
+  'relative inline-flex items-center justify-center overflow-hidden rounded-full',
+  {
+    variants: {
+      size: {
+        sm: avatarSizeClasses.sm,
+        md: avatarSizeClasses.md,
+        lg: avatarSizeClasses.lg,
+        xl: avatarSizeClasses.xl,
+      },
+      variant: {
+        circular: 'rounded-full',
+        rounded: 'rounded-sm',
+        square: 'rounded-none',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'circular',
+    },
+  },
+);
+
+export type AvatarProps = VariantProps<typeof avatarVariants> & {
+  src?: string | undefined;
+  alt?: string | undefined;
+  fallback?: string | undefined;
+  className?: string | undefined;
+};
+
+export const Avatar: React.FC<AvatarProps> = ({ src, alt, fallback, size, variant, className }) => {
+  const fallbackChar = fallback?.charAt(0).toUpperCase() || '?';
+  const fallbackLabel = fallback || alt || 'Avatar';
+
+  return (
+    <Surface
+      tone="surfaceVariant"
+      className={cn(avatarVariants({ size, variant, className }))}
+      role="img"
+      aria-label={src ? alt : fallbackLabel}
+    >
+      {src ? (
+        <img src={src} alt={alt || 'Avatar'} className="h-full w-full object-cover" />
+      ) : (
+        <Text variant="labelLarge" className="text-inherit" aria-hidden="true">
+          {fallbackChar}
+        </Text>
+      )}
+    </Surface>
+  );
+};
+
+export const AvatarGroup: React.FC<{
+  children: React.ReactNode;
+  max?: number;
+  className?: string;
+}> = ({ children, max = 5, className }) => {
+  const childrenArray = React.Children.toArray(children);
+  const visibleChildren = childrenArray.slice(0, max);
+  const remainingCount = childrenArray.length - max;
+
+  return (
+    <div className={cn('flex -space-x-2', className)} role="group" aria-label="Avatar group">
+      {visibleChildren}
+      {remainingCount > 0 && (
+        <Surface
+          tone="surfaceVariant"
+          className="border-surface flex h-[var(--size-avatar-md)] w-[var(--size-avatar-md)] items-center justify-center rounded-full border-2"
+          role="img"
+          aria-label={`${remainingCount} more`}
+        >
+          <Text variant="labelSmall" className="text-on-surface-variant" aria-hidden="true">
+            +{remainingCount}
+          </Text>
+        </Surface>
+      )}
+    </div>
+  );
+};

package/registry/components/badge.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva('inline-flex items-center justify-center rounded-full font-medium', {
+  variants: {
+    variant: {
+      filled: '',
+      tonal: '',
+      outlined: 'border border-outline-soft',
+    },
+    color: {
+      primary: '',
+      secondary: '',
+      tertiary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+    },
+    size: {
+      sm: 'text-label-small px-1.5 py-0.5',
+      md: 'text-label-small px-2 py-0.5',
+      lg: 'text-body-small px-3 py-1',
+    },
+  },
+  compoundVariants: [
+    { variant: 'filled', color: 'primary', className: 'bg-primary text-on-primary' },
+    { variant: 'filled', color: 'secondary', className: 'bg-secondary text-on-secondary' },
+    { variant: 'filled', color: 'tertiary', className: 'bg-tertiary text-on-tertiary' },
+    { variant: 'filled', color: 'error', className: 'bg-error text-on-error' },
+    { variant: 'filled', color: 'success', className: 'bg-success text-on-success' },
+    { variant: 'filled', color: 'warning', className: 'bg-warning text-on-warning' },
+    { variant: 'filled', color: 'info', className: 'bg-info text-on-info' },
+    {
+      variant: 'tonal',
+      color: 'primary',
+      className: 'bg-primary-container text-on-primary-container',
+    },
+    {
+      variant: 'tonal',
+      color: 'secondary',
+      className: 'bg-secondary-container text-on-secondary-container',
+    },
+    {
+      variant: 'tonal',
+      color: 'tertiary',
+      className: 'bg-tertiary-container text-on-tertiary-container',
+    },
+    { variant: 'tonal', color: 'error', className: 'bg-error-container text-on-error-container' },
+    {
+      variant: 'tonal',
+      color: 'success',
+      className: 'bg-success-container text-on-success-container',
+    },
+    {
+      variant: 'tonal',
+      color: 'warning',
+      className: 'bg-warning-container text-on-warning-container',
+    },
+    {
+      variant: 'tonal',
+      color: 'info',
+      className: 'bg-info-container text-on-info-container',
+    },
+    { variant: 'outlined', color: 'primary', className: 'text-primary border-primary-container' },
+    {
+      variant: 'outlined',
+      color: 'secondary',
+      className: 'text-secondary border-secondary-container',
+    },
+    {
+      variant: 'outlined',
+      color: 'tertiary',
+      className: 'text-tertiary border-tertiary-container',
+    },
+    { variant: 'outlined', color: 'error', className: 'text-error border-error-container' },
+    { variant: 'outlined', color: 'success', className: 'text-success border-success-container' },
+    { variant: 'outlined', color: 'warning', className: 'text-warning border-warning-container' },
+    { variant: 'outlined', color: 'info', className: 'text-info border-info-container' },
+  ],
+  defaultVariants: {
+    variant: 'filled',
+    color: 'primary',
+    size: 'md',
+  },
+});
+
+export type BadgeProps = VariantProps<typeof badgeVariants> &
+  React.HTMLAttributes<HTMLSpanElement> & {
+    children: React.ReactNode;
+  };
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, variant, color, size, className, ...props }, ref) => {
+    return (
+      <span ref={ref} className={cn(badgeVariants({ variant, color, size, className }))} {...props}>
+        {children}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = 'Badge';

package/registry/components/banner.tsx

@@ -0,0 +1,165 @@
+import React, { forwardRef, type MouseEventHandler, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Surface } from '@/primitives/surface';
+import { Text } from '@/primitives/text';
+import { Button } from '@/components/ui/button';
+import { IconButton } from '@/components/ui/icon-button';
+import { Icon } from '@/components/ui/icon';
+
+const bannerVariants = cva(
+  'relative flex w-full items-start gap-4 border-b border-outline-weak p-4 transition-all duration-medium ease-standard',
+  {
+    variants: {
+      variant: {
+        default: 'bg-surface text-on-surface',
+        info: 'bg-info-container text-on-info-container',
+        success: 'bg-success-container text-on-success-container',
+        warning: 'bg-warning-container text-on-warning-container',
+        error: 'bg-error-container text-on-error-container',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>['variant']>;
+
+export interface BannerAction {
+  id: string;
+  label: ReactNode;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+export interface BannerProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'>,
+    VariantProps<typeof bannerVariants> {
+  children: ReactNode;
+  open?: boolean;
+  onDismiss?: () => void;
+  dismissLabel?: string;
+  icon?: ReactNode | string | false;
+  title?: ReactNode;
+  actions?: BannerAction[];
+}
+
+const DEFAULT_ICONS: Record<BannerVariant, string> = {
+  default: 'info',
+  info: 'info',
+  success: 'check_circle',
+  warning: 'warning',
+  error: 'error',
+};
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(
+  (
+    {
+      children,
+      open = true,
+      onDismiss,
+      dismissLabel = 'Dismiss banner',
+      icon,
+      title,
+      actions,
+      className,
+      variant = 'default',
+      role,
+      'aria-live': ariaLive,
+      'aria-atomic': ariaAtomic,
+      ...props
+    },
+    ref,
+  ) => {
+    if (!open) return null;
+
+    const resolvedVariant = variant ?? 'default';
+    const isAssertive = resolvedVariant === 'error' || resolvedVariant === 'warning';
+    const isDefaultVariant = resolvedVariant === 'default';
+    const iconNode =
+      icon === false ? null : typeof icon === 'string' || icon === undefined ? (
+        <Icon symbol={icon ?? DEFAULT_ICONS[resolvedVariant]} size="sm" />
+      ) : (
+        icon
+      );
+
+    return (
+      <Surface
+        ref={ref}
+        tone="surface"
+        className={cn(bannerVariants({ variant: resolvedVariant, className }))}
+        role={role ?? (isAssertive ? 'alert' : 'status')}
+        aria-live={ariaLive ?? (isAssertive ? 'assertive' : 'polite')}
+        aria-atomic={ariaAtomic ?? true}
+        {...props}
+      >
+        {iconNode ? (
+          <div
+            aria-hidden="true"
+            className={cn(
+              'size-icon-sm mt-0.5 flex shrink-0 items-center justify-center',
+              isDefaultVariant ? 'text-primary' : 'text-inherit',
+            )}
+          >
+            {iconNode}
+          </div>
+        ) : null}
+
+        <div className="min-w-0 flex-1">
+          {title ? (
+            <Text
+              variant="titleSmall"
+              className={cn('mb-1', isDefaultVariant ? 'text-on-surface' : 'text-inherit')}
+            >
+              {title}
+            </Text>
+          ) : null}
+          <div
+            className={cn(
+              'text-body-small leading-relaxed',
+              isDefaultVariant ? 'text-on-surface-variant' : 'text-inherit opacity-90',
+            )}
+          >
+            {children}
+          </div>
+
+          {actions?.length ? (
+            <div className="mt-4 flex flex-wrap gap-2">
+              {actions.map((action) => (
+                <Button
+                  key={action.id}
+                  variant="text"
+                  size="sm"
+                  disabled={action.disabled}
+                  onClick={action.onClick}
+                  className={cn('font-medium', isDefaultVariant ? 'text-primary' : 'text-inherit')}
+                >
+                  {action.label}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        {onDismiss ? (
+          <IconButton
+            icon={<Icon symbol="close" size="sm" />}
+            onClick={onDismiss}
+            className={cn(
+              'hover:bg-state-hover ml-2 shrink-0',
+              isDefaultVariant
+                ? 'text-on-surface-variant'
+                : 'text-inherit opacity-80 hover:opacity-100',
+            )}
+            aria-label={dismissLabel}
+          />
+        ) : null}
+      </Surface>
+    );
+  },
+);
+
+Banner.displayName = 'Banner';

package/registry/components/bottom-app-bar.tsx

@@ -0,0 +1,88 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn, focusRing } from '@/lib/utils';
+import { Surface } from '@/primitives/surface';
+import { Ripple } from '@/components/ui/ripple';
+
+const bottomAppBarVariants = cva(
+  'fixed bottom-0 left-0 right-0 h-20 flex items-center justify-between px-4 z-20',
+  {
+    variants: {
+      variant: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BottomAppBarProps = VariantProps<typeof bottomAppBarVariants> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: React.ReactNode;
+    fab?: React.ReactNode;
+  };
+
+export const BottomAppBar = forwardRef<HTMLDivElement, BottomAppBarProps>(
+  (
+    { children, fab, className, variant, ['aria-label']: ariaLabel = 'Bottom actions', ...props },
+    ref,
+  ) => (
+    <Surface
+      ref={ref}
+      tone="surface"
+      elevation={3}
+      className={cn(bottomAppBarVariants({ variant, className }))}
+      role="toolbar"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <div className="flex flex-1 items-center gap-2">{children}</div>
+
+      {fab && <div className="absolute -top-8 left-1/2 -translate-x-1/2">{fab}</div>}
+    </Surface>
+  ),
+);
+
+BottomAppBar.displayName = 'BottomAppBar';
+
+const bottomAppBarActionVariants = cva(
+  'relative flex h-12 w-12 items-center justify-center overflow-hidden rounded-icon-button select-none transition-colors duration-short disabled:pointer-events-none disabled:opacity-38',
+  {
+    variants: {
+      active: {
+        true: 'text-primary',
+        false: 'text-on-surface-variant hover:text-primary',
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  },
+);
+
+export type BottomAppBarActionProps = VariantProps<typeof bottomAppBarActionVariants> & {
+  icon: React.ReactNode;
+  label: string;
+  active?: boolean;
+  className?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+
+export const BottomAppBarAction = forwardRef<HTMLButtonElement, BottomAppBarActionProps>(
+  ({ icon, label, active, className, type = 'button', ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(bottomAppBarActionVariants({ active, className }), focusRing)}
+      aria-label={props['aria-label'] ?? label}
+      aria-pressed={active}
+      {...props}
+    >
+      <Ripple />
+      <div className="size-icon-sm relative z-10 flex items-center justify-center">{icon}</div>
+    </button>
+  ),
+);
+
+BottomAppBarAction.displayName = 'BottomAppBarAction';