@xfilecom/front-core 0.2.28 → 0.2.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +10 -0
  2. package/dist/base.css +717 -0
  3. package/dist/components/atoms/Accordion.d.ts +18 -0
  4. package/dist/components/atoms/Accordion.js +68 -0
  5. package/dist/components/atoms/Alert.d.ts +12 -0
  6. package/dist/components/atoms/Alert.js +24 -0
  7. package/dist/components/atoms/AspectRatio.d.ts +8 -0
  8. package/dist/components/atoms/AspectRatio.js +10 -0
  9. package/dist/components/atoms/Avatar.d.ts +22 -0
  10. package/dist/components/atoms/Avatar.js +32 -0
  11. package/dist/components/atoms/Breadcrumb.d.ts +15 -0
  12. package/dist/components/atoms/Breadcrumb.js +27 -0
  13. package/dist/components/atoms/Collapsible.d.ts +12 -0
  14. package/dist/components/atoms/Collapsible.js +42 -0
  15. package/dist/components/atoms/Label.d.ts +8 -0
  16. package/dist/components/atoms/Label.js +10 -0
  17. package/dist/components/atoms/Pagination.d.ts +13 -0
  18. package/dist/components/atoms/Pagination.js +25 -0
  19. package/dist/components/atoms/Progress.d.ts +8 -0
  20. package/dist/components/atoms/Progress.js +9 -0
  21. package/dist/components/atoms/RadioGroup.d.ts +15 -0
  22. package/dist/components/atoms/RadioGroup.js +37 -0
  23. package/dist/components/atoms/ScrollArea.d.ts +8 -0
  24. package/dist/components/atoms/ScrollArea.js +15 -0
  25. package/dist/components/atoms/Separator.d.ts +10 -0
  26. package/dist/components/atoms/Separator.js +17 -0
  27. package/dist/components/atoms/Skeleton.d.ts +6 -0
  28. package/dist/components/atoms/Skeleton.js +15 -0
  29. package/dist/components/atoms/Slider.d.ts +4 -0
  30. package/dist/components/atoms/Slider.js +9 -0
  31. package/dist/components/atoms/Switch.d.ts +10 -0
  32. package/dist/components/atoms/Switch.js +12 -0
  33. package/dist/components/atoms/Table.d.ts +20 -0
  34. package/dist/components/atoms/Table.js +38 -0
  35. package/dist/components/atoms/Tabs.d.ts +20 -0
  36. package/dist/components/atoms/Tabs.js +54 -0
  37. package/dist/components/atoms/Toggle.d.ts +8 -0
  38. package/dist/components/atoms/Toggle.js +23 -0
  39. package/dist/components/atoms/Tooltip.d.ts +10 -0
  40. package/dist/components/atoms/Tooltip.js +12 -0
  41. package/dist/components/atoms/index.d.ts +22 -3
  42. package/dist/components/atoms/index.js +76 -7
  43. package/dist/generatedVersion.d.ts +1 -1
  44. package/dist/generatedVersion.js +1 -1
  45. package/dist/index.d.ts +1 -1
  46. package/dist/index.js +51 -1
  47. package/dist/showcase/DesignSystemShowcase.d.ts +2 -0
  48. package/dist/showcase/DesignSystemShowcase.js +19 -0
  49. package/dist/showcase/ShowcaseContext.d.ts +48 -0
  50. package/dist/showcase/ShowcaseContext.js +117 -0
  51. package/dist/showcase/components/CodeBlock.d.ts +7 -0
  52. package/dist/showcase/components/CodeBlock.js +11 -0
  53. package/dist/showcase/components/SectionTitle.d.ts +4 -0
  54. package/dist/showcase/components/SectionTitle.js +8 -0
  55. package/dist/showcase/components/ShowcaseChrome.d.ts +2 -0
  56. package/dist/showcase/components/ShowcaseChrome.js +25 -0
  57. package/dist/showcase/components/ShowcaseDemo.d.ts +10 -0
  58. package/dist/showcase/components/ShowcaseDemo.js +9 -0
  59. package/dist/showcase/components/icons.d.ts +2 -0
  60. package/dist/showcase/components/icons.js +11 -0
  61. package/dist/showcase/index.d.ts +4 -0
  62. package/dist/showcase/index.js +10 -0
  63. package/dist/showcase/nav.d.ts +26 -0
  64. package/dist/showcase/nav.js +13 -0
  65. package/dist/showcase/sections/ActionsSection.d.ts +1 -0
  66. package/dist/showcase/sections/ActionsSection.js +24 -0
  67. package/dist/showcase/sections/FeedbackSection.d.ts +1 -0
  68. package/dist/showcase/sections/FeedbackSection.js +17 -0
  69. package/dist/showcase/sections/FormsSection.d.ts +1 -0
  70. package/dist/showcase/sections/FormsSection.js +20 -0
  71. package/dist/showcase/sections/LayoutSection.d.ts +1 -0
  72. package/dist/showcase/sections/LayoutSection.js +19 -0
  73. package/dist/showcase/sections/OverlaysSection.d.ts +1 -0
  74. package/dist/showcase/sections/OverlaysSection.js +25 -0
  75. package/dist/showcase/sections/OverviewSection.d.ts +1 -0
  76. package/dist/showcase/sections/OverviewSection.js +17 -0
  77. package/dist/showcase/sections/SurfacesSection.d.ts +1 -0
  78. package/dist/showcase/sections/SurfacesSection.js +38 -0
  79. package/dist/showcase/sections/TypographySection.d.ts +1 -0
  80. package/dist/showcase/sections/TypographySection.js +24 -0
  81. package/dist/showcase.css +235 -0
  82. package/docs/COMPONENTS.md +26 -0
  83. package/docs/SHADCN.md +66 -0
  84. package/package.json +8 -3
@@ -0,0 +1,20 @@
1
+ import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
2
+ export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> & {
3
+ defaultValue?: string;
4
+ value?: string;
5
+ onValueChange?: (value: string) => void;
6
+ };
7
+ /** shadcn/ui `Tabs` 루트 — 제어·비제어 모두 지원. */
8
+ export declare function Tabs({ defaultValue, value: valueProp, onValueChange, className, children, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
9
+ export type TabsListProps = HTMLAttributes<HTMLDivElement>;
10
+ export declare function TabsList({ className, role, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
11
+ export type TabsTriggerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
12
+ value: string;
13
+ };
14
+ export declare function TabsTrigger({ value, className, id: idProp, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
15
+ export type TabsContentProps = HTMLAttributes<HTMLDivElement> & {
16
+ value: string;
17
+ /** false면 패널을 DOM에 남기고 숨김 */
18
+ forceMount?: boolean;
19
+ };
20
+ export declare function TabsContent({ value, className, id: idProp, forceMount, children, hidden: hiddenProp, ...rest }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Tabs = Tabs;
4
+ exports.TabsList = TabsList;
5
+ exports.TabsTrigger = TabsTrigger;
6
+ exports.TabsContent = TabsContent;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
9
+ const TabsContext = (0, react_1.createContext)(null);
10
+ function useTabsContext(component) {
11
+ const ctx = (0, react_1.useContext)(TabsContext);
12
+ if (!ctx) {
13
+ throw new Error(`${component} must be used inside <Tabs>`);
14
+ }
15
+ return ctx;
16
+ }
17
+ /** shadcn/ui `Tabs` 루트 — 제어·비제어 모두 지원. */
18
+ function Tabs({ defaultValue = '', value: valueProp, onValueChange, className = '', children, ...rest }) {
19
+ const baseId = (0, react_1.useId)();
20
+ const [uncontrolled, setUncontrolled] = (0, react_1.useState)(defaultValue);
21
+ const isControlled = valueProp !== undefined;
22
+ const value = isControlled ? valueProp : uncontrolled;
23
+ const setValue = (0, react_1.useCallback)((v) => {
24
+ onValueChange?.(v);
25
+ if (!isControlled) {
26
+ setUncontrolled(v);
27
+ }
28
+ }, [isControlled, onValueChange]);
29
+ const ctx = (0, react_1.useMemo)(() => ({ value, setValue, baseId }), [value, setValue, baseId]);
30
+ return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)("div", { className: ['xfc-tabs', className].filter(Boolean).join(' '), ...rest, children: children }) }));
31
+ }
32
+ function TabsList({ className = '', role = 'tablist', ...rest }) {
33
+ return (0, jsx_runtime_1.jsx)("div", { className: ['xfc-tabs-list', className].filter(Boolean).join(' '), role: role, ...rest });
34
+ }
35
+ function TabsTrigger({ value, className = '', id: idProp, ...rest }) {
36
+ const { value: selected, setValue, baseId } = useTabsContext('TabsTrigger');
37
+ const autoId = `${baseId}-tab-${value}`;
38
+ const id = idProp ?? autoId;
39
+ const panelId = `${baseId}-panel-${value}`;
40
+ const isActive = selected === value;
41
+ return ((0, jsx_runtime_1.jsx)("button", { type: "button", id: id, role: "tab", "aria-selected": isActive, "aria-controls": panelId, tabIndex: isActive ? 0 : -1, className: ['xfc-tabs-trigger', isActive ? 'xfc-tabs-trigger--active' : '', className].filter(Boolean).join(' '), onClick: () => setValue(value), ...rest }));
42
+ }
43
+ function TabsContent({ value, className = '', id: idProp, forceMount, children, hidden: hiddenProp, ...rest }) {
44
+ const { value: selected, baseId } = useTabsContext('TabsContent');
45
+ const autoId = `${baseId}-panel-${value}`;
46
+ const id = idProp ?? autoId;
47
+ const tabId = `${baseId}-tab-${value}`;
48
+ const isSelected = selected === value;
49
+ const hidden = hiddenProp ?? (!isSelected && !forceMount);
50
+ if (!forceMount && !isSelected) {
51
+ return null;
52
+ }
53
+ return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "tabpanel", "aria-labelledby": tabId, tabIndex: 0, hidden: !isSelected, className: ['xfc-tabs-content', className].filter(Boolean).join(' '), ...rest, children: children }));
54
+ }
@@ -0,0 +1,8 @@
1
+ import { type ButtonHTMLAttributes } from 'react';
2
+ export type ToggleProps = ButtonHTMLAttributes<HTMLButtonElement> & {
3
+ pressed?: boolean;
4
+ defaultPressed?: boolean;
5
+ onPressedChange?: (pressed: boolean) => void;
6
+ };
7
+ /** shadcn/ui `Toggle` 대응 — `aria-pressed` 토글 버튼. */
8
+ export declare function Toggle({ pressed: pressedProp, defaultPressed, onPressedChange, className, onClick, ...rest }: ToggleProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Toggle = Toggle;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ /** shadcn/ui `Toggle` 대응 — `aria-pressed` 토글 버튼. */
7
+ function Toggle({ pressed: pressedProp, defaultPressed = false, onPressedChange, className = '', onClick, ...rest }) {
8
+ const [uncontrolled, setUncontrolled] = (0, react_1.useState)(defaultPressed);
9
+ const isControlled = pressedProp !== undefined;
10
+ const pressed = isControlled ? pressedProp : uncontrolled;
11
+ const setPressed = (0, react_1.useCallback)((next) => {
12
+ onPressedChange?.(next);
13
+ if (!isControlled) {
14
+ setUncontrolled(next);
15
+ }
16
+ }, [isControlled, onPressedChange]);
17
+ return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-pressed": pressed, className: ['xfc-toggle', pressed ? 'xfc-toggle--pressed' : '', className].filter(Boolean).join(' '), onClick: (e) => {
18
+ onClick?.(e);
19
+ if (!e.defaultPrevented) {
20
+ setPressed(!pressed);
21
+ }
22
+ }, ...rest }));
23
+ }
@@ -0,0 +1,10 @@
1
+ import { type ReactNode } from 'react';
2
+ export type TooltipProps = {
3
+ children: ReactNode;
4
+ content: ReactNode;
5
+ className?: string;
6
+ };
7
+ /**
8
+ * shadcn/ui `Tooltip` 단순 대응 — 호버·포커스 시 인라인 말풍선(포털 없음).
9
+ */
10
+ export declare function Tooltip({ children, content, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Tooltip = Tooltip;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ /**
7
+ * shadcn/ui `Tooltip` 단순 대응 — 호버·포커스 시 인라인 말풍선(포털 없음).
8
+ */
9
+ function Tooltip({ children, content, className = '' }) {
10
+ const [open, setOpen] = (0, react_1.useState)(false);
11
+ return ((0, jsx_runtime_1.jsxs)("span", { className: ['xfc-tooltip', className].filter(Boolean).join(' '), onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onFocus: () => setOpen(true), onBlur: () => setOpen(false), tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("span", { className: "xfc-tooltip__trigger", children: children }), open ? ((0, jsx_runtime_1.jsx)("span", { className: "xfc-tooltip__content", role: "tooltip", children: content })) : null] }));
12
+ }
@@ -2,18 +2,37 @@
2
2
  * Atomic UI — design tokens + base.css 의 `.xfc-*` 와 1:1.
3
3
  * 패키지 루트는 `components/index.ts` → 여기서 동일 심볼을 재export.
4
4
  */
5
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, } from './Accordion';
6
+ export { Alert, AlertDescription, AlertTitle, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, } from './Alert';
7
+ export { AspectRatio, type AspectRatioProps, } from './AspectRatio';
8
+ export { Avatar, AvatarAuto, AvatarFallback, AvatarImage, type AvatarAutoProps, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, } from './Avatar';
5
9
  export { Badge, type BadgeProps } from './Badge';
10
+ export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbProps, type BreadcrumbSeparatorProps, } from './Breadcrumb';
6
11
  export { Box, type BoxProps } from './Box';
7
12
  export { Button, type ButtonProps } from './Button';
8
13
  export { Card, type CardProps } from './Card';
9
14
  export { Checkbox, type CheckboxProps } from './Checkbox';
15
+ export { Collapsible, CollapsibleContent, CollapsibleTrigger, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps, } from './Collapsible';
10
16
  export { Field, type FieldProps } from './Field';
11
- export { Input, type InputProps } from './Input';
12
- export { Select, type SelectProps } from './Select';
13
- export { Textarea, type TextareaProps } from './Textarea';
14
17
  export { InlineErrorList, type InlineErrorEntry, type InlineErrorListProps, } from './InlineErrorList';
18
+ export { Input, type InputProps } from './Input';
19
+ export { Label, type LabelProps } from './Label';
15
20
  export { LoadingOverlay, type LoadingOverlayProps } from './LoadingOverlay';
16
21
  export { Paper, type PaperProps } from './Paper';
22
+ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationProps, } from './Pagination';
23
+ export { Progress, type ProgressProps } from './Progress';
24
+ export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, } from './RadioGroup';
25
+ export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
26
+ export { Select, type SelectProps } from './Select';
27
+ export { Separator, type SeparatorProps } from './Separator';
28
+ export { Skeleton, type SkeletonProps } from './Skeleton';
29
+ export { Slider, type SliderProps } from './Slider';
17
30
  export { Stack, type StackProps } from './Stack';
31
+ export { Switch, type SwitchProps } from './Switch';
32
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, } from './Table';
33
+ export { Tabs, TabsContent, TabsList, TabsTrigger, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, } from './Tabs';
34
+ export { Textarea, type TextareaProps, } from './Textarea';
18
35
  export { Toast, ToastList, ToastSeverityIcon, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './Toast';
19
36
  export { Text, type TextProps, type TextVariant } from './Text';
37
+ export { Toggle, type ToggleProps } from './Toggle';
38
+ export { Tooltip, type TooltipProps } from './Tooltip';
@@ -1,12 +1,36 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Text = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Stack = exports.Paper = exports.LoadingOverlay = exports.InlineErrorList = exports.Textarea = exports.Select = exports.Input = exports.Field = exports.Checkbox = exports.Card = exports.Button = exports.Box = exports.Badge = void 0;
3
+ exports.TableCaption = exports.TableBody = exports.Table = exports.Switch = exports.Stack = exports.Slider = exports.Skeleton = exports.Separator = exports.Select = exports.ScrollArea = exports.RadioGroupItem = exports.RadioGroup = exports.Progress = exports.PaginationLink = exports.PaginationItem = exports.PaginationEllipsis = exports.PaginationContent = exports.Pagination = exports.Paper = exports.LoadingOverlay = exports.Label = exports.Input = exports.InlineErrorList = exports.Field = exports.CollapsibleTrigger = exports.CollapsibleContent = exports.Collapsible = exports.Checkbox = exports.Card = exports.Button = exports.Box = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbList = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.Breadcrumb = exports.Badge = exports.AvatarImage = exports.AvatarFallback = exports.AvatarAuto = exports.Avatar = exports.AspectRatio = exports.AlertTitle = exports.AlertDescription = exports.Alert = exports.AccordionTrigger = exports.AccordionItem = exports.AccordionContent = exports.Accordion = void 0;
4
+ exports.Tooltip = exports.Toggle = exports.Text = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = void 0;
4
5
  /**
5
6
  * Atomic UI — design tokens + base.css 의 `.xfc-*` 와 1:1.
6
7
  * 패키지 루트는 `components/index.ts` → 여기서 동일 심볼을 재export.
7
8
  */
9
+ var Accordion_1 = require("./Accordion");
10
+ Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
11
+ Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return Accordion_1.AccordionContent; } });
12
+ Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return Accordion_1.AccordionItem; } });
13
+ Object.defineProperty(exports, "AccordionTrigger", { enumerable: true, get: function () { return Accordion_1.AccordionTrigger; } });
14
+ var Alert_1 = require("./Alert");
15
+ Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
16
+ Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return Alert_1.AlertDescription; } });
17
+ Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return Alert_1.AlertTitle; } });
18
+ var AspectRatio_1 = require("./AspectRatio");
19
+ Object.defineProperty(exports, "AspectRatio", { enumerable: true, get: function () { return AspectRatio_1.AspectRatio; } });
20
+ var Avatar_1 = require("./Avatar");
21
+ Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
22
+ Object.defineProperty(exports, "AvatarAuto", { enumerable: true, get: function () { return Avatar_1.AvatarAuto; } });
23
+ Object.defineProperty(exports, "AvatarFallback", { enumerable: true, get: function () { return Avatar_1.AvatarFallback; } });
24
+ Object.defineProperty(exports, "AvatarImage", { enumerable: true, get: function () { return Avatar_1.AvatarImage; } });
8
25
  var Badge_1 = require("./Badge");
9
26
  Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
27
+ var Breadcrumb_1 = require("./Breadcrumb");
28
+ Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return Breadcrumb_1.Breadcrumb; } });
29
+ Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbItem; } });
30
+ Object.defineProperty(exports, "BreadcrumbLink", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbLink; } });
31
+ Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbList; } });
32
+ Object.defineProperty(exports, "BreadcrumbPage", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbPage; } });
33
+ Object.defineProperty(exports, "BreadcrumbSeparator", { enumerable: true, get: function () { return Breadcrumb_1.BreadcrumbSeparator; } });
10
34
  var Box_1 = require("./Box");
11
35
  Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
12
36
  var Button_1 = require("./Button");
@@ -15,25 +39,70 @@ var Card_1 = require("./Card");
15
39
  Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
16
40
  var Checkbox_1 = require("./Checkbox");
17
41
  Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
42
+ var Collapsible_1 = require("./Collapsible");
43
+ Object.defineProperty(exports, "Collapsible", { enumerable: true, get: function () { return Collapsible_1.Collapsible; } });
44
+ Object.defineProperty(exports, "CollapsibleContent", { enumerable: true, get: function () { return Collapsible_1.CollapsibleContent; } });
45
+ Object.defineProperty(exports, "CollapsibleTrigger", { enumerable: true, get: function () { return Collapsible_1.CollapsibleTrigger; } });
18
46
  var Field_1 = require("./Field");
19
47
  Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
20
- var Input_1 = require("./Input");
21
- Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
22
- var Select_1 = require("./Select");
23
- Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
24
- var Textarea_1 = require("./Textarea");
25
- Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
26
48
  var InlineErrorList_1 = require("./InlineErrorList");
27
49
  Object.defineProperty(exports, "InlineErrorList", { enumerable: true, get: function () { return InlineErrorList_1.InlineErrorList; } });
50
+ var Input_1 = require("./Input");
51
+ Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
52
+ var Label_1 = require("./Label");
53
+ Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
28
54
  var LoadingOverlay_1 = require("./LoadingOverlay");
29
55
  Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return LoadingOverlay_1.LoadingOverlay; } });
30
56
  var Paper_1 = require("./Paper");
31
57
  Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return Paper_1.Paper; } });
58
+ var Pagination_1 = require("./Pagination");
59
+ Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return Pagination_1.Pagination; } });
60
+ Object.defineProperty(exports, "PaginationContent", { enumerable: true, get: function () { return Pagination_1.PaginationContent; } });
61
+ Object.defineProperty(exports, "PaginationEllipsis", { enumerable: true, get: function () { return Pagination_1.PaginationEllipsis; } });
62
+ Object.defineProperty(exports, "PaginationItem", { enumerable: true, get: function () { return Pagination_1.PaginationItem; } });
63
+ Object.defineProperty(exports, "PaginationLink", { enumerable: true, get: function () { return Pagination_1.PaginationLink; } });
64
+ var Progress_1 = require("./Progress");
65
+ Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
66
+ var RadioGroup_1 = require("./RadioGroup");
67
+ Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
68
+ Object.defineProperty(exports, "RadioGroupItem", { enumerable: true, get: function () { return RadioGroup_1.RadioGroupItem; } });
69
+ var ScrollArea_1 = require("./ScrollArea");
70
+ Object.defineProperty(exports, "ScrollArea", { enumerable: true, get: function () { return ScrollArea_1.ScrollArea; } });
71
+ var Select_1 = require("./Select");
72
+ Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
73
+ var Separator_1 = require("./Separator");
74
+ Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return Separator_1.Separator; } });
75
+ var Skeleton_1 = require("./Skeleton");
76
+ Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
77
+ var Slider_1 = require("./Slider");
78
+ Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
32
79
  var Stack_1 = require("./Stack");
33
80
  Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
81
+ var Switch_1 = require("./Switch");
82
+ Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
83
+ var Table_1 = require("./Table");
84
+ Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
85
+ Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return Table_1.TableBody; } });
86
+ Object.defineProperty(exports, "TableCaption", { enumerable: true, get: function () { return Table_1.TableCaption; } });
87
+ Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return Table_1.TableCell; } });
88
+ Object.defineProperty(exports, "TableFooter", { enumerable: true, get: function () { return Table_1.TableFooter; } });
89
+ Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return Table_1.TableHead; } });
90
+ Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return Table_1.TableHeader; } });
91
+ Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return Table_1.TableRow; } });
92
+ var Tabs_1 = require("./Tabs");
93
+ Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
94
+ Object.defineProperty(exports, "TabsContent", { enumerable: true, get: function () { return Tabs_1.TabsContent; } });
95
+ Object.defineProperty(exports, "TabsList", { enumerable: true, get: function () { return Tabs_1.TabsList; } });
96
+ Object.defineProperty(exports, "TabsTrigger", { enumerable: true, get: function () { return Tabs_1.TabsTrigger; } });
97
+ var Textarea_1 = require("./Textarea");
98
+ Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
34
99
  var Toast_1 = require("./Toast");
35
100
  Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
36
101
  Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return Toast_1.ToastList; } });
37
102
  Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return Toast_1.ToastSeverityIcon; } });
38
103
  var Text_1 = require("./Text");
39
104
  Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
105
+ var Toggle_1 = require("./Toggle");
106
+ Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });
107
+ var Tooltip_1 = require("./Tooltip");
108
+ Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -1,2 +1,2 @@
1
1
  /** Auto-generated by scripts/write-version.js — do not edit by hand */
2
- export declare const XFRAME_FRONT_CORE_VERSION: "0.2.28";
2
+ export declare const XFRAME_FRONT_CORE_VERSION: "0.2.31";
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.XFRAME_FRONT_CORE_VERSION = void 0;
4
4
  /** Auto-generated by scripts/write-version.js — do not edit by hand */
5
- exports.XFRAME_FRONT_CORE_VERSION = "0.2.28";
5
+ exports.XFRAME_FRONT_CORE_VERSION = "0.2.31";
package/dist/index.d.ts CHANGED
@@ -51,6 +51,6 @@ export declare const tokenVars: {
51
51
  readonly toastWarnBg: "--xfc-toast-warn-bg";
52
52
  readonly toastErrorBg: "--xfc-toast-error-bg";
53
53
  };
54
- export { Badge, BottomSheet, Box, Button, Card, Checkbox, ConfirmDialog, Dialog, Field, InlineErrorList, Input, LoadingOverlay, Paper, Select, Stack, Text, Textarea, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BottomSheetProps, type BoxProps, type ButtonProps, type CardProps, type CheckboxProps, type ConfirmDialogProps, type DialogProps, type FieldProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type PaperProps, type SelectProps, type StackProps, type TextProps, type TextVariant, type TextareaProps, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './components';
54
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarAuto, AvatarFallback, AvatarImage, Badge, BottomSheet, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, Dialog, Field, InlineErrorList, Input, Label, LoadingOverlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, Paper, Progress, RadioGroup, RadioGroupItem, ScrollArea, Select, Separator, Skeleton, Slider, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toast, ToastList, ToastSeverityIcon, Toggle, Tooltip, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, type AspectRatioProps, type AvatarAutoProps, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, type BadgeProps, type BottomSheetProps, type BoxProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbProps, type BreadcrumbSeparatorProps, type ButtonProps, type CardProps, type CheckboxProps, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps, type ConfirmDialogProps, type DialogProps, type FieldProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LabelProps, type LoadingOverlayProps, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationProps, type PaperProps, type ProgressProps, type RadioGroupItemProps, type RadioGroupProps, type ScrollAreaProps, type SelectProps, type SeparatorProps, type SkeletonProps, type SliderProps, type StackProps, type SwitchProps, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, type TextProps, type TextVariant, type TextareaProps, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, type ToggleProps, type TooltipProps, } from './components';
55
55
  /** 커스텀 오버레이용 — `Dialog`/`BottomSheet`와 동일한 훅 */
56
56
  export { useBodyScrollLock, useEscapeKey, useFocusTrap } from './components';
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useFocusTrap = exports.useEscapeKey = exports.useBodyScrollLock = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.Text = exports.Stack = exports.Select = exports.Paper = exports.LoadingOverlay = exports.Input = exports.InlineErrorList = exports.Field = exports.Dialog = exports.ConfirmDialog = exports.Checkbox = exports.Card = exports.Button = exports.Box = exports.BottomSheet = exports.Badge = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
3
+ exports.Slider = exports.Skeleton = exports.Separator = exports.Select = exports.ScrollArea = exports.RadioGroupItem = exports.RadioGroup = exports.Progress = exports.Paper = exports.PaginationLink = exports.PaginationItem = exports.PaginationEllipsis = exports.PaginationContent = exports.Pagination = exports.LoadingOverlay = exports.Label = exports.Input = exports.InlineErrorList = exports.Field = exports.Dialog = exports.ConfirmDialog = exports.CollapsibleTrigger = exports.CollapsibleContent = exports.Collapsible = exports.Checkbox = exports.Card = exports.Button = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbList = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.Breadcrumb = exports.Box = exports.BottomSheet = exports.Badge = exports.AvatarImage = exports.AvatarFallback = exports.AvatarAuto = exports.Avatar = exports.AspectRatio = exports.AlertTitle = exports.AlertDescription = exports.Alert = exports.AccordionTrigger = exports.AccordionItem = exports.AccordionContent = exports.Accordion = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
4
+ exports.useFocusTrap = exports.useEscapeKey = exports.useBodyScrollLock = exports.Tooltip = exports.Toggle = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.Text = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Switch = exports.Stack = void 0;
4
5
  /**
5
6
  * @xfilecom/front-core — design tokens + atomic React components (browser-only).
6
7
  *
@@ -56,26 +57,75 @@ exports.tokenVars = {
56
57
  toastErrorBg: '--xfc-toast-error-bg',
57
58
  };
58
59
  var components_1 = require("./components");
60
+ Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return components_1.Accordion; } });
61
+ Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return components_1.AccordionContent; } });
62
+ Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return components_1.AccordionItem; } });
63
+ Object.defineProperty(exports, "AccordionTrigger", { enumerable: true, get: function () { return components_1.AccordionTrigger; } });
64
+ Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return components_1.Alert; } });
65
+ Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return components_1.AlertDescription; } });
66
+ Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return components_1.AlertTitle; } });
67
+ Object.defineProperty(exports, "AspectRatio", { enumerable: true, get: function () { return components_1.AspectRatio; } });
68
+ Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return components_1.Avatar; } });
69
+ Object.defineProperty(exports, "AvatarAuto", { enumerable: true, get: function () { return components_1.AvatarAuto; } });
70
+ Object.defineProperty(exports, "AvatarFallback", { enumerable: true, get: function () { return components_1.AvatarFallback; } });
71
+ Object.defineProperty(exports, "AvatarImage", { enumerable: true, get: function () { return components_1.AvatarImage; } });
59
72
  Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return components_1.Badge; } });
60
73
  Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return components_1.BottomSheet; } });
61
74
  Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return components_1.Box; } });
75
+ Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return components_1.Breadcrumb; } });
76
+ Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return components_1.BreadcrumbItem; } });
77
+ Object.defineProperty(exports, "BreadcrumbLink", { enumerable: true, get: function () { return components_1.BreadcrumbLink; } });
78
+ Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return components_1.BreadcrumbList; } });
79
+ Object.defineProperty(exports, "BreadcrumbPage", { enumerable: true, get: function () { return components_1.BreadcrumbPage; } });
80
+ Object.defineProperty(exports, "BreadcrumbSeparator", { enumerable: true, get: function () { return components_1.BreadcrumbSeparator; } });
62
81
  Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return components_1.Button; } });
63
82
  Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return components_1.Card; } });
64
83
  Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
84
+ Object.defineProperty(exports, "Collapsible", { enumerable: true, get: function () { return components_1.Collapsible; } });
85
+ Object.defineProperty(exports, "CollapsibleContent", { enumerable: true, get: function () { return components_1.CollapsibleContent; } });
86
+ Object.defineProperty(exports, "CollapsibleTrigger", { enumerable: true, get: function () { return components_1.CollapsibleTrigger; } });
65
87
  Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return components_1.ConfirmDialog; } });
66
88
  Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return components_1.Dialog; } });
67
89
  Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return components_1.Field; } });
68
90
  Object.defineProperty(exports, "InlineErrorList", { enumerable: true, get: function () { return components_1.InlineErrorList; } });
69
91
  Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return components_1.Input; } });
92
+ Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return components_1.Label; } });
70
93
  Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return components_1.LoadingOverlay; } });
94
+ Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return components_1.Pagination; } });
95
+ Object.defineProperty(exports, "PaginationContent", { enumerable: true, get: function () { return components_1.PaginationContent; } });
96
+ Object.defineProperty(exports, "PaginationEllipsis", { enumerable: true, get: function () { return components_1.PaginationEllipsis; } });
97
+ Object.defineProperty(exports, "PaginationItem", { enumerable: true, get: function () { return components_1.PaginationItem; } });
98
+ Object.defineProperty(exports, "PaginationLink", { enumerable: true, get: function () { return components_1.PaginationLink; } });
71
99
  Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return components_1.Paper; } });
100
+ Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return components_1.Progress; } });
101
+ Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return components_1.RadioGroup; } });
102
+ Object.defineProperty(exports, "RadioGroupItem", { enumerable: true, get: function () { return components_1.RadioGroupItem; } });
103
+ Object.defineProperty(exports, "ScrollArea", { enumerable: true, get: function () { return components_1.ScrollArea; } });
72
104
  Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return components_1.Select; } });
105
+ Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return components_1.Separator; } });
106
+ Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return components_1.Skeleton; } });
107
+ Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return components_1.Slider; } });
73
108
  Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return components_1.Stack; } });
109
+ Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });
110
+ Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return components_1.Table; } });
111
+ Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return components_1.TableBody; } });
112
+ Object.defineProperty(exports, "TableCaption", { enumerable: true, get: function () { return components_1.TableCaption; } });
113
+ Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return components_1.TableCell; } });
114
+ Object.defineProperty(exports, "TableFooter", { enumerable: true, get: function () { return components_1.TableFooter; } });
115
+ Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return components_1.TableHead; } });
116
+ Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return components_1.TableHeader; } });
117
+ Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return components_1.TableRow; } });
118
+ Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return components_1.Tabs; } });
119
+ Object.defineProperty(exports, "TabsContent", { enumerable: true, get: function () { return components_1.TabsContent; } });
120
+ Object.defineProperty(exports, "TabsList", { enumerable: true, get: function () { return components_1.TabsList; } });
121
+ Object.defineProperty(exports, "TabsTrigger", { enumerable: true, get: function () { return components_1.TabsTrigger; } });
74
122
  Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return components_1.Text; } });
75
123
  Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return components_1.Textarea; } });
76
124
  Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return components_1.Toast; } });
77
125
  Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return components_1.ToastList; } });
78
126
  Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return components_1.ToastSeverityIcon; } });
127
+ Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return components_1.Toggle; } });
128
+ Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return components_1.Tooltip; } });
79
129
  /** 커스텀 오버레이용 — `Dialog`/`BottomSheet`와 동일한 훅 */
80
130
  var components_2 = require("./components");
81
131
  Object.defineProperty(exports, "useBodyScrollLock", { enumerable: true, get: function () { return components_2.useBodyScrollLock; } });
@@ -0,0 +1,2 @@
1
+ /** front-core 문서형 갤러리 — 사이드 네비 + 섹션 + 라이브 데모 */
2
+ export declare function DesignSystemShowcase(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DesignSystemShowcase = DesignSystemShowcase;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const ShowcaseChrome_1 = require("./components/ShowcaseChrome");
6
+ const ShowcaseContext_1 = require("./ShowcaseContext");
7
+ const nav_1 = require("./nav");
8
+ const ActionsSection_1 = require("./sections/ActionsSection");
9
+ const FeedbackSection_1 = require("./sections/FeedbackSection");
10
+ const FormsSection_1 = require("./sections/FormsSection");
11
+ const LayoutSection_1 = require("./sections/LayoutSection");
12
+ const OverlaysSection_1 = require("./sections/OverlaysSection");
13
+ const OverviewSection_1 = require("./sections/OverviewSection");
14
+ const SurfacesSection_1 = require("./sections/SurfacesSection");
15
+ const TypographySection_1 = require("./sections/TypographySection");
16
+ /** front-core 문서형 갤러리 — 사이드 네비 + 섹션 + 라이브 데모 */
17
+ function DesignSystemShowcase() {
18
+ return ((0, jsx_runtime_1.jsxs)(ShowcaseContext_1.ShowcaseProvider, { children: [(0, jsx_runtime_1.jsx)(ShowcaseChrome_1.ShowcaseChrome, {}), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-ds", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "xfc-ds-nav", "aria-label": "\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC139\uC158", children: [(0, jsx_runtime_1.jsx)("p", { className: "xfc-ds-nav-title", children: "\uC139\uC158" }), (0, jsx_runtime_1.jsx)("ul", { className: "xfc-ds-nav-list", children: nav_1.SHOWCASE_NAV.map((item) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "xfc-ds-nav-link", href: `#${item.id}`, children: item.label }) }, item.id))) })] }), (0, jsx_runtime_1.jsxs)("main", { className: "xfc-ds-main", children: [(0, jsx_runtime_1.jsx)(OverviewSection_1.OverviewSection, {}), (0, jsx_runtime_1.jsx)(SurfacesSection_1.SurfacesSection, {}), (0, jsx_runtime_1.jsx)(TypographySection_1.TypographySection, {}), (0, jsx_runtime_1.jsx)(ActionsSection_1.ActionsSection, {}), (0, jsx_runtime_1.jsx)(FormsSection_1.FormsSection, {}), (0, jsx_runtime_1.jsx)(LayoutSection_1.LayoutSection, {}), (0, jsx_runtime_1.jsx)(FeedbackSection_1.FeedbackSection, {}), (0, jsx_runtime_1.jsx)(OverlaysSection_1.OverlaysSection, {})] })] })] }));
19
+ }
@@ -0,0 +1,48 @@
1
+ import { type ReactNode } from 'react';
2
+ import type { InlineErrorEntry } from '../components/atoms/InlineErrorList';
3
+ import { type ToastEntry, type ToastSeverity } from '../components/atoms/Toast';
4
+ export type ShowcaseContextValue = {
5
+ uid: string;
6
+ toasts: ToastEntry[];
7
+ errors: InlineErrorEntry[];
8
+ loading: boolean;
9
+ badgeClicks: number;
10
+ interactiveCardClicks: number;
11
+ btnLoading: boolean;
12
+ dialogOpen: boolean;
13
+ dialogRichOpen: boolean;
14
+ confirmOpen: boolean;
15
+ confirmDestructiveOpen: boolean;
16
+ confirmLoadingDemo: boolean;
17
+ confirmCustomOpen: boolean;
18
+ sheetOpen: boolean;
19
+ sheetRichOpen: boolean;
20
+ fieldBio: string;
21
+ fieldPlan: string;
22
+ fieldAgree: boolean;
23
+ setToasts: React.Dispatch<React.SetStateAction<ToastEntry[]>>;
24
+ setErrors: React.Dispatch<React.SetStateAction<InlineErrorEntry[]>>;
25
+ setLoading: React.Dispatch<React.SetStateAction<boolean>>;
26
+ setBadgeClicks: React.Dispatch<React.SetStateAction<number>>;
27
+ setInteractiveCardClicks: React.Dispatch<React.SetStateAction<number>>;
28
+ setBtnLoading: React.Dispatch<React.SetStateAction<boolean>>;
29
+ setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
30
+ setDialogRichOpen: React.Dispatch<React.SetStateAction<boolean>>;
31
+ setConfirmOpen: React.Dispatch<React.SetStateAction<boolean>>;
32
+ setConfirmDestructiveOpen: React.Dispatch<React.SetStateAction<boolean>>;
33
+ setConfirmLoadingDemo: React.Dispatch<React.SetStateAction<boolean>>;
34
+ setConfirmCustomOpen: React.Dispatch<React.SetStateAction<boolean>>;
35
+ setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>;
36
+ setSheetRichOpen: React.Dispatch<React.SetStateAction<boolean>>;
37
+ setFieldBio: React.Dispatch<React.SetStateAction<string>>;
38
+ setFieldPlan: React.Dispatch<React.SetStateAction<string>>;
39
+ setFieldAgree: React.Dispatch<React.SetStateAction<boolean>>;
40
+ pushToast: (severity: ToastSeverity) => void;
41
+ pushToastCustomIcon: () => void;
42
+ addError: () => void;
43
+ addErrorRich: () => void;
44
+ };
45
+ export declare function ShowcaseProvider({ children }: {
46
+ children: ReactNode;
47
+ }): import("react/jsx-runtime").JSX.Element;
48
+ export declare function useShowcase(): ShowcaseContextValue;
@@ -0,0 +1,117 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ShowcaseProvider = ShowcaseProvider;
4
+ exports.useShowcase = useShowcase;
5
+ const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const react_1 = require("react");
7
+ const Toast_1 = require("../components/atoms/Toast");
8
+ const icons_1 = require("./components/icons");
9
+ const ShowcaseContext = (0, react_1.createContext)(null);
10
+ function ShowcaseProvider({ children }) {
11
+ const uid = (0, react_1.useId)();
12
+ const toastSeq = (0, react_1.useRef)(0);
13
+ const errorSeq = (0, react_1.useRef)(0);
14
+ const [toasts, setToasts] = (0, react_1.useState)([]);
15
+ const [errors, setErrors] = (0, react_1.useState)([]);
16
+ const [loading, setLoading] = (0, react_1.useState)(false);
17
+ const [badgeClicks, setBadgeClicks] = (0, react_1.useState)(0);
18
+ const [interactiveCardClicks, setInteractiveCardClicks] = (0, react_1.useState)(0);
19
+ const [btnLoading, setBtnLoading] = (0, react_1.useState)(false);
20
+ const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
21
+ const [dialogRichOpen, setDialogRichOpen] = (0, react_1.useState)(false);
22
+ const [confirmOpen, setConfirmOpen] = (0, react_1.useState)(false);
23
+ const [confirmDestructiveOpen, setConfirmDestructiveOpen] = (0, react_1.useState)(false);
24
+ const [confirmLoadingDemo, setConfirmLoadingDemo] = (0, react_1.useState)(false);
25
+ const [confirmCustomOpen, setConfirmCustomOpen] = (0, react_1.useState)(false);
26
+ const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
27
+ const [sheetRichOpen, setSheetRichOpen] = (0, react_1.useState)(false);
28
+ const [fieldBio, setFieldBio] = (0, react_1.useState)('');
29
+ const [fieldPlan, setFieldPlan] = (0, react_1.useState)('a');
30
+ const [fieldAgree, setFieldAgree] = (0, react_1.useState)(false);
31
+ const pushToast = (0, react_1.useCallback)((severity) => {
32
+ toastSeq.current += 1;
33
+ const id = `${uid}-t-${toastSeq.current}`;
34
+ setToasts((prev) => [...prev, { id, severity, message: `${severity} 메시지 예시` }]);
35
+ }, [uid]);
36
+ const pushToastCustomIcon = (0, react_1.useCallback)(() => {
37
+ toastSeq.current += 1;
38
+ const id = `${uid}-t-${toastSeq.current}`;
39
+ setToasts((prev) => [
40
+ ...prev,
41
+ {
42
+ id,
43
+ severity: 'success',
44
+ message: 'ToastEntry.icon 으로 별 아이콘',
45
+ icon: (0, jsx_runtime_1.jsx)(icons_1.StarIcon, {}),
46
+ },
47
+ ]);
48
+ }, [uid]);
49
+ const addError = (0, react_1.useCallback)(() => {
50
+ errorSeq.current += 1;
51
+ const id = `${uid}-e-${errorSeq.current}`;
52
+ setErrors((prev) => [...prev, { id, message: `샘플 에러 #${errorSeq.current}` }]);
53
+ }, [uid]);
54
+ const addErrorRich = (0, react_1.useCallback)(() => {
55
+ errorSeq.current += 1;
56
+ const id = `${uid}-e-${errorSeq.current}`;
57
+ setErrors((prev) => [
58
+ ...prev,
59
+ {
60
+ id,
61
+ message: '아이콘 + 행 클릭(콘솔)',
62
+ icon: (0, jsx_runtime_1.jsx)(Toast_1.ToastSeverityIcon, { severity: "error" }),
63
+ onClick: () => {
64
+ console.info('[showcase] inline error row click', id);
65
+ },
66
+ },
67
+ ]);
68
+ }, [uid]);
69
+ const value = {
70
+ uid,
71
+ toasts,
72
+ errors,
73
+ loading,
74
+ badgeClicks,
75
+ interactiveCardClicks,
76
+ btnLoading,
77
+ dialogOpen,
78
+ dialogRichOpen,
79
+ confirmOpen,
80
+ confirmDestructiveOpen,
81
+ confirmLoadingDemo,
82
+ confirmCustomOpen,
83
+ sheetOpen,
84
+ sheetRichOpen,
85
+ fieldBio,
86
+ fieldPlan,
87
+ fieldAgree,
88
+ setToasts,
89
+ setErrors,
90
+ setLoading,
91
+ setBadgeClicks,
92
+ setInteractiveCardClicks,
93
+ setBtnLoading,
94
+ setDialogOpen,
95
+ setDialogRichOpen,
96
+ setConfirmOpen,
97
+ setConfirmDestructiveOpen,
98
+ setConfirmLoadingDemo,
99
+ setConfirmCustomOpen,
100
+ setSheetOpen,
101
+ setSheetRichOpen,
102
+ setFieldBio,
103
+ setFieldPlan,
104
+ setFieldAgree,
105
+ pushToast,
106
+ pushToastCustomIcon,
107
+ addError,
108
+ addErrorRich,
109
+ };
110
+ return (0, jsx_runtime_1.jsx)(ShowcaseContext.Provider, { value: value, children: children });
111
+ }
112
+ function useShowcase() {
113
+ const v = (0, react_1.useContext)(ShowcaseContext);
114
+ if (!v)
115
+ throw new Error('ShowcaseProvider required');
116
+ return v;
117
+ }
@@ -0,0 +1,7 @@
1
+ /** 코드 스니펫 + 캡션 (문서형 갤러리) */
2
+ export declare function CodeBlock({ caption, code, className, variant, }: {
3
+ caption?: string;
4
+ code: string;
5
+ className?: string;
6
+ variant?: 'default' | 'embedded';
7
+ }): import("react/jsx-runtime").JSX.Element;