@xfilecom/front-core 0.2.28 → 0.2.31

package/dist/components/atoms/Accordion.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionContent = AccordionContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AccordionContext = (0, react_1.createContext)(null);
+function useAccordionContext(component) {
+    const ctx = (0, react_1.useContext)(AccordionContext);
+    if (!ctx) {
+        throw new Error(`${component} must be used inside <Accordion>`);
+    }
+    return ctx;
+}
+const AccordionItemContext = (0, react_1.createContext)(null);
+function useAccordionItemContext(component) {
+    const ctx = (0, react_1.useContext)(AccordionItemContext);
+    if (!ctx) {
+        throw new Error(`${component} must be used inside <AccordionItem>`);
+    }
+    return ctx;
+}
+/** shadcn/ui `Accordion` 대응 — 단일 열림(single). */
+function Accordion({ collapsible = false, defaultValue = undefined, value: valueProp, onValueChange, className = '', children, ...rest }) {
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const open = isControlled ? valueProp : uncontrolled;
+    const setOpen = (0, react_1.useCallback)((next) => {
+        onValueChange?.(next);
+        if (!isControlled) {
+            setUncontrolled(next);
+        }
+    }, [isControlled, onValueChange]);
+    const toggle = (0, react_1.useCallback)((itemValue) => {
+        if (open === itemValue) {
+            if (collapsible) {
+                setOpen(null);
+            }
+            return;
+        }
+        setOpen(itemValue);
+    }, [open, collapsible, setOpen]);
+    const ctx = (0, react_1.useMemo)(() => ({ open, toggle, collapsible }), [open, toggle, collapsible]);
+    return ((0, jsx_runtime_1.jsx)(AccordionContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)("div", { className: ['xfc-accordion', className].filter(Boolean).join(' '), ...rest, children: children }) }));
+}
+function AccordionItem({ value, className = '', children, ...rest }) {
+    const base = (0, react_1.useId)();
+    const itemCtx = (0, react_1.useMemo)(() => ({
+        value,
+        contentId: `${base}-content`,
+        triggerId: `${base}-trigger`,
+    }), [base, value]);
+    return ((0, jsx_runtime_1.jsx)(AccordionItemContext.Provider, { value: itemCtx, children: (0, jsx_runtime_1.jsx)("div", { className: ['xfc-accordion-item', className].filter(Boolean).join(' '), ...rest, children: children }) }));
+}
+function AccordionTrigger({ className = '', children, ...rest }) {
+    const { value: itemValue, contentId, triggerId } = useAccordionItemContext('AccordionTrigger');
+    const { open, toggle } = useAccordionContext('AccordionTrigger');
+    const isOpen = open === itemValue;
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: triggerId, className: ['xfc-accordion-trigger', className].filter(Boolean).join(' '), "aria-expanded": isOpen, "aria-controls": contentId, onClick: () => toggle(itemValue), ...rest, children: [(0, jsx_runtime_1.jsx)("span", { style: { minWidth: 0 }, children: children }), (0, jsx_runtime_1.jsx)("svg", { className: "xfc-accordion-trigger__chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9l6 6 6-6" }) })] }));
+}
+function AccordionContent({ className = '', children, ...rest }) {
+    const { value: itemValue, contentId, triggerId } = useAccordionItemContext('AccordionContent');
+    const { open } = useAccordionContext('AccordionContent');
+    const isOpen = open === itemValue;
+    return ((0, jsx_runtime_1.jsx)("div", { id: contentId, role: "region", className: ['xfc-accordion-content', className].filter(Boolean).join(' '), hidden: !isOpen, "aria-labelledby": triggerId, ...rest, children: isOpen ? children : null }));
+}

package/dist/components/atoms/Alert.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AlertProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: 'default' | 'destructive';
+};
+/** shadcn/ui `Alert` 대응. */
+export declare function Alert({ variant, className, role, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export type AlertTitleProps = HTMLAttributes<HTMLParagraphElement>;
+export declare function AlertTitle({ className, ...rest }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDescriptionProps = HTMLAttributes<HTMLParagraphElement> & {
+    children?: ReactNode;
+};
+export declare function AlertDescription({ className, ...rest }: AlertDescriptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Alert.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = Alert;
+exports.AlertTitle = AlertTitle;
+exports.AlertDescription = AlertDescription;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** shadcn/ui `Alert` 대응. */
+function Alert({ variant = 'default', className = '', role, ...rest }) {
+    const cls = [
+        'xfc-alert',
+        variant === 'destructive' ? 'xfc-alert--destructive' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const r = role ?? (variant === 'destructive' ? 'alert' : undefined);
+    return (0, jsx_runtime_1.jsx)("div", { className: cls, role: r, ...rest });
+}
+function AlertTitle({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("p", { className: ['xfc-alert__title', className].filter(Boolean).join(' '), ...rest });
+}
+function AlertDescription({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("p", { className: ['xfc-alert__description', className].filter(Boolean).join(' '), ...rest });
+}

package/dist/components/atoms/AspectRatio.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AspectRatioProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** 가로 / 세로 (예: 16/9) */
+    ratio?: number;
+    children?: ReactNode;
+};
+/** shadcn/ui `AspectRatio` 대응 — 패딩 트릭 박스. */
+export declare function AspectRatio({ ratio, className, style, children, ...rest }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/AspectRatio.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AspectRatio = AspectRatio;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** shadcn/ui `AspectRatio` 대응 — 패딩 트릭 박스. */
+function AspectRatio({ ratio = 16 / 9, className = '', style, children, ...rest }) {
+    const paddingBottom = `${(1 / ratio) * 100}%`;
+    const outerStyle = { ...style, paddingBottom };
+    return ((0, jsx_runtime_1.jsx)("div", { className: ['xfc-aspect', className].filter(Boolean).join(' '), style: outerStyle, ...rest, children: (0, jsx_runtime_1.jsx)("div", { className: "xfc-aspect__inner", children: children }) }));
+}

package/dist/components/atoms/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactNode } from 'react';
+export type AvatarProps = HTMLAttributes<HTMLSpanElement>;
+/** shadcn/ui `Avatar` 루트. */
+export declare function Avatar({ className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+    onLoadingStatusChange?: (status: 'loaded' | 'error') => void;
+};
+export declare function AvatarImage({ className, onLoad, onError, onLoadingStatusChange, ...rest }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement> & {
+    children?: ReactNode;
+};
+export declare function AvatarFallback({ className, ...rest }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarAutoProps = AvatarProps & {
+    src?: string;
+    alt?: string;
+    fallback: ReactNode;
+};
+/**
+ * 이미지 로드 실패 시 fallback만 보이는 합성 아바타.
+ * (shadcn 조합을 한 컴포넌트로 쓰기 위한 편의 API)
+ */
+export declare function AvatarAuto({ src, alt, fallback, className, ...rest }: AvatarAutoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Avatar.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = Avatar;
+exports.AvatarImage = AvatarImage;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarAuto = AvatarAuto;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** shadcn/ui `Avatar` 루트. */
+function Avatar({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: ['xfc-avatar', className].filter(Boolean).join(' '), ...rest });
+}
+function AvatarImage({ className = '', onLoad, onError, onLoadingStatusChange, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("img", { className: ['xfc-avatar__image', className].filter(Boolean).join(' '), onLoad: (e) => {
+            onLoadingStatusChange?.('loaded');
+            onLoad?.(e);
+        }, onError: (e) => {
+            onLoadingStatusChange?.('error');
+            onError?.(e);
+        }, ...rest }));
+}
+function AvatarFallback({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: ['xfc-avatar__fallback', className].filter(Boolean).join(' '), ...rest });
+}
+/**
+ * 이미지 로드 실패 시 fallback만 보이는 합성 아바타.
+ * (shadcn 조합을 한 컴포넌트로 쓰기 위한 편의 API)
+ */
+function AvatarAuto({ src, alt = '', fallback, className = '', ...rest }) {
+    const [failed, setFailed] = (0, react_1.useState)(!src);
+    return ((0, jsx_runtime_1.jsxs)(Avatar, { className: className, ...rest, children: [src && !failed ? ((0, jsx_runtime_1.jsx)(AvatarImage, { src: src, alt: alt, onError: () => setFailed(true) })) : null, (0, jsx_runtime_1.jsx)(AvatarFallback, { children: fallback })] }));
+}

package/dist/components/atoms/Breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';
+export type BreadcrumbProps = HTMLAttributes<HTMLElement>;
+export declare function Breadcrumb({ className, ...rest }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbListProps = OlHTMLAttributes<HTMLOListElement>;
+export declare function BreadcrumbList({ className, ...rest }: BreadcrumbListProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare function BreadcrumbItem({ className, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare function BreadcrumbLink({ className, ...rest }: BreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbPageProps = HTMLAttributes<HTMLSpanElement>;
+export declare function BreadcrumbPage({ className, ...rest }: BreadcrumbPageProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbSeparatorProps = HTMLAttributes<HTMLSpanElement> & {
+    children?: ReactNode;
+};
+export declare function BreadcrumbSeparator({ className, children, ...rest }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Breadcrumb.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbList = BreadcrumbList;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
+exports.BreadcrumbPage = BreadcrumbPage;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Breadcrumb({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("nav", { "aria-label": "Breadcrumb", className: ['xfc-breadcrumb', className].filter(Boolean).join(' '), ...rest });
+}
+function BreadcrumbList({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("ol", { className: ['xfc-breadcrumb-list', className].filter(Boolean).join(' '), ...rest });
+}
+function BreadcrumbItem({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("li", { className: ['xfc-breadcrumb-item', className].filter(Boolean).join(' '), ...rest });
+}
+function BreadcrumbLink({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("a", { className: ['xfc-breadcrumb-link', className].filter(Boolean).join(' '), ...rest });
+}
+function BreadcrumbPage({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: ['xfc-breadcrumb-page', className].filter(Boolean).join(' '), "aria-current": "page", ...rest });
+}
+function BreadcrumbSeparator({ className = '', children = '/', ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: ['xfc-breadcrumb-sep', className].filter(Boolean).join(' '), "aria-hidden": true, ...rest, children: children }));
+}

package/dist/components/atoms/Collapsible.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+export type CollapsibleProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+/** shadcn/ui `Collapsible` 대응. */
+export declare function Collapsible({ open: openProp, defaultOpen, onOpenChange, className, children, ...rest }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+export type CollapsibleTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function CollapsibleTrigger({ className, onClick, children, ...rest }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type CollapsibleContentProps = HTMLAttributes<HTMLDivElement>;
+export declare function CollapsibleContent({ className, hidden: _h, children, ...rest }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Collapsible.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsible = Collapsible;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.CollapsibleContent = CollapsibleContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CollapsibleContext = (0, react_1.createContext)(null);
+function useCollapsible(component) {
+    const ctx = (0, react_1.useContext)(CollapsibleContext);
+    if (!ctx) {
+        throw new Error(`${component} must be used inside <Collapsible>`);
+    }
+    return ctx;
+}
+/** shadcn/ui `Collapsible` 대응. */
+function Collapsible({ open: openProp, defaultOpen = false, onOpenChange, className = '', children, ...rest }) {
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolled;
+    const setOpen = (0, react_1.useCallback)((next) => {
+        onOpenChange?.(next);
+        if (!isControlled) {
+            setUncontrolled(next);
+        }
+    }, [isControlled, onOpenChange]);
+    const ctx = (0, react_1.useMemo)(() => ({ open, setOpen }), [open, setOpen]);
+    return ((0, jsx_runtime_1.jsx)(CollapsibleContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)("div", { className: className, ...rest, children: children }) }));
+}
+function CollapsibleTrigger({ className = '', onClick, children, ...rest }) {
+    const { open, setOpen } = useCollapsible('CollapsibleTrigger');
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: ['xfc-collapsible-trigger', className].filter(Boolean).join(' '), "aria-expanded": open, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented) {
+                setOpen(!open);
+            }
+        }, ...rest, children: children }));
+}
+function CollapsibleContent({ className = '', hidden: _h, children, ...rest }) {
+    const { open } = useCollapsible('CollapsibleContent');
+    return ((0, jsx_runtime_1.jsx)("div", { className: ['xfc-collapsible-panel', 'xfc-collapsible-content', className].filter(Boolean).join(' '), hidden: !open, ...rest, children: open ? children : null }));
+}

package/dist/components/atoms/Label.d.ts

@@ -0,0 +1,8 @@
+import { type LabelHTMLAttributes } from 'react';
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    disabled?: boolean;
+};
+/** shadcn/ui `Label` 대응 — 폼 컨트롤용 라벨. */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/atoms/Label.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** shadcn/ui `Label` 대응 — 폼 컨트롤용 라벨. */
+exports.Label = (0, react_1.forwardRef)(function Label({ className = '', disabled = false, ...rest }, ref) {
+    const cls = ['xfc-label', disabled ? 'xfc-label--disabled' : '', className].filter(Boolean).join(' ');
+    return (0, jsx_runtime_1.jsx)("label", { ref: ref, className: cls, "aria-disabled": disabled || undefined, ...rest });
+});

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

@@ -0,0 +1,13 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, LiHTMLAttributes } from 'react';
+export type PaginationProps = HTMLAttributes<HTMLElement>;
+export declare function Pagination({ className, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export type PaginationContentProps = HTMLAttributes<HTMLUListElement>;
+export declare function PaginationContent({ className, ...rest }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
+export type PaginationItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare function PaginationItem({ className, ...rest }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
+export type PaginationLinkProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+};
+export declare function PaginationLink({ active, className, type, ...rest }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+export type PaginationEllipsisProps = HTMLAttributes<HTMLSpanElement>;
+export declare function PaginationEllipsis({ className, children, ...rest }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Pagination.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationEllipsis = PaginationEllipsis;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Pagination({ className = '', ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { role: "navigation", "aria-label": "Pagination", className: ['xfc-pagination', className].filter(Boolean).join(' '), ...rest }));
+}
+function PaginationContent({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("ul", { className: ['xfc-pagination__list', className].filter(Boolean).join(' '), ...rest });
+}
+function PaginationItem({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("li", { className: className, ...rest });
+}
+function PaginationLink({ active, className = '', type = 'button', ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: type, className: ['xfc-pagination__link', active ? 'xfc-pagination__link--active' : '', className]
+            .filter(Boolean)
+            .join(' '), ...rest }));
+}
+function PaginationEllipsis({ className = '', children = '…', ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: ['xfc-pagination__ellipsis', className].filter(Boolean).join(' '), "aria-hidden": true, ...rest, children: children }));
+}

package/dist/components/atoms/Progress.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    /** 0 ~ max */
+    value: number;
+    max?: number;
+};
+/** shadcn/ui `Progress` 대응 — 결정적 진행률 막대. */
+export declare function Progress({ value, max, className, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Progress.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = Progress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** shadcn/ui `Progress` 대응 — 결정적 진행률 막대. */
+function Progress({ value, max = 100, className = '', ...rest }) {
+    const pct = max <= 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));
+    return ((0, jsx_runtime_1.jsx)("div", { role: "progressbar", "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": max, className: ['xfc-progress', className].filter(Boolean).join(' '), ...rest, children: (0, jsx_runtime_1.jsx)("div", { className: "xfc-progress__indicator", style: { width: `${pct}%` } }) }));
+}

package/dist/components/atoms/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { type FieldsetHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+export type RadioGroupProps = FieldsetHTMLAttributes<HTMLFieldSetElement> & {
+    legend?: ReactNode;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+/** shadcn/ui `RadioGroup` 대응 — `fieldset` + 네이티브 `radio`. */
+export declare function RadioGroup({ legend, name: nameProp, value: valueProp, defaultValue, onValueChange, disabled, className, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export type RadioGroupItemProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name'> & {
+    label: ReactNode;
+    value: string;
+};
+export declare function RadioGroupItem({ value: itemValue, label, className, id: idProp, disabled: itemDisabled, ...rest }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/RadioGroup.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupItem = RadioGroupItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RadioGroupContext = (0, react_1.createContext)(null);
+function useRadioGroup(component) {
+    const ctx = (0, react_1.useContext)(RadioGroupContext);
+    if (!ctx) {
+        throw new Error(`${component} must be used inside <RadioGroup>`);
+    }
+    return ctx;
+}
+/** shadcn/ui `RadioGroup` 대응 — `fieldset` + 네이티브 `radio`. */
+function RadioGroup({ legend, name: nameProp, value: valueProp, defaultValue = '', onValueChange, disabled, className = '', children, ...rest }) {
+    const gen = (0, react_1.useId)();
+    const name = nameProp ?? `xfc-rg-${gen}`;
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolled;
+    const setValue = (0, react_1.useCallback)((v) => {
+        onValueChange?.(v);
+        if (!isControlled) {
+            setUncontrolled(v);
+        }
+    }, [isControlled, onValueChange]);
+    const ctx = (0, react_1.useMemo)(() => ({ name, value, setValue, disabled: disabled === true }), [name, value, setValue, disabled]);
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { className: ['xfc-radio-group', className].filter(Boolean).join(' '), disabled: disabled, ...rest, children: [legend != null ? (0, jsx_runtime_1.jsx)("legend", { className: "xfc-radio-group__legend", children: legend }) : null, (0, jsx_runtime_1.jsx)(RadioGroupContext.Provider, { value: ctx, children: children })] }));
+}
+function RadioGroupItem({ value: itemValue, label, className = '', id: idProp, disabled: itemDisabled, ...rest }) {
+    const ctx = useRadioGroup('RadioGroupItem');
+    const autoId = (0, react_1.useId)();
+    const inputId = idProp ?? autoId;
+    const isDisabled = ctx.disabled || itemDisabled === true;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "xfc-radio-row", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: inputId, className: ['xfc-radio', className].filter(Boolean).join(' '), name: ctx.name, value: itemValue, checked: ctx.value === itemValue, disabled: isDisabled, ...rest, onChange: () => ctx.setValue(itemValue) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "xfc-radio-label", children: label })] }));
+}

package/dist/components/atoms/ScrollArea.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+export type ScrollAreaProps = HTMLAttributes<HTMLDivElement> & {
+    maxHeight?: number | string;
+};
+/** shadcn/ui `ScrollArea` 단순 대응 — 네이티브 스크롤 + 포커스 링. */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    maxHeight?: number | string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/ScrollArea.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** shadcn/ui `ScrollArea` 단순 대응 — 네이티브 스크롤 + 포커스 링. */
+exports.ScrollArea = (0, react_1.forwardRef)(function ScrollArea({ className = '', maxHeight, style, tabIndex = 0, ...rest }, ref) {
+    const mh = maxHeight === undefined
+        ? undefined
+        : typeof maxHeight === 'number'
+            ? `${maxHeight}px`
+            : maxHeight;
+    const merged = { ...style, ...(mh != null ? { maxHeight: mh } : {}) };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: ['xfc-scroll-area', className].filter(Boolean).join(' '), style: merged, tabIndex: tabIndex, ...rest }));
+});

package/dist/components/atoms/Separator.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+export type SeparatorProps = HTMLAttributes<HTMLDivElement> & {
+    orientation?: 'horizontal' | 'vertical';
+    /** true면 스크린리더에서 구분선으로 읽지 않음 */
+    decorative?: boolean;
+};
+/**
+ * shadcn/ui `Separator` 대응 — 수평·수직 구분선.
+ */
+export declare function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Separator.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * shadcn/ui `Separator` 대응 — 수평·수직 구분선.
+ */
+function Separator({ orientation = 'horizontal', decorative = true, className = '', ...rest }) {
+    const cls = [
+        'xfc-separator',
+        orientation === 'vertical' ? 'xfc-separator--vertical' : 'xfc-separator--horizontal',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: cls, role: decorative ? 'none' : 'separator', "aria-orientation": orientation === 'vertical' ? 'vertical' : 'horizontal', ...rest }));
+}

package/dist/components/atoms/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: 'default' | 'circle';
+};
+/** shadcn/ui `Skeleton` 대응 — 로딩 플레이스홀더. */
+export declare function Skeleton({ className, variant, style, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Skeleton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** shadcn/ui `Skeleton` 대응 — 로딩 플레이스홀더. */
+function Skeleton({ className = '', variant = 'default', style, ...rest }) {
+    const cls = [
+        'xfc-skeleton',
+        variant === 'circle' ? 'xfc-skeleton--circle' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (0, jsx_runtime_1.jsx)("div", { className: cls, style: style, ...rest });
+}

package/dist/components/atoms/Slider.d.ts

@@ -0,0 +1,4 @@
+import { type InputHTMLAttributes } from 'react';
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/** shadcn/ui `Slider` 단순 대응 — 네이티브 `range`. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Slider.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** shadcn/ui `Slider` 단순 대응 — 네이티브 `range`. */
+exports.Slider = (0, react_1.forwardRef)(function Slider({ className = '', ...rest }, ref) {
+    return (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "range", className: ['xfc-slider', className].filter(Boolean).join(' '), ...rest });
+});

package/dist/components/atoms/Switch.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> & {
+    /** 트랙 오른쪽 설명 */
+    label?: ReactNode;
+};
+/** shadcn/ui `Switch` 대응 — 시각적 토글, 내부는 `checkbox` + `role="switch"`. */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "role" | "type"> & {
+    /** 트랙 오른쪽 설명 */
+    label?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Switch.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** shadcn/ui `Switch` 대응 — 시각적 토글, 내부는 `checkbox` + `role="switch"`. */
+exports.Switch = (0, react_1.forwardRef)(function Switch({ className = '', label, id: idProp, disabled, ...rest }, ref) {
+    const genId = (0, react_1.useId)();
+    const inputId = idProp ?? genId;
+    const rowCls = ['xfc-switch', disabled ? 'xfc-switch--disabled' : '', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("label", { className: rowCls, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, id: inputId, type: "checkbox", role: "switch", className: "xfc-switch__input", disabled: disabled, ...rest }), (0, jsx_runtime_1.jsx)("span", { className: "xfc-switch__track", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("span", { className: "xfc-switch__thumb" }) }), label != null ? (0, jsx_runtime_1.jsx)("span", { className: "xfc-checkbox-label", children: label }) : null] }));
+});

package/dist/components/atoms/Table.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+export type TableProps = TableHTMLAttributes<HTMLTableElement>;
+/**
+ * shadcn/ui `Table` 대응 — 가로 스크롤 래퍼 포함.
+ */
+export declare function Table({ className, children, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare function TableHeader({ className, ...rest }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare function TableBody({ className, ...rest }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare function TableFooter({ className, ...rest }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+export declare function TableRow({ className, ...rest }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement>;
+export declare function TableHead({ className, ...rest }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+export declare function TableCell({ className, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>;
+export declare function TableCaption({ className, ...rest }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Table.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+exports.TableHeader = TableHeader;
+exports.TableBody = TableBody;
+exports.TableFooter = TableFooter;
+exports.TableRow = TableRow;
+exports.TableHead = TableHead;
+exports.TableCell = TableCell;
+exports.TableCaption = TableCaption;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * shadcn/ui `Table` 대응 — 가로 스크롤 래퍼 포함.
+ */
+function Table({ className = '', children, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "xfc-table-wrap", children: (0, jsx_runtime_1.jsx)("table", { className: ['xfc-table', className].filter(Boolean).join(' '), ...rest, children: children }) }));
+}
+function TableHeader({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("thead", { className: ['xfc-table-header', className].filter(Boolean).join(' '), ...rest });
+}
+function TableBody({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("tbody", { className: className, ...rest });
+}
+function TableFooter({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("tfoot", { className: ['xfc-table-footer', className].filter(Boolean).join(' '), ...rest });
+}
+function TableRow({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("tr", { className: ['xfc-table-row', className].filter(Boolean).join(' '), ...rest });
+}
+function TableHead({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("th", { className: ['xfc-table-head', className].filter(Boolean).join(' '), ...rest });
+}
+function TableCell({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("td", { className: ['xfc-table-cell', className].filter(Boolean).join(' '), ...rest });
+}
+function TableCaption({ className = '', ...rest }) {
+    return (0, jsx_runtime_1.jsx)("caption", { className: ['xfc-table-caption', className].filter(Boolean).join(' '), ...rest });
+}