sh-ui-cli 0.49.0 → 0.50.0

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

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

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

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