sh-ui-cli 0.48.0 → 0.50.0

package/data/registry/react/components/form/index.vanilla-extract.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { byKey, form, formSection, formField, formError } from "./styles.css";
+import { Form as FormRoot, Section, SectionTitle } from "./form";
+import {
+  Field,
+  FormLabel,
+  FormDescription,
+  FormError,
+  FormControl,
+} from "./field";
+import { Steps, Step } from "./steps";
+
+/**
+ * sh-ui Form의 compound 진입점. `Form.Field`, `Form.Label`, `Form.Description`,
+ * `Form.Error`, `Form.Control`, `Form.Section`, `Form.SectionTitle`, `Form.Steps`, `Form.Step` 으로
+ * 구조를 조립한다. 검증은 Standard Schema(yup/zod 등) 또는 inline 함수로 부착한다.
+ */
+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";

package/data/registry/react/components/form/styles.css.ts

@@ -0,0 +1,56 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const shUiFormErrorIn = keyframes({
+  "from": {
+    opacity: 0,
+    transform: "translateY(-4px)",
+  },
+  "to": {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+});
+
+export const form = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-4, 1rem)",
+});
+
+export const formSection = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-4, 1rem)",
+});
+
+export const formField = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-1, 0.25rem)",
+  selectors: {
+    "&[data-disabled]": {
+      opacity: 0.6,
+      pointerEvents: "none",
+    },
+  },
+});
+
+export const formError = style({
+  color: "var(--color-danger, #dc2626)",
+  fontSize: "var(--text-sm, 0.875rem)",
+  margin: 0,
+  animation: "sh-ui-form-error-in 150ms\n    var(--easing-out, cubic-bezier(0.16, 1, 0.3, 1))",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "form": form,
+  "form-section": formSection,
+  "form-field": formField,
+  "form-error": formError,
+};