@fragment-build/ui 1.0.0 → 1.1.0

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 (166) hide show
  1. package/README.md +56 -5
  2. package/dist/components/base/Accordion.d.ts +3 -0
  3. package/dist/components/base/Accordion.js +5 -0
  4. package/dist/components/base/Accordion.js.map +1 -0
  5. package/dist/components/base/Autocomplete.d.ts +4 -0
  6. package/dist/components/base/Autocomplete.js +6 -0
  7. package/dist/components/base/Autocomplete.js.map +1 -0
  8. package/dist/components/base/Avatar.d.ts +2 -0
  9. package/dist/components/base/Avatar.js +5 -0
  10. package/dist/components/base/Avatar.js.map +1 -0
  11. package/dist/components/base/Badge.d.ts +1 -0
  12. package/dist/components/base/Badge.js +4 -0
  13. package/dist/components/base/Badge.js.map +1 -0
  14. package/dist/components/base/Breadcrumbs.d.ts +2 -0
  15. package/dist/components/base/Breadcrumbs.js +5 -0
  16. package/dist/components/base/Breadcrumbs.js.map +1 -0
  17. package/dist/components/base/Button.d.ts +1 -0
  18. package/dist/components/base/Button.js +4 -0
  19. package/dist/components/base/Button.js.map +1 -0
  20. package/dist/components/base/Card.d.ts +2 -0
  21. package/dist/components/base/Card.js +5 -0
  22. package/dist/components/base/Card.js.map +1 -0
  23. package/dist/components/base/Checkbox.d.ts +2 -0
  24. package/dist/components/base/Checkbox.js +5 -0
  25. package/dist/components/base/Checkbox.js.map +1 -0
  26. package/dist/components/base/Chip.d.ts +1 -0
  27. package/dist/components/base/Chip.js +4 -0
  28. package/dist/components/base/Chip.js.map +1 -0
  29. package/dist/components/base/CircularProgress.d.ts +1 -0
  30. package/dist/components/base/CircularProgress.js +4 -0
  31. package/dist/components/base/CircularProgress.js.map +1 -0
  32. package/dist/components/base/Code.d.ts +1 -0
  33. package/dist/components/base/Code.js +4 -0
  34. package/dist/components/base/Code.js.map +1 -0
  35. package/dist/components/base/Divider.d.ts +1 -0
  36. package/dist/components/base/Divider.js +4 -0
  37. package/dist/components/base/Divider.js.map +1 -0
  38. package/dist/components/base/Dropdown.d.ts +9 -0
  39. package/dist/components/base/Dropdown.js +8 -0
  40. package/dist/components/base/Dropdown.js.map +1 -0
  41. package/dist/components/base/Image.d.ts +1 -0
  42. package/dist/components/base/Image.js +4 -0
  43. package/dist/components/base/Image.js.map +1 -0
  44. package/dist/components/base/Input.d.ts +1 -0
  45. package/dist/components/base/Input.js +4 -0
  46. package/dist/components/base/Input.js.map +1 -0
  47. package/dist/components/base/Kbd.d.ts +1 -0
  48. package/dist/components/base/Kbd.js +4 -0
  49. package/dist/components/base/Kbd.js.map +1 -0
  50. package/dist/components/base/Link.d.ts +1 -0
  51. package/dist/components/base/Link.js +4 -0
  52. package/dist/components/base/Link.js.map +1 -0
  53. package/dist/components/base/Listbox.d.ts +4 -0
  54. package/dist/components/base/Listbox.js +6 -0
  55. package/dist/components/base/Listbox.js.map +1 -0
  56. package/dist/components/base/Modal.d.ts +5 -0
  57. package/dist/components/base/Modal.js +8 -0
  58. package/dist/components/base/Modal.js.map +1 -0
  59. package/dist/components/base/Navbar.d.ts +7 -0
  60. package/dist/components/base/Navbar.js +10 -0
  61. package/dist/components/base/Navbar.js.map +1 -0
  62. package/dist/components/base/Pagination.d.ts +3 -0
  63. package/dist/components/base/Pagination.js +6 -0
  64. package/dist/components/base/Pagination.js.map +1 -0
  65. package/dist/components/base/Popover.d.ts +3 -0
  66. package/dist/components/base/Popover.js +6 -0
  67. package/dist/components/base/Popover.js.map +1 -0
  68. package/dist/components/base/Progress.d.ts +1 -0
  69. package/dist/components/base/Progress.js +4 -0
  70. package/dist/components/base/Progress.js.map +1 -0
  71. package/dist/components/base/Radio.d.ts +2 -0
  72. package/dist/components/base/Radio.js +5 -0
  73. package/dist/components/base/Radio.js.map +1 -0
  74. package/dist/components/base/ScrollShadow.d.ts +1 -0
  75. package/dist/components/base/ScrollShadow.js +4 -0
  76. package/dist/components/base/ScrollShadow.js.map +1 -0
  77. package/dist/components/base/Select.d.ts +4 -0
  78. package/dist/components/base/Select.js +6 -0
  79. package/dist/components/base/Select.js.map +1 -0
  80. package/dist/components/base/Skeleton.d.ts +1 -0
  81. package/dist/components/base/Skeleton.js +4 -0
  82. package/dist/components/base/Skeleton.js.map +1 -0
  83. package/dist/components/base/Slider.d.ts +1 -0
  84. package/dist/components/base/Slider.js +4 -0
  85. package/dist/components/base/Slider.js.map +1 -0
  86. package/dist/components/base/Snippet.d.ts +1 -0
  87. package/dist/components/base/Snippet.js +4 -0
  88. package/dist/components/base/Snippet.js.map +1 -0
  89. package/dist/components/base/Spacer.d.ts +1 -0
  90. package/dist/components/base/Spacer.js +4 -0
  91. package/dist/components/base/Spacer.js.map +1 -0
  92. package/dist/components/base/Spinner.d.ts +1 -0
  93. package/dist/components/base/Spinner.js +4 -0
  94. package/dist/components/base/Spinner.js.map +1 -0
  95. package/dist/components/base/Switch.d.ts +1 -0
  96. package/dist/components/base/Switch.js +4 -0
  97. package/dist/components/base/Switch.js.map +1 -0
  98. package/dist/components/base/Tab.d.ts +3 -0
  99. package/dist/components/base/Tab.js +5 -0
  100. package/dist/components/base/Tab.js.map +1 -0
  101. package/dist/components/base/Table.d.ts +7 -0
  102. package/dist/components/base/Table.js +9 -0
  103. package/dist/components/base/Table.js.map +1 -0
  104. package/dist/components/base/Textarea.d.ts +1 -0
  105. package/dist/components/base/Textarea.js +4 -0
  106. package/dist/components/base/Textarea.js.map +1 -0
  107. package/dist/components/base/Tooltip.d.ts +1 -0
  108. package/dist/components/base/Tooltip.js +4 -0
  109. package/dist/components/base/Tooltip.js.map +1 -0
  110. package/dist/components/base/User.d.ts +1 -0
  111. package/dist/components/base/User.js +4 -0
  112. package/dist/components/base/User.js.map +1 -0
  113. package/dist/components/base/index.d.ts +37 -0
  114. package/dist/components/base/index.js +38 -0
  115. package/dist/components/base/index.js.map +1 -0
  116. package/dist/components/color-input/ColorInput.d.ts +2 -3
  117. package/dist/components/color-input/ColorInput.js +16 -0
  118. package/dist/components/color-input/ColorInput.js.map +1 -0
  119. package/dist/components/color-input/{ColorInput.stories.jsx → ColorInput.stories.js} +1 -0
  120. package/dist/components/color-input/ColorInput.stories.js.map +1 -0
  121. package/dist/components/color-selector/ColorSelector.d.ts +2 -3
  122. package/dist/components/color-selector/ColorSelector.js +10 -0
  123. package/dist/components/color-selector/ColorSelector.js.map +1 -0
  124. package/dist/components/color-selector/{ColorSelector.stories.jsx → ColorSelector.stories.js} +3 -1
  125. package/dist/components/color-selector/ColorSelector.stories.js.map +1 -0
  126. package/dist/components/index.d.ts +3 -0
  127. package/dist/components/index.js +4 -0
  128. package/dist/components/index.js.map +1 -0
  129. package/dist/context.d.ts +84 -0
  130. package/dist/context.js +18 -0
  131. package/dist/context.js.map +1 -0
  132. package/dist/fragments/index.d.ts +2 -0
  133. package/dist/fragments/index.js +3 -0
  134. package/dist/fragments/index.js.map +1 -0
  135. package/dist/fragments/shell/Shell.js +6 -0
  136. package/dist/fragments/shell/Shell.js.map +1 -0
  137. package/dist/fragments/shell/Shell.stories.js +129 -0
  138. package/dist/fragments/shell/Shell.stories.js.map +1 -0
  139. package/dist/fragments/sidebar/Sidebar.d.ts +2 -1
  140. package/dist/fragments/sidebar/Sidebar.js +74 -0
  141. package/dist/fragments/sidebar/Sidebar.js.map +1 -0
  142. package/dist/fragments/sidebar/{Sidebar.stories.jsx → Sidebar.stories.js} +28 -17
  143. package/dist/fragments/sidebar/Sidebar.stories.js.map +1 -0
  144. package/dist/hooks/breakpoints.js +1 -0
  145. package/dist/hooks/breakpoints.js.map +1 -0
  146. package/dist/hooks/index.d.ts +1 -0
  147. package/dist/hooks/index.js +2 -0
  148. package/dist/hooks/index.js.map +1 -0
  149. package/dist/index.d.ts +6 -4
  150. package/dist/index.js +7 -4
  151. package/dist/index.js.map +1 -0
  152. package/dist/provider.d.ts +12 -0
  153. package/dist/provider.js +17 -0
  154. package/dist/provider.js.map +1 -0
  155. package/dist/tailwind.plugin.d.ts +4 -0
  156. package/dist/tailwind.plugin.js +18 -0
  157. package/dist/tailwind.plugin.js.map +1 -0
  158. package/dist/withFragment.d.ts +3 -0
  159. package/dist/withFragment.js +17 -0
  160. package/dist/withFragment.js.map +1 -0
  161. package/package.json +22 -22
  162. package/dist/components/color-input/ColorInput.jsx +0 -26
  163. package/dist/components/color-selector/ColorSelector.jsx +0 -22
  164. package/dist/fragments/shell/Shell.jsx +0 -10
  165. package/dist/fragments/shell/Shell.stories.jsx +0 -170
  166. package/dist/fragments/sidebar/Sidebar.jsx +0 -129
@@ -0,0 +1,4 @@
1
+ import { Switch as NextSwitch } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const Switch = withFragment(NextSwitch, 'switch');
4
+ //# sourceMappingURL=Switch.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/base/Switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const Tab: <T extends object>(props: import("@nextui-org/react").TabItemProps<T>) => JSX.Element;
3
+ export declare const Tabs: <T = object>(props: import("@nextui-org/react").TabsProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -0,0 +1,5 @@
1
+ import { Tab as NextTab, Tabs as NextTabs, } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const Tab = withFragment(NextTab, 'tab');
4
+ export const Tabs = withFragment(NextTabs, 'tabs');
5
+ //# sourceMappingURL=Tab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/base/Tab.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,IAAI,OAAO,EACd,IAAI,IAAI,QAAQ,GACjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC"}
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ export declare const Table: import("@nextui-org/react").InternalForwardRefRenderFunction<"table", import("@nextui-org/react").TableProps, never>;
3
+ export declare const TableBody: <T>(props: import("@nextui-org/react").TableBodyProps<T>) => JSX.Element;
4
+ export declare const TableCell: (props: import("@nextui-org/react").TableCellProps) => JSX.Element;
5
+ export declare const TableColumn: <T>(props: import("@nextui-org/react").TableColumnProps<T>) => JSX.Element;
6
+ export declare const TableHeader: <T>(props: import("@nextui-org/react").TableHeaderProps<T>) => JSX.Element;
7
+ export declare const TableRow: (props: import("@nextui-org/table/dist/base/table-row").TableRowProps<object>) => JSX.Element;
@@ -0,0 +1,9 @@
1
+ import { Table as NextTable, TableBody as NextTableBody, TableCell as NextTableCell, TableColumn as NextTableColumn, TableHeader as NextTableHeader, TableRow as NextTableRow, } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const Table = withFragment(NextTable, 'table');
4
+ export const TableBody = withFragment(NextTableBody, 'tableBody');
5
+ export const TableCell = withFragment(NextTableCell, 'tableCell');
6
+ export const TableColumn = withFragment(NextTableColumn, 'tableColumn');
7
+ export const TableHeader = withFragment(NextTableHeader, 'tableHeader');
8
+ export const TableRow = withFragment(NextTableRow, 'tableRow');
9
+ //# sourceMappingURL=Table.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/base/Table.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,SAAS,EAClB,SAAS,IAAI,aAAa,EAC1B,SAAS,IAAI,aAAa,EAC1B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,QAAQ,IAAI,YAAY,GACzB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAClE,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAClE,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export declare const Textarea: import("@nextui-org/react").InternalForwardRefRenderFunction<"textarea", import("@nextui-org/react").TextAreaProps, never>;
@@ -0,0 +1,4 @@
1
+ import { Textarea as NextTextarea } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const Textarea = withFragment(NextTextarea, 'textArea');
4
+ //# sourceMappingURL=Textarea.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/base/Textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export declare const Tooltip: import("@nextui-org/react").InternalForwardRefRenderFunction<"div", import("@nextui-org/react").TooltipProps, never>;
@@ -0,0 +1,4 @@
1
+ import { Tooltip as NextTooltip } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const Tooltip = withFragment(NextTooltip, 'tooltip');
4
+ //# sourceMappingURL=Tooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/base/Tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export declare const User: import("@nextui-org/react").InternalForwardRefRenderFunction<"div", import("@nextui-org/react").UserProps, never>;
@@ -0,0 +1,4 @@
1
+ import { User as NextUser } from '@nextui-org/react';
2
+ import { withFragment } from '../../withFragment';
3
+ export const User = withFragment(NextUser, 'user');
4
+ //# sourceMappingURL=User.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"User.js","sourceRoot":"","sources":["../../../src/components/base/User.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC"}
@@ -0,0 +1,37 @@
1
+ export * from './Accordion';
2
+ export * from './Autocomplete';
3
+ export * from './Avatar';
4
+ export * from './Badge';
5
+ export * from './Breadcrumbs';
6
+ export * from './Button';
7
+ export * from './Card';
8
+ export * from './Checkbox';
9
+ export * from './Chip';
10
+ export * from './CircularProgress';
11
+ export * from './Code';
12
+ export * from './Divider';
13
+ export * from './Dropdown';
14
+ export * from './Image';
15
+ export * from './Input';
16
+ export * from './Kbd';
17
+ export * from './Link';
18
+ export * from './Listbox';
19
+ export * from './Modal';
20
+ export * from './Navbar';
21
+ export * from './Pagination';
22
+ export * from './Popover';
23
+ export * from './Progress';
24
+ export * from './Radio';
25
+ export * from './ScrollShadow';
26
+ export * from './Select';
27
+ export * from './Skeleton';
28
+ export * from './Slider';
29
+ export * from './Snippet';
30
+ export * from './Spacer';
31
+ export * from './Spinner';
32
+ export * from './Switch';
33
+ export * from './Tab';
34
+ export * from './Table';
35
+ export * from './Textarea';
36
+ export * from './Tooltip';
37
+ export * from './User';
@@ -0,0 +1,38 @@
1
+ export * from './Accordion';
2
+ export * from './Autocomplete';
3
+ export * from './Avatar';
4
+ export * from './Badge';
5
+ export * from './Breadcrumbs';
6
+ export * from './Button';
7
+ export * from './Card';
8
+ export * from './Checkbox';
9
+ export * from './Chip';
10
+ export * from './CircularProgress';
11
+ export * from './Code';
12
+ export * from './Divider';
13
+ export * from './Dropdown';
14
+ export * from './Image';
15
+ export * from './Input';
16
+ export * from './Kbd';
17
+ export * from './Link';
18
+ export * from './Listbox';
19
+ export * from './Modal';
20
+ export * from './Navbar';
21
+ export * from './Pagination';
22
+ export * from './Popover';
23
+ export * from './Progress';
24
+ export * from './Radio';
25
+ export * from './ScrollShadow';
26
+ export * from './Select';
27
+ export * from './Skeleton';
28
+ export * from './Slider';
29
+ export * from './Snippet';
30
+ export * from './Spacer';
31
+ export * from './Spinner';
32
+ export * from './Switch';
33
+ export * from './Tab';
34
+ export * from './Table';
35
+ export * from './Textarea';
36
+ export * from './Tooltip';
37
+ export * from './User';
38
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/base/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA"}
@@ -1,9 +1,8 @@
1
1
  /// <reference types="react" />
2
- import { InputProps } from '@nextui-org/react';
2
+ import type { InputProps } from '@nextui-org/react';
3
3
  /**
4
4
  * Primary UI component for selecting a color
5
5
  */
6
- interface ColorInputProps extends InputProps {
6
+ export interface ColorInputProps extends InputProps {
7
7
  }
8
8
  export declare const ColorInput: React.FC<ColorInputProps>;
9
- export {};
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useMemo, useState } from 'react';
3
+ import { Avatar, Input } from '../base';
4
+ import { withFragment } from '../../withFragment';
5
+ export const ColorInput = withFragment(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, ...rest }) => {
6
+ const [value, setValue] = useState(defaultValue || '#7d7d7d');
7
+ useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
8
+ const validateHexColor = (value) => value.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/i);
9
+ const invalid = useMemo(() => {
10
+ if (value === "")
11
+ return false;
12
+ return validateHexColor(value) && !isInvalid ? false : true;
13
+ }, [value, isInvalid]);
14
+ return (_jsx(Input, { ...rest, label: label, type: "text", value: value, onValueChange: setValue, isInvalid: invalid, errorMessage: invalid && errorMessage, endContent: (_jsx(Avatar, { as: "button", size: "sm", showFallback: true, fallback: _jsx("input", { type: 'color', className: "w-full h-full opacity-0 cursor-pointer", onChange: (e) => setValue(e.currentTarget.value) }), style: { backgroundColor: value }, classNames: { base: 'shrink-0', fallback: 'w-full h-full' } })) }));
15
+ }, 'colorInput');
16
+ //# sourceMappingURL=ColorInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,MAAM,UAAU,GAA8B,YAAY,CAAC,CAAC,EACjE,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GAAI,EACrI,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC3D,CACH,GACD,CACH,CAAC;AACJ,CAAC,EAAE,YAAY,CAAC,CAAC"}
@@ -12,3 +12,4 @@ export const Primary = {
12
12
  onValueChange: console.log,
13
13
  },
14
14
  };
15
+ //# sourceMappingURL=ColorInput.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorInput.stories.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qGAAqG;AACrG,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;KAC3B;CACF,CAAC"}
@@ -1,9 +1,9 @@
1
1
  /// <reference types="react" />
2
- import { AvatarProps } from '@nextui-org/react';
2
+ import type { AvatarProps } from '@nextui-org/react';
3
3
  /**
4
4
  * Primary UI component for selecting a color
5
5
  */
6
- interface ColorSelectorProps {
6
+ export interface ColorSelectorProps {
7
7
  values: string[];
8
8
  defaultValue?: string;
9
9
  onValueChange: (color: string) => void;
@@ -12,4 +12,3 @@ interface ColorSelectorProps {
12
12
  icon?: React.ReactNode;
13
13
  }
14
14
  export declare const ColorSelector: React.FC<ColorSelectorProps>;
15
- export {};
@@ -0,0 +1,10 @@
1
+ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useState } from 'react';
3
+ import { Avatar } from '../base';
4
+ import { withFragment } from '../../withFragment';
5
+ export const ColorSelector = withFragment(({ values, defaultValue, onValueChange, icon, ...rest }) => {
6
+ const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]);
7
+ useEffect(() => onValueChange(value), [value, onValueChange]);
8
+ return (_jsx("div", { className: 'flex gap-4', children: values.map((color) => (_jsx(Avatar, { as: "button", showFallback: true, fallback: value === color && icon ? icon : _jsx(_Fragment, {}), style: { backgroundColor: color }, classNames: { base: 'shrink-0' }, isBordered: value === color, onClick: () => setValue(color), ...rest }))) }));
9
+ }, 'colorSelector');
10
+ //# sourceMappingURL=ColorSelector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorSelector.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAelD,MAAM,CAAC,MAAM,aAAa,GAAiC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACjI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7G,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,YACxB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,YAAY,QACZ,QAAQ,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAK,EAChD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAChC,UAAU,EAAE,KAAK,KAAK,KAAK,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAC1B,IAAI,GACR,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC,EAAE,eAAe,CAAC,CAAC"}
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  import { ColorSelector } from "./ColorSelector";
2
3
  import { IconCheck } from "@tabler/icons-react";
3
4
  // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -20,6 +21,7 @@ export const WithIcon = {
20
21
  values: ['red', 'green', 'blue'],
21
22
  onValueChange: console.log,
22
23
  color: 'primary',
23
- icon: <IconCheck size={24} stroke={1.5}/>
24
+ icon: _jsx(IconCheck, { size: 24, stroke: 1.5 })
24
25
  },
25
26
  };
27
+ //# sourceMappingURL=ColorSelector.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorSelector.stories.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,qGAAqG;AACrG,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,GAAI;KAC3C;CACF,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from './base';
2
+ export * from './color-input/ColorInput';
3
+ export * from './color-selector/ColorSelector';
@@ -0,0 +1,4 @@
1
+ export * from './base';
2
+ export * from './color-input/ColorInput';
3
+ export * from './color-selector/ColorSelector';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC"}
@@ -0,0 +1,84 @@
1
+ /// <reference types="react" />
2
+ import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbItemProps, BreadcrumbsProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react";
3
+ import { TableRowProps } from "@nextui-org/table/dist/base/table-row";
4
+ import { ColorInputProps, ColorSelectorProps } from "./components";
5
+ export interface FragmentUIContext {
6
+ defaults: {
7
+ avatar?: Partial<AvatarProps>;
8
+ avatarGroup?: Partial<AvatarGroupProps>;
9
+ accordion?: Partial<AccordionProps>;
10
+ accordionItem?: Partial<AccordionItemProps>;
11
+ autocomplete?: Partial<AutocompleteProps>;
12
+ autocompleteItem?: Partial<AutocompleteItemProps>;
13
+ autocompleteSection?: Partial<AutocompleteSectionProps>;
14
+ badge?: Partial<BadgeProps>;
15
+ button?: Partial<ButtonProps>;
16
+ breadcrumbs?: Partial<BreadcrumbsProps>;
17
+ breadcrumbItem?: Partial<BreadcrumbItemProps>;
18
+ card?: Partial<CardProps>;
19
+ checkbox?: Partial<CheckboxProps>;
20
+ checkboxGroup?: Partial<CheckboxGroupProps>;
21
+ chip?: Partial<ChipProps>;
22
+ circularProgress?: Partial<CircularProgressProps>;
23
+ code?: Partial<CodeProps>;
24
+ colorInput?: Partial<ColorInputProps>;
25
+ colorSelector?: Partial<ColorSelectorProps>;
26
+ divider?: Partial<DividerProps>;
27
+ dropdown?: Partial<DropdownProps>;
28
+ dropdownItem?: Partial<DropdownItemProps>;
29
+ dropdownMenu?: Partial<DropdownMenuProps>;
30
+ dropdownSection?: Partial<DropdownSectionProps>;
31
+ dropdownTrigger?: Partial<DropdownTriggerProps>;
32
+ image?: Partial<ImageProps>;
33
+ input?: Partial<InputProps>;
34
+ kbd?: Partial<KbdProps>;
35
+ link?: Partial<LinkProps>;
36
+ listbox?: Partial<ListboxProps>;
37
+ listboxItem?: Partial<ListboxItemProps>;
38
+ listboxSection?: Partial<ListboxSectionProps>;
39
+ modal?: Partial<ModalProps>;
40
+ modalBody?: Partial<ModalBodyProps>;
41
+ modalContent?: Partial<ModalContentProps>;
42
+ modalFooter?: Partial<ModalFooterProps>;
43
+ modalHeader?: Partial<ModalHeaderProps>;
44
+ navbar?: Partial<NavbarProps>;
45
+ navbarBrand?: Partial<NavbarBrandProps>;
46
+ navbarContent?: Partial<NavbarContentProps>;
47
+ navbarItem?: Partial<NavbarItemProps>;
48
+ navbarMenu?: Partial<NavbarMenuProps>;
49
+ navbarMenuItem?: Partial<NavbarMenuItemProps>;
50
+ navbarMenuToggle?: Partial<NavbarMenuToggleProps>;
51
+ pagination?: Partial<PaginationProps>;
52
+ paginationItem?: Partial<PaginationItemProps>;
53
+ paginationCursor?: Partial<PaginationCursorProps>;
54
+ popover?: Partial<PopoverProps>;
55
+ popoverContent?: Partial<PopoverContentProps>;
56
+ popoverTrigger?: Partial<PopoverTriggerProps>;
57
+ progress?: Partial<ProgressProps>;
58
+ radio?: Partial<RadioProps>;
59
+ radioGroup?: Partial<RadioGroupProps>;
60
+ select?: Partial<SelectProps>;
61
+ selectItem?: Partial<SelectItemProps>;
62
+ selectSection?: Partial<SelectSectionProps>;
63
+ skeleton?: Partial<SkeletonProps>;
64
+ snippet?: Partial<SnippetProps>;
65
+ scrollShadow?: Partial<ScrollShadowProps>;
66
+ spacer?: Partial<SpacerProps>;
67
+ spinner?: Partial<SpinnerProps>;
68
+ switch?: Partial<SwitchProps>;
69
+ slider?: Partial<SliderProps>;
70
+ table?: Partial<TableProps>;
71
+ tableBody?: Partial<TableBodyProps<unknown>>;
72
+ tableCell?: Partial<TableCellProps>;
73
+ tableColumn?: Partial<TableColumnProps<unknown>>;
74
+ tableHeader?: Partial<TableHeaderProps<unknown>>;
75
+ tableRow?: Partial<TableRowProps>;
76
+ tab?: Partial<TabItemProps>;
77
+ tabs?: Partial<TabsProps>;
78
+ textArea?: Partial<TextAreaProps>;
79
+ tooltip?: Partial<TooltipProps>;
80
+ user?: Partial<UserProps>;
81
+ };
82
+ }
83
+ export declare const defaultContext: FragmentUIContext;
84
+ export declare const FragmentUIContext: import("react").Context<FragmentUIContext>;
@@ -0,0 +1,18 @@
1
+ import { createContext } from "react";
2
+ export const defaultContext = {
3
+ defaults: {
4
+ avatar: {
5
+ radius: 'full',
6
+ },
7
+ table: {
8
+ removeWrapper: true,
9
+ },
10
+ user: {
11
+ avatarProps: {
12
+ radius: 'full',
13
+ },
14
+ },
15
+ },
16
+ };
17
+ export const FragmentUIContext = createContext(defaultContext);
18
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkFtC,MAAM,CAAC,MAAM,cAAc,GAAsB;IAC/C,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,MAAM,EAAE,MAAM;SACf;QACD,KAAK,EAAE;YACL,aAAa,EAAE,IAAI;SACpB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,MAAM,EAAE,MAAM;aACf;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './shell/Shell';
2
+ export * from './sidebar/Sidebar';
@@ -0,0 +1,3 @@
1
+ export * from './shell/Shell';
2
+ export * from './sidebar/Sidebar';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/fragments/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Sidebar } from '../sidebar/Sidebar';
3
+ export const Shell = ({ sidebar, children }) => {
4
+ return (_jsxs("div", { className: `flex min-h-screen`, children: [_jsx(Sidebar, { ...sidebar }), _jsx("main", { className: "flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl", children: children })] }));
5
+ };
6
+ //# sourceMappingURL=Shell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Shell.js","sourceRoot":"","sources":["../../../src/fragments/shell/Shell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAW3D,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,OAAO,CACL,eAAK,SAAS,EAAE,mBAAmB,aACjC,KAAC,OAAO,OAAK,OAAO,GAAI,EACxB,eAAM,SAAS,EAAC,sDAAsD,YACnE,QAAQ,GACJ,IACH,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,129 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { IconBox, IconBoxMultiple, IconHome, IconMessageCircle, } from "@tabler/icons-react";
3
+ import { Shell } from "./Shell";
4
+ import { Card, CardBody, Divider, Input, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tab, Tabs } from "../../components/base";
5
+ // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
6
+ const meta = {
7
+ title: "components/Shell",
8
+ component: Shell,
9
+ tags: ["autodocs"],
10
+ parameters: {
11
+ layout: "fullscreen",
12
+ },
13
+ };
14
+ export default meta;
15
+ // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
16
+ export const Primary = {
17
+ args: {
18
+ sidebar: {
19
+ items: [
20
+ {
21
+ type: "user",
22
+ key: "user",
23
+ name: "Tony Reichert",
24
+ description: "ACME Inc.",
25
+ avatar: {
26
+ src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
27
+ },
28
+ dropdownItems: [
29
+ {
30
+ label: "My Profile",
31
+ },
32
+ {
33
+ label: "Settings",
34
+ },
35
+ {
36
+ label: "Organization Settings",
37
+ showDivider: true,
38
+ },
39
+ {
40
+ label: "Logout",
41
+ color: "danger",
42
+ },
43
+ ],
44
+ },
45
+ {
46
+ type: "custom",
47
+ key: "search",
48
+ render: _jsx(Input, { label: "Search..." }),
49
+ },
50
+ {
51
+ type: "navigation",
52
+ key: "navigation-overview",
53
+ label: "Overview",
54
+ navigation: [
55
+ {
56
+ label: "Home",
57
+ link: "/",
58
+ icon: _jsx(IconHome, { stroke: 1.5 }),
59
+ },
60
+ {
61
+ label: "My Projects",
62
+ link: "/projects",
63
+ icon: _jsx(IconBoxMultiple, { stroke: 1.5 }),
64
+ },
65
+ {
66
+ label: "Chat",
67
+ link: "/chat",
68
+ icon: _jsx(IconMessageCircle, { stroke: 1.5 }),
69
+ },
70
+ ],
71
+ },
72
+ {
73
+ type: "navigation",
74
+ key: "navigation-projects",
75
+ label: "Projects",
76
+ navigation: [
77
+ {
78
+ label: "Project 1",
79
+ link: "/projects/1",
80
+ icon: _jsx(IconBox, { stroke: 1.5 }),
81
+ },
82
+ {
83
+ label: "Project 2",
84
+ link: "/projects/2",
85
+ icon: _jsx(IconBox, { stroke: 1.5 }),
86
+ },
87
+ {
88
+ label: "Project 3",
89
+ link: "/projects/3",
90
+ icon: _jsx(IconBox, { stroke: 1.5 }),
91
+ },
92
+ ],
93
+ },
94
+ {
95
+ type: "custom",
96
+ key: "bottom-banner",
97
+ render: (_jsx(Card, { radius: "lg", className: "border-none", children: _jsx("img", { alt: "Woman listing to music", className: "object-cover w-full", height: 200, src: "https://nextui.org/images/hero-card.jpeg", width: 200 }) })),
98
+ align: "bottom",
99
+ },
100
+ ],
101
+ },
102
+ children: "CONTENT",
103
+ },
104
+ };
105
+ export const Collapsed = {
106
+ args: {
107
+ ...Primary.args,
108
+ sidebar: Primary.args?.sidebar ? {
109
+ ...Primary.args.sidebar,
110
+ layout: "collapsed",
111
+ } : undefined,
112
+ },
113
+ };
114
+ export const Auto = {
115
+ args: {
116
+ ...Primary.args,
117
+ sidebar: Primary.args?.sidebar ? {
118
+ ...Primary.args.sidebar,
119
+ autoLayout: true,
120
+ } : undefined,
121
+ },
122
+ };
123
+ export const WithTable = {
124
+ args: {
125
+ ...Primary.args,
126
+ children: (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Customers" }), _jsx("p", { className: "mt-2 text-foreground-500", children: "Blablabla" }), _jsx(Divider, { className: "my-4" }), _jsxs(Tabs, { "aria-label": "Options", children: [_jsx(Tab, { title: "Table", children: _jsxs(Table, { "aria-label": "Example static collection table", selectionMode: "multiple", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "NAME" }), _jsx(TableColumn, { children: "ROLE" }), _jsx(TableColumn, { children: "STATUS" })] }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: "Tony Reichert" }), _jsx(TableCell, { children: "CEO" }), _jsx(TableCell, { children: "Active" })] }, "1"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Zoey Lang" }), _jsx(TableCell, { children: "Technical Lead" }), _jsx(TableCell, { children: "Paused" })] }, "2"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Jane Fisher" }), _jsx(TableCell, { children: "Senior Developer" }), _jsx(TableCell, { children: "Active" })] }, "3"), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "William Howard" }), _jsx(TableCell, { children: "Community Manager" }), _jsx(TableCell, { children: "Vacation" })] }, "4")] })] }) }, "table"), _jsx(Tab, { title: "Music", children: _jsx(Card, { children: _jsx(CardBody, { children: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }) }) }, "music"), _jsx(Tab, { title: "Videos", children: _jsx(Card, { children: _jsx(CardBody, { children: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }) }) }, "videos")] })] })),
127
+ },
128
+ };
129
+ //# sourceMappingURL=Shell.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Shell.stories.js","sourceRoot":"","sources":["../../../src/fragments/shell/Shell.stories.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { AvatarProps, DropdownItemProps, DropdownProps, ListboxProps } from '@nextui-org/react';
2
+ import type { AvatarProps, DropdownItemProps, DropdownProps, ListboxProps } from '@nextui-org/react';
3
3
  /**
4
4
  * Primary UI component for Dashboard Sidebars
5
5
  */
@@ -9,6 +9,7 @@ interface SidebarNavigationItem {
9
9
  onClick?: React.MouseEventHandler;
10
10
  icon?: React.ReactNode;
11
11
  endContent?: React.ReactNode;
12
+ badgeContent?: React.ReactNode;
12
13
  items?: SidebarItemVariants[];
13
14
  }
14
15
  interface SidebarItem {