@lawkit/ui 0.1.0

package/dist/ui-v3/src/components/Popover/Popover.css.d.ts

@@ -0,0 +1,65 @@
+export declare const wrapper: string;
+export declare const popover: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        top: {
+            bottom: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column";
+            marginBottom: number;
+        };
+        bottom: {
+            top: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column-reverse";
+            marginTop: number;
+        };
+        left: {
+            right: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row";
+            marginRight: number;
+        };
+        right: {
+            left: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row-reverse";
+            marginLeft: number;
+        };
+    };
+}>;
+export declare const card: string;
+export declare const header: string;
+export declare const headerTitle: string;
+export declare const body: string;
+export declare const bodyText: string;
+export declare const footer: string;
+export declare const primaryBtn: string;
+export declare const outlineBtn: string;
+export declare const arrow: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        top: {
+            borderLeft: "7px solid transparent";
+            borderRight: "7px solid transparent";
+            borderTop: "7px solid rgb(53, 56, 60)";
+        };
+        bottom: {
+            borderLeft: "7px solid transparent";
+            borderRight: "7px solid transparent";
+            borderBottom: "7px solid rgb(53, 56, 60)";
+        };
+        left: {
+            borderTop: "7px solid transparent";
+            borderBottom: "7px solid transparent";
+            borderLeft: "7px solid rgb(53, 56, 60)";
+        };
+        right: {
+            borderTop: "7px solid transparent";
+            borderBottom: "7px solid transparent";
+            borderRight: "7px solid rgb(53, 56, 60)";
+        };
+    };
+}>;

package/dist/ui-v3/src/components/Popover/index.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "content"> {
+    /** 헤더 제목 (파란 바) */
+    title?: ReactNode;
+    /** 본문 콘텐츠 (간편 API — 텍스트) */
+    content?: ReactNode;
+    /** 화살표 방향 */
+    placement?: PopoverPlacement;
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 열림/닫힘 핸들러 (제어 모드) */
+    onOpenChange?: (open: boolean) => void;
+    /** 확인 버튼 텍스트 */
+    confirmText?: string;
+    /** 취소 버튼 텍스트 */
+    cancelText?: string;
+    /** 확인 클릭 핸들러 */
+    onConfirm?: () => void;
+    /** 취소 클릭 핸들러 */
+    onCancel?: () => void;
+    /** 커스텀 바디 (compound 패턴) */
+    children: ReactNode;
+    /** 팝오버 바디에 렌더링할 커스텀 콘텐츠 (compound) */
+    popoverBody?: ReactNode;
+}
+/**
+ * **Popover**
+ *
+ * 클릭 시 나타나는 팝오버.
+ * 파란색 헤더 바 + 본문 + 버튼 구성.
+ *
+ * - `placement`: top / bottom / left / right
+ * - `title`: 헤더 제목
+ * - `content`: 본문 텍스트 (간편 API)
+ * - `popoverBody`: 커스텀 본문 (compound)
+ * - `confirmText` / `cancelText`: 버튼 텍스트
+ */
+export declare function Popover({ title, content, placement, open: controlledOpen, onOpenChange, confirmText, cancelText, onConfirm, onCancel, children, popoverBody, className, ...rest }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/Progress/Progress.css.d.ts

@@ -0,0 +1,60 @@
+export declare const progressTrack: string;
+export declare const progressBar: import('@vanilla-extract/recipes').RuntimeFn<{
+    color: {
+        primary: {
+            backgroundColor: string;
+        };
+        success: {
+            backgroundColor: "#28c76f";
+        };
+        danger: {
+            backgroundColor: "#ea5455";
+        };
+        warning: {
+            backgroundColor: "#f0af23";
+        };
+        info: {
+            backgroundColor: "#00cfe8";
+        };
+    };
+    striped: {
+        true: {
+            backgroundImage: "linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)";
+            backgroundSize: "12px 12px";
+        };
+    };
+}>;
+export declare const animated: string;
+export declare const progressValue: string;
+export declare const stepBarRoot: string;
+export declare const stepItem: string;
+export declare const stepIcon: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        completed: {
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+            color: string;
+        };
+        active: {
+            backgroundColor: string;
+            color: string;
+        };
+        scheduled: {
+            backgroundColor: "rgba(158, 167, 184, 0.12)";
+            color: "#9ea7b8";
+        };
+    };
+}>;
+export declare const stepLabel: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        completed: {
+            color: "#4c5469";
+        };
+        active: {
+            color: "#4c5469";
+        };
+        scheduled: {
+            color: "#d1d1d1";
+        };
+    };
+}>;
+export declare const stepArrow: string;

package/dist/ui-v3/src/components/Progress/index.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ProgressColor = "primary" | "success" | "danger" | "warning" | "info";
+export interface ProgressSegment {
+    value: number;
+    color?: ProgressColor;
+    label?: string;
+}
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** 진행률 (0-100) */
+    value?: number;
+    /** 바 색상 */
+    color?: ProgressColor;
+    /** 스트라이프 패턴 */
+    striped?: boolean;
+    /** 스트라이프 애니메이션 */
+    animated?: boolean;
+    /** 값 표시 */
+    showValue?: boolean;
+    /** 멀티 바 세그먼트 (value/color 대신 사용) */
+    segments?: ProgressSegment[];
+}
+export type StepStatus = "completed" | "active" | "scheduled";
+export interface StepItem {
+    /** 단계 라벨 */
+    label: string;
+    /** 단계 상태 */
+    status: StepStatus;
+    /** 커스텀 아이콘 */
+    icon?: ReactNode;
+}
+export interface StepBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** 단계 목록 */
+    steps: StepItem[];
+}
+export declare function ProgressBar({ value, color, striped, animated, showValue, segments, className, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepBar({ steps, className, ...rest }: StepBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/Radio/Radio.css.d.ts

@@ -0,0 +1,55 @@
+export declare const wrapper: string;
+export declare const wrapperDisabled: string;
+export declare const hiddenInput: string;
+export declare const circle: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        large: {
+            width: number;
+            height: number;
+        };
+    };
+    variant: {
+        basic: {};
+        customized: {};
+    };
+    checked: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const label: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            fontSize: `var(--${string})`;
+            lineHeight: "16px";
+        };
+        medium: {
+            fontSize: `var(--${string})`;
+            lineHeight: "18px";
+        };
+        large: {
+            fontSize: `var(--${string})`;
+            lineHeight: "21px";
+        };
+    };
+    disabled: {
+        true: {
+            color: "#d1d1d1";
+        };
+        false: {};
+    };
+}>;
+export declare const group: string;
+export declare const groupVertical: string;

package/dist/ui-v3/src/components/Radio/index.d.ts

@@ -0,0 +1,64 @@
+import { InputHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type RadioSize = "small" | "medium" | "large";
+export type RadioVariant = "basic" | "customized";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** 사이즈 */
+    size?: RadioSize;
+    /** 스타일 변형: basic(원형 fill) / customized(원형 border) */
+    variant?: RadioVariant;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라디오 값 */
+    value?: string;
+    /** 선택 상태 */
+    checked?: boolean;
+    /** 변경 핸들러 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * **Radio**
+ *
+ * 라디오 버튼.
+ *
+ * - `variant`: basic(파란 원) / customized(파란 테두리)
+ * - `size`: small(12px) / medium(14px) / large(18px)
+ * - `RadioGroup`과 함께 사용하면 name/value 자동 관리
+ *
+ * ```tsx
+ * <RadioGroup value={selected} onChange={setSelected}>
+ *   <Radio value="a" label="Option A" />
+ *   <Radio value="b" label="Option B" />
+ * </RadioGroup>
+ * ```
+ */
+export declare function Radio({ size: sizeProp, variant: variantProp, label, value, checked: checkedProp, disabled: disabledProp, onCheckedChange, onChange, className, name: nameProp, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 그룹 name (자동 생성 가능) */
+    name?: string;
+    /** 선택된 값 */
+    value?: string;
+    /** 선택 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 공통 사이즈 */
+    size?: RadioSize;
+    /** 공통 스타일 변형 */
+    variant?: RadioVariant;
+    /** 공통 비활성화 */
+    disabled?: boolean;
+    /** 수직 정렬 */
+    vertical?: boolean;
+    children: ReactNode;
+}
+/**
+ * **RadioGroup**
+ *
+ * Radio를 그룹으로 묶어 name/value를 자동 관리합니다.
+ *
+ * ```tsx
+ * <RadioGroup value={selected} onChange={setSelected} name="plan">
+ *   <Radio value="free" label="Free" />
+ *   <Radio value="pro" label="Pro" />
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup({ name, value, onChange, size, variant, disabled, vertical, children, className, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/Skeleton/Skeleton.css.d.ts

@@ -0,0 +1,19 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        rect: {
+            borderRadius: `var(--${string})`;
+        };
+        circle: {
+            borderRadius: "50%";
+        };
+        text: {
+            borderRadius: `var(--${string})`;
+            height: number;
+        };
+    };
+}>;
+export declare const textGroup: string;
+export declare const lastLine: string;
+export declare const contentWrapper: string;
+export declare const contentVisible: string;
+export declare const contentHidden: string;

package/dist/ui-v3/src/components/Skeleton/index.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type SkeletonVariant = "rect" | "circle" | "text";
+export interface SkeletonContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** true이면 fallback(스켈레톤)을 표시, false이면 children을 표시 */
+    loading: boolean;
+    /** 로딩 중에 보여줄 스켈레톤 UI */
+    fallback: ReactNode;
+    /** 로딩 완료 후 보여줄 실제 콘텐츠 */
+    children: ReactNode;
+}
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** 모양 */
+    variant?: SkeletonVariant;
+    /** 너비 (px 또는 CSS 값) */
+    width?: number | string;
+    /** 높이 (px 또는 CSS 값, text variant에서는 무시) */
+    height?: number | string;
+    /** 텍스트 줄 수 (variant="text"일 때만 사용) */
+    lines?: number;
+}
+/**
+ * Skeleton — 콘텐츠 로딩 자리 표시 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={16} />
+ * <Skeleton variant="circle" width={40} height={40} />
+ * <Skeleton variant="text" lines={3} />
+ * ```
+ */
+export declare function Skeleton({ variant, width, height, lines, className, style, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var Content: typeof SkeletonContent;
+}
+/**
+ * Skeleton.Content — 로딩 ↔ 콘텐츠 전환 래퍼
+ *
+ * loading이 true이면 fallback(스켈레톤)을 표시하고,
+ * false가 되면 fade-in 트랜지션과 함께 children을 표시합니다.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton.Content
+ *   loading={isLoading}
+ *   fallback={<Skeleton variant="text" lines={3} />}
+ * >
+ *   <p>{data.content}</p>
+ * </Skeleton.Content>
+ * ```
+ */
+declare function SkeletonContent({ loading, fallback, children, className, ...rest }: SkeletonContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui-v3/src/components/Slider/Slider.css.d.ts

@@ -0,0 +1,10 @@
+export declare const root: string;
+export declare const sliderRow: string;
+export declare const track: string;
+export declare const trackFill: string;
+export declare const thumb: string;
+export declare const valueBadge: string;
+export declare const ticksRow: string;
+export declare const tick: string;
+export declare const labelsRow: string;
+export declare const scaleLabel: string;

package/dist/ui-v3/src/components/Slider/index.d.ts

@@ -0,0 +1,66 @@
+import { HTMLAttributes } from 'react';
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 현재 값 */
+    value?: number;
+    /** 값 변경 콜백 */
+    onChange?: (value: number) => void;
+    /** 최솟값 */
+    min?: number;
+    /** 최댓값 */
+    max?: number;
+    /** 증감 단위 */
+    step?: number;
+    /** 틱 마크 표시 */
+    showTicks?: boolean;
+    /** 스케일 라벨 표시 (0, 10, 20 … 100) */
+    showLabels?: boolean;
+    /** 값 배지 표시 */
+    showValue?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+}
+/**
+ * **Slider**
+ *
+ * 단일 핸들 슬라이더.
+ *
+ * - `showTicks`: 틱 마크 표시
+ * - `showLabels`: 0–100 스케일 라벨
+ * - `showValue`: 핸들 위 값 배지
+ *
+ * ```tsx
+ * <Slider value={50} onChange={setValue} />
+ * <Slider value={v} onChange={setV} showTicks showLabels showValue />
+ * ```
+ */
+export declare function Slider({ value, onChange, min, max, step, showTicks, showLabels, showValue, disabled, className, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** [시작, 끝] 범위 값 */
+    value?: [number, number];
+    /** 범위 변경 콜백 */
+    onChange?: (value: [number, number]) => void;
+    /** 최솟값 */
+    min?: number;
+    /** 최댓값 */
+    max?: number;
+    /** 증감 단위 */
+    step?: number;
+    /** 틱 마크 표시 */
+    showTicks?: boolean;
+    /** 스케일 라벨 표시 */
+    showLabels?: boolean;
+    /** 값 배지 표시 */
+    showValue?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+}
+/**
+ * **RangeSlider**
+ *
+ * 듀얼 핸들 범위 슬라이더.
+ *
+ * ```tsx
+ * <RangeSlider value={[25, 75]} onChange={setRange} showTicks showLabels showValue />
+ * ```
+ */
+export declare function RangeSlider({ value, onChange, min, max, step, showTicks, showLabels, showValue, disabled, className, ...rest }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/Spinner/Spinner.css.d.ts

@@ -0,0 +1,68 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        md: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        lg: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        xl: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+    };
+    color: {
+        primary: {
+            borderColor: string;
+            borderTopColor: "transparent";
+        };
+        white: {
+            borderColor: "rgba(255, 255, 255, 0.9)";
+            borderTopColor: "transparent";
+        };
+    };
+}>;
+export declare const track: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        md: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        lg: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+        xl: {
+            width: number;
+            height: number;
+            borderWidth: number;
+        };
+    };
+    color: {
+        primary: {
+            borderColor: string;
+        };
+        white: {
+            borderColor: "rgba(255, 255, 255, 0.9)";
+        };
+    };
+}>;
+export declare const wrapper: string;
+export declare const label: string;

package/dist/ui-v3/src/components/Spinner/index.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
+export type SpinnerColor = "primary" | "white";
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    /** 스피너 크기 */
+    size?: SpinnerSize;
+    /** 스피너 색상 */
+    color?: SpinnerColor;
+    /** 로딩 텍스트 (스피너 오른쪽) */
+    label?: string;
+}
+/**
+ * Spinner — 로딩 상태를 나타내는 스피너 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" label="로딩 중..." />
+ * <Spinner color="white" />
+ * ```
+ */
+export declare function Spinner({ size, color, label: labelText, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/SweetAlert/SweetAlert.css.d.ts

@@ -0,0 +1,37 @@
+export declare const overlay: string;
+export declare const card: string;
+export declare const iconWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        warning: {
+            backgroundColor: "rgba(240, 175, 35, 0.12)";
+        };
+        success: {
+            backgroundColor: "rgba(39, 194, 129, 0.12)";
+        };
+        danger: {
+            backgroundColor: "rgba(234, 59, 59, 0.12)";
+        };
+        info: {
+            backgroundColor: "rgba(0, 207, 232, 0.12)";
+        };
+    };
+}>;
+export declare const intentIconColor: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        warning: {
+            color: "#f0af23";
+        };
+        success: {
+            color: "#28c76f";
+        };
+        danger: {
+            color: "#ea5455";
+        };
+        info: {
+            color: "#00cfe8";
+        };
+    };
+}>;
+export declare const title: string;
+export declare const body: string;
+export declare const actions: string;

package/dist/ui-v3/src/components/SweetAlert/index.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type SweetAlertIntent = "warning" | "success" | "danger" | "info";
+export interface SweetAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 표시 여부 */
+    open: boolean;
+    /** 닫기 핸들러 */
+    onClose: () => void;
+    /** 아이콘 의도 (배경색 결정) */
+    intent?: SweetAlertIntent;
+    /** 커스텀 아이콘 (intent 기본 아이콘 대체) */
+    icon?: ReactNode;
+    /** 제목 */
+    title: ReactNode;
+    /** 본문 콘텐츠 */
+    children?: ReactNode;
+    /** 확인 버튼 라벨 */
+    confirmLabel?: string;
+    /** 확인 핸들러 */
+    onConfirm?: () => void;
+    /** 취소 버튼 라벨 */
+    cancelLabel?: string;
+    /** 취소 핸들러 */
+    onCancel?: () => void;
+}
+export declare function SweetAlert({ open, onClose, intent, icon, title, children, confirmLabel, onConfirm, cancelLabel, onCancel, className, ...rest }: SweetAlertProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui-v3/src/components/Switch/Switch.css.d.ts

@@ -0,0 +1,46 @@
+export declare const wrapper: string;
+export declare const wrapperDisabled: string;
+export declare const label: string;
+export declare const track: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+    };
+    checked: {
+        true: {
+            backgroundColor: string;
+        };
+        false: {
+            backgroundColor: "#d1d1d1";
+        };
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const knob: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+            transform: "translateY(-50%)";
+        };
+        medium: {
+            width: number;
+            height: number;
+            transform: "translateY(-50%)";
+        };
+    };
+    checked: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const hiddenInput: string;