sh-ui-cli 0.48.0 → 0.50.0

package/data/registry/react/components/rich-text-editor/styles.css.ts

@@ -0,0 +1,243 @@
+import { style } from "@vanilla-extract/css";
+
+export const rte = style({
+  display: "flex",
+  flexDirection: "column",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  background: "var(--background)",
+  overflow: "hidden",
+  transition: "border-color var(--duration-fast)",
+  selectors: {
+    "&:focus-within": {
+      borderColor: "var(--foreground)",
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-readonly]": {
+      background: "var(--background-subtle)",
+    },
+  },
+});
+
+export const rte__toolbar = style({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "0.125rem",
+  padding: "var(--space-1) var(--space-2)",
+  background: "var(--background-muted)",
+  borderBottom: "1px solid var(--border)",
+});
+
+export const rte__btn = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.875rem",
+  height: "1.875rem",
+  padding: 0,
+  background: "transparent",
+  color: "var(--foreground-muted)",
+  border: "1px solid transparent",
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  transition: "color var(--duration-fast),\n    background-color var(--duration-fast),\n    border-color var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      color: "var(--foreground)",
+      background: "var(--background)",
+      borderColor: "var(--border)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "1px",
+    },
+    "&.is-active": {
+      color: "var(--foreground)",
+      background: "var(--background)",
+      borderColor: "var(--border-strong)",
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const rte__sep = style({
+  display: "inline-block",
+  width: "1px",
+  height: "1.25rem",
+  margin: "0 var(--space-1)",
+  background: "var(--border)",
+});
+
+export const rte__viewport = style({
+  display: "flex",
+  minHeight: "var(--sh-ui-rte-min-height, 9rem)",
+  maxHeight: "var(--sh-ui-rte-max-height, 28rem)",
+  overflowY: "auto",
+  selectors: {
+    "& > .ProseMirror": {
+      flex: 1,
+    },
+  },
+});
+
+export const rte__content = style({
+  outline: "none",
+  padding: "var(--space-3) var(--space-4)",
+  fontSize: "0.9375rem",
+  lineHeight: 1.65,
+  color: "var(--foreground)",
+  selectors: {
+    "& > :first-child": {
+      marginTop: 0,
+    },
+    "& > :last-child": {
+      marginBottom: 0,
+    },
+    "& p": {
+      margin: "0 0 var(--space-3)",
+    },
+    "& h1": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h2": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h3": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h4": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h5": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h6": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h1": {
+      fontSize: "1.5rem",
+    },
+    "& h2": {
+      fontSize: "1.25rem",
+    },
+    "& h3": {
+      fontSize: "1.125rem",
+    },
+    "& ul": {
+      margin: "0 0 var(--space-3)",
+      paddingLeft: "var(--space-5)",
+    },
+    "& ol": {
+      margin: "0 0 var(--space-3)",
+      paddingLeft: "var(--space-5)",
+    },
+    "& li": {
+      marginBottom: "var(--space-1)",
+    },
+    "& li > p": {
+      margin: 0,
+    },
+    "& blockquote": {
+      margin: "0 0 var(--space-3)",
+      padding: "var(--space-2) var(--space-3)",
+      borderLeft: "3px solid var(--border-strong)",
+      background: "var(--background-subtle)",
+      color: "var(--foreground-muted)",
+      borderRadius: "0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0",
+    },
+    "& blockquote > :last-child": {
+      marginBottom: 0,
+    },
+    "& code": {
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      fontSize: "0.875em",
+      padding: "0.125rem 0.375rem",
+      borderRadius: "calc(var(--radius) - 4px)",
+      background: "var(--background-muted)",
+      color: "var(--foreground)",
+    },
+    "& pre": {
+      margin: "0 0 var(--space-3)",
+      padding: "var(--space-3)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius)",
+      background: "var(--background-subtle)",
+      overflowX: "auto",
+      fontSize: "0.8125rem",
+      lineHeight: 1.6,
+    },
+    "& pre code": {
+      padding: 0,
+      background: "transparent",
+      fontSize: "inherit",
+    },
+    "& hr": {
+      border: 0,
+      borderTop: "1px solid var(--border)",
+      margin: "var(--space-4) 0",
+    },
+    "& a": {
+      color: "var(--primary)",
+      textDecoration: "underline",
+      textUnderlineOffset: "2px",
+    },
+    "& a:hover": {
+      textDecorationThickness: "2px",
+    },
+    "& p.is-editor-empty:first-child::before": {
+      content: "attr(data-placeholder)",
+      color: "var(--foreground-muted)",
+      float: "left",
+      pointerEvents: "none",
+      height: 0,
+    },
+    "& .is-editor-empty:first-child::before": {
+      content: "attr(data-placeholder)",
+      color: "var(--foreground-muted)",
+      float: "left",
+      pointerEvents: "none",
+      height: 0,
+    },
+    "& del": {
+      color: "var(--foreground-muted)",
+    },
+    "& s": {
+      color: "var(--foreground-muted)",
+    },
+    "& ::selection": {
+      background: "var(--background-muted)",
+    },
+  },
+});
+
+export const rteIsEmpty = style({
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "rte": rte,
+  "rte__toolbar": rte__toolbar,
+  "rte__btn": rte__btn,
+  "rte__sep": rte__sep,
+  "rte__viewport": rte__viewport,
+  "rte__content": rte__content,
+  "rte__is-empty": rteIsEmpty,
+};

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

@@ -0,0 +1,234 @@
+"use client";
+
+import * as React from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { byKey, select__trigger, select__value, select__placeholder, select__icon, select__positioner, select__content, select__label, select__item, selectItemText, select__indicator, select__separator, select__chips, select__chip, selectChipRemove } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+export const Select = BaseSelect.Root;
+
+/** shadcn 호환: <SelectValue placeholder="..." /> */
+export function SelectValue({
+  placeholder,
+  className,
+  ...props
+}: { placeholder?: string; className?: string } & Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSelect.Value>,
+  "children"
+>) {
+  return (
+    <BaseSelect.Value className={cn(select__value, className)} {...props}>
+      {(value) =>
+        value !== null && value !== undefined && value !== "" ? (
+          (value as React.ReactNode)
+        ) : (
+          <span className={select__placeholder}>{placeholder}</span>
+        )
+      }
+    </BaseSelect.Value>
+  );
+}
+
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>, "className"> & { className?: string }
+>(({ className, children, ...props }, ref) => (
+  <BaseSelect.Trigger
+    ref={ref}
+    className={cn(select__trigger, className)}
+    {...props}
+  >
+    {children}
+    <BaseSelect.Icon className={select__icon} aria-hidden>
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+        <path
+          d="M4 6l4 4 4-4"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </BaseSelect.Icon>
+  </BaseSelect.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+/** Portal + Positioner + Popup을 한 번에.
+ *  container: portal이 마운트될 DOM 노드. 기본 body. 토큰 스코프 안에 띄우려면 해당 컨테이너 ref 전달. */
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>, "className"> & {
+    className?: string;
+    container?: React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>["container"];
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <BaseSelect.Portal container={container}>
+    <BaseSelect.Positioner
+      className={select__positioner}
+      sideOffset={4}
+      align="start"
+    >
+      <BaseSelect.Popup
+        ref={ref}
+        className={cn(select__content, className)}
+        {...props}
+      >
+        {children}
+      </BaseSelect.Popup>
+    </BaseSelect.Positioner>
+  </BaseSelect.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+export const SelectGroup = BaseSelect.Group;
+
+export const SelectLabel = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>, "className"> & { className?: string }
+>(({ className, ...props }, ref) => (
+  <BaseSelect.GroupLabel
+    ref={ref}
+    className={cn(select__label, className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Item>, "className"> & { className?: string }
+>(({ className, children, ...props }, ref) => (
+  <BaseSelect.Item
+    ref={ref}
+    className={cn(select__item, className)}
+    {...props}
+  >
+    <BaseSelect.ItemIndicator className={select__indicator} aria-hidden>
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+        <path
+          d="M3.5 8.5l3 3 6-7"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </BaseSelect.ItemIndicator>
+    <BaseSelect.ItemText className={selectItemText}>
+      {children}
+    </BaseSelect.ItemText>
+  </BaseSelect.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+export const SelectSeparator = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Separator>, "className"> & { className?: string }
+>(({ className, ...props }, ref) => (
+  <BaseSelect.Separator
+    ref={ref}
+    className={cn(select__separator, className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+/* ───────── Multi-select ─────────
+ *
+ * Base UI Select의 `multiple` 모드를 얇게 래핑한 것.
+ * Trigger/Content/Item/Group/Label/Separator는 그대로 재사용한다.
+ */
+
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Root>;
+
+/** 칩 X 버튼 등에서 개별 항목을 제거할 수 있도록 MultiSelect 내부 상태를 expose한다. */
+type MultiSelectCtx = {
+  values: string[];
+  remove: (value: string) => void;
+  clear: () => void;
+};
+const MultiSelectContext = React.createContext<MultiSelectCtx | null>(null);
+export const useMultiSelect = () => {
+  const ctx = React.useContext(MultiSelectContext);
+  if (!ctx) throw new Error("useMultiSelect는 MultiSelect 하위에서만 사용할 수 있습니다.");
+  return ctx;
+};
+
+export const MultiSelect = React.forwardRef<
+  HTMLDivElement,
+  Omit<BaseRootProps, "multiple" | "value" | "defaultValue" | "onValueChange"> & {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+  }
+>(({ value: valueProp, defaultValue, onValueChange, children, ...props }, _ref) => {
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);
+  const values = isControlled ? valueProp! : internal;
+
+  const commit = React.useCallback(
+    (next: string[]) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const ctx = React.useMemo<MultiSelectCtx>(
+    () => ({
+      values,
+      remove: (v) => commit(values.filter((x) => x !== v)),
+      clear: () => commit([]),
+    }),
+    [values, commit],
+  );
+
+  return (
+    <MultiSelectContext.Provider value={ctx}>
+      <BaseSelect.Root multiple value={values} onValueChange={commit} {...props}>
+        {children}
+      </BaseSelect.Root>
+    </MultiSelectContext.Provider>
+  );
+});
+MultiSelect.displayName = "MultiSelect";
+
+/**
+ * 다중 선택 값 표시. 배열이 비면 placeholder, 있으면 join 또는 사용자 정의 renderer.
+ *
+ *   <MultiSelectValue placeholder="과일" />                       // "Apple, Banana"
+ *   <MultiSelectValue placeholder="과일" render={(arr) => ...} /> // 커스텀 (칩 등)
+ */
+export function MultiSelectValue({
+  placeholder,
+  render,
+  separator = ", ",
+  className,
+  ...props
+}: {
+  placeholder?: string;
+  render?: (
+    values: string[],
+    handlers: { remove: (value: string) => void; clear: () => void },
+  ) => React.ReactNode;
+  separator?: string;
+  className?: string;
+} & Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSelect.Value>,
+  "children" | "render"
+>) {
+  const { remove, clear } = useMultiSelect();
+  return (
+    <BaseSelect.Value className={cn(select__value, className)} {...props}>
+      {(value) => {
+        const arr = Array.isArray(value) ? (value as string[]) : [];
+        if (arr.length === 0) {
+          return <span className={select__placeholder}>{placeholder}</span>;
+        }
+        return render ? render(arr, { remove, clear }) : arr.join(separator);
+      }}
+    </BaseSelect.Value>
+  );
+}

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

@@ -0,0 +1,225 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const shUiSelectIn = keyframes({
+  "from": {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+  "to": {
+    opacity: 1,
+    transform: "scale(1)",
+  },
+});
+
+export const shUiSelectOut = keyframes({
+  "from": {
+    opacity: 1,
+    transform: "scale(1)",
+  },
+  "to": {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+});
+
+export const select__trigger = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--space-2)",
+  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,
+  cursor: "pointer",
+  transition: "border-color var(--duration-fast), background-color var(--duration-fast)",
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-popup-open]": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+    [`&[data-popup-open] ${select__icon}`]: {
+      transform: "rotate(180deg)",
+    },
+  },
+});
+
+export const select__value = style({
+  flex: "1 1 auto",
+  textAlign: "left",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const select__placeholder = style({
+  color: "var(--foreground-subtle)",
+});
+
+export const select__icon = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--foreground-muted)",
+  flexShrink: 0,
+  transition: "transform var(--duration-fast)",
+});
+
+export const select__positioner = style({
+  outline: "none",
+  zIndex: "var(--z-dropdown)",
+});
+
+export const select__content = style({
+  minWidth: "var(--anchor-width, 10rem)",
+  maxHeight: "min(24rem, var(--available-height, 24rem))",
+  overflowY: "auto",
+  padding: "var(--space-1)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -2px rgba(0, 0, 0, 0.05)",
+  fontSize: "var(--text-sm)",
+  transformOrigin: "var(--transform-origin)",
+  animation: "sh-ui-select-in 140ms ease-out",
+  selectors: {
+    "&[data-ending-style]": {
+      animation: "sh-ui-select-out 100ms ease-in forwards",
+    },
+  },
+});
+
+export const select__label = style({
+  padding: "var(--space-2) 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 select__item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--space-2)",
+  padding: "0.5rem 0.75rem",
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  outline: "none",
+  userSelect: "none",
+  transition: "background-color 80ms",
+  selectors: {
+    "&[data-highlighted]": {
+      background: "var(--background-muted)",
+    },
+    "&:hover": {
+      background: "var(--background-muted)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+  },
+});
+
+export const selectItemText = style({
+  flex: 1,
+});
+
+export const select__indicator = style({
+  order: 1,
+  marginLeft: "auto",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--foreground)",
+});
+
+export const select__separator = style({
+  height: "1px",
+  background: "var(--border)",
+  margin: "var(--space-1) 0",
+});
+
+export const select__chips = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--space-1)",
+  flexWrap: "nowrap",
+  overflow: "hidden",
+});
+
+export const select__chip = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--space-1)",
+  padding: "0.125rem 0.375rem 0.125rem var(--space-2)",
+  fontSize: "var(--text-xs)",
+  lineHeight: "1.25rem",
+  background: "var(--background-muted)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  whiteSpace: "nowrap",
+});
+
+export const selectChipRemove = 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)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "1px",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "select__trigger": select__trigger,
+  "select__value": select__value,
+  "select__placeholder": select__placeholder,
+  "select__icon": select__icon,
+  "select__positioner": select__positioner,
+  "select__content": select__content,
+  "select__label": select__label,
+  "select__item": select__item,
+  "select__item-text": selectItemText,
+  "select__indicator": select__indicator,
+  "select__separator": select__separator,
+  "select__chips": select__chips,
+  "select__chip": select__chip,
+  "select__chip-remove": selectChipRemove,
+};