@weing-dev/ui-kit-primitive 0.5.1 → 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/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;
+};