sh-ui-cli 0.52.0 → 0.52.2

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

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

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

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

@@ -1,46 +0,0 @@
-import * as React from "react";
-import { byKey, separator, separatorHorizontal, separatorVertical } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-export type SeparatorOrientation = "horizontal" | "vertical";
-
-export interface SeparatorProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
-  orientation?: SeparatorOrientation;
-  /**
-   * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
-   * 스크린리더에도 섹션 구분을 알려야 하면 false.
-   */
-  decorative?: boolean;
-}
-
-/**
- * 시각적 구분선. 가로(height=1px) / 세로(width=1px).
- *
- * 의미 있는 구분에는 `decorative={false}`로 role=separator가 붙고, 그렇지 않으면
- * aria-hidden 처리되어 보조 기술에 노출되지 않는다.
- */
-export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
-  function Separator(
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) {
-    return (
-      <div
-        ref={ref}
-        role={decorative ? undefined : "separator"}
-        aria-orientation={decorative ? undefined : orientation}
-        aria-hidden={decorative || undefined}
-        data-orientation={orientation}
-        className={cn(
-          separator,
-          byKey[`separator--${orientation}`],
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Separator.displayName = "Separator";

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

@@ -1,24 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const separator = style({
-  background: "var(--border)",
-  flexShrink: 0,
-});
-
-export const separatorHorizontal = style({
-  width: "100%",
-  height: "1px",
-});
-
-export const separatorVertical = style({
-  width: "1px",
-  height: "100%",
-  alignSelf: "stretch",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "separator": separator,
-  "separator--horizontal": separatorHorizontal,
-  "separator--vertical": separatorVertical,
-};