@unisane/ui 0.1.0-next.b67ebfd0

package/registry/primitives/menu.tsx

@@ -0,0 +1,218 @@
+import React, { isValidElement, cloneElement } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn, Slot } from '@/lib/utils';
+import { Ripple } from '@/components/ui/ripple';
+
+const menuVariants = cva(
+  'min-w-50 bg-surface shadow-2 border border-outline-soft overflow-hidden',
+  {
+    variants: {
+      rounded: {
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-2xl',
+      },
+    },
+    defaultVariants: {
+      rounded: 'sm',
+    },
+  },
+);
+
+const menuIconSlotClasses =
+  'relative z-10 flex size-icon-sm shrink-0 items-center justify-center leading-none text-[var(--icon-sm)] [&>.material-symbols-outlined]:size-icon-sm [&>.material-symbols-outlined]:text-[var(--icon-sm)] [&>svg]:size-icon-sm';
+
+export interface MenuProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof menuVariants> {
+  open?: boolean;
+  children: React.ReactNode;
+}
+
+export const Menu: React.FC<MenuProps> = ({
+  open = true,
+  rounded,
+  className,
+  children,
+  ...props
+}) => {
+  if (!open) return null;
+
+  return (
+    <div className={cn(menuVariants({ rounded }), 'py-2', className)} role="menu" {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  icon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  href?: string;
+  asChild?: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  children,
+  disabled = false,
+  selected = false,
+  icon,
+  trailingIcon,
+  className,
+  href,
+  asChild,
+  ...props
+}) => {
+  const label =
+    asChild && isValidElement<{ children?: React.ReactNode }>(children)
+      ? children.props.children
+      : children;
+
+  const itemClasses = cn(
+    'text-label-large relative flex min-h-[var(--size-action-md)] w-full cursor-pointer items-center gap-[calc(var(--unit)*3)] overflow-hidden px-[calc(var(--unit)*3)] py-[calc(var(--unit)*2)] text-left select-none',
+    'text-on-surface transition-colors duration-short ease-standard',
+    'hover:bg-state-hover focus-visible:bg-state-focus focus-visible:outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
+    disabled && 'opacity-38 cursor-not-allowed hover:bg-transparent',
+    selected && 'bg-state-selected text-on-surface',
+    className,
+  );
+
+  const innerContent = (
+    <>
+      <Ripple disabled={disabled} />
+      {icon && <div className={menuIconSlotClasses}>{icon}</div>}
+      <span className="relative z-10 flex min-w-0 flex-1 translate-y-px items-center truncate">
+        {label}
+      </span>
+      {trailingIcon && (
+        <div className={cn(menuIconSlotClasses, 'text-on-surface-variant')}>{trailingIcon}</div>
+      )}
+    </>
+  );
+
+  // asChild pattern: render user's Link component
+  if (asChild && isValidElement(children)) {
+    return (
+      <Slot className={itemClasses} role="menuitem">
+        {cloneElement(children as React.ReactElement, {}, innerContent)}
+      </Slot>
+    );
+  }
+
+  if (href && !disabled) {
+    return (
+      <a
+        href={href}
+        className={itemClasses}
+        role="menuitem"
+        aria-disabled={disabled}
+        aria-selected={selected}
+      >
+        {innerContent}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      className={itemClasses}
+      role="menuitem"
+      disabled={disabled}
+      aria-disabled={disabled}
+      aria-selected={selected}
+      {...props}
+    >
+      {innerContent}
+    </button>
+  );
+};
+
+export type MenuDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const MenuDivider: React.FC<MenuDividerProps> = ({ className, ...props }) => {
+  return <div className={cn('bg-outline-soft my-1 h-px', className)} role="separator" {...props} />;
+};
+
+export interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'selected'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const MenuCheckboxItem: React.FC<MenuCheckboxItemProps> = ({
+  checked = false,
+  onCheckedChange,
+  children,
+  ...props
+}) => {
+  return (
+    <MenuItem
+      selected={checked}
+      onClick={(e) => {
+        onCheckedChange?.(!checked);
+        props.onClick?.(e);
+      }}
+      icon={
+        <div
+          className={cn(
+            'size-icon-sm rounded-xs border-2 border-current',
+            checked && 'bg-primary border-primary text-on-primary',
+          )}
+        >
+          {checked && (
+            <svg className="h-full w-full" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M5 13l4 4L19 7"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </div>
+      }
+      {...props}
+    >
+      {children}
+    </MenuItem>
+  );
+};
+
+export interface MenuRadioItemProps extends Omit<MenuItemProps, 'selected'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const MenuRadioItem: React.FC<MenuRadioItemProps> = ({
+  checked = false,
+  onCheckedChange,
+  children,
+  ...props
+}) => {
+  return (
+    <MenuItem
+      selected={checked}
+      onClick={(e) => {
+        onCheckedChange?.(!checked);
+        props.onClick?.(e);
+      }}
+      icon={
+        <div
+          className={cn(
+            'size-icon-sm flex items-center justify-center rounded-full border-2 border-current',
+            checked && 'bg-primary border-primary',
+          )}
+        >
+          {checked && <div className="bg-on-primary h-2.5 w-2.5 rounded-full" />}
+        </div>
+      }
+      {...props}
+    >
+      {children}
+    </MenuItem>
+  );
+};

package/registry/primitives/surface.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const surfaceVariants = cva('relative transition-colors', {
+  variants: {
+    tone: {
+      surface: 'bg-surface text-on-surface',
+      surfaceVariant: 'bg-surface-variant text-on-surface-variant',
+      surfaceContainerLowest: 'bg-surface-container-lowest text-on-surface',
+      surfaceContainerLow: 'bg-surface-container-low text-on-surface',
+      surfaceContainer: 'bg-surface-container text-on-surface',
+      surfaceContainerHigh: 'bg-surface-container-high text-on-surface',
+      surfaceContainerHighest: 'bg-surface-container-highest text-on-surface',
+      primary: 'bg-primary text-on-primary',
+      primaryContainer: 'bg-primary-container text-on-primary-container',
+      secondary: 'bg-secondary text-on-secondary',
+      secondaryContainer: 'bg-secondary-container text-on-secondary-container',
+      tertiary: 'bg-tertiary text-on-tertiary',
+      tertiaryContainer: 'bg-tertiary-container text-on-tertiary-container',
+      error: 'bg-error text-on-error',
+      errorContainer: 'bg-error-container text-on-error-container',
+    },
+    elevation: {
+      0: 'shadow-0',
+      1: 'shadow-1',
+      2: 'shadow-2',
+      3: 'shadow-3',
+      4: 'shadow-4',
+      5: 'shadow-5',
+    },
+    rounded: {
+      none: 'rounded-none',
+      xs: 'rounded-xs',
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      xl: 'rounded-xl',
+      xxl: 'rounded-2xl',
+      full: 'rounded-full',
+    },
+  },
+  defaultVariants: {
+    tone: 'surface',
+    elevation: 0,
+    rounded: 'none',
+  },
+});
+
+export type SurfaceProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof surfaceVariants>;
+
+export const Surface = forwardRef<HTMLDivElement, SurfaceProps>(
+  ({ tone, elevation, rounded, className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(surfaceVariants({ tone, elevation, rounded, className }))}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Surface.displayName = 'Surface';

package/registry/primitives/text.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// Tailwind v4's --text-* system automatically applies font-size, line-height,
+// letter-spacing, and font-weight from the token suffixes
+const textVariants = cva('font-sans text-on-surface', {
+  variants: {
+    variant: {
+      displayLarge: 'text-display-large',
+      displayMedium: 'text-display-medium',
+      displaySmall: 'text-display-small',
+      headlineLarge: 'text-headline-large',
+      headlineMedium: 'text-headline-medium',
+      headlineSmall: 'text-headline-small',
+      titleLarge: 'text-title-large',
+      titleMedium: 'text-title-medium',
+      titleSmall: 'text-title-small',
+      bodyLarge: 'text-body-large',
+      bodyMedium: 'text-body-medium',
+      bodySmall: 'text-body-small',
+      labelLarge: 'text-label-large',
+      labelMedium: 'text-label-medium',
+      labelSmall: 'text-label-small',
+    },
+    color: {
+      primary: 'text-primary',
+      onPrimary: 'text-on-primary',
+      surface: 'text-surface',
+      onSurface: 'text-on-surface',
+      surfaceVariant: 'text-surface-variant',
+      onSurfaceVariant: 'text-on-surface-variant',
+      outline: 'text-outline',
+      outlineVariant: 'text-outline-variant',
+      error: 'text-error',
+      onError: 'text-on-error',
+      errorContainer: 'text-error-container',
+      onErrorContainer: 'text-on-error-container',
+      success: 'text-success',
+      onSuccess: 'text-on-success',
+      successContainer: 'text-success-container',
+      onSuccessContainer: 'text-on-success-container',
+      warning: 'text-warning',
+      onWarning: 'text-on-warning',
+      warningContainer: 'text-warning-container',
+      onWarningContainer: 'text-on-warning-container',
+      info: 'text-info',
+      onInfo: 'text-on-info',
+      infoContainer: 'text-info-container',
+      onInfoContainer: 'text-on-info-container',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+    weight: {
+      thin: 'font-thin',
+      extralight: 'font-extralight',
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+      extrabold: 'font-extrabold',
+      black: 'font-black',
+    },
+  },
+  defaultVariants: {
+    variant: 'bodyMedium',
+    color: 'onSurface',
+    align: 'left',
+    weight: 'normal',
+  },
+});
+
+type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type TextProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof textVariants> & {
+    as?: TextElement;
+    htmlFor?: string; // For label elements
+  };
+
+export const Text: React.FC<TextProps> = ({
+  variant,
+  color,
+  align,
+  weight,
+  className,
+  children,
+  as: Component = 'p',
+  htmlFor,
+  ...props
+}) => {
+  return (
+    <Component
+      className={cn(textVariants({ variant, color, align, weight }), className)}
+      {...(Component === 'label' && htmlFor ? { htmlFor } : {})}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};

package/registry/primitives/textarea.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
+  size?: FieldSize;
+};
+
+/**
+ * Textarea primitive - a basic styled textarea element.
+ *
+ * For most cases, use TextField with multiline which includes the canonical
+ * label and validation contract.
+ * Use this Textarea primitive when you need lower-level control or custom compositions.
+ */
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, size = 'md', ...props }, ref) => {
+    const fieldSize = getFieldSizeStyles(size);
+
+    return (
+      <textarea
+        className={cn(
+          'border-control-outline bg-surface text-on-surface ring-offset-surface placeholder:text-on-surface-variant focus-visible:ring-focus-ring flex w-full rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-38',
+          fieldSize.textareaMinHeight,
+          fieldSize.horizontalPadding,
+          fieldSize.textareaPaddingY,
+          fieldSize.valueText,
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';

package/registry/registry-schema.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "version": {
+      "type": "string"
+    },
+    "components": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "components:ui",
+              "primitives:ui",
+              "layout:ui",
+              "hooks:ui",
+              "lib:util",
+              "types:ui"
+            ]
+          },
+          "description": {
+            "type": "string"
+          },
+          "files": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "dependencies": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "registryDependencies": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "variants": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "accessibility": {
+            "type": "object",
+            "properties": {
+              "keyboard": {
+                "type": "boolean"
+              },
+              "screenReader": {
+                "type": "boolean"
+              },
+              "contrast": {
+                "type": "string",
+                "enum": [
+                  "AA",
+                  "AAA"
+                ]
+              }
+            }
+          }
+        },
+        "required": [
+          "name",
+          "type",
+          "description",
+          "files"
+        ]
+      }
+    }
+  },
+  "required": [
+    "components"
+  ]
+}