sh-ui-cli 0.45.3 → 0.47.0

package/data/registry/react/components/select/index.module.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import * as React from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import styles from "./styles.module.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(styles.select__value, className)} {...props}>
+      {(value) =>
+        value !== null && value !== undefined && value !== "" ? (
+          (value as React.ReactNode)
+        ) : (
+          <span className={styles.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(styles.select__trigger, className)}
+    {...props}
+  >
+    {children}
+    <BaseSelect.Icon className={styles.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={styles.select__positioner}
+      sideOffset={4}
+      align="start"
+    >
+      <BaseSelect.Popup
+        ref={ref}
+        className={cn(styles.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(styles.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(styles.select__item, className)}
+    {...props}
+  >
+    <BaseSelect.ItemIndicator className={styles.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={styles["select__item-text"]}>
+      {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(styles.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(styles.select__value, className)} {...props}>
+      {(value) => {
+        const arr = Array.isArray(value) ? (value as string[]) : [];
+        if (arr.length === 0) {
+          return <span className={styles.select__placeholder}>{placeholder}</span>;
+        }
+        return render ? render(arr, { remove, clear }) : arr.join(separator);
+      }}
+    </BaseSelect.Value>
+  );
+}

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

@@ -0,0 +1,193 @@
+.select__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-width: 10rem;
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color var(--duration-fast), background-color var(--duration-fast);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.select__trigger:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.select__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.select__trigger[data-popup-open] {
+  border-color: var(--border-strong);
+}
+
+.select__trigger:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.select__value {
+  flex: 1 1 auto;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select__placeholder {
+  color: var(--foreground-subtle);
+}
+
+.select__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-muted);
+  flex-shrink: 0;
+  transition: transform var(--duration-fast);
+}
+
+.select__trigger[data-popup-open] .select__icon {
+  transform: rotate(180deg);
+}
+
+/* 팝업 */
+.select__positioner {
+  outline: none;
+  z-index: var(--z-dropdown);
+}
+
+.select__content {
+  min-width: var(--anchor-width, 10rem);
+  max-height: min(24rem, var(--available-height, 24rem));
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.08),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  font-size: var(--text-sm);
+  transform-origin: var(--transform-origin);
+  animation: sh-ui-select-in 140ms ease-out;
+}
+
+.select__content[data-ending-style] {
+  animation: sh-ui-select-out 100ms ease-in forwards;
+}
+
+@keyframes sh-ui-select-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes sh-ui-select-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.96); }
+}
+
+.select__label {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color: var(--foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: background-color 80ms;
+}
+
+.select__item[data-highlighted],
+.select__item:hover {
+  background: var(--background-muted);
+}
+
+.select__item[data-disabled] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.select__item-text {
+  flex: 1;
+}
+
+.select__indicator {
+  order: 1;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground);
+}
+
+.select__separator {
+  height: 1px;
+  background: var(--border);
+  margin: var(--space-1) 0;
+}
+
+/* 멀티 셀렉트 값 칩 (MultiSelectValue의 render prop에서 사용) */
+.select__chips {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.select__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0.125rem 0.375rem 0.125rem var(--space-2);
+  font-size: var(--text-xs);
+  line-height: 1.25rem;
+  background: var(--background-muted);
+  border-radius: calc(var(--radius) - 2px);
+  white-space: nowrap;
+}
+
+.select__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+.select__chip-remove:hover {
+  background: var(--background);
+  color: var(--foreground);
+}
+.select__chip-remove:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 1px;
+}

package/data/registry/react/components/separator/index.module.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import styles from "./styles.module.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(
+          styles.separator,
+          styles[`separator--${orientation}`],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Separator.displayName = "Separator";

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

@@ -0,0 +1,15 @@
+.separator {
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.separator--horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.separator--vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}