@lawkit/ui 0.1.0

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

@@ -0,0 +1,109 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type StatValueColor = "primary" | "heading" | "success" | "danger" | "warning";
+export interface WidgetProps extends HTMLAttributes<HTMLDivElement> {
+    /** 위젯 제목 */
+    title?: string;
+    /** 헤더 뱃지 (숫자 등) */
+    badge?: ReactNode;
+    /** 접기/펼치기 지원 */
+    collapsible?: boolean;
+    /** 접힌 상태 (controlled) */
+    collapsed?: boolean;
+    /** 접기 상태 변경 콜백 */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** 헤더 우측 커스텀 영역 */
+    extra?: ReactNode;
+    /** 본문 패딩 없음 (테이블 등) */
+    flush?: boolean;
+    children?: ReactNode;
+}
+/**
+ * **Widget**
+ *
+ * 대시보드 위젯 카드 컨테이너.
+ *
+ * - `title` + `badge`: 헤더 영역
+ * - `collapsible`: 접기/펼치기 토글
+ * - `flush`: 본문 패딩 제거 (테이블 위젯용)
+ *
+ * ```tsx
+ * <Widget title="통계" badge={5} collapsible>
+ *   <StatGrid>
+ *     <StatCell label="건수" value={120} />
+ *   </StatGrid>
+ * </Widget>
+ * ```
+ */
+export declare function Widget({ title, badge, collapsible, collapsed: controlledCollapsed, onCollapsedChange, extra, flush, children, className, ...rest }: WidgetProps): import("react/jsx-runtime").JSX.Element;
+export interface StatCellProps extends HTMLAttributes<HTMLDivElement> {
+    /** 라벨 */
+    label: string;
+    /** 값 (숫자 또는 문자열) */
+    value: ReactNode;
+    /** 값 색상 */
+    valueColor?: StatValueColor;
+    /** 활성 상태 */
+    active?: boolean;
+}
+/**
+ * **StatCell**
+ *
+ * 통계 수치 표시 셀. 라벨 + 큰 숫자.
+ *
+ * ```tsx
+ * <StatCell label="총 건수" value={120} valueColor="primary" />
+ * ```
+ */
+export declare function StatCell({ label, value, valueColor, active, className, ...rest }: StatCellProps): import("react/jsx-runtime").JSX.Element;
+export interface StatGridProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * **StatGrid**
+ *
+ * StatCell을 가로로 배치하는 그리드 컨테이너.
+ *
+ * ```tsx
+ * <StatGrid>
+ *   <StatCell label="건수" value={120} />
+ *   <StatCell label="완료" value={80} valueColor="success" />
+ * </StatGrid>
+ * ```
+ */
+export declare function StatGrid({ children, className, ...rest }: StatGridProps): import("react/jsx-runtime").JSX.Element;
+export interface QuickMenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** 아이콘 */
+    icon: ReactNode;
+    /** 라벨 */
+    label: string;
+}
+/**
+ * **QuickMenuItem**
+ *
+ * 퀵 메뉴 아이콘 항목. 그래디언트 원형 아이콘 + 라벨.
+ *
+ * ```tsx
+ * <QuickMenuItem icon={<FileIcon />} label="계약" />
+ * ```
+ */
+export declare function QuickMenuItem({ icon, label, className, ...rest }: QuickMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export interface ScheduleItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** 날짜 텍스트 */
+    date: string;
+    /** 제목 */
+    title: string;
+    /** 본문 */
+    body?: string;
+    /** 상태 뱃지 영역 */
+    badges?: ReactNode;
+}
+/**
+ * **ScheduleItem**
+ *
+ * 일정 카드 항목.
+ *
+ * ```tsx
+ * <ScheduleItem date="2025.03.21" title="계약 검토" body="본문 내용..." />
+ * ```
+ */
+export declare function ScheduleItem({ date, title, body, badges, className, ...rest }: ScheduleItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/foundations/field/Field.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type FieldTone = "default" | "success" | "danger";
+export type FieldSize = "sm" | "md" | "lg";
+export type FieldProps = PropsWithChildren<{
+    label?: string;
+    caption?: string;
+    helperText?: string;
+    required?: boolean;
+    tone?: FieldTone;
+}>;
+export declare function Field({ caption, children, helperText, label, required, tone }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export type FieldControlShellProps = PropsWithChildren<{
+    disabled?: boolean;
+    size?: FieldSize;
+    tone?: FieldTone;
+}>;
+export declare function FieldControlShell({ children, disabled, size, tone }: FieldControlShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldAdornment({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/foundations/field/field.css.d.ts

@@ -0,0 +1,70 @@
+export declare const fieldRoot: string;
+export declare const fieldLabelRow: string;
+export declare const fieldLabel: string;
+export declare const fieldCaption: string;
+export declare const fieldRequiredMark: string;
+export declare const fieldHelperText: import('@vanilla-extract/recipes').RuntimeFn<{
+    tone: {
+        default: {
+            color: string;
+        };
+        success: {
+            color: "#006d38";
+        };
+        danger: {
+            color: "#b12a30";
+        };
+    };
+}>;
+export declare const fieldControlShell: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            minHeight: "30px";
+        };
+        md: {};
+        lg: {
+            minHeight: "40px";
+        };
+    };
+    tone: {
+        default: {};
+        success: {
+            borderColor: "#28c76f";
+            selectors: {
+                "&:hover": {
+                    borderColor: "#28c76f";
+                };
+                "&:focus-within": {
+                    borderColor: "#28c76f";
+                    boxShadow: "0 0 0 3px rgba(39, 194, 129, 0.12)";
+                };
+            };
+        };
+        danger: {
+            borderColor: string;
+            selectors: {
+                "&:hover": {
+                    borderColor: string;
+                };
+                "&:focus-within": {
+                    borderColor: string;
+                    boxShadow: "0 0 0 3px rgba(234, 59, 59, 0.12)";
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            backgroundColor: string;
+            borderColor: "#9ea7b8";
+            cursor: "not-allowed";
+            selectors: {
+                "&:hover": {
+                    borderColor: "#9ea7b8";
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const fieldAdornment: string;

package/dist/ui-v3/src/foundations/field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field, FieldAdornment, FieldControlShell } from './Field';
+export type { FieldProps, FieldSize, FieldTone } from './Field';

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

@@ -0,0 +1,80 @@
+export { Alert } from './components/Alert';
+export type { AlertProps, AlertType, AlertSize, AlertAction } from './components/Alert';
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonColor, ButtonShape, ButtonSize } from './components/Button';
+export { ButtonGroup } from './components/ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupItem, ButtonGroupVariant, ButtonGroupSize } from './components/ButtonGroup';
+export { ButtonTab } from './components/ButtonTab';
+export type { ButtonTabProps, ButtonTabItem } from './components/ButtonTab';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabItem, TabsSize } from './components/Tabs';
+export { NavigationTab } from './components/NavigationTab';
+export type { NavigationTabProps, NavigationTabItem } from './components/NavigationTab';
+export { IconButtonGroup } from './components/IconButtonGroup';
+export type { IconButtonGroupProps, IconButtonGroupItem, IconButtonGroupVariant } from './components/IconButtonGroup';
+export { ChipsNavigation } from './components/ChipsNavigation';
+export type { ChipsNavigationProps, ChipsNavigationItem } from './components/ChipsNavigation';
+export { Card, CardHeader, CardBody, CardFooter } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Collapse, CollapseGroup } from './components/Collapse';
+export type { CollapseProps, CollapseVariant, CollapseGroupProps } from './components/Collapse';
+export { Dropdown } from './components/Dropdown';
+export type { DropdownProps, DropdownOption, DropdownSize } from './components/Dropdown';
+export { ListGroup, ListGroupItem, BottomSheet } from './components/ListGroup';
+export type { ListGroupProps, ListGroupItemProps, ListGroupVariant, BottomSheetProps } from './components/ListGroup';
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal';
+export type { ModalProps, ModalSize } from './components/Modal';
+export { SweetAlert } from './components/SweetAlert';
+export type { SweetAlertProps, SweetAlertIntent } from './components/SweetAlert';
+export { Pagination, PaginationCount } from './components/Pagination';
+export type { PaginationProps } from './components/Pagination';
+export { ProgressBar, StepBar } from './components/Progress';
+export type { ProgressBarProps, ProgressColor, ProgressSegment, StepBarProps, StepItem, StepStatus } from './components/Progress';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps, TooltipPlacement } from './components/Tooltip';
+export { Popover } from './components/Popover';
+export type { PopoverProps, PopoverPlacement } from './components/Popover';
+export { ChartTooltip } from './components/ChartTooltip';
+export type { ChartTooltipProps, ChartTooltipDataItem } from './components/ChartTooltip';
+export { InfoPopover } from './components/InfoPopover';
+export type { InfoPopoverProps, InfoPopoverStep } from './components/InfoPopover';
+export { CalendarPopover } from './components/CalendarPopover';
+export type { CalendarPopoverProps, CalendarPopoverPlacement, CalendarPopoverField } from './components/CalendarPopover';
+export { Toast, ToastContainer } from './components/Toast';
+export type { ToastProps, ToastIntent, ToastPosition, ToastContainerProps } from './components/Toast';
+export { Input, InputGroup, MultiSelect } from './components/Input';
+export type { InputProps, InputSize, InputState, InputGroupProps, MultiSelectProps, MultiSelectItem } from './components/Input';
+export { TagSelect } from './components/TagSelect';
+export type { TagSelectProps, TagSelectOption } from './components/TagSelect';
+export { Switch } from './components/Switch';
+export type { SwitchProps, SwitchSize } from './components/Switch';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps, CheckboxSize } from './components/Checkbox';
+export { Radio, RadioGroup } from './components/Radio';
+export type { RadioProps, RadioSize, RadioVariant, RadioGroupProps } from './components/Radio';
+export { DatePicker, DateRangePicker } from './components/DatePicker';
+export type { DatePickerProps, DateRangePickerProps } from './components/DatePicker';
+export { FileUploadArea, FileThumbnail, FileItem, FileAttachBadge } from './components/FileUpload';
+export type { FileUploadAreaProps, FileThumbnailProps, FileItemProps, FileAttachBadgeProps, ThumbnailLayout, ThumbnailSize, } from './components/FileUpload';
+export { NumberInput } from './components/NumberInput';
+export type { NumberInputProps, NumberInputSize } from './components/NumberInput';
+export { Slider, RangeSlider } from './components/Slider';
+export type { SliderProps, RangeSliderProps } from './components/Slider';
+export { Avatar, AvatarGroup } from './components/Avatar';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarStatus, AvatarColor } from './components/Avatar';
+export { Widget, StatCell, StatGrid, QuickMenuItem, ScheduleItem } from './components/Widget';
+export type { WidgetProps, StatCellProps, StatGridProps, QuickMenuItemProps, ScheduleItemProps, StatValueColor, } from './components/Widget';
+export { DataTable } from './components/DataTable';
+export type { DataTableProps } from './components/DataTable';
+export { Mention } from './components/Mention';
+export type { MentionProps } from './components/Mention';
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonContentProps } from './components/Skeleton';
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps, SpinnerSize, SpinnerColor } from './components/Spinner';
+export { TreeView } from './components/TreeView';
+export type { TreeViewProps, TreeNode, TreeNodeColumn, TreeViewSize } from './components/TreeView';
+export { sprinkles } from './styles/sprinkles.css';
+export { cx } from './lib/cx';
+export { lightThemeClass, themeVars, createLdsThemeVars } from '../../tokens/src';
+export type { LdsThemeInput } from '../../tokens/src';

package/dist/ui-v3/src/lib/Portal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface PortalProps {
+    children: ReactNode;
+    container?: Element;
+}
+export declare function Portal({ children, container }: PortalProps): import('react').ReactPortal | null;

package/dist/ui-v3/src/lib/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...classNames: Array<string | false | null | undefined>): string;

package/dist/ui-v3/src/lib/cx.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui-v3/src/lib/useFocusTrap.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, active: boolean): void;

package/dist/ui-v3/src/styles/shared.css.d.ts

@@ -0,0 +1,15 @@
+export declare const fieldShell: string;
+export declare const fieldLabel: string;
+export declare const fieldControl: import('@vanilla-extract/recipes').RuntimeFn<{
+    control: {
+        input: {};
+        select: {
+            appearance: "none";
+            paddingRight: `var(--${string})`;
+            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2366748E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")";
+            backgroundPosition: `right var(--${string}) center`;
+            backgroundRepeat: "no-repeat";
+            backgroundSize: "10px 6px";
+        };
+    };
+}>;

package/dist/ui-v3/src/styles/sprinkles.css.d.ts

@@ -0,0 +1,29 @@
+export declare const sprinkles: ((props: {
+    display?: ("flex" | "grid" | "block" | "inline-flex" | "none" | {
+        mobile?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
+        tablet?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
+        desktop?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "flex" | "grid" | "block" | "inline-flex" | "none" | null>;
+    alignItems?: ("center" | "stretch" | {
+        mobile?: "center" | "stretch" | undefined;
+        tablet?: "center" | "stretch" | undefined;
+        desktop?: "center" | "stretch" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "stretch" | null>;
+    justifyContent?: ("center" | "flex-start" | "space-between" | {
+        mobile?: "center" | "flex-start" | "space-between" | undefined;
+        tablet?: "center" | "flex-start" | "space-between" | undefined;
+        desktop?: "center" | "flex-start" | "space-between" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "flex-start" | "space-between" | null>;
+    width?: ("100%" | {
+        mobile?: "100%" | undefined;
+        tablet?: "100%" | undefined;
+        desktop?: "100%" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "100%" | null>;
+    gap?: ("x1" | "x2" | "x3" | "x4" | "x5" | "x6" | {
+        mobile?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
+        tablet?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
+        desktop?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | null>;
+}) => string) & {
+    properties: Set<"display" | "alignItems" | "justifyContent" | "width" | "gap">;
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@lawkit/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "LDS Design System — React component library with design tokens",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/ui-v3/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/ui-v3/src/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["react", "design-system", "components", "ui", "lawkit"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cartoonpoet/LDS.git",
+    "directory": "packages/ui-v3"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.21.3"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "prepublishOnly": "pnpm run build",
+    "lint": "echo \"No lint configured yet\"",
+    "check": "tsc --noEmit",
+    "test": "vitest run --config vitest.config.ts"
+  },
+  "devDependencies": {
+    "@lds/tokens": "workspace:*",
+    "@storybook/react": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vitejs/plugin-react": "^5.2.0",
+    "jsdom": "^28.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0"
+  }
+}