sh-ui-cli 0.48.0 → 0.50.0

package/data/registry/react/components/color-picker/styles.css.ts

@@ -0,0 +1,169 @@
+import { style } from "@vanilla-extract/css";
+
+export const colorPicker = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.625rem",
+  width: "100%",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+});
+
+export const colorPickerSv = style({
+  position: "relative",
+  width: "100%",
+  aspectRatio: "4 / 3",
+  borderRadius: "var(--radius)",
+  cursor: "crosshair",
+  overflow: "hidden",
+  touchAction: "none",
+});
+
+export const colorPickerSvSaturation = style({
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(to right, #fff, transparent)",
+});
+
+export const colorPickerSvValue = style({
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(to top, #000, transparent)",
+});
+
+export const colorPickerSvThumb = style({
+  position: "absolute",
+  width: "0.875rem",
+  height: "0.875rem",
+  marginLeft: "-0.4375rem",
+  marginTop: "-0.4375rem",
+  border: "2px solid #fff",
+  borderRadius: "50%",
+  boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.4)",
+  pointerEvents: "none",
+});
+
+export const colorPickerHue = style({
+  position: "relative",
+  width: "100%",
+  height: "0.875rem",
+  borderRadius: "999px",
+  cursor: "pointer",
+  touchAction: "none",
+  background: "linear-gradient(\n    to right,\n    #f00 0%,\n    #ff0 16.66%,\n    #0f0 33.33%,\n    #0ff 50%,\n    #00f 66.66%,\n    #f0f 83.33%,\n    #f00 100%\n  )",
+});
+
+export const colorPickerHueThumb = style({
+  position: "absolute",
+  top: "50%",
+  width: "0.875rem",
+  height: "0.875rem",
+  marginLeft: "-0.4375rem",
+  transform: "translateY(-50%)",
+  background: "#fff",
+  borderRadius: "50%",
+  boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.4)",
+  pointerEvents: "none",
+});
+
+export const colorPickerAlpha = style({
+  position: "relative",
+  width: "100%",
+  height: "0.875rem",
+  borderRadius: "999px",
+  cursor: "pointer",
+  touchAction: "none",
+  backgroundColor: "#fff",
+  backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%),\n    linear-gradient(-45deg, #ccc 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #ccc 75%),\n    linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+  backgroundSize: "8px 8px",
+  backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0",
+  overflow: "hidden",
+});
+
+export const colorPickerAlphaTrack = style({
+  position: "absolute",
+  inset: 0,
+  borderRadius: "inherit",
+  pointerEvents: "none",
+});
+
+export const colorPickerRow = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--space-2)",
+});
+
+export const colorPickerSwatch = style({
+  width: "1.75rem",
+  height: "1.75rem",
+  borderRadius: "calc(var(--radius) - 2px)",
+  border: "1px solid var(--border)",
+  flexShrink: 0,
+});
+
+export const colorPickerHex = style({
+  flex: 1,
+  minWidth: 0,
+  height: "1.75rem",
+  padding: "0 var(--space-2)",
+  border: "1px solid var(--border)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  fontSize: "0.8125rem",
+  textTransform: "uppercase",
+  selectors: {
+    "&:focus": {
+      outline: "none",
+      borderColor: "var(--foreground)",
+      boxShadow: "0 0 0 1px var(--foreground)",
+    },
+  },
+});
+
+export const colorPickerSwatches = style({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.375rem",
+});
+
+export const colorPickerSwatchBtn = style({
+  width: "1.25rem",
+  height: "1.25rem",
+  padding: 0,
+  border: "1px solid var(--border)",
+  borderRadius: "calc(var(--radius) - 4px)",
+  cursor: "pointer",
+  transition: "transform var(--duration-fast), box-shadow var(--duration-fast)",
+  selectors: {
+    "&:hover": {
+      transform: "scale(1.08)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-selected]": {
+      boxShadow: "0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground)",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "color-picker": colorPicker,
+  "color-picker__sv": colorPickerSv,
+  "color-picker__sv-saturation": colorPickerSvSaturation,
+  "color-picker__sv-value": colorPickerSvValue,
+  "color-picker__sv-thumb": colorPickerSvThumb,
+  "color-picker__hue": colorPickerHue,
+  "color-picker__hue-thumb": colorPickerHueThumb,
+  "color-picker__alpha": colorPickerAlpha,
+  "color-picker__alpha-track": colorPickerAlphaTrack,
+  "color-picker__row": colorPickerRow,
+  "color-picker__swatch": colorPickerSwatch,
+  "color-picker__hex": colorPickerHex,
+  "color-picker__swatches": colorPickerSwatches,
+  "color-picker__swatch-btn": colorPickerSwatchBtn,
+};

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

@@ -0,0 +1,165 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { byKey, combobox__input, combobox__positioner, combobox__content, combobox__item, comboboxItemIndicator, comboboxItemText, combobox__empty, comboboxGroupLabel, combobox__chip, comboboxChipRemove } from "./styles.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+/**
+ * Select + Input의 결합 — 타이핑으로 목록이 자동 필터링된다.
+ * Base UI Combobox를 래핑해 `items` 배열을 받으면 기본 필터가 `input` 값 기준으로 동작.
+ *
+ *   <Combobox items={fruits}>
+ *     <ComboboxInput placeholder="과일 검색" />
+ *     <ComboboxContent>
+ *       <ComboboxList>
+ *         {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+ *       </ComboboxList>
+ *       <ComboboxEmpty>일치하는 항목 없음</ComboboxEmpty>
+ *     </ComboboxContent>
+ *   </Combobox>
+ */
+export const Combobox = BaseCombobox.Root;
+
+export const ComboboxIcon = BaseCombobox.Icon;
+export const ComboboxTrigger = BaseCombobox.Trigger;
+export const ComboboxClear = BaseCombobox.Clear;
+export const ComboboxValue = BaseCombobox.Value;
+export const ComboboxGroup = BaseCombobox.Group;
+export const ComboboxChips = BaseCombobox.Chips;
+
+export const ComboboxInput = React.forwardRef<
+  HTMLInputElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>>
+>(function ComboboxInput({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Input
+      ref={ref}
+      className={cn(combobox__input, className)}
+      {...props}
+    />
+  );
+});
+
+/** Portal + Positioner + Popup 래퍼. */
+export const ComboboxContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>> & {
+    container?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal>["container"];
+    sideOffset?: number;
+  }
+>(function ComboboxContent(
+  { className, children, container, sideOffset = 4, ...props },
+  ref,
+) {
+  return (
+    <BaseCombobox.Portal container={container}>
+      <BaseCombobox.Positioner
+        className={combobox__positioner}
+        sideOffset={sideOffset}
+        align="start"
+      >
+        <BaseCombobox.Popup
+          ref={ref}
+          className={cn(combobox__content, className)}
+          {...props}
+        >
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+});
+
+export const ComboboxList = BaseCombobox.List;
+
+export const ComboboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>>
+>(function ComboboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      className={cn(combobox__item, className)}
+      {...props}
+    >
+      <BaseCombobox.ItemIndicator className={comboboxItemIndicator}>
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+      <span className={comboboxItemText}>{children}</span>
+    </BaseCombobox.Item>
+  );
+});
+
+export const ComboboxEmpty = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>>
+>(function ComboboxEmpty({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      className={cn(combobox__empty, className)}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>>
+>(function ComboboxGroupLabel({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.GroupLabel
+      ref={ref}
+      className={cn(comboboxGroupLabel, className)}
+      {...props}
+    />
+  );
+});
+
+/** 다중 선택 칩. */
+export const ComboboxChip = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
+>(function ComboboxChip({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={cn(combobox__chip, className)}
+      {...props}
+    />
+  );
+});
+
+/** 칩 × 제거 버튼. */
+export const ComboboxChipRemove = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove>>
+>(function ComboboxChipRemove({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.ChipRemove
+      ref={ref}
+      className={cn(comboboxChipRemove, className)}
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseCombobox.ChipRemove>
+  );
+});
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path
+        d="M3 8.5l3 3 7-7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,174 @@
+import { style } from "@vanilla-extract/css";
+
+export const combobox__input = style({
+  display: "inline-flex",
+  width: "100%",
+  minWidth: "10rem",
+  height: "var(--control-md)",
+  padding: "0 var(--space-3)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1,
+  outline: "none",
+  transition: "border-color var(--duration-fast)",
+  selectors: {
+    "&::placeholder": {
+      color: "var(--foreground-subtle)",
+    },
+    "&:hover:not(:disabled)": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+  },
+});
+
+export const combobox__positioner = style({
+  zIndex: "var(--z-dropdown)",
+  outline: "none",
+  width: "var(--anchor-width)",
+});
+
+export const combobox__content = style({
+  maxHeight: "min(20rem, var(--available-height))",
+  overflowY: "auto",
+  padding: "var(--space-1)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.08)",
+  outline: "none",
+  transformOrigin: "var(--transform-origin)",
+  transition: "opacity 140ms ease, transform 140ms ease",
+  selectors: {
+    "&[data-starting-style]": {
+      opacity: 0,
+      transform: "scale(0.97)",
+    },
+    "&[data-ending-style]": {
+      opacity: 0,
+      transform: "scale(0.97)",
+    },
+  },
+});
+
+export const combobox__item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--space-2)",
+  padding: "0.375rem 0.75rem",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.4,
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  userSelect: "none",
+  outline: "none",
+  selectors: {
+    "&[data-highlighted]": {
+      background: "var(--background-muted)",
+    },
+    "&:hover": {
+      background: "var(--background-muted)",
+    },
+    "&[data-selected]": {
+      color: "var(--foreground)",
+      fontWeight: "var(--weight-medium)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+  },
+});
+
+export const comboboxItemIndicator = style({
+  order: 1,
+  marginLeft: "auto",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--foreground)",
+});
+
+export const comboboxItemText = style({
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const combobox__empty = style({
+  padding: "var(--space-3) var(--space-2)",
+  textAlign: "center",
+  fontSize: "0.8125rem",
+  color: "var(--foreground-muted)",
+});
+
+export const comboboxGroupLabel = style({
+  padding: "0.375rem var(--space-2) var(--space-1)",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--weight-semibold)",
+  color: "var(--foreground-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+});
+
+export const combobox__chip = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--space-1)",
+  padding: "0.125rem 0.375rem 0.125rem var(--space-2)",
+  marginRight: "var(--space-1)",
+  fontSize: "var(--text-xs)",
+  lineHeight: "1.25rem",
+  background: "var(--background-muted)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  whiteSpace: "nowrap",
+});
+
+export const comboboxChipRemove = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1rem",
+  height: "1rem",
+  padding: 0,
+  border: 0,
+  borderRadius: "999px",
+  background: "transparent",
+  color: "var(--foreground-muted)",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition: "background-color var(--duration-fast), color var(--duration-fast)",
+  selectors: {
+    "&:hover": {
+      background: "var(--background)",
+      color: "var(--foreground)",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "combobox__input": combobox__input,
+  "combobox__positioner": combobox__positioner,
+  "combobox__content": combobox__content,
+  "combobox__item": combobox__item,
+  "combobox__item-indicator": comboboxItemIndicator,
+  "combobox__item-text": comboboxItemText,
+  "combobox__empty": combobox__empty,
+  "combobox__group-label": comboboxGroupLabel,
+  "combobox__chip": combobox__chip,
+  "combobox__chip-remove": comboboxChipRemove,
+};