sellmate-design-system-react 9.0.0-beta.89 → 9.0.0-beta.90

package/dist/components/SSlider/SSlider.d.ts

@@ -0,0 +1,149 @@
+import { type CSSProperties, type ReactElement, type RefAttributes } from 'react';
+import { type SFieldSize, type SFieldStatus, type SFieldLabelPosition } from '../SField';
+import { type SIconName } from '../SIcon';
+import { type STooltipProps } from '../STooltip';
+import { type SColor } from '../../lib/color';
+import { type Rule } from '../../lib/form';
+import { type SFieldWidth } from '../../lib/field-width';
+/** 단일 값은 `number`, 범위는 `[시작, 끝]` */
+export type SSliderValue = number | [number, number];
+/** 값 말풍선을 언제 보일지 */
+export type SSliderShowValue = 'none' | 'drag' | 'always';
+/** 눈금 하나 */
+export interface SSliderMark {
+    /** 눈금 위치 값 (`min`~`max`) */
+    value: number;
+    /** 눈금 아래 라벨. 없으면 점만 찍힌다 */
+    label?: string;
+}
+export interface SSliderProps<V extends SSliderValue = number> {
+    /**
+     * 값 (제어). **`number` 면 단일, `[시작, 끝]` 이면 범위 슬라이더**가 된다 —
+     * 손잡이 개수와 `onValueChange` 가 돌려주는 모양이 이 값을 따른다.
+     * 범위는 두 손잡이가 서로를 넘어가지 않는다.
+     */
+    value?: V;
+    /** 값 변경 (sdUpdate) — 드래그 중 매 step 마다 호출된다 */
+    onValueChange?: (value: V) => void;
+    /**
+     * 조작이 끝났을 때 한 번 호출된다 (포인터를 놓을 때, 키보드로 한 칸 움직일 때).
+     * 값을 서버에 보내거나 목록을 다시 불러오는 등 **매 step 마다 하면 안 되는 일**은 여기서 한다.
+     */
+    onValueCommit?: (value: V) => void;
+    /** 최솟값 */
+    min?: number;
+    /** 최댓값 */
+    max?: number;
+    /** 한 칸 크기. 값은 `min` 에서 이 간격으로만 움직인다 */
+    step?: number;
+    /**
+     * 눈금. `true` 면 `step` 마다 점을 찍고, 배열이면 그 위치에만 찍는다(라벨을 함께 줄 수 있다).
+     * 고를 수 있는 값이 몇 개 안 될 때 어디서 멈추는지 보여 주는 용도다 —
+     * `step` 이 촘촘하면 `true` 대신 배열로 대표 위치만 준다.
+     */
+    marks?: boolean | SSliderMark[];
+    /**
+     * 값 말풍선 표시 시점.
+     * - `drag` — 드래그·키보드 조작 중, 손잡이에 마우스를 올렸을 때만 보인다
+     * - `always` — 늘 보인다. 값을 숫자로 따로 보여 주지 않는 자리에서 쓴다
+     * - `none` — 보이지 않는다. 옆에 값을 따로 적어 둘 때 쓴다
+     *
+     * `none` 이 아니면 말풍선 자리만큼 위쪽 공간을 미리 잡아 두어, 나타날 때 레이아웃이 밀리지 않는다.
+     */
+    showValue?: SSliderShowValue;
+    /** 말풍선·스크린리더에 읽히는 값 표기 (예: `v => \`${v}%\``) */
+    formatValue?: (value: number) => string;
+    /**
+     * 크기 — 다른 필드와 나란히 놓일 때 라벨과 높이를 맞추는 등급이다. 슬라이더 모양 자체는 같다.
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    size?: SFieldSize;
+    /** 유효성 규칙 — 조작이 끝날 때(`onValueCommit` 시점)와 SForm 제출 시 검증 */
+    rules?: Rule[];
+    /** 폼 연동용 name */
+    name?: string;
+    /**
+     * 필드 상태 ('default' | 'pass' | 'error')
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    status?: SFieldStatus;
+    /** 레이블 텍스트. 손잡이의 접근성 이름으로도 쓰인다 */
+    label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
+    /**
+     * 레이블 너비 (숫자=px)
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelWidth?: number | string;
+    /**
+     * 레이블 영역 아이콘
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    icon?: SIconName;
+    /**
+     * 레이블 영역 아이콘 색상
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    iconColor?: SColor;
+    /**
+     * 레이블 툴팁 텍스트
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelTooltip?: string;
+    /**
+     * 레이블 툴팁 상세 옵션
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelTooltipProps?: Partial<STooltipProps>;
+    /** 하단 힌트 */
+    hint?: string;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 에러 메시지 */
+    errorMessage?: string;
+    /**
+     * 컨트롤 너비 — 폭 등급 · 숫자=px · CSS 길이. 기본은 부모 폭을 채운다.
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    width?: SFieldWidth;
+    /** 비활성 — 조작·포커스가 모두 막힌다 */
+    disabled?: boolean;
+    /** 읽기 전용 — 값은 그대로 보이고 키보드 포커스는 받지만 값이 바뀌지 않는다 */
+    readOnly?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SSlider — 끌어서 수치 하나 또는 범위를 고르는 필드 (Radix Slider 기반).
+ * SField 를 테두리 없이 두르고, 라벨·힌트·에러·SForm 검증은 다른 필드와 같게 동작한다.
+ */
+export declare const SSlider: <V extends SSliderValue = number>(props: SSliderProps<V> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/components/SSlider/index.d.ts

@@ -0,0 +1 @@
+export { SSlider, type SSliderProps, type SSliderValue, type SSliderShowValue, type SSliderMark, } from './SSlider';