@khoangd/ui 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# @khoangd/ui
+
+Accessible, props-driven React primitives. Import `@khoangd/ui/styles.css` once in the consumer entry point.
+
+```tsx
+import { Button, Grid, Input, InputSelect, Stack, Switch, Textarea } from '@khoangd/ui';
+import '@khoangd/ui/styles.css';
+```
+
+The package has no WTS store, API, socket, router or trading workflow dependency.
+
+Stable subpaths are available when a resource only needs one layer:
+
+```tsx
+import { Button, Input } from '@khoangd/ui/primitives';
+import {
+  Checkbox,
+  DatePicker,
+  FormField,
+  InputSelect,
+  RadioGroup,
+  SegmentedControl,
+  Switch,
+  Textarea,
+} from '@khoangd/ui/forms';
+import { Grid, Stack, Wrapper } from '@khoangd/ui/layout';
+import { ErrorBoundary, Loading, Overlay, Skeleton } from '@khoangd/ui/feedback';
+import { Badge } from '@khoangd/ui/data-display';
+```
+
+`InputSelect` is a native select intended for local option lists. Search, remote data,
+translations and Ant Design adapters remain in the consuming application.
+
+`IconButton` requires an accessible `label`. `Badge` and `EmptyState` accept icon nodes so
+consumers can use `@khoangd/icons` without coupling the UI package to a specific icon set.
+
+## Shared display components
+
+`ImageWithFallback` and `ErrorView` now live here; `@khoangd/trading-ui` keeps compatibility re-exports. Image fallback recovers when `src` changes. Load the stylesheet for the image's default aspect ratio/fit/radius without Tailwind.
+
+```tsx
+import { VirtualizedList } from '@khoangd/ui/virtualized-list';
+
+<VirtualizedList
+  items={rows}
+  itemHeight={32}
+  containerHeight={320}
+  getItemKey={(row) => row.id}
+  renderItem={(row) => <div style={{ height: 32 }}>{row.label}</div>}
+  emptyContent={<span>No data</span>}
+/>
+```
+
+`VirtualizedList` supports either `renderItem(item, absoluteIndex)` or `renderContent(visibleItems)`. Rows must have the specified fixed height; viewport height is controlled by `containerHeight`. `onScroll` receives the native scroll event. Routing, data fetching, translations and empty-state assets belong to the consumer. Stable `getItemKey` values preserve row identity when sorting/filtering.

package/dist/ErrorView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ErrorViewProps {
+    /** Optional icon (e.g. SVG component) */
+    icon?: React.ReactNode;
+    /** Message or description */
+    description?: React.ReactNode;
+    /** Retry / refresh handler */
+    onRefresh?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Generic error state with optional icon, description, and retry.
+ * App can wrap with antd Empty, i18n, and custom icon.
+ */
+export declare function ErrorView({ icon, description, onRefresh, className, }: ErrorViewProps): React.ReactElement;
+export default ErrorView;
+//# sourceMappingURL=ErrorView.d.ts.map

package/dist/ErrorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorView.d.ts","sourceRoot":"","sources":["../src/ErrorView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAc,GACf,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA2BrC;AAED,eAAe,SAAS,CAAC"}

package/dist/ErrorView.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Generic error state with optional icon, description, and retry.
+ * App can wrap with antd Empty, i18n, and custom icon.
+ */
+export function ErrorView({ icon, description, onRefresh, className = '', }) {
+    return (_jsxs("div", { className: className, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+            textAlign: 'center',
+        }, children: [icon && (_jsx("div", { onClick: onRefresh, onKeyDown: (e) => e.key === 'Enter' && onRefresh?.(), role: "button", tabIndex: 0, style: { cursor: onRefresh ? 'pointer' : 'default', marginBottom: 8 }, children: icon })), description != null && _jsx("div", { style: { color: 'var(--TEXT__2, #666)' }, children: description })] }));
+}
+export default ErrorView;
+//# sourceMappingURL=ErrorView.js.map

package/dist/ErrorView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorView.js","sourceRoot":"","sources":["../src/ErrorView.tsx"],"names":[],"mappings":";AAaA;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,GAAG,EAAE,GACC;IACf,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,QAAQ;SACpB,aAEA,IAAI,IAAI,CACP,cACE,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,SAAS,EAAE,EAAE,EACpD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,YAEpE,IAAI,GACD,CACP,EACA,WAAW,IAAI,IAAI,IAAI,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,YAAG,WAAW,GAAO,IACtF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/ImageWithFallback.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ImageWithFallbackProps {
+    src?: string;
+    alt?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Fallback image URL when src fails to load. If not provided, a placeholder is used. */
+    fallbackSrc?: string;
+}
+export declare function ImageWithFallback({ src, alt, className, style, fallbackSrc, }: ImageWithFallbackProps): React.ReactElement | null;
+export default ImageWithFallback;
+//# sourceMappingURL=ImageWithFallback.d.ts.map

package/dist/ImageWithFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.d.ts","sourceRoot":"","sources":["../src/ImageWithFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,yFAAyF;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,wBAAgB,iBAAiB,CAAC,EAChC,GAAQ,EACR,GAAQ,EACR,SAAc,EACd,KAAsB,EACtB,WAAyB,GAC1B,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAgBpD;AAED,eAAe,iBAAiB,CAAC"}

package/dist/ImageWithFallback.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+const PLACEHOLDER = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Crect fill="%23f0f0f0" width="100" height="100"/%3E%3C/svg%3E';
+export function ImageWithFallback({ src = '', alt = '', className = '', style = { width: 100 }, fallbackSrc = PLACEHOLDER, }) {
+    const [failedSrc, setFailedSrc] = useState(null);
+    const imgSrc = failedSrc === src ? fallbackSrc : src;
+    if (!src)
+        return null;
+    return (_jsx("img", { style: style, className: `shinhan-image aspect-video object-contain rounded-[4px] ${className}`.trim(), src: imgSrc, alt: alt, onError: () => { if (imgSrc !== fallbackSrc)
+            setFailedSrc(src); }, loading: "lazy" }));
+}
+export default ImageWithFallback;
+//# sourceMappingURL=ImageWithFallback.js.map

package/dist/ImageWithFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../src/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWxC,MAAM,WAAW,GACf,+KAA+K,CAAC;AAElL,MAAM,UAAU,iBAAiB,CAAC,EAChC,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,EAAE,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EACtB,WAAW,GAAG,WAAW,GACF;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;IAErD,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IAEtB,OAAO,CACL,cACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,2DAA2D,SAAS,EAAE,CAAC,IAAI,EAAE,EACxF,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,MAAM,KAAK,WAAW;YAAE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACjE,OAAO,EAAC,MAAM,GACd,CACH,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/dist/VirtualizedList.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type Key, type ReactNode } from 'react';
+export interface VirtualizedListProps<T> {
+    items?: readonly T[];
+    itemHeight?: number;
+    containerHeight?: number;
+    className?: string;
+    classNameChild?: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    renderItem?: (item: T, index: number) => ReactNode;
+    renderContent?: (items: T[]) => ReactNode;
+    getItemKey?: (item: T, index: number) => Key;
+    emptyContent?: ReactNode;
+    onScroll?: (event: Event) => void;
+}
+/** Fixed-height list with no routing, app state, stylesheet or translation dependency. */
+export declare function VirtualizedList<T>({ items, itemHeight, containerHeight, className, classNameChild, style, tabIndex, renderItem, renderContent, getItemKey, emptyContent, onScroll, }: VirtualizedListProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VirtualizedList.d.ts.map

package/dist/VirtualizedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../src/VirtualizedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlG,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;IAC7C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,0FAA0F;AAC1F,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAU,EAAE,UAAe,EAAE,eAAqB,EAAE,SAAc,EAAE,cAAmB,EACvF,KAAK,EAAE,QAAY,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAmB,EAAE,QAAQ,GAC1F,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAqCzB"}

package/dist/VirtualizedList.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef } from 'react';
+import { useVirtualScroll } from '@khoangd/react-utils';
+/** Fixed-height list with no routing, app state, stylesheet or translation dependency. */
+export function VirtualizedList({ items = [], itemHeight = 30, containerHeight = 100, className = '', classNameChild = '', style, tabIndex = 0, renderItem, renderContent, getItemKey, emptyContent = null, onScroll, }) {
+    const container = useRef(null);
+    const { range, updateRange } = useVirtualScroll(items.length, itemHeight, containerHeight);
+    const hasItems = items.length > 0;
+    useEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        let frame;
+        const handleScroll = (event) => {
+            onScroll?.(event);
+            if (frame !== undefined)
+                cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => updateRange(element.scrollTop));
+        };
+        updateRange(element.scrollTop);
+        element.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+            if (frame !== undefined)
+                cancelAnimationFrame(frame);
+        };
+    }, [hasItems, onScroll, updateRange]);
+    if (!hasItems)
+        return _jsx(_Fragment, { children: emptyContent });
+    const visibleItems = items.slice(range.start, range.end);
+    return (_jsx("div", { ref: container, className: className, tabIndex: tabIndex, style: { position: 'relative', overflowY: 'auto', ...style, height: containerHeight }, children: _jsx("div", { style: { height: items.length * itemHeight, position: 'relative' }, children: _jsx("div", { className: classNameChild, style: { transform: `translateY(${range.start * itemHeight}px)` }, children: renderItem ? visibleItems.map((item, index) => {
+                    const absoluteIndex = range.start + index;
+                    return _jsx(Fragment, { children: renderItem(item, absoluteIndex) }, getItemKey?.(item, absoluteIndex) ?? absoluteIndex);
+                }) : renderContent?.(visibleItems) }) }) }));
+}
+//# sourceMappingURL=VirtualizedList.js.map

package/dist/VirtualizedList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.js","sourceRoot":"","sources":["../src/VirtualizedList.tsx"],"names":[],"mappings":"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"}

package/dist/dataDisplay.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+    icon?: ReactNode;
+}
+/** Semantic status label. Product icons and tooltip behavior are supplied by consumers. */
+export declare function Badge({ variant, icon, className, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dataDisplay.d.ts.map

package/dist/dataDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataDisplay.d.ts","sourceRoot":"","sources":["../src/dataDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,2FAA2F;AAC3F,wBAAgB,KAAK,CAAC,EAAE,OAAmB,EAAE,IAAI,EAAE,SAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAOlG"}

package/dist/dataDisplay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Semantic status label. Product icons and tooltip behavior are supplied by consumers. */
+export function Badge({ variant = 'neutral', icon, className = '', children, ...props }) {
+    return (_jsxs("span", { className: `shinhan-badge shinhan-badge--${variant} ${className}`.trim(), ...props, children: [icon == null ? null : _jsx("span", { className: "shinhan-badge__icon", "aria-hidden": "true", children: icon }), _jsx("span", { children: children })] }));
+}
+//# sourceMappingURL=dataDisplay.js.map

package/dist/dataDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataDisplay.js","sourceRoot":"","sources":["../src/dataDisplay.tsx"],"names":[],"mappings":";AAOA,2FAA2F;AAC3F,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACjG,OAAO,CACL,gBAAM,SAAS,EAAE,gCAAgC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aACtF,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,qBAAqB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAC7F,yBAAO,QAAQ,GAAQ,IAClB,CACR,CAAC;AACJ,CAAC"}

package/dist/feedback.d.ts

@@ -0,0 +1,31 @@
+import { Component, type ErrorInfo, type HTMLAttributes, type ReactNode } from 'react';
+export declare function Loading({ label, ...props }: HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Overlay(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+export declare function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, info: ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    error: Error | null;
+};
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=feedback.d.ts.map

package/dist/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,wBAAgB,OAAO,CAAC,EAAE,KAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE3G;AACD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAAkH;AAChL,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAA8F;AAE3J,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,SAAc,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CASzG;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CAAE,CAAC;AAClI,KAAK,kBAAkB,GAAG;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;AAClD,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAClF,KAAK,EAAE,kBAAkB,CAAmB;IAC5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAC5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS;IAC/C,MAAM;CACP"}

package/dist/feedback.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+export function Loading({ label = 'Loading', ...props }) {
+    return _jsx("div", { role: "status", "aria-label": label, ...props, children: _jsx("span", { className: "shinhan-spinner", "aria-hidden": "true" }) });
+}
+export function Skeleton(props) { return _jsx("div", { "aria-hidden": "true", ...props, className: `shinhan-skeleton ${props.className ?? ''}`.trim() }); }
+export function Overlay(props) { return _jsx("div", { ...props, className: `shinhan-overlay ${props.className ?? ''}`.trim() }); }
+export function EmptyState({ title, description, icon, action, className = '', ...props }) {
+    return (_jsxs("div", { className: `shinhan-empty-state ${className}`.trim(), ...props, children: [icon == null ? null : _jsx("div", { className: "shinhan-empty-state__icon", "aria-hidden": "true", children: icon }), _jsx("strong", { className: "shinhan-empty-state__title", children: title }), description == null ? null : _jsx("div", { className: "shinhan-empty-state__description", children: description }), action == null ? null : _jsx("div", { className: "shinhan-empty-state__action", children: action })] }));
+}
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) { return { error }; }
+    componentDidCatch(error, info) { this.props.onError?.(error, info); }
+    render() { return this.state.error ? (this.props.fallback ?? _jsx("div", { role: "alert", children: "Something went wrong." })) : this.props.children; }
+}
+//# sourceMappingURL=feedback.js.map

package/dist/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAuD,MAAM,OAAO,CAAC;AAEvF,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,EAAuD;IAC1G,OAAO,cAAK,IAAI,EAAC,QAAQ,gBAAa,KAAK,KAAM,KAAK,YAAE,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,GAAG,GAAM,CAAC;AACxH,CAAC;AACD,MAAM,UAAU,QAAQ,CAAC,KAAqC,IAAI,OAAO,6BAAiB,MAAM,KAAK,KAAK,EAAE,SAAS,EAAE,oBAAoB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC;AAChL,MAAM,UAAU,OAAO,CAAC,KAAqC,IAAI,OAAO,iBAAS,KAAK,EAAE,SAAS,EAAE,mBAAmB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC;AAS3J,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAmB;IACxG,OAAO,CACL,eAAK,SAAS,EAAE,uBAAuB,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aACjE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,2BAA2B,iBAAa,MAAM,YAAE,IAAI,GAAO,EACjG,iBAAQ,SAAS,EAAC,4BAA4B,YAAE,KAAK,GAAU,EAC9D,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,kCAAkC,YAAE,WAAW,GAAO,EAClG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,6BAA6B,YAAE,MAAM,GAAO,IAChF,CACP,CAAC;AACJ,CAAC;AAID,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAApF;;QACE,UAAK,GAAuB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAI9C,CAAC;IAHC,MAAM,CAAC,wBAAwB,CAAC,KAAY,IAAI,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACnE,iBAAiB,CAAC,KAAY,EAAE,IAAe,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACvF,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,cAAK,IAAI,EAAC,OAAO,sCAA4B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;CACrI"}

package/dist/forms.d.ts

@@ -0,0 +1,82 @@
+import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+/** Controlled, keyboard-accessible switch with no application state dependency. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface InputSelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface InputSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value'> {
+    value?: string;
+    onChange?: (value: string, option: InputSelectOption) => void;
+    options?: readonly InputSelectOption[];
+    placeholder?: string;
+    allowClear?: boolean;
+}
+/** Native select primitive. Searchable or remote-data selects stay in app adapters. */
+export declare const InputSelect: import("react").ForwardRefExoticComponent<InputSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+/** Preferred product-neutral name. InputSelect remains for compatibility. */
+export declare const Select: import("react").ForwardRefExoticComponent<InputSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export type SelectOption = InputSelectOption;
+export type SelectProps = InputSelectProps;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    minRows?: number;
+    maxRows?: number;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+/** Native date input using an explicit YYYY-MM-DD value contract. */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: ReactNode;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    name: string;
+    value?: string;
+    options: readonly RadioOption[];
+    onChange?: (value: string, option: RadioOption) => void;
+    disabled?: boolean;
+    direction?: 'row' | 'column';
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function RadioGroup({ name, value, options, onChange, disabled, direction, className, 'aria-label': ariaLabel, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface SegmentedControlProps {
+    value?: string;
+    options: readonly RadioOption[];
+    onChange?: (value: string, option: RadioOption) => void;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+export declare function SegmentedControl({ value, options, onChange, disabled, className, 'aria-label': ariaLabel, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export interface FormFieldProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    label: ReactNode;
+    htmlFor?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactNode;
+}
+export declare function FormField({ label, htmlFor, hint, error, required, children, className, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=forms.d.ts.map

package/dist/forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"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"}

package/dist/forms.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+/** Controlled, keyboard-accessible switch with no application state dependency. */
+export const Switch = forwardRef(function Switch({ checked = false, onChange, checkedChildren, unCheckedChildren, disabled = false, className = '', 'aria-label': ariaLabel, }, ref) {
+    return (_jsxs("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, "aria-label": ariaLabel, disabled: disabled, className: `shinhan-switch ${className}`.trim(), onClick: () => onChange?.(!checked), children: [_jsx("span", { className: "shinhan-switch__content", children: checked ? checkedChildren : unCheckedChildren }), _jsx("span", { className: "shinhan-switch__thumb", "aria-hidden": "true" })] }));
+});
+/** Native select primitive. Searchable or remote-data selects stay in app adapters. */
+export const InputSelect = forwardRef(function InputSelect({ value = '', onChange, options = [], placeholder = '', allowClear = false, className = '', ...props }, ref) {
+    const handleChange = (event) => {
+        const nextValue = event.target.value;
+        const option = options.find((item) => item.value === nextValue);
+        onChange?.(nextValue, option ?? { value: nextValue, label: nextValue });
+    };
+    return (_jsxs("select", { ref: ref, value: value, onChange: handleChange, className: `shinhan-select ${className}`.trim(), ...props, children: [placeholder || allowClear ? _jsx("option", { value: "", children: placeholder || '—' }) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: typeof option.label === 'string' || typeof option.label === 'number'
+                    ? option.label
+                    : option.value }, option.value)))] }));
+});
+/** Preferred product-neutral name. InputSelect remains for compatibility. */
+export const Select = InputSelect;
+export const Textarea = forwardRef(function Textarea({ value, defaultValue, minRows = 2, maxRows = 6, className = '', ...props }, ref) {
+    const content = value ?? defaultValue ?? '';
+    const rows = Math.min(Math.max(minRows, String(content).split('\n').length), maxRows);
+    return (_jsx("textarea", { ref: ref, value: value, defaultValue: defaultValue, rows: rows, className: `shinhan-textarea ${className}`.trim(), ...props }));
+});
+/** Native date input using an explicit YYYY-MM-DD value contract. */
+export const DatePicker = forwardRef(function DatePicker({ value = '', onChange, className = '', ...props }, ref) {
+    return (_jsx("input", { ref: ref, type: "date", value: value, onChange: (event) => onChange?.(event.target.value), className: `shinhan-datepicker ${className}`.trim(), ...props }));
+});
+export const Checkbox = forwardRef(function Checkbox({ checked = false, onCheckedChange, label, className = '', disabled, ...props }, ref) {
+    return (_jsxs("label", { className: `shinhan-checkbox ${disabled ? 'shinhan-checkbox--disabled' : ''} ${className}`.trim(), children: [_jsx("input", { ref: ref, type: "checkbox", checked: checked, disabled: disabled, onChange: (event) => onCheckedChange?.(event.target.checked), ...props }), label == null ? null : _jsx("span", { children: label })] }));
+});
+export function RadioGroup({ name, value, options, onChange, disabled = false, direction = 'row', className = '', 'aria-label': ariaLabel, }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: `shinhan-radio-group shinhan-radio-group--${direction} ${className}`.trim(), children: options.map((option) => (_jsxs("label", { className: `shinhan-radio ${disabled || option.disabled ? 'shinhan-radio--disabled' : ''}`, children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, onChange: () => onChange?.(option.value, option) }), _jsx("span", { children: option.label })] }, option.value))) }));
+}
+export function SegmentedControl({ value, options, onChange, disabled = false, className = '', 'aria-label': ariaLabel, }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: `shinhan-segmented ${className}`.trim(), children: options.map((option) => {
+            const selected = value === option.value;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": selected, disabled: disabled || option.disabled, className: "shinhan-segmented__item", onClick: () => onChange?.(option.value, option), children: option.label }, option.value));
+        }) }));
+}
+export function FormField({ label, htmlFor, hint, error, required = false, children, className = '', ...props }) {
+    return (_jsxs("label", { htmlFor: htmlFor, className: `shinhan-field ${className}`.trim(), ...props, children: [_jsxs("span", { className: "shinhan-field__label", children: [label, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), children, error == null ? null : _jsx("span", { className: "shinhan-field__error", children: error }), error != null || hint == null ? null : _jsx("span", { className: "shinhan-field__hint", children: hint })] }));
+}
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.js","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,GAOX,MAAM,OAAO,CAAC;AAYf,mFAAmF;AACnF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,kBAAkB,SAAS,EAAE,CAAC,IAAI,EAAE,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,aAEnC,eAAM,SAAS,EAAC,yBAAyB,YACtC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,GACzC,EACP,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,IACtD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAiBH,uFAAuF;AACvF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAsC,SAAS,WAAW,CAC7F,EACE,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,EAAE,EAChB,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,YAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;QAC7D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACrC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QAChE,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,kBAAkB,SAAS,EAAE,CAAC,IAAI,EAAE,KAC3C,KAAK,aAER,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,iBAAQ,KAAK,EAAC,EAAE,YAAE,WAAW,IAAI,GAAG,GAAU,CAAC,CAAC,CAAC,IAAI,EACjF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,YACtE,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ;oBACnE,CAAC,CAAC,MAAM,CAAC,KAAK;oBACd,CAAC,CAAC,MAAM,CAAC,KAAK,IAHL,MAAM,CAAC,KAAK,CAIhB,CACV,CAAC,IACK,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6EAA6E;AAC7E,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAC;AASlC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG;IAEH,MAAM,OAAO,GAAG,KAAK,IAAI,YAAY,IAAI,EAAE,CAAC;IAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;IACtF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,oBAAoB,SAAS,EAAE,CAAC,IAAI,EAAE,KAC7C,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAQH,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAoC,SAAS,UAAU,CACzF,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,SAAS,EAAE,sBAAsB,SAAS,EAAE,CAAC,IAAI,EAAE,KAC/C,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CACnF,EAAE,OAAO,GAAG,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC/E,GAAG;IAEH,OAAO,CACL,iBAAO,SAAS,EAAE,oBAAoB,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACtG,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KACxD,KAAK,GACT,EACD,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAO,KAAK,GAAQ,IACtC,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAmBH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GACP;IAChB,OAAO,CACL,cACE,IAAI,EAAC,YAAY,gBACL,SAAS,EACrB,SAAS,EAAE,4CAA4C,SAAS,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YAErF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAEE,SAAS,EAAE,iBAAiB,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,aAE1F,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,KAAK,EAC/B,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAChD,EACF,yBAAO,MAAM,CAAC,KAAK,GAAQ,KAXtB,MAAM,CAAC,KAAK,CAYX,CACT,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GACD;IACtB,OAAO,CACL,cAAK,IAAI,EAAC,YAAY,gBAAa,SAAS,EAAE,SAAS,EAAE,qBAAqB,SAAS,EAAE,CAAC,IAAI,EAAE,YAC7F,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;YACxC,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,QAAQ,EACtB,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACrC,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,YAE9C,MAAM,CAAC,KAAK,IARR,MAAM,CAAC,KAAK,CASV,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACO;IACf,OAAO,CACL,iBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aAChF,gBAAM,SAAS,EAAC,sBAAsB,aACnC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,8BAAkB,MAAM,mBAAU,CAAC,CAAC,CAAC,IAAI,IACvD,EACN,QAAQ,EACR,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAQ,EAC5E,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACrF,CACT,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './primitives.js';
+export * from './forms.js';
+export * from './layout.js';
+export * from './feedback.js';
+export * from './dataDisplay.js';
+export { ImageWithFallback } from './ImageWithFallback.js';
+export type { ImageWithFallbackProps } from './ImageWithFallback.js';
+export { ErrorView } from './ErrorView.js';
+export type { ErrorViewProps } from './ErrorView.js';
+export { VirtualizedList } from './VirtualizedList.js';
+export type { VirtualizedListProps } from './VirtualizedList.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './primitives.js';
+export * from './forms.js';
+export * from './layout.js';
+export * from './feedback.js';
+export * from './dataDisplay.js';
+export { ImageWithFallback } from './ImageWithFallback.js';
+export { ErrorView } from './ErrorView.js';
+export { VirtualizedList } from './VirtualizedList.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/layout.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+type StackProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+    direction?: 'row' | 'column';
+    gap?: CSSProperties['gap'];
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    wrap?: boolean;
+}>;
+export declare function Stack({ direction, gap, align, justify, wrap, style, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+type GridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+    columns?: number | string;
+    gap?: CSSProperties['gap'];
+}>;
+export declare function Grid({ columns, gap, style, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    direction?: 'row' | 'column';
+}
+/** Token-aligned container used by products that do not need a layout framework. */
+export declare function Wrapper({ padding, gap, direction, className, style, ...props }: WrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,KAAK,UAAU,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAAC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACnO,wBAAgB,KAAK,CAAC,EAAE,SAAoB,EAAE,GAA8B,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEhI;AAED,KAAK,SAAS,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;CAAE,CAAC,CAAC;AAC/H,wBAAgB,IAAI,CAAC,EAAE,OAAW,EAAE,GAA8B,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAE/F;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAaD,oFAAoF;AACpF,wBAAgB,OAAO,CAAC,EACtB,OAAW,EACX,GAAO,EACP,SAAoB,EACpB,SAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,2CAgBd"}

package/dist/layout.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Stack({ direction = 'column', gap = 'var(--shinhan-space-2)', align, justify, wrap, style, ...props }) {
+    return _jsx("div", { ...props, style: { display: 'flex', flexDirection: direction, gap, alignItems: align, justifyContent: justify, flexWrap: wrap ? 'wrap' : undefined, ...style } });
+}
+export function Grid({ columns = 1, gap = 'var(--shinhan-space-2)', style, ...props }) {
+    return _jsx("div", { ...props, style: { display: 'grid', gridTemplateColumns: typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns, gap, ...style } });
+}
+const SPACE_PX = {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    8: 32,
+};
+/** Token-aligned container used by products that do not need a layout framework. */
+export function Wrapper({ padding = 2, gap = 0, direction = 'column', className = '', style, ...props }) {
+    const gapPx = SPACE_PX[gap] ?? 0;
+    return (_jsx("div", { className: `shinhan-wrapper ${className}`.trim(), style: {
+            boxSizing: 'border-box',
+            padding: SPACE_PX[padding] ?? 8,
+            display: gapPx > 0 ? 'flex' : 'block',
+            flexDirection: direction,
+            gap: gapPx,
+            ...style,
+        }, ...props }));
+}
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":";AAGA,MAAM,UAAU,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,GAAG,GAAG,wBAAwB,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAc;IAC/H,OAAO,iBAAS,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,KAAK,EAAE,GAAI,CAAC;AAClL,CAAC;AAGD,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,GAAG,wBAAwB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IAC9F,OAAO,iBAAS,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,OAAO,mBAAmB,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAI,CAAC;AAC1K,CAAC;AAQD,MAAM,QAAQ,GAA2B;IACvC,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACN,CAAC;AAEF,oFAAoF;AACpF,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,CAAC,EACP,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACK;IACb,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,OAAO,CACL,cACE,SAAS,EAAE,mBAAmB,SAAS,EAAE,CAAC,IAAI,EAAE,EAChD,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;YAC/B,OAAO,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACrC,aAAa,EAAE,SAAS;YACxB,GAAG,EAAE,KAAK;YACV,GAAG,KAAK;SACT,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/primitives.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary' | 'ghost';
+    loading?: boolean;
+};
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary" | "ghost" | undefined;
+    loading?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {
+    label: string;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'ghost' | 'subtle';
+    children: ReactNode;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExG,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AACvI,eAAO,MAAM,MAAM;;;qDAIjB,CAAC;AAGH,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AACvF,eAAO,MAAM,KAAK;;oDAEhB,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,+GAerB,CAAC"}

package/dist/primitives.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const Button = forwardRef(({ variant = 'primary', loading, disabled, className = '', children, ...props }, ref) => (_jsxs("button", { ref: ref, className: `shinhan-button shinhan-button--${variant} ${className}`.trim(), disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? _jsx("span", { className: "shinhan-spinner", "aria-hidden": "true" }) : null, children] })));
+Button.displayName = 'Button';
+export const Input = forwardRef(({ invalid, className = '', ...props }, ref) => (_jsx("input", { ref: ref, className: `shinhan-input ${className}`.trim(), "aria-invalid": invalid || undefined, ...props })));
+Input.displayName = 'Input';
+export const IconButton = forwardRef(function IconButton({ label, size = 'medium', variant = 'ghost', className = '', children, type = 'button', ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: type, "aria-label": label, className: `shinhan-icon-button shinhan-icon-button--${size} shinhan-icon-button--${variant} ${className}`.trim(), ...props, children: children }));
+});
+//# sourceMappingURL=primitives.js.map

package/dist/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuE,MAAM,OAAO,CAAC;AAGxG,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxJ,kBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,kCAAkC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAAa,OAAO,IAAI,SAAS,KAAM,KAAK,aACpK,OAAO,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,IAC5E,CACV,CAAC,CAAC;AACH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAG9B,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,EAAE,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5G,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,SAAS,EAAE,CAAC,IAAI,EAAE,kBAAgB,OAAO,IAAI,SAAS,KAAM,KAAK,GAAI,CACnH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAS5B,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqC,SAAS,UAAU,CAC1F,EAAE,KAAK,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EAClG,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,gBACE,KAAK,EACjB,SAAS,EAAE,4CAA4C,IAAI,yBAAyB,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAC7G,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@khoangd/ui",
+  "version": "0.1.0",
+  "description": "Accessible React UI primitives for Shinhan frontend products",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles.css",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "import": "./dist/primitives.js"
+    },
+    "./forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./feedback": {
+      "types": "./dist/feedback.d.ts",
+      "import": "./dist/feedback.js"
+    },
+    "./data-display": {
+      "types": "./dist/dataDisplay.d.ts",
+      "import": "./dist/dataDisplay.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json",
+    "./virtualized-list": {
+      "types": "./dist/VirtualizedList.d.ts",
+      "import": "./dist/VirtualizedList.js",
+      "default": "./dist/VirtualizedList.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@khoangd/tokens": "workspace:*",
+    "@khoangd/react-utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17 <20",
+    "react-dom": ">=17 <20"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/styles.css

@@ -0,0 +1,60 @@
+@import '@khoangd/tokens/styles.css';
+.shinhan-image { aspect-ratio: 16 / 9; object-fit: contain; border-radius: 4px; }
+.shinhan-button { align-items: center; border: 1px solid transparent; border-radius: var(--shinhan-radius-md); cursor: pointer; display: inline-flex; font: 500 14px/1 var(--shinhan-font-sans); gap: var(--shinhan-space-2); justify-content: center; min-height: 36px; padding: 0 var(--shinhan-space-4); transition: background var(--shinhan-motion-fast); }
+.shinhan-button:disabled { cursor: not-allowed; opacity: .55; }
+.shinhan-button--primary { background: var(--shinhan-color-brand-primary); color: var(--shinhan-color-text-inverse); }
+.shinhan-button--primary:hover:not(:disabled) { background: var(--shinhan-color-brand-primary-hover); }
+.shinhan-button--secondary { background: var(--shinhan-color-surface); border-color: var(--shinhan-color-border); color: var(--shinhan-color-text-primary); }
+.shinhan-button--ghost { background: transparent; color: var(--shinhan-color-text-primary); }
+.shinhan-icon-button { align-items: center; border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: inline-flex; justify-content: center; padding: 0; }
+.shinhan-icon-button--small { height: 24px; width: 24px; }
+.shinhan-icon-button--medium { height: 32px; width: 32px; }
+.shinhan-icon-button--large { height: 40px; width: 40px; }
+.shinhan-icon-button--ghost { background: transparent; }
+.shinhan-icon-button--subtle { background: var(--shinhan-color-surface-subtle); }
+.shinhan-icon-button:hover:not(:disabled) { background: var(--shinhan-color-border); }
+.shinhan-icon-button:disabled { cursor: not-allowed; opacity: .55; }
+.shinhan-input { background: var(--shinhan-color-surface); border: 1px solid var(--shinhan-color-border); border-radius: var(--shinhan-radius-md); box-sizing: border-box; color: var(--shinhan-color-text-primary); font: 400 14px/1.4 var(--shinhan-font-sans); min-height: 36px; padding: 0 var(--shinhan-space-3); }
+.shinhan-input:focus-visible { border-color: var(--shinhan-color-brand-primary); outline: 2px solid rgba(0, 91, 172, .25); }
+.shinhan-input[aria-invalid='true'] { border-color: #d32f2f; }
+.shinhan-select, .shinhan-textarea, .shinhan-datepicker { background: var(--shinhan-color-surface); border: 1px solid var(--shinhan-color-border); border-radius: var(--shinhan-radius-md); box-sizing: border-box; color: var(--shinhan-color-text-primary); font: 400 14px/1.4 var(--shinhan-font-sans); min-height: 36px; padding: var(--shinhan-space-2) var(--shinhan-space-3); width: 100%; }
+.shinhan-textarea { resize: vertical; }
+.shinhan-select:focus-visible, .shinhan-textarea:focus-visible, .shinhan-datepicker:focus-visible { border-color: var(--shinhan-color-brand-primary); outline: 2px solid rgba(0, 91, 172, .25); }
+.shinhan-switch { align-items: center; background: var(--shinhan-color-border); border: 0; border-radius: 9999px; color: var(--shinhan-color-text-primary); cursor: pointer; display: inline-flex; gap: var(--shinhan-space-1); justify-content: space-between; min-height: 24px; min-width: 44px; padding: 2px; position: relative; transition: background var(--shinhan-motion-fast); }
+.shinhan-switch[aria-checked='true'] { background: var(--shinhan-color-brand-primary); color: var(--shinhan-color-text-inverse); }
+.shinhan-switch:disabled { cursor: not-allowed; opacity: .55; }
+.shinhan-switch__content { font: 500 11px/1 var(--shinhan-font-sans); padding: 0 var(--shinhan-space-1); }
+.shinhan-switch__thumb { background: var(--shinhan-color-surface); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); height: 20px; order: -1; transition: transform var(--shinhan-motion-fast); width: 20px; }
+.shinhan-switch[aria-checked='true'] .shinhan-switch__thumb { order: 1; }
+.shinhan-checkbox, .shinhan-radio { align-items: center; color: var(--shinhan-color-text-primary); cursor: pointer; display: inline-flex; font: 400 14px/1.4 var(--shinhan-font-sans); gap: var(--shinhan-space-2); }
+.shinhan-checkbox--disabled, .shinhan-radio--disabled { cursor: not-allowed; opacity: .55; }
+.shinhan-checkbox input, .shinhan-radio input { accent-color: var(--shinhan-color-brand-primary); height: 16px; margin: 0; width: 16px; }
+.shinhan-radio-group { display: flex; gap: var(--shinhan-space-3); }
+.shinhan-radio-group--column { align-items: flex-start; flex-direction: column; }
+.shinhan-segmented { background: var(--shinhan-color-surface-subtle); border-radius: var(--shinhan-radius-md); display: inline-flex; gap: 2px; padding: 2px; }
+.shinhan-segmented__item { background: transparent; border: 0; border-radius: var(--shinhan-radius-sm); color: var(--shinhan-color-text-secondary); cursor: pointer; font: 500 13px/1 var(--shinhan-font-sans); min-height: 28px; padding: 0 var(--shinhan-space-3); }
+.shinhan-segmented__item[aria-checked='true'] { background: var(--shinhan-color-surface); color: var(--shinhan-color-brand-primary); }
+.shinhan-segmented__item:disabled { cursor: not-allowed; opacity: .55; }
+.shinhan-field { color: var(--shinhan-color-text-primary); display: grid; font-family: var(--shinhan-font-sans); gap: var(--shinhan-space-2); }
+.shinhan-field__label { font-size: 13px; font-weight: 600; }
+.shinhan-field__hint, .shinhan-field__error { font-size: 12px; }
+.shinhan-field__hint { color: var(--shinhan-color-text-secondary); }
+.shinhan-field__error { color: #d32f2f; }
+.shinhan-badge { align-items: center; border-radius: 9999px; display: inline-flex; font: 500 12px/1 var(--shinhan-font-sans); gap: var(--shinhan-space-1); min-height: 22px; padding: 0 var(--shinhan-space-2); white-space: nowrap; }
+.shinhan-badge--neutral { background: var(--shinhan-color-surface-subtle); color: var(--shinhan-color-text-secondary); }
+.shinhan-badge--success { background: #def7e7; color: #16803c; }
+.shinhan-badge--warning { background: #fff3d1; color: #8a5700; }
+.shinhan-badge--danger { background: #ffe5e5; color: #b42318; }
+.shinhan-badge--info { background: #e5f1ff; color: #0568c5; }
+.shinhan-badge__icon { display: inline-flex; }
+.shinhan-empty-state { align-items: center; color: var(--shinhan-color-text-primary); display: flex; flex-direction: column; font-family: var(--shinhan-font-sans); gap: var(--shinhan-space-2); justify-content: center; padding: var(--shinhan-space-6); text-align: center; }
+.shinhan-empty-state__icon { color: var(--shinhan-color-text-secondary); display: inline-flex; }
+.shinhan-empty-state__title { font-size: 14px; }
+.shinhan-empty-state__description { color: var(--shinhan-color-text-secondary); font-size: 13px; }
+.shinhan-empty-state__action { margin-top: var(--shinhan-space-2); }
+.shinhan-spinner { animation: shinhan-spin .7s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; height: 1em; width: 1em; }
+.shinhan-skeleton { animation: shinhan-pulse 1.4s ease-in-out infinite; background: var(--shinhan-color-surface-subtle); border-radius: var(--shinhan-radius-md); min-height: 1em; }
+.shinhan-overlay { background: var(--shinhan-color-overlay); inset: 0; position: fixed; z-index: 1200; }
+@keyframes shinhan-spin { to { transform: rotate(360deg); } }
+@keyframes shinhan-pulse { 50% { opacity: .55; } }
+@media (prefers-reduced-motion: reduce) { .shinhan-spinner, .shinhan-skeleton { animation: none; } }