@phsa.tec/design-system-react 0.1.6 → 0.1.9

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 (217) hide show
  1. package/README.md +390 -209
  2. package/dist/index.d.mts +485 -0
  3. package/dist/index.d.ts +485 -0
  4. package/dist/index.js +4259 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +4186 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/dist/styles.css +2534 -0
  9. package/dist/styles.css.map +1 -0
  10. package/dist/styles.d.mts +2 -0
  11. package/dist/styles.d.ts +2 -0
  12. package/package.json +46 -6
  13. package/.eslintrc.json +0 -7
  14. package/.github/workflows/deploy-storybook.yml +0 -75
  15. package/.storybook/main.ts +0 -16
  16. package/.storybook/preview.ts +0 -15
  17. package/components.json +0 -21
  18. package/jest.config.ts +0 -25
  19. package/next.config.ts +0 -7
  20. package/postcss.config.mjs +0 -8
  21. package/public/file.svg +0 -1
  22. package/public/globe.svg +0 -1
  23. package/public/next.svg +0 -1
  24. package/public/vercel.svg +0 -1
  25. package/public/window.svg +0 -1
  26. package/src/app/columns.tsx +0 -178
  27. package/src/app/favicon.ico +0 -0
  28. package/src/app/fonts/GeistMonoVF.woff +0 -0
  29. package/src/app/fonts/GeistVF.woff +0 -0
  30. package/src/app/globals.css +0 -94
  31. package/src/app/layout.tsx +0 -35
  32. package/src/app/page.tsx +0 -7
  33. package/src/components/actions/AlertDialog/AlertDialog.tsx +0 -45
  34. package/src/components/actions/AlertDialog/alert-dialog.stories.tsx +0 -21
  35. package/src/components/actions/AlertDialog/index.ts +0 -1
  36. package/src/components/actions/Button/Button.stories.ts +0 -38
  37. package/src/components/actions/Button/Button.tsx +0 -23
  38. package/src/components/actions/Button/index.ts +0 -1
  39. package/src/components/actions/Collapsible/index.ts +0 -1
  40. package/src/components/actions/Dialog/Dialog.stories.tsx +0 -70
  41. package/src/components/actions/Dialog/Dialog.tsx +0 -87
  42. package/src/components/actions/Dialog/components/DialogWithActions/index.tsx +0 -40
  43. package/src/components/actions/Dialog/index.ts +0 -1
  44. package/src/components/actions/Steps/Steps.stories.tsx +0 -25
  45. package/src/components/actions/Steps/Steps.tsx +0 -51
  46. package/src/components/actions/Steps/index.ts +0 -1
  47. package/src/components/actions/index.ts +0 -5
  48. package/src/components/dataDisplay/Avatar/Avatar.stories.tsx +0 -22
  49. package/src/components/dataDisplay/Avatar/Avatar.tsx +0 -21
  50. package/src/components/dataDisplay/Avatar/index.ts +0 -2
  51. package/src/components/dataDisplay/Badge/Badge.stories.tsx +0 -36
  52. package/src/components/dataDisplay/Badge/index.ts +0 -1
  53. package/src/components/dataDisplay/Card/Card.stories.tsx +0 -24
  54. package/src/components/dataDisplay/Card/Card.tsx +0 -34
  55. package/src/components/dataDisplay/Card/index.ts +0 -1
  56. package/src/components/dataDisplay/DataPairList/DataPairList.tsx +0 -56
  57. package/src/components/dataDisplay/DataPairList/data-pair-list.stories.tsx +0 -87
  58. package/src/components/dataDisplay/DataPairList/index.ts +0 -2
  59. package/src/components/dataDisplay/DataPairList/types.ts +0 -10
  60. package/src/components/dataDisplay/DropDownMenu/index.ts +0 -1
  61. package/src/components/dataDisplay/ErrorMessage/ErrorMessage.tsx +0 -6
  62. package/src/components/dataDisplay/ErrorMessage/index.ts +0 -1
  63. package/src/components/dataDisplay/Icon/Icon.stories.tsx +0 -21
  64. package/src/components/dataDisplay/Icon/Icon.tsx +0 -47
  65. package/src/components/dataDisplay/Icon/index.ts +0 -1
  66. package/src/components/dataDisplay/Icon/types.ts +0 -6
  67. package/src/components/dataDisplay/Label/Label.stories.tsx +0 -21
  68. package/src/components/dataDisplay/Label/Label.tsx +0 -10
  69. package/src/components/dataDisplay/Label/index.ts +0 -1
  70. package/src/components/dataDisplay/Table/Table.tsx +0 -173
  71. package/src/components/dataDisplay/Table/columns.tsx +0 -223
  72. package/src/components/dataDisplay/Table/components/DynamicTable/data-table-column-header.tsx +0 -72
  73. package/src/components/dataDisplay/Table/components/DynamicTable/data-table-pagination.tsx +0 -91
  74. package/src/components/dataDisplay/Table/components/DynamicTable/data-table-toolbar.tsx +0 -17
  75. package/src/components/dataDisplay/Table/components/DynamicTable/data-table-view-options.tsx +0 -58
  76. package/src/components/dataDisplay/Table/components/DynamicTable/data-table.stories.tsx +0 -118
  77. package/src/components/dataDisplay/Table/components/DynamicTable/index.tsx +0 -136
  78. package/src/components/dataDisplay/Table/components/DynamicTable/types.ts +0 -43
  79. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-column-header.tsx +0 -71
  80. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-faceted-filter.tsx +0 -147
  81. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-pagination.tsx +0 -97
  82. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-row-actions.tsx +0 -78
  83. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-toolbar.tsx +0 -60
  84. package/src/components/dataDisplay/Table/custom/CustomTable/data-table-view-options.tsx +0 -59
  85. package/src/components/dataDisplay/Table/custom/CustomTable/data-table.tsx +0 -145
  86. package/src/components/dataDisplay/Table/custom/CustomTable/data.ts +0 -71
  87. package/src/components/dataDisplay/Table/custom/CustomTable/index.tsx +0 -34
  88. package/src/components/dataDisplay/Table/custom/CustomTable/schema.ts +0 -11
  89. package/src/components/dataDisplay/Table/index.ts +0 -2
  90. package/src/components/dataDisplay/Table/table.stories.tsx +0 -147
  91. package/src/components/dataDisplay/Table/types.ts +0 -15
  92. package/src/components/dataDisplay/Tabs/Tabs.stories.tsx +0 -34
  93. package/src/components/dataDisplay/Tabs/Tabs.tsx +0 -53
  94. package/src/components/dataDisplay/Tabs/index.ts +0 -1
  95. package/src/components/dataDisplay/Text/Text.stories.tsx +0 -66
  96. package/src/components/dataDisplay/Text/Text.tsx +0 -56
  97. package/src/components/dataDisplay/Text/index.ts +0 -1
  98. package/src/components/dataDisplay/index.ts +0 -8
  99. package/src/components/dataInput/Input/components/Input/Input.stories.tsx +0 -99
  100. package/src/components/dataInput/Input/components/Input/InputBase.tsx +0 -50
  101. package/src/components/dataInput/Input/components/Input/__tests__/input.test.tsx +0 -38
  102. package/src/components/dataInput/Input/components/Input/index.tsx +0 -48
  103. package/src/components/dataInput/Input/components/Input/types.ts +0 -15
  104. package/src/components/dataInput/Input/components/InputBase/index.tsx +0 -31
  105. package/src/components/dataInput/Input/components/MaskInput/__tests__/mask-input.test.tsx +0 -77
  106. package/src/components/dataInput/Input/components/MaskInput/index.ts +0 -1
  107. package/src/components/dataInput/Input/components/MaskInput/mask-input.stories.tsx +0 -85
  108. package/src/components/dataInput/Input/components/MaskInput/mask-input.tsx +0 -73
  109. package/src/components/dataInput/Input/components/MultipleInput/MultipleInput.tsx +0 -105
  110. package/src/components/dataInput/Input/components/MultipleInput/MultipleInputBase.tsx +0 -100
  111. package/src/components/dataInput/Input/components/MultipleInput/MultipleMaskInput.tsx +0 -35
  112. package/src/components/dataInput/Input/components/MultipleInput/MultipleNumberInput.tsx +0 -35
  113. package/src/components/dataInput/Input/components/MultipleInput/__tests__/multiple-input.test.tsx +0 -152
  114. package/src/components/dataInput/Input/components/MultipleInput/index.ts +0 -2
  115. package/src/components/dataInput/Input/components/MultipleInput/multiple-input.stories.tsx +0 -96
  116. package/src/components/dataInput/Input/components/NumberInput/__tests__/number-input.test.tsx +0 -175
  117. package/src/components/dataInput/Input/components/NumberInput/index.ts +0 -1
  118. package/src/components/dataInput/Input/components/NumberInput/number-input.stories.tsx +0 -76
  119. package/src/components/dataInput/Input/components/NumberInput/number-input.tsx +0 -70
  120. package/src/components/dataInput/Input/index.ts +0 -4
  121. package/src/components/dataInput/Select/MultiSelect/MultiSelect.stories.tsx +0 -119
  122. package/src/components/dataInput/Select/MultiSelect/MultiSelectBase.tsx +0 -135
  123. package/src/components/dataInput/Select/MultiSelect/index.tsx +0 -75
  124. package/src/components/dataInput/Select/Select.stories.tsx +0 -61
  125. package/src/components/dataInput/Select/Select.tsx +0 -73
  126. package/src/components/dataInput/Select/SelectBase.tsx +0 -58
  127. package/src/components/dataInput/Select/index.ts +0 -2
  128. package/src/components/dataInput/Switch/Switch.stories.tsx +0 -75
  129. package/src/components/dataInput/Switch/Switch.tsx +0 -52
  130. package/src/components/dataInput/Switch/index.ts +0 -1
  131. package/src/components/dataInput/checkbox/Checkbox.tsx +0 -57
  132. package/src/components/dataInput/checkbox/Checkbox_old.tsx +0 -58
  133. package/src/components/dataInput/checkbox/Checkout.stories.tsx +0 -62
  134. package/src/components/dataInput/checkbox/index.ts +0 -1
  135. package/src/components/dataInput/form/Form.tsx +0 -47
  136. package/src/components/dataInput/form/index.ts +0 -3
  137. package/src/components/dataInput/index.ts +0 -5
  138. package/src/components/feedback/ErrorLabel/index.tsx +0 -24
  139. package/src/components/feedback/Spinner/index.ts +0 -1
  140. package/src/components/feedback/Toast/Toast.stories.tsx +0 -45
  141. package/src/components/feedback/Toast/index.ts +0 -2
  142. package/src/components/feedback/index.ts +0 -2
  143. package/src/components/index.ts +0 -6
  144. package/src/components/layout/Crud/components/Table/index.tsx +0 -183
  145. package/src/components/layout/Crud/components/Table/types.ts +0 -15
  146. package/src/components/layout/Crud/crud.stories.tsx +0 -317
  147. package/src/components/layout/Crud/hook/useCrudLayout/index.tsx +0 -94
  148. package/src/components/layout/Crud/hook/useRequest/index.tsx +0 -156
  149. package/src/components/layout/Crud/index.tsx +0 -295
  150. package/src/components/layout/Crud/store/CrudLayoutStore.ts +0 -75
  151. package/src/components/layout/Crud/types.ts +0 -14
  152. package/src/components/layout/Drawer/CustomDrawer/index.tsx +0 -33
  153. package/src/components/layout/Drawer/Drawer.stories.tsx +0 -80
  154. package/src/components/layout/Drawer/index.ts +0 -2
  155. package/src/components/layout/PageLayout/PageLayout.stories.tsx +0 -42
  156. package/src/components/layout/PageLayout/index.tsx +0 -28
  157. package/src/components/layout/Separator/index.ts +0 -1
  158. package/src/components/layout/Sheet/Sheet.stories.tsx +0 -28
  159. package/src/components/layout/Sheet/Sheet.tsx +0 -22
  160. package/src/components/layout/Sheet/index.ts +0 -1
  161. package/src/components/layout/Sidebar/Sidebar.stories.tsx +0 -116
  162. package/src/components/layout/Sidebar/Sidebar.tsx +0 -50
  163. package/src/components/layout/Sidebar/components/app-sidebar.tsx +0 -203
  164. package/src/components/layout/Sidebar/components/footer-sidebar.tsx +0 -17
  165. package/src/components/layout/Sidebar/components/header-sidebar.tsx +0 -90
  166. package/src/components/layout/Sidebar/components/menus.tsx +0 -55
  167. package/src/components/layout/Sidebar/components/nav-projects.tsx +0 -88
  168. package/src/components/layout/Sidebar/components/nav-user.tsx +0 -114
  169. package/src/components/layout/Sidebar/components/team-switcher.tsx +0 -85
  170. package/src/components/layout/Sidebar/index.ts +0 -2
  171. package/src/components/layout/Sidebar/provider/index.tsx +0 -51
  172. package/src/components/layout/Tabs/Tabs.tsx +0 -51
  173. package/src/components/layout/Tabs/index.ts +0 -1
  174. package/src/components/layout/Tabs/tabs.stories.tsx +0 -57
  175. package/src/components/layout/index.ts +0 -6
  176. package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx +0 -66
  177. package/src/components/navigation/Breadcrumbs/index.ts +0 -2
  178. package/src/components/navigation/index.ts +0 -1
  179. package/src/components/ui/alert-dialog.tsx +0 -141
  180. package/src/components/ui/alert.tsx +0 -59
  181. package/src/components/ui/avatar.tsx +0 -50
  182. package/src/components/ui/badge.tsx +0 -40
  183. package/src/components/ui/breadcrumb.tsx +0 -115
  184. package/src/components/ui/button.tsx +0 -57
  185. package/src/components/ui/card.tsx +0 -83
  186. package/src/components/ui/checkbox.tsx +0 -34
  187. package/src/components/ui/collapsible.tsx +0 -11
  188. package/src/components/ui/command.tsx +0 -153
  189. package/src/components/ui/dialog.tsx +0 -124
  190. package/src/components/ui/drawer.tsx +0 -117
  191. package/src/components/ui/dropdown-menu.tsx +0 -201
  192. package/src/components/ui/form.tsx +0 -179
  193. package/src/components/ui/input.tsx +0 -24
  194. package/src/components/ui/label.tsx +0 -30
  195. package/src/components/ui/popover.tsx +0 -33
  196. package/src/components/ui/select.tsx +0 -161
  197. package/src/components/ui/separator.tsx +0 -31
  198. package/src/components/ui/sheet.tsx +0 -140
  199. package/src/components/ui/sidebar.tsx +0 -763
  200. package/src/components/ui/skeleton.tsx +0 -15
  201. package/src/components/ui/sonner.tsx +0 -31
  202. package/src/components/ui/spinner.tsx +0 -54
  203. package/src/components/ui/switch.tsx +0 -33
  204. package/src/components/ui/table.tsx +0 -120
  205. package/src/components/ui/tabs.tsx +0 -55
  206. package/src/components/ui/toast.tsx +0 -130
  207. package/src/components/ui/toaster.tsx +0 -35
  208. package/src/components/ui/tooltip.tsx +0 -32
  209. package/src/hooks/use-conditional-controller.tsx +0 -35
  210. package/src/hooks/use-mask.tsx +0 -116
  211. package/src/hooks/use-mobile.tsx +0 -19
  212. package/src/hooks/use-toast.ts +0 -191
  213. package/src/index.ts +0 -1
  214. package/src/introduction.mdx +0 -132
  215. package/src/lib/utils.ts +0 -6
  216. package/tailwind.config.ts +0 -83
  217. package/tsconfig.json +0 -27
@@ -1,161 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as SelectPrimitive from "@radix-ui/react-select";
5
- import { Check, ChevronDown, ChevronUp } from "lucide-react";
6
-
7
- import { cn } from "../../lib/utils";
8
-
9
- export type SelectProps = SelectPrimitive.SelectProps;
10
-
11
- const Select = SelectPrimitive.Root;
12
-
13
- const SelectGroup = SelectPrimitive.Group;
14
-
15
- const SelectValue = SelectPrimitive.Value;
16
-
17
- const SelectTrigger = React.forwardRef<
18
- React.ElementRef<typeof SelectPrimitive.Trigger>,
19
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
20
- >(({ className, children, ...props }, ref) => (
21
- <SelectPrimitive.Trigger
22
- ref={ref}
23
- className={cn(
24
- "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
25
- className
26
- )}
27
- {...props}
28
- >
29
- {children}
30
- <SelectPrimitive.Icon asChild>
31
- <ChevronDown className="h-4 w-4 opacity-50" />
32
- </SelectPrimitive.Icon>
33
- </SelectPrimitive.Trigger>
34
- ));
35
- SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
36
-
37
- const SelectScrollUpButton = React.forwardRef<
38
- React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
39
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
40
- >(({ className, ...props }, ref) => (
41
- <SelectPrimitive.ScrollUpButton
42
- ref={ref}
43
- className={cn(
44
- "flex cursor-default items-center justify-center py-1",
45
- className
46
- )}
47
- {...props}
48
- >
49
- <ChevronUp className="h-4 w-4" />
50
- </SelectPrimitive.ScrollUpButton>
51
- ));
52
- SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
53
-
54
- const SelectScrollDownButton = React.forwardRef<
55
- React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
56
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
57
- >(({ className, ...props }, ref) => (
58
- <SelectPrimitive.ScrollDownButton
59
- ref={ref}
60
- className={cn(
61
- "flex cursor-default items-center justify-center py-1",
62
- className
63
- )}
64
- {...props}
65
- >
66
- <ChevronDown className="h-4 w-4" />
67
- </SelectPrimitive.ScrollDownButton>
68
- ));
69
- SelectScrollDownButton.displayName =
70
- SelectPrimitive.ScrollDownButton.displayName;
71
-
72
- const SelectContent = React.forwardRef<
73
- React.ElementRef<typeof SelectPrimitive.Content>,
74
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
75
- >(({ className, children, position = "popper", ...props }, ref) => (
76
- <SelectPrimitive.Portal>
77
- <SelectPrimitive.Content
78
- ref={ref}
79
- className={cn(
80
- "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
81
- position === "popper" &&
82
- "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
83
- className
84
- )}
85
- position={position}
86
- {...props}
87
- >
88
- <SelectScrollUpButton />
89
- <SelectPrimitive.Viewport
90
- className={cn(
91
- "p-1",
92
- position === "popper" &&
93
- "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
94
- )}
95
- >
96
- {children}
97
- </SelectPrimitive.Viewport>
98
- <SelectScrollDownButton />
99
- </SelectPrimitive.Content>
100
- </SelectPrimitive.Portal>
101
- ));
102
- SelectContent.displayName = SelectPrimitive.Content.displayName;
103
-
104
- const SelectLabel = React.forwardRef<
105
- React.ElementRef<typeof SelectPrimitive.Label>,
106
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
107
- >(({ className, ...props }, ref) => (
108
- <SelectPrimitive.Label
109
- ref={ref}
110
- className={cn("px-2 py-1.5 text-sm font-semibold", className)}
111
- {...props}
112
- />
113
- ));
114
- SelectLabel.displayName = SelectPrimitive.Label.displayName;
115
-
116
- const SelectItem = React.forwardRef<
117
- React.ElementRef<typeof SelectPrimitive.Item>,
118
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
119
- >(({ className, children, ...props }, ref) => (
120
- <SelectPrimitive.Item
121
- ref={ref}
122
- className={cn(
123
- "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124
- className
125
- )}
126
- {...props}
127
- >
128
- <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
129
- <SelectPrimitive.ItemIndicator>
130
- <Check className="h-4 w-4" />
131
- </SelectPrimitive.ItemIndicator>
132
- </span>
133
- <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
134
- </SelectPrimitive.Item>
135
- ));
136
- SelectItem.displayName = SelectPrimitive.Item.displayName;
137
-
138
- const SelectSeparator = React.forwardRef<
139
- React.ElementRef<typeof SelectPrimitive.Separator>,
140
- React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
141
- >(({ className, ...props }, ref) => (
142
- <SelectPrimitive.Separator
143
- ref={ref}
144
- className={cn("-mx-1 my-1 h-px bg-muted", className)}
145
- {...props}
146
- />
147
- ));
148
- SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
149
-
150
- export {
151
- Select,
152
- SelectGroup,
153
- SelectValue,
154
- SelectTrigger,
155
- SelectContent,
156
- SelectLabel,
157
- SelectItem,
158
- SelectSeparator,
159
- SelectScrollUpButton,
160
- SelectScrollDownButton,
161
- };
@@ -1,31 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as SeparatorPrimitive from "@radix-ui/react-separator";
5
-
6
- import { cn } from "../../lib/utils";
7
-
8
- const Separator = React.forwardRef<
9
- React.ElementRef<typeof SeparatorPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11
- >(
12
- (
13
- { className, orientation = "horizontal", decorative = true, ...props },
14
- ref
15
- ) => (
16
- <SeparatorPrimitive.Root
17
- ref={ref}
18
- decorative={decorative}
19
- orientation={orientation}
20
- className={cn(
21
- "shrink-0 bg-border",
22
- orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23
- className
24
- )}
25
- {...props}
26
- />
27
- )
28
- );
29
- Separator.displayName = SeparatorPrimitive.Root.displayName;
30
-
31
- export { Separator };
@@ -1,140 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as SheetPrimitive from "@radix-ui/react-dialog";
5
- import { cva, type VariantProps } from "class-variance-authority";
6
- import { X } from "lucide-react";
7
-
8
- import { cn } from "../../lib/utils";
9
-
10
- const Sheet = SheetPrimitive.Root;
11
-
12
- const SheetTrigger = SheetPrimitive.Trigger;
13
-
14
- const SheetClose = SheetPrimitive.Close;
15
-
16
- const SheetPortal = SheetPrimitive.Portal;
17
-
18
- const SheetOverlay = React.forwardRef<
19
- React.ElementRef<typeof SheetPrimitive.Overlay>,
20
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
21
- >(({ className, ...props }, ref) => (
22
- <SheetPrimitive.Overlay
23
- className={cn(
24
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
25
- className
26
- )}
27
- {...props}
28
- ref={ref}
29
- />
30
- ));
31
- SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
32
-
33
- const sheetVariants = cva(
34
- "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
35
- {
36
- variants: {
37
- side: {
38
- top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39
- bottom:
40
- "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41
- left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42
- right:
43
- "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44
- },
45
- },
46
- defaultVariants: {
47
- side: "right",
48
- },
49
- }
50
- );
51
-
52
- interface SheetContentProps
53
- extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
54
- VariantProps<typeof sheetVariants> {}
55
-
56
- const SheetContent = React.forwardRef<
57
- React.ElementRef<typeof SheetPrimitive.Content>,
58
- SheetContentProps
59
- >(({ side = "right", className, children, ...props }, ref) => (
60
- <SheetPortal>
61
- <SheetOverlay />
62
- <SheetPrimitive.Content
63
- ref={ref}
64
- className={cn(sheetVariants({ side }), className)}
65
- {...props}
66
- >
67
- <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
68
- <X className="h-4 w-4" />
69
- <span className="sr-only">Close</span>
70
- </SheetPrimitive.Close>
71
- {children}
72
- </SheetPrimitive.Content>
73
- </SheetPortal>
74
- ));
75
- SheetContent.displayName = SheetPrimitive.Content.displayName;
76
-
77
- const SheetHeader = ({
78
- className,
79
- ...props
80
- }: React.HTMLAttributes<HTMLDivElement>) => (
81
- <div
82
- className={cn(
83
- "flex flex-col space-y-2 text-center sm:text-left",
84
- className
85
- )}
86
- {...props}
87
- />
88
- );
89
- SheetHeader.displayName = "SheetHeader";
90
-
91
- const SheetFooter = ({
92
- className,
93
- ...props
94
- }: React.HTMLAttributes<HTMLDivElement>) => (
95
- <div
96
- className={cn(
97
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
98
- className
99
- )}
100
- {...props}
101
- />
102
- );
103
- SheetFooter.displayName = "SheetFooter";
104
-
105
- const SheetTitle = React.forwardRef<
106
- React.ElementRef<typeof SheetPrimitive.Title>,
107
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108
- >(({ className, ...props }, ref) => (
109
- <SheetPrimitive.Title
110
- ref={ref}
111
- className={cn("text-lg font-semibold text-foreground", className)}
112
- {...props}
113
- />
114
- ));
115
- SheetTitle.displayName = SheetPrimitive.Title.displayName;
116
-
117
- const SheetDescription = React.forwardRef<
118
- React.ElementRef<typeof SheetPrimitive.Description>,
119
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120
- >(({ className, ...props }, ref) => (
121
- <SheetPrimitive.Description
122
- ref={ref}
123
- className={cn("text-sm text-muted-foreground", className)}
124
- {...props}
125
- />
126
- ));
127
- SheetDescription.displayName = SheetPrimitive.Description.displayName;
128
-
129
- export {
130
- Sheet,
131
- SheetPortal,
132
- SheetOverlay,
133
- SheetTrigger,
134
- SheetClose,
135
- SheetContent,
136
- SheetHeader,
137
- SheetFooter,
138
- SheetTitle,
139
- SheetDescription,
140
- };