@iamfiro/design 0.3.2 → 0.3.5

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 (163) hide show
  1. package/agents/INDEX.md +1 -1
  2. package/agents/app-shell/AGENTS.md +99 -1
  3. package/agents/brand-icon/AGENTS.md +1 -1
  4. package/agents/social-login-button/AGENTS.md +4 -3
  5. package/lib/components/Accordion/Accordion2.js +74 -74
  6. package/lib/components/ActionBar/ActionBar2.js +44 -42
  7. package/lib/components/Alert/Alert2.js +67 -67
  8. package/lib/components/AppShell/AppShell2.js +72 -66
  9. package/lib/components/AreaChart/AreaChart.js +45 -45
  10. package/lib/components/BarChart/BarChart2.js +128 -128
  11. package/lib/components/BarList/BarList2.js +105 -105
  12. package/lib/components/Breadcrumb/Breadcrumb2.js +63 -64
  13. package/lib/components/Calendar/Calendar2.js +197 -197
  14. package/lib/components/Calendar/DatePicker2.js +100 -100
  15. package/lib/components/Calendar/date.js +47 -70
  16. package/lib/components/Card/Card2.js +101 -74
  17. package/lib/components/CardFrame/CardFrame2.js +52 -56
  18. package/lib/components/Chart/ChartParts.js +88 -88
  19. package/lib/components/Chart/chart2.js +63 -63
  20. package/lib/components/Chart/useChartInteraction.js +43 -43
  21. package/lib/components/ChatBubble/ChatBubble2.js +111 -111
  22. package/lib/components/ChatBubble/formatChatTime.js +38 -43
  23. package/lib/components/ChatComposer/ChatComposer2.js +96 -96
  24. package/lib/components/CodeBlock/CodeBlock2.js +65 -65
  25. package/lib/components/CodeBlock/highlight.js +84 -84
  26. package/lib/components/ColorPicker/ColorPicker2.js +263 -263
  27. package/lib/components/ColorPicker/color.js +92 -92
  28. package/lib/components/ColorPicker/presets.js +35 -39
  29. package/lib/components/Combobox/Combobox2.js +134 -134
  30. package/lib/components/CommandMenu/CommandMenu.js +130 -131
  31. package/lib/components/Comment/Comment2.js +64 -63
  32. package/lib/components/ContextMenu/ContextMenu2.js +84 -84
  33. package/lib/components/DataGrid/DataGrid2.js +1182 -1180
  34. package/lib/components/DataGrid/GridPopover.js +84 -84
  35. package/lib/components/DataGrid/anchor.js +29 -28
  36. package/lib/components/DataGrid/model.js +308 -307
  37. package/lib/components/DataGrid/panels.js +398 -399
  38. package/lib/components/DataGrid/typeMeta.js +41 -40
  39. package/lib/components/DataGrid/types.js +39 -40
  40. package/lib/components/DescriptionList/DescriptionList2.js +105 -105
  41. package/lib/components/Dialog/AlertDialog.js +90 -89
  42. package/lib/components/Dialog/Dialog2.js +71 -72
  43. package/lib/components/Dialog/modal.js +62 -60
  44. package/lib/components/Drawer/Drawer2.js +167 -166
  45. package/lib/components/DropdownMenu/DropdownMenu2.js +260 -258
  46. package/lib/components/DropdownMenu/menuCore.js +29 -28
  47. package/lib/components/Dropzone/Dropzone2.js +78 -77
  48. package/lib/components/EmptyState/EmptyState2.js +57 -57
  49. package/lib/components/FileChip/FileChip2.js +53 -77
  50. package/lib/components/FileUpload/FileUpload.js +168 -167
  51. package/lib/components/FilterChips/FilterChips2.js +60 -60
  52. package/lib/components/FunnelChart/FunnelChart2.js +174 -174
  53. package/lib/components/FunnelChart/funnel.js +44 -42
  54. package/lib/components/Highlight/Highlight2.js +55 -55
  55. package/lib/components/HoverCard/HoverCard.js +71 -96
  56. package/lib/components/InlineDiff/InlineDiff2.js +128 -129
  57. package/lib/components/InlineDiff/diff.js +79 -79
  58. package/lib/components/InlineDiff/useDiffReview.js +61 -62
  59. package/lib/components/Kanban/Kanban2.js +387 -389
  60. package/lib/components/Kanban/KanbanCard.js +84 -84
  61. package/lib/components/Kanban/move.js +32 -25
  62. package/lib/components/LineChart/LineChart2.js +228 -228
  63. package/lib/components/List/List2.js +62 -62
  64. package/lib/components/Listbox/Listbox2.js +92 -92
  65. package/lib/components/Marker/Marker2.js +50 -56
  66. package/lib/components/Menubar/Menubar2.js +117 -116
  67. package/lib/components/MultiSelect/MultiSelect2.js +111 -111
  68. package/lib/components/NavigationMenu/NavigationMenu2.js +231 -231
  69. package/lib/components/NoticeStack/NoticeStack2.js +99 -99
  70. package/lib/components/NumberStepper/NumberStepper2.js +60 -60
  71. package/lib/components/OtpInput/OtpInput2.js +90 -89
  72. package/lib/components/Pagination/Pagination2.js +105 -105
  73. package/lib/components/Pagination/paginationRange.js +37 -37
  74. package/lib/components/PhoneInput/PhoneInput.js +75 -76
  75. package/lib/components/PieChart/PieChart2.js +166 -166
  76. package/lib/components/PieChart/arc.js +71 -69
  77. package/lib/components/PieChart/useArcTween.js +60 -62
  78. package/lib/components/Popover/Popover2.js +85 -86
  79. package/lib/components/ProgressTracker/ProgressTracker2.js +134 -134
  80. package/lib/components/Rating/Rating2.js +90 -89
  81. package/lib/components/Resizable/Resizable2.js +128 -129
  82. package/lib/components/Resizable/layout.js +51 -51
  83. package/lib/components/ScaledPreview/ScaledPreview2.js +49 -48
  84. package/lib/components/ScatterChart/ScatterChart2.js +214 -213
  85. package/lib/components/ScatterChart/scatter.js +49 -52
  86. package/lib/components/ScrollArea/ScrollArea2.js +115 -117
  87. package/lib/components/Select/Select2.js +82 -82
  88. package/lib/components/Sidebar/Sidebar2.js +91 -85
  89. package/lib/components/Sidebar/rail.js +43 -0
  90. package/lib/components/Skeleton/Skeleton2.js +63 -64
  91. package/lib/components/Slider/Slider2.js +65 -66
  92. package/lib/components/SocialLoginButton/SocialLoginButton.js +76 -69
  93. package/lib/components/SparkChart/SparkChart2.js +126 -127
  94. package/lib/components/SparkChart/spark.js +66 -42
  95. package/lib/components/Sparkbar/Sparkbar2.js +60 -60
  96. package/lib/components/SplitView/SplitView2.js +51 -51
  97. package/lib/components/Stat/Stat2.js +79 -79
  98. package/lib/components/StepList/StepList2.js +75 -75
  99. package/lib/components/Table/Table2.js +71 -71
  100. package/lib/components/Tabs/Tabs2.js +74 -74
  101. package/lib/components/TagInput/TagInput2.js +223 -221
  102. package/lib/components/TimePicker/TimePicker2.js +197 -195
  103. package/lib/components/TimePicker/time.js +59 -56
  104. package/lib/components/Timeline/Timeline2.js +195 -195
  105. package/lib/components/Timeline/scale.js +64 -66
  106. package/lib/components/Toast/Toaster.js +139 -139
  107. package/lib/components/Toast/store.js +72 -76
  108. package/lib/components/ToggleGroup/ToggleGroup2.js +79 -79
  109. package/lib/components/Toolbar/Toolbar2.js +165 -164
  110. package/lib/components/Tracker/Tracker2.js +72 -72
  111. package/lib/components/TreeDiagram/TreeDiagram2.js +96 -97
  112. package/lib/components/TreeView/TreeView2.js +152 -151
  113. package/lib/hooks/timing.js +34 -36
  114. package/lib/hooks/useControllableState.js +29 -30
  115. package/lib/hooks/useCountdown.js +51 -53
  116. package/lib/hooks/useDigitInput.js +81 -55
  117. package/lib/hooks/useDismiss.js +53 -56
  118. package/lib/hooks/useElapsed.js +48 -49
  119. package/lib/hooks/useFloating.js +36 -36
  120. package/lib/hooks/useFocusTrap.js +32 -32
  121. package/lib/hooks/usePresence.js +49 -49
  122. package/lib/hooks/usePressToOpen.js +40 -40
  123. package/lib/hooks/useScrollLock.js +50 -49
  124. package/lib/hooks/useSelection.js +42 -47
  125. package/lib/index.js +138 -139
  126. package/lib/primitives/AspectRatio2.js +58 -57
  127. package/lib/primitives/BrandIcon.js +210 -179
  128. package/lib/primitives/ColorDot2.js +42 -41
  129. package/lib/primitives/CopyButton2.js +59 -58
  130. package/lib/primitives/CountBadge2.js +58 -63
  131. package/lib/primitives/Countdown2.js +38 -37
  132. package/lib/primitives/Delta2.js +37 -37
  133. package/lib/primitives/Elapsed.js +42 -40
  134. package/lib/primitives/FileIcon2.js +102 -102
  135. package/lib/primitives/Flag2.js +124 -124
  136. package/lib/primitives/IconStack2.js +45 -23
  137. package/lib/primitives/IconTile2.js +45 -41
  138. package/lib/primitives/Kbd2.js +48 -48
  139. package/lib/primitives/Layout2.js +71 -71
  140. package/lib/primitives/Link2.js +40 -42
  141. package/lib/primitives/MaskedText2.js +50 -50
  142. package/lib/primitives/Progress2.js +78 -77
  143. package/lib/primitives/RelativeTime.js +55 -58
  144. package/lib/primitives/SearchInput2.js +72 -68
  145. package/lib/primitives/SelectorButton2.js +60 -61
  146. package/lib/primitives/Spinner2.js +48 -49
  147. package/lib/primitives/StatusIcon2.js +69 -69
  148. package/lib/primitives/Swatch2.js +65 -69
  149. package/lib/primitives/Tooltip2.js +92 -92
  150. package/lib/primitives/Typography2.js +37 -37
  151. package/lib/primitives/formatCountdown.js +38 -38
  152. package/lib/primitives/formatElapsed.js +43 -45
  153. package/lib/primitives/formatRelativeTime.js +54 -54
  154. package/lib/primitives/hotkey.js +77 -77
  155. package/lib/primitives/index.js +162 -161
  156. package/lib/primitives/maskValue.js +54 -51
  157. package/lib/style.css +1 -1
  158. package/lib/types/components/AppShell/AppShell.d.ts +9 -2
  159. package/lib/types/components/Sidebar/rail.d.ts +4 -0
  160. package/lib/types/components/SocialLoginButton/SocialLoginButton.d.ts +1 -1
  161. package/lib/types/components/index.d.ts +1 -0
  162. package/lib/types/primitives/BrandIcon.d.ts +1 -1
  163. package/package.json +1 -1
@@ -14,8 +14,15 @@ export interface AppShellProps {
14
14
  variant?: 'plain' | 'inset';
15
15
  /** Width of the sidebar on wide screens. */
16
16
  sidebarWidth?: number;
17
- /** Wide screens: folds the sidebar away (it slides out while the main area widens). */
17
+ /** inset: extra room (px) left of the sidebar's content on wide screens, for a sidebar wider than its menu. */
18
+ sidebarIndent?: number;
19
+ /** Wide screens: folds the sidebar (see sidebarCollapse for how). */
18
20
  sidebarCollapsed?: boolean;
21
+ /**
22
+ * What a folded sidebar becomes. hide: it slides out and the main area takes the room.
23
+ * rail: it narrows to its item icons (names come up as tooltips); header and footer content centre.
24
+ */
25
+ sidebarCollapse?: 'hide' | 'rail';
19
26
  /** Narrow screens: the sidebar becomes a drawer that you open and close. */
20
27
  mobileSidebarOpen?: boolean;
21
28
  onMobileSidebarOpenChange?: (open: boolean) => void;
@@ -35,4 +42,4 @@ export interface AppShellProps {
35
42
  * Page frame: a fixed sidebar beside a scrolling main area (and an optional panel on the right);
36
43
  * the sidebar becomes a slide-in drawer on small screens.
37
44
  */
38
- export declare function AppShell({ sidebar, header, children, variant, sidebarWidth, sidebarCollapsed, mobileSidebarOpen, onMobileSidebarOpenChange, aside, asideWidth, asideOpen, asideLabel, scrollKey, className, }: AppShellProps): import("react").JSX.Element;
45
+ export declare function AppShell({ sidebar, header, children, variant, sidebarWidth, sidebarIndent, sidebarCollapsed, sidebarCollapse, mobileSidebarOpen, onMobileSidebarOpenChange, aside, asideWidth, asideOpen, asideLabel, scrollKey, className, }: AppShellProps): import("react").JSX.Element;
@@ -0,0 +1,4 @@
1
+ /** True while an AppShell has folded its sidebar into an icon rail (`sidebarCollapse="rail"`). */
2
+ export declare const SidebarRailContext: import("react").Context<boolean>;
3
+ /** Whether the sidebar around this component is an icon rail, for header and footer content that shrinks with it. */
4
+ export declare const useSidebarRail: () => boolean;
@@ -1,5 +1,5 @@
1
1
  import { type ButtonProps } from '../../primitives';
2
- export type SocialProvider = 'google' | 'apple';
2
+ export type SocialProvider = 'google' | 'apple' | 'microsoft';
3
3
  export type SocialLoginAction = 'continue' | 'signin' | 'signup';
4
4
  export interface SocialLoginButtonProps extends Omit<ButtonProps, 'variant' | 'icon' | 'iconRight'> {
5
5
  provider: SocialProvider;
@@ -32,6 +32,7 @@ export type { CodeLanguage } from './CodeBlock/highlight';
32
32
  export { Breadcrumb } from './Breadcrumb/Breadcrumb';
33
33
  export type { BreadcrumbItem, BreadcrumbProps } from './Breadcrumb/Breadcrumb';
34
34
  export { Sidebar, SidebarGroup, SidebarItem } from './Sidebar/Sidebar';
35
+ export { useSidebarRail } from './Sidebar/rail';
35
36
  export type { SidebarGroupProps, SidebarItemProps, SidebarProps } from './Sidebar/Sidebar';
36
37
  export { AppShell } from './AppShell/AppShell';
37
38
  export type { AppShellProps } from './AppShell/AppShell';
@@ -1,4 +1,4 @@
1
- export declare const BRAND_NAMES: readonly ["gmail", "slack", "clickup", "figma", "github", "hubspot", "notion", "google-calendar", "google", "apple"];
1
+ export declare const BRAND_NAMES: readonly ["gmail", "slack", "clickup", "figma", "github", "hubspot", "notion", "google-calendar", "google", "apple", "microsoft"];
2
2
  export type BrandName = (typeof BRAND_NAMES)[number];
3
3
  export interface BrandIconProps {
4
4
  name: BrandName;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iamfiro/design",
3
- "version": "0.3.2",
3
+ "version": "0.3.5",
4
4
  "description": "Lumen 디자인 시스템 — React 컴포넌트 · 토큰 · 훅. 에이전트는 AGENTS.md부터 읽는다.",
5
5
  "type": "module",
6
6
  "main": "./lib/index.js",