@weing-dev/ui-kit-primitive 0.5.0 → 0.5.2

package/dist/components/Button/Button.d.ts

@@ -14,6 +14,8 @@ declare const Root: (props: ButtonProviderProps & {
     radius?: number;
     rounded?: boolean;
     circle?: boolean;
+    /** Button.Text/Button.Icon 색을 함께 덮어쓴다. 지정 시 colorType/variant 기본색 대신 적용 */
+    textColor?: string;
 } & React.JSX.IntrinsicElements["button"]) => import("react/jsx-runtime").JSX.Element;
 interface IButton {
     Text: typeof Text;

package/dist/components/Chart/Chart.gradient.d.ts

@@ -0,0 +1,10 @@
+import { Color, Scriptable, ScriptableContext } from 'chart.js';
+/**
+ * canvas gradient 는 chartArea(레이아웃 결과)가 있어야 만들 수 있어 정적 색으로 못 박는다.
+ * chart.js 의 scriptable backgroundColor(렌더 시 ctx 주입)로 lazy 생성한다 —
+ * 순수함수 빌더 안에서도 함수만 반환하면 되고 plugin/useEffect 가 불필요하다.
+ *
+ * 색 토큰을 canvas 가 직접 못 읽는 것과 같은 제약을 같은 패턴(런타임 해석)으로 푼다.
+ */
+/** 세로 방향 그라데이션(상단 from → 하단 to). chartArea 미정(레이아웃 전)이면 from 단색으로 폴백. */
+export declare const verticalGradient: (from: string, to: string) => Scriptable<Color, ScriptableContext<"line">>;

package/dist/components/Chart/Chart.options.d.ts

@@ -1,5 +1,5 @@
 import { ChartData, ChartOptions } from 'chart.js';
-import { CategoricalData, ChartBaseProps, ChartKind, PointStyle, ProportionData } from './Chart.type';
+import { AxisConfig, CategoricalData, ChartBaseProps, ChartKind, PointStyle, ProportionData } from './Chart.type';
 import { ChartAxisTokens } from './Chart.palette';
 import { StyleSources } from './Chart.style';
 export declare const deepMerge: <T>(base: T, over?: Partial<T>) => T;
@@ -18,7 +18,12 @@ type BuildOptionArgs = {
     tokens: ChartAxisTokens;
     /** 종류별 추가 옵션 (indexAxis, cutout, scales stacked 등). 차트별 전용 키 허용 위해 느슨한 타입 */
     extra?: Record<string, unknown>;
+    /** 직교좌표 y축 설정 (max/min/단위 포맷). y1 정의 시 우측 보조축(듀얼축) 생성 */
+    axes?: {
+        y?: AxisConfig;
+        y1?: AxisConfig;
+    };
 };
 /** 프리셋 → L2(options deep-merge) → L3(rawOptions 통째 대체) */
-export declare const buildOptions: ({ kind, base, tokens, extra }: BuildOptionArgs) => ChartOptions;
+export declare const buildOptions: ({ kind, base, tokens, extra, axes }: BuildOptionArgs) => ChartOptions;
 export {};

package/dist/components/Chart/Chart.type.d.ts

@@ -1,4 +1,4 @@
-import { ChartOptions } from 'chart.js';
+import { ChartOptions, Plugin } from 'chart.js';
 import { default as React } from 'react';
 /** 단일 시리즈 간편 입력: bar/pie/doughnut 한 줄짜리 */
 export type SimpleDatum = {
@@ -10,9 +10,24 @@ export type SimpleDatum = {
 /** 다중 시리즈 한 줄 */
 export type ChartSeries = {
     name: string;
-    values: number[];
+    /** null = 데이터 없는 구간(선 끊김). spanGaps 로 이을지 제어 */
+    values: (number | null)[];
     /** 이 시리즈만 색 강제 — cascade [2] */
     color?: string;
+    /** 이 시리즈가 참조할 y축 id. 보조축 연결 시 "y1" (듀얼축) */
+    yAxisID?: string;
+    /** 점선 패턴 (예: [4,4]). line 전용 */
+    borderDash?: number[];
+    /** null 값 구간을 선으로 이을지 여부 (기본 chart.js 기본값=false 동작) */
+    spanGaps?: boolean;
+    /**
+     * 면적 gradient 채우기 (line 전용). true=시리즈 색 기반 자동 alpha,
+     * {from,to}=명시 색. 켜면 fill 자동 활성.
+     */
+    gradient?: boolean | {
+        from?: string;
+        to?: string;
+    };
 };
 /** 다중 시리즈 입력 */
 export type SeriesData = {
@@ -44,9 +59,18 @@ export type ChartThemeValue = {
     defaults?: ChartStyleDefaults;
     presets?: ChartPreset;
 };
-export type ChartKind = "bar" | "line" | "pie" | "doughnut";
+export type ChartKind = "bar" | "line" | "pie" | "doughnut" | "radar";
 export type LegendOption = boolean | "top" | "bottom" | "left" | "right";
 export type PointStyle = "circle" | "rect" | "triangle" | false;
+/** 직교좌표(bar/line) 축 설정. 듀얼축·단위 포맷 노출 */
+export type AxisConfig = {
+    max?: number;
+    min?: number;
+    /** 눈금 단위 포맷터 (예: (v) => `${v}건`) → ticks.callback */
+    tickFormat?: (value: number) => string;
+    /** 축 제목 */
+    title?: string;
+};
 export type ChartBaseProps = {
     title?: string;
     /** true=top, false=숨김, 또는 위치 지정 */
@@ -73,6 +97,11 @@ export type ChartBaseProps = {
     options?: ChartOptions;
     /** L3: 프리셋 무시하고 raw 통째 대체 */
     rawOptions?: ChartOptions;
+    /**
+     * 커스텀 chart.js 플러그인 (인스턴스 한정 주입). afterDraw/beforeDatasetsDraw 등으로
+     * 캔버스에 직접 드로잉. 플러그인 옵션은 L2 `options.plugins.<id>` 로 전달.
+     */
+    plugins?: Plugin[];
 };
 export type BarChartProps = ChartBaseProps & {
     data: CategoricalData;
@@ -81,6 +110,10 @@ export type BarChartProps = ChartBaseProps & {
     /** L0 승격 스타일: 막대 모서리 둥글기 */
     barRadius?: number;
     barThickness?: number;
+    /** 주 y축 설정 (max/min/단위 포맷) */
+    yAxis?: AxisConfig;
+    /** 보조 y축 (우측). 정의 시 생성 — 시리즈 `yAxisID:"y1"` 로 연결 (듀얼축) */
+    y1Axis?: AxisConfig;
 };
 export type LineChartProps = ChartBaseProps & {
     data: CategoricalData;
@@ -91,6 +124,10 @@ export type LineChartProps = ChartBaseProps & {
     /** L0 승격 스타일 */
     pointStyle?: PointStyle;
     lineWidth?: number;
+    /** 주 y축 설정 (max/min/단위 포맷) */
+    yAxis?: AxisConfig;
+    /** 보조 y축 (우측). 정의 시 생성 — 시리즈 `yAxisID:"y1"` 로 연결 (듀얼축) */
+    y1Axis?: AxisConfig;
 };
 export type PieChartProps = ChartBaseProps & {
     data: ProportionData;
@@ -102,6 +139,14 @@ export type DoughnutChartProps = ChartBaseProps & {
     /** 0~1, 도넛 구멍 크기 (기본 0.6) */
     cutout?: number;
 };
+export type RadarChartProps = ChartBaseProps & {
+    /** 단일 시리즈(labels+values) 또는 다중 시리즈 모두 허용 */
+    data: CategoricalData;
+    /** 방사축 최댓값 (suggestedMax). 미지정 시 자동 */
+    max?: number;
+    /** 다각형 면적 채우기 (기본 true) */
+    fill?: boolean;
+};
 /** ChartRenderer가 받는 통합 타입. type으로 좁히면 data가 자동 결정 → `as` 캐스팅 제거 */
 export type AnyChartProps = ({
     type: "bar";
@@ -111,4 +156,6 @@ export type AnyChartProps = ({
     type: "pie";
 } & PieChartProps) | ({
     type: "doughnut";
-} & DoughnutChartProps);
+} & DoughnutChartProps) | ({
+    type: "radar";
+} & RadarChartProps);

package/dist/components/Chart/charts/RadarChart.d.ts

@@ -0,0 +1,3 @@
+import { RadarChartProps } from '../Chart.type';
+declare const RadarChart: (props: RadarChartProps) => import("react/jsx-runtime").JSX.Element;
+export default RadarChart;

package/dist/components/FloatingAnchor/FloatingAnchor.context.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { FloatingAnchorContextValue } from './FloatingAnchor.type';
+export type { Placement, FloatingAnchorContextValue } from './FloatingAnchor.type';
+export declare const FloatingAnchorContext: React.Context<FloatingAnchorContextValue | null>;
+export declare const useFloatingAnchorContext: () => FloatingAnchorContextValue;

package/dist/components/FloatingAnchor/FloatingAnchor.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { RootProps, TriggerProps, ContentProps } from './FloatingAnchor.type';
+export type { Placement, RootProps, TriggerProps, TriggerRenderProps, ContentProps, } from './FloatingAnchor.type';
+declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Trigger: (props: TriggerProps) => React.ReactNode;
+/** content 내용 */
+declare const Content: (props: ContentProps) => React.ReactPortal | null;
+interface IFloatingAnchor {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+}
+declare const FloatingAnchor: IFloatingAnchor;
+export default FloatingAnchor;

package/dist/components/FloatingAnchor/FloatingAnchor.type.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export type FloatingAnchorContextValue = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setAnchorEl: (el: HTMLElement | null) => void;
+    setFloatingEl: (el: HTMLElement | null) => void;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    contentId: string;
+};
+export type RootProps = {
+    children: React.ReactNode;
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+};
+export type TriggerRenderProps = {
+    ref: (el: HTMLElement | null) => void;
+    className?: string;
+    "aria-expanded": boolean;
+    "aria-controls": string;
+    "aria-haspopup": "dialog";
+    onClick: (e: React.MouseEvent) => void;
+};
+export type TriggerProps = {
+    children: (props: TriggerRenderProps) => React.ReactNode;
+};
+export type ContentProps = {
+    children: React.ReactNode;
+    className?: string;
+    portalRoot?: HTMLElement | null;
+} & React.HTMLAttributes<HTMLDivElement>;

package/dist/components/FloatingAnchor/FloatingAnchor.util.d.ts

@@ -0,0 +1,43 @@
+import { Placement } from './FloatingAnchor.type';
+/**
+ * anchorRect: Trigger 요소의 DOMRect
+ * floatingRect: Content 요소의 크기 (width, height)
+ * offset: anchor와 floating 사이의 간격
+ * placement: 요구된 배치 (top, bottom, left, right, top-start, top-end, etc.)
+ * 반환값: floating 요소의 top, left 위치
+ * 계산 로직: placement에 따라 anchorRect를 기준으로 floatingRect의 위치 계산.
+ * 예를 들어, placement가 "top"이면 floating 요소는 anchor 요소의 위에 위치해야 하므로,
+ * top은 anchorRect.top - floatingRect.height - offset이 되고,
+ *  left는 anchorRect.left + (anchorRect.width - floatingRect.width) / 2가 됩니다.
+ */
+export declare const computePosition: (anchorRect: DOMRect, floatingRect: {
+    width: number;
+    height: number;
+}, placement: Placement, offset: number) => {
+    top: number;
+    left: number;
+};
+/**  플립  */
+export declare const flipPlacement: (p: Placement) => Placement;
+/**
+ * 주축(main axis)의 넘침량을 반환.
+ * 반환값 0이면 주축으로는 넘치지 않음, 양수면 넘친 픽셀 수.
+ */
+export declare const getMainAxisOverflow: (pos: {
+    top: number;
+    left: number;
+}, size: {
+    width: number;
+    height: number;
+}, placement: Placement, padding: number) => number;
+/** 뷰포트안에 fit하도록 위치 조정 */
+export declare const shiftIntoViewport: (pos: {
+    top: number;
+    left: number;
+}, size: {
+    width: number;
+    height: number;
+}, padding: number) => {
+    top: number;
+    left: number;
+};

package/dist/components/Form/Dropdown/Dropdown.type.d.ts

@@ -23,6 +23,8 @@ export type TriggerProps = React.PropsWithChildren<{
     size?: "small" | "medium" | "large";
     leftIcon?: React.ComponentProps<typeof Icon> | null;
     rightIcon?: React.ComponentProps<typeof Icon> | null;
+    /** 도메인 강조 보더색. 지정 시 inactive/selected/focused 보더를 이 색으로 통일(error/disabled는 우선 유지) */
+    accentColor?: string;
 }>;
 export type MenuRenderProps = {
     open: boolean;

package/dist/components/KanbanBoard/KanbanBoard.d.ts

@@ -0,0 +1,4 @@
+import { KanbanBoardProps } from './KanbanBoard.type';
+export type { KanbanColumn, KanbanBoardProps } from './KanbanBoard.type';
+declare function KanbanBoard<T>(props: KanbanBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default KanbanBoard;

package/dist/components/KanbanBoard/KanbanBoard.type.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type KanbanColumn = {
+    id: string;
+    label?: React.ReactNode;
+    accentColor?: string;
+};
+export type KanbanBoardProps<T> = {
+    columns: KanbanColumn[];
+    /** 카드로 표시될 아이템 목록 */
+    items: T[];
+    /** 아이템 고유 id 추출 */
+    getItemId: (item: T) => string;
+    /** 아이템이 속한 컬럼 id 추출 */
+    getColumnId: (item: T) => string;
+    /** 카드 렌더링 — 사용자가 결정 */
+    renderCard: (item: T, isSelected: boolean) => React.ReactNode;
+    /** 컬럼 헤더 커스텀. 미지정 시 기본 헤더 */
+    renderColumnHeader?: (column: KanbanColumn, items: T[]) => React.ReactNode;
+    /** 빈 컬럼 표시 텍스트 */
+    emptyText?: React.ReactNode;
+    /** 선택된 카드 id */
+    selectedId?: string | null;
+    /** 카드 클릭 시 콜백 */
+    onSelect?: (item: T) => void;
+    /**
+     * 카드의 컬럼(소속) 필드를 갱신한 "새 아이템"을 반환한다. DnD를 쓰려면 필요.
+     * 예: (deal, stage) => ({ ...deal, stage })
+     */
+    setItemColumn?: (item: T, columnId: string) => T;
+    /**
+     * DnD로 카드가 이동해 목록이 바뀌면, 재정렬된 새 배열을 받는다.
+     * 사용처는 보통 setState만 연결. 예: onItemsChange={setDeals}
+     */
+    onItemsChange?: (items: T[]) => void;
+    className?: string;
+};

package/dist/components/Pagination/Pagination.d.ts

@@ -16,7 +16,10 @@ type PageListProps = {
     }) => React.ReactNode;
 };
 declare const PageList: (props: PageListProps) => import("react/jsx-runtime").JSX.Element | null;
-type RootProps = {} & Omit<PaginationContextType, "currentPage">;
+type RootProps = {
+    /** nav에 전달. `--pagination-gap`/`--pagination-item-size`/`--pagination-radius` 등 변수 override 통로 */
+    style?: React.CSSProperties;
+} & Omit<PaginationContextType, "currentPage">;
 declare const Root: (props: React.PropsWithChildren<RootProps>) => import("react/jsx-runtime").JSX.Element;
 interface IPagination {
     Root: typeof Root;

package/dist/components/Timeline/Timeline.colors.d.ts

@@ -0,0 +1,6 @@
+export type TimelineColorToken = "blue" | "pink" | "green" | "orange";
+export type TimelineColorValue = {
+    background: string;
+    border: string;
+};
+export declare const timelineEventColors: Record<TimelineColorToken, TimelineColorValue>;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import { TimelineProps } from './Timeline.type';
+export type { TimelineEvent, TimelineProps } from './Timeline.type';
+declare const Timeline: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export default Timeline;

package/dist/components/Timeline/Timeline.type.d.ts

@@ -0,0 +1,16 @@
+import { TimelineColorToken, TimelineColorValue } from './Timeline.colors';
+export type TimelineEvent = {
+    id?: string;
+    startHour: string;
+    endHour?: string;
+    label: string;
+    color?: TimelineColorToken | TimelineColorValue;
+};
+export type TimelineProps = {
+    events: TimelineEvent[];
+    date: string;
+    startHour?: number;
+    endHour?: number;
+    className?: string;
+    headerClassName?: string;
+};