sh-ui-cli 0.43.0 → 0.45.0

package/data/registry/react/components/file-upload/index.tailwind.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import * as React from "react";
+
+function cx(...args: (string | false | undefined)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+interface FileUploadContextValue {
+  files: File[];
+  dragging: boolean;
+  disabled: boolean;
+  multiple: boolean;
+  accept?: string;
+  id?: string;
+  name?: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  setDragging: (v: boolean) => void;
+  addFiles: (incoming: FileList | File[]) => void;
+  remove: (idx: number) => void;
+  openPicker: () => void;
+}
+
+const FileUploadContext = React.createContext<FileUploadContextValue | null>(null);
+
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload 하위 컴포넌트는 <FileUpload> 내부에서만 사용할 수 있습니다.");
+  return ctx;
+}
+
+export interface FileUploadProps {
+  value?: File[]; defaultValue?: File[];
+  onValueChange?: (files: File[]) => void;
+  onFiles?: (files: File[]) => void;
+  multiple?: boolean; accept?: string;
+  maxSize?: number; maxFiles?: number;
+  disabled?: boolean;
+  onError?: (message: string) => void;
+  placeholder?: React.ReactNode; hint?: React.ReactNode;
+  showFileList?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string; name?: string;
+  children?: React.ReactNode;
+}
+
+export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
+  ({ value, defaultValue, onValueChange, onFiles, multiple = false, accept, maxSize, maxFiles, disabled = false, onError, placeholder, hint, showFileList = true, className, style, id, name, children }, ref) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<File[]>(defaultValue ?? []);
+    const files = isControlled ? value! : internal;
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const [dragging, setDragging] = React.useState(false);
+
+    const update = React.useCallback((next: File[]) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+      onFiles?.(next);
+    }, [isControlled, onValueChange, onFiles]);
+
+    const addFiles = React.useCallback((incoming: FileList | File[]) => {
+      const arr = Array.from(incoming);
+      const accepted: File[] = [];
+      for (const f of arr) {
+        if (maxSize && f.size > maxSize) {
+          onError?.(`${f.name}: 최대 ${formatBytes(maxSize)}까지 업로드 가능합니다.`);
+          continue;
+        }
+        accepted.push(f);
+      }
+      if (accepted.length === 0) return;
+      let next = multiple ? [...files, ...accepted] : [accepted[accepted.length - 1]];
+      if (maxFiles && next.length > maxFiles) {
+        onError?.(`최대 ${maxFiles}개까지 업로드 가능합니다.`);
+        next = next.slice(0, maxFiles);
+      }
+      update(next);
+    }, [files, maxSize, maxFiles, multiple, onError, update]);
+
+    const remove = React.useCallback((idx: number) => update(files.filter((_, i) => i !== idx)), [files, update]);
+    const openPicker = React.useCallback(() => {
+      if (disabled) return;
+      inputRef.current?.click();
+    }, [disabled]);
+
+    const ctx = React.useMemo<FileUploadContextValue>(() => ({
+      files, dragging, disabled, multiple, accept, id, name, inputRef,
+      setDragging, addFiles, remove, openPicker,
+    }), [files, dragging, disabled, multiple, accept, id, name, addFiles, remove, openPicker]);
+
+    return (
+      <FileUploadContext.Provider value={ctx}>
+        <div className={cx("flex flex-col gap-[var(--space-3)]", className)} style={style}>
+          <input
+            ref={inputRef}
+            id={id}
+            name={name}
+            type="file"
+            multiple={multiple}
+            accept={accept}
+            disabled={disabled}
+            className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0 [clip:rect(0,0,0,0)]"
+            onChange={(e) => {
+              if (e.target.files) addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+          {children ?? <DefaultLayout placeholder={placeholder} hint={hint} showFileList={showFileList} />}
+        </div>
+      </FileUploadContext.Provider>
+    );
+  },
+);
+FileUpload.displayName = "FileUpload";
+
+function DefaultLayout({ placeholder, hint, showFileList }: { placeholder?: React.ReactNode; hint?: React.ReactNode; showFileList: boolean }) {
+  const { files } = useFileUpload();
+  return (
+    <>
+      <FileUploadDropzone>
+        <UploadIcon />
+        <div className="text-[length:var(--text-sm)] text-foreground [&_strong]:font-semibold">
+          {placeholder ?? <><strong>파일을 드래그</strong>하거나 <strong>클릭해서 선택</strong></>}
+        </div>
+        {hint && <div className="text-[length:var(--text-xs)] text-foreground-muted">{hint}</div>}
+      </FileUploadDropzone>
+      {showFileList && files.length > 0 && <FileUploadList />}
+    </>
+  );
+}
+
+export interface FileUploadDropzoneProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop" | "onDragOver" | "onDragLeave"> {
+  children?: React.ReactNode;
+}
+
+export const FileUploadDropzone = React.forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
+  function FileUploadDropzone({ className, children, onClick, ...rest }, ref) {
+    const { dragging, disabled, setDragging, addFiles, openPicker } = useFileUpload();
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        data-dragging={dragging || undefined}
+        className={cx(
+          "relative flex flex-col items-center justify-center gap-[var(--space-2)] py-[var(--space-8)] px-[var(--space-6)] min-h-40 bg-background-subtle text-foreground-muted border-[1.5px] border-dashed border-border rounded-[var(--radius)] cursor-pointer text-center transition-[border-color,background-color,color] duration-[var(--duration-fast)] hover:border-border-strong hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:border-foreground motion-reduce:transition-none",
+          dragging && "border-foreground bg-background-muted text-foreground",
+          disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed pointer-events-none",
+          className,
+        )}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) openPicker(); }}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openPicker(); }
+        }}
+        onDragOver={(e) => { e.preventDefault(); if (!disabled) setDragging(true); }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault(); setDragging(false);
+          if (disabled) return;
+          addFiles(e.dataTransfer.files);
+        }}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export interface FileUploadTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FileUploadTrigger = React.forwardRef<HTMLButtonElement, FileUploadTriggerProps>(
+  function FileUploadTrigger({ className, onClick, children, type, ...rest }, ref) {
+    const { disabled, openPicker } = useFileUpload();
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        disabled={disabled || rest.disabled}
+        className={cx(
+          "inline-flex items-center justify-center gap-[var(--space-2)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground bg-background border border-border rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+          className,
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.(e);
+          if (!e.defaultPrevented) openPicker();
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export interface FileUploadListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "children"> {
+  children?: React.ReactNode | ((args: { files: File[]; remove: (idx: number) => void }) => React.ReactNode);
+}
+
+export const FileUploadList = React.forwardRef<HTMLUListElement, FileUploadListProps>(
+  function FileUploadList({ className, children, ...rest }, ref) {
+    const { files, remove } = useFileUpload();
+    if (files.length === 0) return null;
+    const content = typeof children === "function"
+      ? children({ files, remove })
+      : (children ?? files.map((f, i) => <FileUploadItem key={`${f.name}-${i}`} file={f} index={i} />));
+
+    return (
+      <ul ref={ref} className={cx("list-none m-0 p-0 flex flex-col gap-1.5", className)} {...rest}>
+        {content}
+      </ul>
+    );
+  },
+);
+
+export interface FileUploadItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> {
+  file: File;
+  index: number;
+  children?: React.ReactNode;
+}
+
+export const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProps>(
+  function FileUploadItem({ file, index, className, children, ...rest }, ref) {
+    const { disabled, remove } = useFileUpload();
+    return (
+      <li
+        ref={ref}
+        className={cx(
+          "flex items-center gap-2.5 py-[var(--space-2)] px-[var(--space-3)] bg-background border border-border rounded-[calc(var(--radius)-2px)] text-[length:var(--text-sm)] text-foreground [&>svg]:text-foreground-muted [&>svg]:shrink-0",
+          className,
+        )}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <FileIcon />
+            <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap" title={file.name}>{file.name}</span>
+            <span className="text-[length:var(--text-xs)] text-foreground-muted shrink-0">{formatBytes(file.size)}</span>
+            <button
+              type="button"
+              className="inline-flex items-center justify-center w-6 h-6 p-0 bg-transparent border-none rounded-[calc(var(--radius)-4px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] shrink-0 hover:not-disabled:text-foreground hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none"
+              onClick={() => remove(index)}
+              disabled={disabled}
+              aria-label={`${file.name} 제거`}
+            >
+              <XIcon />
+            </button>
+          </>
+        )}
+      </li>
+    );
+  },
+);
+
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" aria-hidden>
+      <path d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function FileIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path d="M5 2.5h6l4 4v9a1.5 1.5 0 0 1-1.5 1.5h-8.5A1.5 1.5 0 0 1 3.5 15.5v-11A1.5 1.5 0 0 1 5 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+      <path d="M11 2.5v4h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}

package/data/registry/react/components/form/field.tailwind.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import * as React from "react";
+import { FormContext, FieldContext, SectionContext, StepContext, DisabledContext, useFormField } from "./context";
+import type { FieldValidate, ValidateOn } from "./types";
+import { scopedPath } from "./utils";
+
+const fieldClass = "flex flex-col gap-[var(--space-1,0.25rem)] data-[disabled]:opacity-60 data-[disabled]:pointer-events-none";
+const errorClass = "text-[var(--color-danger,#dc2626)] text-[length:var(--text-sm,0.875rem)] m-0 animate-[sh-ui-form-error-in_150ms_var(--easing-out,cubic-bezier(0.16,1,0.3,1))] motion-reduce:[animation-duration:0.01ms]";
+
+export interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  name: string;
+  validate?: FieldValidate;
+  validateOn?: ValidateOn;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  children?: React.ReactNode;
+}
+
+export function Field({ name, validate, validateOn, required, disabled, readOnly, className, children, ...rest }: FieldProps) {
+  const store = React.useContext(FormContext);
+  if (!store) throw new Error("<Form.Field> must be inside <Form>");
+
+  const section = React.useContext(SectionContext);
+  const step = React.useContext(StepContext);
+  const formDisabled = React.useContext(DisabledContext);
+  const path = scopedPath(section.path, name);
+
+  const id = React.useId();
+  const descId = `${id}-desc`;
+  const errorId = `${id}-error`;
+
+  React.useEffect(() => {
+    return store.registerField(path, {
+      validate, validateOn, stepId: step.id ?? undefined,
+      sectionPath: section.path || undefined, required,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, path]);
+
+  const effectiveDisabled = disabled || formDisabled;
+
+  return (
+    <FieldContext.Provider value={{ path, id, descId, errorId, disabled: effectiveDisabled, readOnly, required }}>
+      <div
+        className={`${fieldClass}${className ? ` ${className}` : ""}`}
+        data-disabled={effectiveDisabled || undefined}
+        data-readonly={readOnly || undefined}
+        {...rest}
+      >
+        {children}
+      </div>
+    </FieldContext.Provider>
+  );
+}
+
+export const FormLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => {
+    const ctx = React.useContext(FieldContext);
+    if (!ctx) throw new Error("<Form.Label> must be inside <Form.Field>");
+    return <label ref={ref} htmlFor={ctx.id} className={className} {...props} />;
+  },
+);
+FormLabel.displayName = "Form.Label";
+
+export const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const ctx = React.useContext(FieldContext);
+    if (!ctx) throw new Error("<Form.Description> must be inside <Form.Field>");
+    return <p ref={ref} id={ctx.descId} className={className} {...props} />;
+  },
+);
+FormDescription.displayName = "Form.Description";
+
+export interface FormErrorProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "children"> {
+  children?: React.ReactNode | ((err: { message: string; type?: string }) => React.ReactNode);
+  matches?: string;
+}
+
+export function FormError({ children, matches, className, ...rest }: FormErrorProps) {
+  const ctx = React.useContext(FieldContext);
+  if (!ctx) throw new Error("<Form.Error> must be inside <Form.Field>");
+  const field = useFormField(ctx.path);
+
+  const err = field.error;
+  if (!err) return null;
+  if (matches && err.type !== matches) return null;
+
+  const content = typeof children === "function"
+    ? (children as (e: { message: string; type?: string }) => React.ReactNode)(err)
+    : children ?? err.message;
+
+  return (
+    <p
+      id={ctx.errorId}
+      className={`${errorClass}${className ? ` ${className}` : ""}`}
+      role="alert"
+      aria-live="polite"
+      {...rest}
+    >
+      {content}
+    </p>
+  );
+}
+
+export interface ControlProps {
+  id: string; name: string;
+  value?: unknown; checked?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+  onBlur: () => void;
+  "aria-invalid"?: true;
+  "aria-describedby"?: string;
+  "aria-required"?: true;
+  disabled?: boolean; readOnly?: boolean; required?: boolean;
+}
+
+export interface FormControlProps {
+  children?: React.ReactElement;
+  valueAs?: "value" | "checked";
+  render?: (ctrl: ControlProps) => React.ReactElement;
+}
+
+export function FormControl({ children, valueAs = "value", render }: FormControlProps) {
+  const ctx = React.useContext(FieldContext);
+  if (!ctx) throw new Error("<Form.Control> must be inside <Form.Field>");
+  const store = React.useContext(FormContext)!;
+  const field = useFormField(ctx.path);
+
+  const describedBy = [ctx.descId, field.hasError ? ctx.errorId : null].filter(Boolean).join(" ") || undefined;
+
+  const ctrl: ControlProps = {
+    id: ctx.id, name: ctx.path,
+    onChange: (e) => {
+      const target = e.target as HTMLInputElement;
+      const next = valueAs === "checked" ? target.checked : target.value;
+      store.setFieldValue(ctx.path, next);
+      if (store.getState().revalidateOnChange.has(ctx.path)) void store.validateField(ctx.path);
+    },
+    onBlur: () => {
+      store.setFieldTouched(ctx.path, true);
+      void store.validateField(ctx.path);
+    },
+    "aria-describedby": describedBy,
+    disabled: ctx.disabled, readOnly: ctx.readOnly, required: ctx.required,
+  };
+
+  if (field.hasError) ctrl["aria-invalid"] = true;
+  if (ctx.required) ctrl["aria-required"] = true;
+
+  if (valueAs === "checked") ctrl.checked = Boolean(field.value);
+  else ctrl.value = field.value ?? "";
+
+  if (render) return render(ctrl);
+  if (!children) return null;
+  const child = React.Children.only(children);
+  return React.cloneElement(child, ctrl as unknown as Record<string, unknown>);
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-form]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-form", "");
+  style.textContent = `@keyframes sh-ui-form-error-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: translateY(0) } }`;
+  document.head.appendChild(style);
+}

package/data/registry/react/components/form/form.tailwind.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { createFormStore, type CreateFormStoreOptions } from "./store";
+import { FormContext, SectionContext, DisabledContext, useFormState } from "./context";
+import type { FormStore, StandardSchemaV1 } from "./types";
+import { scopedPath } from "./utils";
+import { focusFirstError } from "./focus-first-error";
+
+export interface FormProps<T = unknown>
+  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onInvalid"> {
+  form?: FormStore<T>;
+  defaultValues?: CreateFormStoreOptions<T>["defaultValues"];
+  schema?: CreateFormStoreOptions<T>["schema"];
+  validateOn?: CreateFormStoreOptions<T>["validateOn"];
+  onSubmit?: CreateFormStoreOptions<T>["onSubmit"];
+  onInvalid?: CreateFormStoreOptions<T>["onInvalid"];
+  scrollToFirstError?: boolean;
+  focusFirstError?: boolean;
+  disabled?: boolean;
+}
+
+const formClass = "flex flex-col gap-[var(--space-4,1rem)]";
+
+function FormInner<T>({
+  form: externalForm, defaultValues, schema, validateOn, onSubmit, onInvalid,
+  scrollToFirstError, focusFirstError: focusFirstErrorProp, disabled, children, ...rest
+}: FormProps<T>) {
+  const parent = React.useContext(FormContext);
+  if (process.env.NODE_ENV !== "production" && parent) {
+    throw new Error("<Form> cannot be nested. For reusable field groups, use <Form.Section>-based components without a Form root.");
+  }
+
+  const internalStoreRef = React.useRef<FormStore<T> | null>(null);
+  if (!externalForm && !internalStoreRef.current) {
+    internalStoreRef.current = createFormStore<T>({
+      defaultValues, schema, validateOn, onSubmit, onInvalid,
+      scrollToFirstError, focusFirstError: focusFirstErrorProp,
+    });
+  }
+  const store = (externalForm ?? internalStoreRef.current) as FormStore<T>;
+  const formElRef = React.useRef<HTMLFormElement | null>(null);
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    void (async () => {
+      await store.submit();
+      const s = store.getState();
+      const hasErrors = Object.values(s.errors).some(Boolean);
+      if (hasErrors && store._config.focusFirstError && formElRef.current) {
+        focusFirstError(store as unknown as FormStore<unknown>, formElRef.current, store._config.scrollToFirstError);
+      }
+    })();
+  };
+
+  return (
+    <FormContext.Provider value={store as unknown as FormStore<unknown>}>
+      <DisabledContext.Provider value={disabled ?? false}>
+        <FormElement formElRef={formElRef} onSubmit={handleSubmit} noValidate {...rest}>
+          {children}
+        </FormElement>
+      </DisabledContext.Provider>
+    </FormContext.Provider>
+  );
+}
+
+function FormElement({ formElRef, children, onSubmit, className, ...rest }: {
+  formElRef: React.RefObject<HTMLFormElement | null>;
+  children?: React.ReactNode;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+} & Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">) {
+  const state = useFormState();
+  return (
+    <form
+      ref={formElRef}
+      aria-busy={state.submitting || undefined}
+      onSubmit={onSubmit}
+      className={`${formClass}${className ? ` ${className}` : ""}`}
+      {...rest}
+    >
+      {children}
+    </form>
+  );
+}
+
+export interface FormSectionProps extends React.HTMLAttributes<HTMLElement> {
+  name?: string;
+  schema?: StandardSchemaV1;
+  as?: "div" | "fieldset";
+}
+
+const sectionClass = "flex flex-col gap-[var(--space-4,1rem)]";
+
+function Section({ name, schema, as = "div", className, children, ...rest }: FormSectionProps) {
+  const parent = React.useContext(SectionContext);
+  const store = React.useContext(FormContext);
+  const path = scopedPath(parent.path, name);
+
+  React.useEffect(() => {
+    if (!schema || !store || !path) return;
+    return store.registerSectionSchema(path, schema);
+  }, [schema, store, path]);
+
+  const Tag = as as any;
+  const role = as === "div" ? "group" : undefined;
+
+  return (
+    <SectionContext.Provider value={{ path }}>
+      <Tag role={role} className={`${sectionClass}${className ? ` ${className}` : ""}`} {...rest}>
+        {children}
+      </Tag>
+    </SectionContext.Provider>
+  );
+}
+
+function SectionTitle({ children, ...rest }: React.HTMLAttributes<HTMLElement>) {
+  return <legend {...rest}>{children}</legend>;
+}
+
+type FormType = typeof FormInner & {
+  Section: typeof Section;
+  SectionTitle: typeof SectionTitle;
+};
+
+export const Form = FormInner as unknown as FormType;
+Form.Section = Section;
+Form.SectionTitle = SectionTitle;
+
+export { Section, SectionTitle };

package/data/registry/react/components/form/index.tailwind.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Form as FormRoot, Section, SectionTitle } from "./form";
+import { Field, FormLabel, FormDescription, FormError, FormControl } from "./field";
+import { Steps, Step } from "./steps";
+
+type FormType = typeof FormRoot & {
+  Section: typeof Section;
+  SectionTitle: typeof SectionTitle;
+  Field: typeof Field;
+  Label: typeof FormLabel;
+  Description: typeof FormDescription;
+  Error: typeof FormError;
+  Control: typeof FormControl;
+  Steps: typeof Steps;
+  Step: typeof Step;
+};
+
+const Form = FormRoot as FormType;
+Form.Section = Section;
+Form.SectionTitle = SectionTitle;
+Form.Field = Field;
+Form.Label = FormLabel;
+Form.Description = FormDescription;
+Form.Error = FormError;
+Form.Control = FormControl;
+Form.Steps = Steps;
+Form.Step = Step;
+
+export { Form };
+export { useShUiForm } from "./use-sh-ui-form";
+export {
+  useFormContext,
+  useFormField,
+  useFormSection,
+  useFormState,
+} from "./context";
+export { useFormSteps } from "./steps";
+export { createFormStore } from "./store";
+export type {
+  FormStore,
+  FormStoreState,
+  FieldState,
+  FieldError,
+  FieldConfig,
+  FieldValidate,
+  ValidateOn,
+  StandardSchemaV1,
+} from "./types";