sh-ui-cli 0.49.0 → 0.51.0

package/data/registry/react/components/file-upload/styles.css.ts

@@ -0,0 +1,193 @@
+import { style } from "@vanilla-extract/css";
+
+export const fileUpload = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-3)",
+});
+
+export const fileUploadDropzone = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--space-2)",
+  padding: "var(--space-8) var(--space-6)",
+  minHeight: "10rem",
+  background: "var(--background-subtle)",
+  color: "var(--foreground-muted)",
+  border: "1.5px dashed var(--border)",
+  borderRadius: "var(--radius)",
+  cursor: "pointer",
+  textAlign: "center",
+  transition: "border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover": {
+      borderColor: "var(--border-strong)",
+      color: "var(--foreground)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+      borderColor: "var(--foreground)",
+    },
+  },
+});
+
+export const fileUploadDropzoneDrag = style({
+  borderColor: "var(--foreground)",
+  background: "var(--background-muted)",
+  color: "var(--foreground)",
+});
+
+export const fileUploadDropzoneDisabled = style({
+  opacity: "var(--opacity-disabled)",
+  cursor: "not-allowed",
+  pointerEvents: "none",
+});
+
+export const fileUploadInput = style({
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+});
+
+export const fileUploadText = style({
+  fontSize: "var(--text-sm)",
+  color: "var(--foreground)",
+  selectors: {
+    "& strong": {
+      fontWeight: "var(--weight-semibold)",
+    },
+  },
+});
+
+export const fileUploadHint = style({
+  fontSize: "var(--text-xs)",
+  color: "var(--foreground-muted)",
+});
+
+export const fileUploadTrigger = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--space-2)",
+  padding: "var(--space-2) var(--space-3)",
+  fontSize: "var(--text-sm)",
+  fontWeight: "var(--weight-medium)",
+  color: "var(--foreground)",
+  background: "var(--background)",
+  border: "1px solid var(--border)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  transition: "background-color var(--duration-fast), border-color var(--duration-fast)",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      background: "var(--background-muted)",
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const fileUploadList = style({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.375rem",
+});
+
+export const fileUploadItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.625rem",
+  padding: "var(--space-2) var(--space-3)",
+  background: "var(--background)",
+  border: "1px solid var(--border)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  fontSize: "var(--text-sm)",
+  color: "var(--foreground)",
+  selectors: {
+    "& > svg": {
+      color: "var(--foreground-muted)",
+      flexShrink: 0,
+    },
+  },
+});
+
+export const fileUploadName = style({
+  flex: "1 1 auto",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const fileUploadSize = style({
+  fontSize: "var(--text-xs)",
+  color: "var(--foreground-muted)",
+  flexShrink: 0,
+});
+
+export const fileUploadRemove = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.5rem",
+  height: "1.5rem",
+  padding: 0,
+  background: "transparent",
+  border: "none",
+  borderRadius: "calc(var(--radius) - 4px)",
+  color: "var(--foreground-muted)",
+  cursor: "pointer",
+  transition: "color var(--duration-fast), background-color var(--duration-fast)",
+  flexShrink: 0,
+  selectors: {
+    "&:hover:not(:disabled)": {
+      color: "var(--foreground)",
+      background: "var(--background-muted)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "file-upload": fileUpload,
+  "file-upload__dropzone": fileUploadDropzone,
+  "file-upload__dropzone--drag": fileUploadDropzoneDrag,
+  "file-upload__dropzone--disabled": fileUploadDropzoneDisabled,
+  "file-upload__input": fileUploadInput,
+  "file-upload__text": fileUploadText,
+  "file-upload__hint": fileUploadHint,
+  "file-upload__trigger": fileUploadTrigger,
+  "file-upload__list": fileUploadList,
+  "file-upload__item": fileUploadItem,
+  "file-upload__name": fileUploadName,
+  "file-upload__size": fileUploadSize,
+  "file-upload__remove": fileUploadRemove,
+};

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,
+};