sh-ui-cli 0.52.1 → 0.52.3

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

@@ -1,413 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const header = style({
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-4)",
-  height: "var(--control-md)",
-  padding: "0 var(--space-3)",
-  background: "var(--background)",
-  borderBottom: "1px solid var(--border)",
-  transition: "transform var(--duration-base) var(--ease-standard),\n    background-color var(--duration-base) var(--ease-standard)",
-  "--sh-ui-header-hover-bg": "var(--background-muted)",
-  "--sh-ui-header-blur-opacity": "85%",
-  "--sh-ui-header-blur-radius": "16px",
-  selectors: {
-    "&[data-sticky-hide][data-hidden]": {
-      transform: "translateY(-100%)",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-    "(max-width: 767px)": {
-      gap: "var(--space-2)",
-    },
-  },
-});
-
-export const headerSolid = style({
-  background: "var(--background)",
-});
-
-export const headerTransparent = style({
-  background: "transparent",
-  borderBottomColor: "transparent",
-  "--sh-ui-header-hover-bg": "color-mix(in srgb, currentColor 14%, transparent)",
-});
-
-export const headerBlur = style({
-  background: "color-mix(in srgb, var(--background) var(--sh-ui-header-blur-opacity), transparent)",
-  backdropFilter: "saturate(180%) blur(var(--sh-ui-header-blur-radius))",
-  WebkitBackdropFilter: "saturate(180%) blur(var(--sh-ui-header-blur-radius))",
-  "--sh-ui-header-hover-bg": "color-mix(in srgb, currentColor 14%, transparent)",
-});
-
-export const header__brand = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  flexShrink: 0,
-});
-
-export const header__logo = style({
-  display: "inline-flex",
-  alignItems: "center",
-  color: "var(--foreground)",
-});
-
-export const header__title = style({
-  fontSize: "var(--text-base)",
-  fontWeight: "var(--weight-bold)",
-  color: "var(--foreground)",
-  letterSpacing: "-0.3px",
-});
-
-export const header__trigger = style({
-  display: "none",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "2.25rem",
-  height: "2.25rem",
-  padding: 0,
-  background: "transparent",
-  border: 0,
-  color: "var(--foreground)",
-  borderRadius: "calc(var(--radius) - 2px)",
-  cursor: "pointer",
-  transition: "background-color var(--duration-fast)",
-  selectors: {
-    "&:hover": {
-      background: "var(--sh-ui-header-hover-bg)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(max-width: 767px)": {
-      display: "inline-flex",
-      order: -1,
-    },
-  },
-});
-
-export const header__nav = style({
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  flex: 1,
-  minWidth: 0,
-  overflowX: "auto",
-  scrollbarWidth: "none",
-  selectors: {
-    "&::-webkit-scrollbar": {
-      display: "none",
-    },
-  },
-  "@media": {
-    "(max-width: 767px)": {
-      display: "none",
-    },
-  },
-});
-
-export const header__item = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  padding: "var(--space-2) var(--space-3)",
-  fontSize: "var(--text-sm)",
-  fontWeight: "var(--weight-medium)",
-  color: "var(--foreground-muted)",
-  textDecoration: "none",
-  background: "transparent",
-  border: 0,
-  borderRadius: "calc(var(--radius) - 2px)",
-  cursor: "pointer",
-  whiteSpace: "nowrap",
-  transition: "color var(--duration-fast), background-color var(--duration-fast)",
-  selectors: {
-    "&:hover": {
-      color: "var(--foreground)",
-      background: "var(--sh-ui-header-hover-bg)",
-    },
-    "&[data-active]": {
-      color: "var(--foreground)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-});
-
-export const header__actions = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  marginLeft: "auto",
-  flexShrink: 0,
-});
-
-export const headerDesktopOnly = style({
-  display: "contents",
-  "@media": {
-    "(max-width: 767px)": {
-      display: "none",
-    },
-  },
-});
-
-export const headerMobileOnly = style({
-  display: "none",
-  "@media": {
-    "(max-width: 767px)": {
-      display: "contents",
-    },
-  },
-});
-
-export const headerGroupInline = style({
-  display: "contents",
-});
-
-export const headerGroupDrawer = style({
-  display: "flex",
-  flexDirection: "column",
-  marginTop: "var(--space-3)",
-  selectors: {
-    "&:first-child": {
-      marginTop: 0,
-    },
-  },
-});
-
-export const headerGroupLabel = style({
-  display: "flex",
-  alignItems: "center",
-  height: "2rem",
-  padding: "0 var(--space-2)",
-  fontSize: "var(--text-xs)",
-  fontWeight: "var(--weight-medium)",
-  color: "var(--foreground-muted)",
-});
-
-export const headerGroupItems = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1px",
-});
-
-export const header__menu = style({
-  position: "relative",
-});
-
-export const headerMenuInline = style({
-  display: "inline-block",
-});
-
-export const headerMenuTrigger = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  padding: "var(--space-2) var(--space-3)",
-  fontSize: "var(--text-sm)",
-  fontWeight: "var(--weight-medium)",
-  color: "var(--foreground-muted)",
-  background: "transparent",
-  border: 0,
-  borderRadius: "calc(var(--radius) - 2px)",
-  cursor: "pointer",
-  whiteSpace: "nowrap",
-  transition: "color var(--duration-fast), background-color var(--duration-fast)",
-  selectors: {
-    "&:hover": {
-      color: "var(--foreground)",
-      background: "var(--sh-ui-header-hover-bg)",
-    },
-    "&[data-open]": {
-      color: "var(--foreground)",
-      background: "var(--sh-ui-header-hover-bg)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    [`&[data-open] ${header__chevron}`]: {
-      transform: "rotate(180deg)",
-    },
-  },
-});
-
-export const header__chevron = style({
-  transition: "transform var(--duration-fast) var(--ease-standard)",
-});
-
-export const headerMenuContentPortal = style({
-  zIndex: "var(--z-dropdown, 50)",
-  padding: "var(--space-1)",
-  background: "var(--background)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.18)",
-  display: "flex",
-  flexDirection: "column",
-  gap: "1px",
-  color: "var(--foreground)",
-  selectors: {
-    [`& ${header__item}`]: {
-      padding: "var(--space-2) var(--space-3)",
-      fontSize: "var(--text-sm)",
-    },
-  },
-});
-
-export const header__backdrop = style({
-  display: "none",
-  "@media": {
-    "(max-width: 767px)": {
-      display: "block",
-      position: "fixed",
-      inset: 0,
-      background: "rgba(0, 0, 0, 0.25)",
-      backdropFilter: "blur(8px)",
-      zIndex: "var(--z-overlay)",
-      opacity: 0,
-      pointerEvents: "none",
-      transition: "opacity var(--duration-base) var(--ease-standard)",
-      selectors: {
-        "&[data-open]": {
-          opacity: 1,
-          pointerEvents: "auto",
-        },
-      },
-    },
-  },
-});
-
-export const header__drawer = style({
-  display: "none",
-  "@media": {
-    "(max-width: 767px)": {
-      display: "flex",
-      position: "fixed",
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: "min(17.5rem, 85vw)",
-      background: "var(--background-subtle)",
-      borderRight: "1px solid var(--border)",
-      zIndex: "var(--z-modal)",
-      transform: "translateX(-100%)",
-      transition: "transform var(--duration-base) var(--ease-standard)",
-      flexDirection: "column",
-      overflowY: "auto",
-      selectors: {
-        "&[data-open]": {
-          transform: "translateX(0)",
-        },
-        [`& ${header__item}`]: {
-          padding: "var(--space-3) var(--space-3)",
-          fontSize: "var(--text-sm)",
-          borderRadius: "calc(var(--radius) - 2px)",
-        },
-      },
-    },
-  },
-});
-
-export const headerDrawerHead = style({
-  "@media": {
-    "(max-width: 767px)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: "var(--space-2) var(--space-2)",
-      borderBottom: "1px solid var(--border)",
-    },
-  },
-});
-
-export const headerDrawerNav = style({
-  "@media": {
-    "(max-width: 767px)": {
-      display: "flex",
-      flexDirection: "column",
-      padding: "var(--space-2)",
-      gap: "1px",
-    },
-  },
-});
-
-export const headerMenuDrawer = style({
-  "@media": {
-    "(max-width: 767px)": {
-      display: "flex",
-      flexDirection: "column",
-      selectors: {
-        [`& > ${headerMenuTrigger}`]: {
-          justifyContent: "space-between",
-          width: "100%",
-          padding: "var(--space-3) var(--space-3)",
-        },
-        [`& > ${headerMenuContent}`]: {
-          display: "flex",
-          flexDirection: "column",
-          padding: "var(--space-1) 0 var(--space-1) var(--space-4)",
-          gap: "1px",
-        },
-        [`& > ${headerMenuContent}[hidden]`]: {
-          display: "none",
-        },
-      },
-    },
-  },
-});
-
-export const header__group = style({
-});
-
-export const headerMenuTriggerLabel = style({
-});
-
-export const headerMenuContent = style({
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "header": header,
-  "header--solid": headerSolid,
-  "header--transparent": headerTransparent,
-  "header--blur": headerBlur,
-  "header__brand": header__brand,
-  "header__logo": header__logo,
-  "header__title": header__title,
-  "header__trigger": header__trigger,
-  "header__nav": header__nav,
-  "header__item": header__item,
-  "header__actions": header__actions,
-  "header__desktop-only": headerDesktopOnly,
-  "header__mobile-only": headerMobileOnly,
-  "header__group--inline": headerGroupInline,
-  "header__group--drawer": headerGroupDrawer,
-  "header__group-label": headerGroupLabel,
-  "header__group-items": headerGroupItems,
-  "header__menu": header__menu,
-  "header__menu--inline": headerMenuInline,
-  "header__menu-trigger": headerMenuTrigger,
-  "header__chevron": header__chevron,
-  "header__menu-content--portal": headerMenuContentPortal,
-  "header__backdrop": header__backdrop,
-  "header__drawer": header__drawer,
-  "header__drawer-head": headerDrawerHead,
-  "header__drawer-nav": headerDrawerNav,
-  "header__menu--drawer": headerMenuDrawer,
-  "header__group": header__group,
-  "header__menu-trigger-label": headerMenuTriggerLabel,
-  "header__menu-content": headerMenuContent,
-};

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

@@ -1,52 +0,0 @@
-import * as React from "react";
-import { byKey, label, label__subtitle, label__description, label__caption, label__title } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  /**
-   * 필수 필드 표시. `true`면 `::after`로 `*` 표시가 붙는다.
-   * Input에 `required` 속성이 있으면 CSS `:has()`로 자동 감지되므로 보통 명시 불필요.
-   *
-   * @default false
-   */
-  isRequired?: boolean;
-}
-
-
-/**
- * 폼 컨트롤과 1:1로 연결되는 레이블. `htmlFor`로 컨트롤의 `id`와 매칭하거나
- * Label 안에 컨트롤을 감싸 묵시적으로 연결한다. 클릭 시 자동으로 컨트롤에 포커스가 간다.
- */
-export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, children, isRequired, ...props }, ref) => (
-    <label
-      ref={ref}
-      className={cn(label, className)}
-      data-required={isRequired || undefined}
-      {...props}
-    >
-      {children}
-    </label>
-  ),
-);
-Label.displayName = "Label";
-
-/** Label 안의 주 라벨 텍스트. 구조적 그룹핑이 필요할 때 Label과 함께 사용. */
-export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn(label__title, className)} {...props} />;
-}
-
-/** 라벨 옆에 약하게 표시되는 보조 텍스트(예: "선택 사항"). */
-export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn(label__subtitle, className)} {...props} />;
-}
-
-/** 라벨 아래에 붙는 안내 문구. 컨트롤과 `aria-describedby`로 연결할 것. */
-export function LabelDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn(label__description, className)} {...props} />;
-}
-
-/** 라벨 아래의 보조 캡션(예: 입력 형식 예시, 글자 수 제한). */
-export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn(label__caption, className)} {...props} />;
-}

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

@@ -1,141 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const label = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.125rem",
-  fontSize: "var(--text-sm)",
-  fontWeight: "var(--weight-medium)",
-  lineHeight: 1.4,
-  color: "var(--foreground)",
-  cursor: "pointer",
-  userSelect: "none",
-  selectors: {
-    [`&:not(:has(${label__title}`]: {
-      display: "block",
-    },
-    [`&[data-required] > ${label__title}::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:has(+ .input:required) > ${label__title}::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:has(+ .input-wrap .input:required) > ${label__title}::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:has(+ .textarea:required) > ${label__title}::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:has(+ .combobox__input:required) > ${label__title}::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&[data-required]:not(:has(${label__title}))::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:not(:has(${label__title})):has(+ .input:required)::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:not(:has(${label__title})):has(+ .input-wrap .input:required)::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:not(:has(${label__title})):has(+ .textarea:required)::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    [`&:not(:has(${label__title})):has(+ .combobox__input:required)::after`]: {
-      content: "\" *\"",
-      color: "var(--danger)",
-      fontWeight: "var(--weight-semibold)",
-    },
-    "&:has(+ .input:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .input-wrap .input:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .textarea:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .select__trigger:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .combobox__input:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .date-picker__trigger:disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    "&:has(+ .file-upload .file-upload__dropzone--disabled)": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-  },
-});
-
-export const label__subtitle = style({
-  display: "block",
-  fontWeight: "var(--weight-regular)",
-  fontSize: "0.8125rem",
-  color: "var(--foreground)",
-});
-
-export const label__description = style({
-  display: "block",
-  margin: 0,
-  fontWeight: "var(--weight-regular)",
-  fontSize: "0.8125rem",
-  lineHeight: 1.4,
-  color: "var(--foreground-muted)",
-});
-
-export const label__caption = style({
-  margin: 0,
-  fontWeight: "var(--weight-regular)",
-  fontSize: "var(--text-xs)",
-  lineHeight: 1.3,
-  color: "var(--foreground-subtle, var(--foreground-muted))",
-  opacity: 0.75,
-  selectors: {
-    "&))": {
-      display: "block",
-    },
-  },
-});
-
-export const label__title = style({
-  fontWeight: "var(--weight-semibold)",
-  fontSize: "var(--text-sm)",
-  color: "var(--foreground)",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "label": label,
-  "label__subtitle": label__subtitle,
-  "label__description": label__description,
-  "label__caption": label__caption,
-  "label__title": label__title,
-};