sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,193 +0,0 @@
-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

@@ -1,61 +0,0 @@
-"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

@@ -1,56 +0,0 @@
-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,
-};