@overmap-ai/blocks 1.0.31-minimize-size.6 → 1.0.31-tailwind-components.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 (221) hide show
  1. package/README.md +3 -3
  2. package/dist/AlertDialog/Content.d.ts +7 -0
  3. package/dist/AlertDialog/Provider.d.ts +2 -0
  4. package/dist/AlertDialog/context.d.ts +5 -0
  5. package/dist/AlertDialog/cva.d.ts +4 -0
  6. package/dist/AlertDialog/hooks.d.ts +1 -0
  7. package/dist/AlertDialog/index.d.ts +14 -0
  8. package/dist/AlertDialog/typings.d.ts +19 -0
  9. package/dist/Avatar/Fallback.d.ts +5 -0
  10. package/dist/Avatar/Image.d.ts +5 -0
  11. package/dist/Avatar/Root.d.ts +7 -0
  12. package/dist/Avatar/context.d.ts +7 -0
  13. package/dist/Avatar/cva.d.ts +6 -0
  14. package/dist/Avatar/index.d.ts +9 -0
  15. package/dist/Avatar/typings.d.ts +12 -0
  16. package/dist/Badge/Badge.d.ts +6 -6
  17. package/dist/Badge/cva.d.ts +5 -0
  18. package/dist/Badge/index.d.ts +1 -0
  19. package/dist/Badge/typings.d.ts +12 -7
  20. package/dist/ButtonGroup/ButtonGroup.d.ts +9 -7
  21. package/dist/ButtonGroup/context.d.ts +9 -4
  22. package/dist/ButtonGroup/index.d.ts +1 -2
  23. package/dist/Buttons/Button.d.ts +6 -4
  24. package/dist/Buttons/IconButton.d.ts +5 -7
  25. package/dist/Buttons/cva.d.ts +5 -0
  26. package/dist/Buttons/index.d.ts +4 -4
  27. package/dist/Buttons/typings.d.ts +11 -24
  28. package/dist/Checkbox/Indicator.d.ts +5 -0
  29. package/dist/Checkbox/Root.d.ts +7 -0
  30. package/dist/Checkbox/cva.d.ts +4 -0
  31. package/dist/Checkbox/index.d.ts +7 -3
  32. package/dist/Checkbox/typings.d.ts +11 -15
  33. package/dist/CollapsibleTree/context.d.ts +1 -4
  34. package/dist/CollapsibleTree/typings.d.ts +3 -16
  35. package/dist/Dialog/Content.d.ts +11 -0
  36. package/dist/Dialog/Root.d.ts +2 -0
  37. package/dist/Dialog/context.d.ts +3 -0
  38. package/dist/Dialog/hooks.d.ts +1 -0
  39. package/dist/Dialog/index.d.ts +11 -0
  40. package/dist/Dialog/typings.d.ts +17 -0
  41. package/dist/HoverCard/Arrow.d.ts +5 -0
  42. package/dist/HoverCard/Content.d.ts +8 -0
  43. package/dist/HoverCard/cva.d.ts +3 -0
  44. package/dist/HoverCard/index.d.ts +10 -0
  45. package/dist/HoverCard/typings.d.ts +10 -0
  46. package/dist/HoverUtility/HoverUtility.d.ts +1 -0
  47. package/dist/Input/Field.d.ts +4 -0
  48. package/dist/Input/Root.d.ts +6 -0
  49. package/dist/Input/Slot.d.ts +4 -0
  50. package/dist/Input/context.d.ts +8 -0
  51. package/dist/Input/cva.d.ts +12 -0
  52. package/dist/Input/index.d.ts +9 -2
  53. package/dist/Input/typings.d.ts +10 -12
  54. package/dist/Layout/Container.d.ts +3 -4
  55. package/dist/Layout/SlideOutOverlay.d.ts +2 -3
  56. package/dist/Layout/index.d.ts +3 -3
  57. package/dist/OvermapMenu/ClickTrigger/index.d.ts +1 -1
  58. package/dist/OvermapMenu/Content/Content.d.ts +1 -1
  59. package/dist/OvermapMenu/Content/context.d.ts +7 -1
  60. package/dist/OvermapMenu/Input/Field.d.ts +3 -0
  61. package/dist/OvermapMenu/Input/Root.d.ts +4 -0
  62. package/dist/OvermapMenu/Input/Slot.d.ts +5 -0
  63. package/dist/OvermapMenu/Input/index.d.ts +3 -1
  64. package/dist/OvermapMenu/Pages/index.d.ts +1 -1
  65. package/dist/OvermapMenu/SelectAll/SelectAllIndicator.d.ts +6 -0
  66. package/dist/OvermapMenu/SelectAll/SelectAllItem.d.ts +3 -0
  67. package/dist/OvermapMenu/SelectAll/context.d.ts +6 -0
  68. package/dist/OvermapMenu/SelectAll/index.d.ts +2 -0
  69. package/dist/OvermapMenu/SelectedIndicator/index.d.ts +1 -1
  70. package/dist/OvermapMenu/Separator/Separator.d.ts +1 -1
  71. package/dist/OvermapMenu/Sub/context.d.ts +1 -1
  72. package/dist/OvermapMenu/Sub/index.d.ts +1 -1
  73. package/dist/OvermapMenu/SubTrigger/index.d.ts +1 -1
  74. package/dist/OvermapMenu/cva.d.ts +20 -0
  75. package/dist/OvermapMenu/root/context.d.ts +1 -4
  76. package/dist/OvermapMenu/root/index.d.ts +1 -1
  77. package/dist/OvermapMenu/typings.d.ts +30 -20
  78. package/dist/Popover/Arrow.d.ts +5 -0
  79. package/dist/Popover/Content.d.ts +8 -0
  80. package/dist/Popover/cva.d.ts +3 -0
  81. package/dist/Popover/index.d.ts +19 -2
  82. package/dist/Popover/typings.d.ts +8 -17
  83. package/dist/Provider/Provider.d.ts +8 -0
  84. package/dist/Provider/context.d.ts +8 -0
  85. package/dist/Provider/index.d.ts +3 -0
  86. package/dist/Provider/typings.d.ts +1 -0
  87. package/dist/RadioGroup/Indicator.d.ts +5 -0
  88. package/dist/RadioGroup/Item.d.ts +6 -0
  89. package/dist/RadioGroup/Root.d.ts +7 -0
  90. package/dist/RadioGroup/context.d.ts +7 -0
  91. package/dist/RadioGroup/cva.d.ts +4 -0
  92. package/dist/RadioGroup/index.d.ts +9 -0
  93. package/dist/RadioGroup/typings.d.ts +10 -0
  94. package/dist/RiIcon/RiIcon.d.ts +4 -5
  95. package/dist/RiIcon/index.d.ts +0 -2
  96. package/dist/SelectContext/index.d.ts +1 -1
  97. package/dist/Separator/Separator.d.ts +8 -3
  98. package/dist/Separator/cva.d.ts +5 -0
  99. package/dist/Separator/index.d.ts +0 -1
  100. package/dist/Separator/typings.d.ts +11 -19
  101. package/dist/SlideOut/SlideOutV2.d.ts +1 -3
  102. package/dist/TextArea/TextArea.d.ts +6 -7
  103. package/dist/TextArea/cva.d.ts +5 -0
  104. package/dist/TextArea/typings.d.ts +13 -15
  105. package/dist/Toast/cva.d.ts +4 -0
  106. package/dist/Toast/typings.d.ts +13 -10
  107. package/dist/ToggleButton/BaseToggleButton.d.ts +3 -0
  108. package/dist/ToggleButton/IconToggleButton.d.ts +3 -0
  109. package/dist/ToggleButton/ToggleButton.d.ts +2 -7
  110. package/dist/ToggleButton/cva.d.ts +5 -0
  111. package/dist/ToggleButton/index.d.ts +2 -0
  112. package/dist/ToggleButton/typings.d.ts +18 -0
  113. package/dist/Tooltip/Arrow.d.ts +5 -0
  114. package/dist/Tooltip/Content.d.ts +8 -0
  115. package/dist/Tooltip/cva.d.ts +4 -0
  116. package/dist/Tooltip/index.d.ts +11 -1
  117. package/dist/Tooltip/typings.d.ts +10 -0
  118. package/dist/blocks.js +3089 -4024
  119. package/dist/blocks.js.map +1 -1
  120. package/dist/blocks.umd.cjs +3358 -19
  121. package/dist/blocks.umd.cjs.map +1 -1
  122. package/dist/constants.d.ts +1 -2
  123. package/dist/cva/floating.d.ts +6 -0
  124. package/dist/cva/index.d.ts +2 -0
  125. package/dist/cva/radius.d.ts +4 -0
  126. package/dist/index.d.ts +17 -35
  127. package/dist/typings.d.ts +3 -3
  128. package/dist/utils.d.ts +2 -27
  129. package/package.json +66 -42
  130. package/dist/Breadcrumb/Breadcrumb.d.ts +0 -27
  131. package/dist/Breadcrumb/context.d.ts +0 -10
  132. package/dist/Breadcrumb/index.d.ts +0 -2
  133. package/dist/ButtonGroup/ButtonList.d.ts +0 -25
  134. package/dist/ButtonGroup/typings.d.ts +0 -37
  135. package/dist/Buttons/constants.d.ts +0 -9
  136. package/dist/Checkbox/Checkbox.d.ts +0 -3
  137. package/dist/Checkbox/SelectAllCheckbox.d.ts +0 -3
  138. package/dist/ConfirmEditInput/ConfirmEditInput.d.ts +0 -3
  139. package/dist/ConfirmEditInput/index.d.ts +0 -2
  140. package/dist/ConfirmEditInput/typings.d.ts +0 -15
  141. package/dist/Dialogs/AlertDialog/AlertDialog.d.ts +0 -11
  142. package/dist/Dialogs/AlertDialog/AlertDialogContent.d.ts +0 -4
  143. package/dist/Dialogs/AlertDialog/context.d.ts +0 -8
  144. package/dist/Dialogs/AlertDialog/hooks.d.ts +0 -7
  145. package/dist/Dialogs/AlertDialog/index.d.ts +0 -3
  146. package/dist/Dialogs/AlertDialog/typings.d.ts +0 -49
  147. package/dist/Dialogs/BaseDialog/BaseDialog.d.ts +0 -3
  148. package/dist/Dialogs/BaseDialog/index.d.ts +0 -2
  149. package/dist/Dialogs/BaseDialog/typings.d.ts +0 -31
  150. package/dist/Dialogs/Dialog/Dialog.d.ts +0 -7
  151. package/dist/Dialogs/Dialog/DialogContent.d.ts +0 -3
  152. package/dist/Dialogs/Dialog/index.d.ts +0 -3
  153. package/dist/Dialogs/Dialog/typings.d.ts +0 -40
  154. package/dist/Dialogs/Dialog/utils.d.ts +0 -7
  155. package/dist/Dialogs/Overlay/Overlay.d.ts +0 -7
  156. package/dist/Dialogs/Overlay/index.d.ts +0 -1
  157. package/dist/Dialogs/index.d.ts +0 -4
  158. package/dist/Dialogs/typings.d.ts +0 -7
  159. package/dist/DownloadButtonUtility/DownloadButtonUtility.d.ts +0 -7
  160. package/dist/DownloadButtonUtility/index.d.ts +0 -1
  161. package/dist/Flex/Flex.d.ts +0 -17
  162. package/dist/Flex/index.d.ts +0 -1
  163. package/dist/IconColorUtility/IconColorUtility.d.ts +0 -17
  164. package/dist/IconColorUtility/index.d.ts +0 -1
  165. package/dist/Input/Input.d.ts +0 -3
  166. package/dist/ItemStack/Group.d.ts +0 -9
  167. package/dist/ItemStack/Item.d.ts +0 -4
  168. package/dist/LeftAndRightPanels/LeftAndRightPanels.d.ts +0 -34
  169. package/dist/LeftAndRightPanels/index.d.ts +0 -1
  170. package/dist/MultiPagePopover/MultiPagePopover.d.ts +0 -3
  171. package/dist/MultiPagePopover/index.d.ts +0 -1
  172. package/dist/MultiPagePopover/typings.d.ts +0 -21
  173. package/dist/MultiSelect/MultiSelect.d.ts +0 -28
  174. package/dist/MultiSelect/MultiSelectItem.d.ts +0 -14
  175. package/dist/MultiSelect/index.d.ts +0 -1
  176. package/dist/OvermapDropdownMenu/DropdownMenu.d.ts +0 -8
  177. package/dist/OvermapDropdownMenu/index.d.ts +0 -1
  178. package/dist/OvermapDropdownMultiSelect/DropdownMultiSelect.d.ts +0 -8
  179. package/dist/OvermapDropdownMultiSelect/index.d.ts +0 -1
  180. package/dist/OvermapDropdownSelect/DropdownSelect.d.ts +0 -8
  181. package/dist/OvermapDropdownSelect/index.d.ts +0 -1
  182. package/dist/OvermapInputItem/OvermapInputItem.d.ts +0 -6
  183. package/dist/OvermapInputItem/index.d.ts +0 -2
  184. package/dist/OvermapInputItem/typings.d.ts +0 -4
  185. package/dist/OvermapItem/OvermapItem.d.ts +0 -5
  186. package/dist/OvermapItem/constants.d.ts +0 -2
  187. package/dist/OvermapItem/index.d.ts +0 -2
  188. package/dist/OvermapItem/typings.d.ts +0 -24
  189. package/dist/OvermapItemGroup/OvermapItemGroup.d.ts +0 -3
  190. package/dist/OvermapItemGroup/context.d.ts +0 -9
  191. package/dist/OvermapItemGroup/index.d.ts +0 -3
  192. package/dist/OvermapItemGroup/typings.d.ts +0 -6
  193. package/dist/OvermapMenu/Input/Input.d.ts +0 -3
  194. package/dist/OvermapMenu/Scroll/Scroll.d.ts +0 -2
  195. package/dist/OvermapMenu/Scroll/index.d.ts +0 -1
  196. package/dist/OvermapMenu/index.d.ts +0 -29
  197. package/dist/Popover/Popover.d.ts +0 -3
  198. package/dist/RiIcon/constants.d.ts +0 -134
  199. package/dist/RiIcon/typings.d.ts +0 -2
  200. package/dist/Select/Select.d.ts +0 -3
  201. package/dist/Select/index.d.ts +0 -2
  202. package/dist/Select/typings.d.ts +0 -22
  203. package/dist/Sidebar/Sidebar.d.ts +0 -30
  204. package/dist/Sidebar/index.d.ts +0 -1
  205. package/dist/Switch/Switch.d.ts +0 -7
  206. package/dist/Switch/index.d.ts +0 -2
  207. package/dist/Switch/typings.d.ts +0 -13
  208. package/dist/Table/Table.d.ts +0 -3
  209. package/dist/Table/index.d.ts +0 -2
  210. package/dist/Table/typings.d.ts +0 -70
  211. package/dist/Text/Text.d.ts +0 -24
  212. package/dist/Text/index.d.ts +0 -1
  213. package/dist/Theme/DefaultTheme.d.ts +0 -4
  214. package/dist/Theme/index.d.ts +0 -2
  215. package/dist/ToggleGroup/ToggleGroup.d.ts +0 -7
  216. package/dist/ToggleGroup/index.d.ts +0 -2
  217. package/dist/ToggleGroup/typings.d.ts +0 -7
  218. package/dist/Toolbar/Toolbar.d.ts +0 -23
  219. package/dist/Toolbar/index.d.ts +0 -1
  220. package/dist/Tooltip/Tooltip.d.ts +0 -6
  221. package/dist/style.css +0 -1
@@ -1,2 +1 @@
1
- import { Size } from "./typings";
2
- export declare const SizeMapping: Record<Size, "1" | "2" | "3">;
1
+ export declare const DEFAULT_ICON_SIZE = "15px";
@@ -0,0 +1,6 @@
1
+ import { VariantProps } from "class-variance-authority";
2
+ export declare const floating: (props?: ({
3
+ shadow?: "1" | "2" | "3" | "4" | "5" | null | undefined;
4
+ side?: "left" | "right" | "bottom" | "top" | null | undefined;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
+ export type FloatingStyleProps = VariantProps<typeof floating>;
@@ -0,0 +1,2 @@
1
+ export * from "./floating";
2
+ export * from "./radius";
@@ -0,0 +1,4 @@
1
+ export declare const radiusCva: (props?: ({
2
+ maxLarge?: boolean | null | undefined;
3
+ radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
4
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
package/dist/index.d.ts CHANGED
@@ -1,46 +1,28 @@
1
+ export * from "./AlertDialog";
2
+ export * from "./Avatar";
1
3
  export * from "./Badge";
2
- export * from "./Breadcrumb";
3
- export * from "./Buttons";
4
4
  export * from "./ButtonGroup";
5
- export * from "./Dialogs";
6
- export * from "./Flex";
5
+ export * from "./Buttons";
6
+ export * from "./Checkbox";
7
7
  export * from "./CollapsibleTree";
8
- export * from "./DownloadButtonUtility";
8
+ export * from "./Dialog";
9
+ export * from "./HoverCard";
9
10
  export * from "./HoverUtility";
10
- export * from "./Select";
11
- export * from "./MultiSelect";
12
- export * from "./Switch";
13
- export * from "./Sidebar";
11
+ export * from "./Input";
14
12
  export * from "./Layout";
13
+ export * from "./OvermapErrorBoundary";
14
+ export * from "./OvermapMenu";
15
+ export * from "./Popover";
16
+ export * from "./Provider";
17
+ export * from "./RadioGroup";
18
+ export * from "./RiIcon";
19
+ export * from "./Separator";
15
20
  export * from "./SlideOut";
16
21
  export * from "./SlideOutV3";
17
- export * from "./Input";
18
- export * from "./ItemStack";
19
- export * from "./IconColorUtility";
20
- export * from "./Popover";
21
- export * from "./LeftAndRightPanels";
22
- export * from "./MultiPagePopover";
22
+ export * from "./Spinner";
23
23
  export * from "./TextArea";
24
- export * from "./ToggleGroup";
25
- export * from "./Toolbar";
26
24
  export * from "./Toast";
27
- export * from "./Tooltip";
28
25
  export * from "./ToggleButton";
29
- export * from "./Text";
30
- export * from "./RiIcon";
31
- export * from "./Theme";
32
- export * from "./Separator";
33
- export * from "./OvermapErrorBoundary";
34
- export * from "./OvermapItem";
35
- export * from "./OvermapItemGroup";
36
- export * from "./OvermapInputItem";
37
- export * from "./OvermapMenu";
38
- export * from "./OvermapDropdownMenu";
39
- export * from "./OvermapDropdownSelect";
40
- export * from "./OvermapDropdownMultiSelect";
41
- export { useSeverityColor, useViewportSize, useKeyboardShortcut, useStopEventPropagation, useTextFilter, splitTextForEllipsisAndExpansion, useSize, } from "./utils";
42
- export * from "./Checkbox";
43
- export * from "./Table";
44
- export * from "./Spinner";
45
- export * from "./ConfirmEditInput";
26
+ export * from "./Tooltip";
46
27
  export * from "./typings";
28
+ export { splitTextForEllipsisAndExpansion, useSize, useStopEventPropagation, useTextFilter, useViewportSize, } from "./utils";
package/dist/typings.d.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  import { CSSProperties } from "react";
2
- export type Size = "small" | "medium" | "large";
3
- export type Severity = "primary" | "success" | "danger" | "warning" | "info";
4
- export type Variant = "solid" | "soft" | "outline" | "ghost" | "surface";
5
2
  export type PropsWithClassNameAndStyle = {
6
3
  className?: string;
7
4
  style?: CSSProperties;
@@ -10,3 +7,6 @@ export type ViewportSizes = "initial" | "xs" | "sm" | "md" | "lg" | "xl";
10
7
  /** Type used to create a mapping from ViewportSizes to the desired value type T. Used to make values responsive and
11
8
  * dynamic when the viewport size changes. */
12
9
  export type OvermapResponsive<T> = Partial<Record<ViewportSizes, T>> | T;
10
+ export interface AccentColorProps {
11
+ accentColor?: string;
12
+ }
package/dist/utils.d.ts CHANGED
@@ -1,15 +1,5 @@
1
- import { Responsive, ThemeOptions } from "@radix-ui/themes";
2
- import { ReactNode, ReactElement, SetStateAction, Dispatch, RefObject } from "react";
3
- import { OvermapResponsive, Severity, ViewportSizes } from "./typings";
4
- /**
5
- * Returns an object with mapped key values or a single mapped value
6
- * @param value an object or string
7
- * @param mapping a Record mapping the object values of param value
8
- */
9
- export declare function useResponsiveMapping<T extends string, K>(value: Responsive<T> | undefined, mapping: Record<T, K>): Responsive<K> | undefined;
10
- export type AccentColor = ThemeOptions["accentColor"];
11
- /** Performs theme-sensitive mapping of a severity to radix color */
12
- export declare const useSeverityColor: (severity?: Severity) => AccentColor | undefined;
1
+ import { Dispatch, RefObject, SetStateAction } from "react";
2
+ import { OvermapResponsive, ViewportSizes } from "./typings";
13
3
  export interface ViewportSize {
14
4
  size: ViewportSizes;
15
5
  prevSize: ViewportSizes;
@@ -21,18 +11,6 @@ export interface ViewportSize {
21
11
  }
22
12
  /** Return value needs to be deconstructed since the object returned is not memoized */
23
13
  export declare const useViewportSize: () => ViewportSize;
24
- /** custom hook for executing a callback based on a set of keys representing a keyboard shortcut
25
- * @param shortcutKeys an array of strings representing keyboard keys
26
- * @param disable a boolean value indicating whether the keyboard shortcut is disabled or not
27
- * @param callback a callback to be run whenever all keys in shortcutKeys are being pressed
28
- * @return allKeysPressed a boolean value indicating if all keys in shortcutKeys are currently being pressed
29
- * */
30
- export declare const useKeyboardShortcut: (shortcutKeys: string[], disable: boolean, callback: () => void) => boolean;
31
- /** utility for removing number or string types after applying React.Children. React.Children method tacks on types
32
- * number and string which causes type errors when calling clone element on the result of React.Children. therefore this
33
- * function acts as a type stripper to remove any children of type string or number (which if using this function, are most
34
- * likely unwanted children). */
35
- export declare const childrenToArray: (children: ReactNode) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
36
14
  /** utility used for stopping Event propagation.
37
15
  * @return stopPropagation a callback that calls stopPropagation on a general event */
38
16
  export declare const useStopEventPropagation: () => (event: Event) => void;
@@ -49,9 +27,6 @@ export declare const useSize: (target: RefObject<HTMLDivElement>) => DOMRectRead
49
27
  **/
50
28
  export declare const splitTextForEllipsisAndExpansion: (text: string, numChars: number) => string[];
51
29
  export declare const genericMemo: <T>(component: T) => T;
52
- export type AllOrNone<T> = T | {
53
- [K in keyof T]?: never;
54
- };
55
30
  /** Custom hook used to activate an OvermapResponsive value, which is simply a mapping from the different viewport sizes,
56
31
  * those being "initial", "xs", "sm", "md", "lg", "xl", to a desired value type.
57
32
  * @param value an OvermapResponsive value.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@overmap-ai/blocks",
3
- "version": "1.0.31-minimize-size.6",
3
+ "version": "1.0.31-tailwind-components.0",
4
4
  "description": "A collection of React components for building Overmap's UI.",
5
5
  "private": false,
6
6
  "author": "Wôrdn Inc.",
@@ -19,49 +19,68 @@
19
19
  "prepare": "husky install",
20
20
  "build-storybook": "storybook build"
21
21
  },
22
- "dependencies": {
23
- "@emotion/react": "^11.11.1",
22
+ "dependencies": {},
23
+ "peerDependencies": {
24
24
  "@floating-ui/react": "^0.26.16",
25
- "@radix-ui/colors": "^3.0.0",
26
- "@radix-ui/react-accordion": "^1.1.2",
25
+ "@radix-ui/react-alert-dialog": "^1.1.5",
26
+ "@radix-ui/react-avatar": "^1.1.2",
27
+ "@radix-ui/react-checkbox": "^1.1.3",
27
28
  "@radix-ui/react-collapsible": "^1.0.3",
28
- "@radix-ui/react-context-menu": "^2.1.5",
29
29
  "@radix-ui/react-dialog": "^1.0.5",
30
- "@radix-ui/react-dismissable-layer": "^1.0.5",
31
- "@radix-ui/react-dropdown-menu": "^2.0.6",
32
- "@radix-ui/react-icons": "^1.3.0",
33
- "@radix-ui/react-menu": "^2.0.6",
30
+ "@radix-ui/react-dismissable-layer": "^1.1.4",
31
+ "@radix-ui/react-hover-card": "^1.1.5",
32
+ "@radix-ui/react-popover": "^1.1.5",
33
+ "@radix-ui/react-radio-group": "^1.2.2",
34
+ "@radix-ui/react-separator": "^1.1.1",
34
35
  "@radix-ui/react-slot": "^1.0.2",
35
36
  "@radix-ui/react-toast": "^1.1.5",
36
37
  "@radix-ui/react-toggle": "^1.0.3",
37
- "@radix-ui/react-toggle-group": "^1.0.4",
38
- "@radix-ui/react-toolbar": "^1.0.4",
39
- "@radix-ui/themes": "^2.0.0",
40
- "@react-hook/resize-observer": "^1.2.6",
41
- "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.4.0/react-icons-all-files-5.4.0.tgz",
42
- "@table-library/react-table-library": "^4.1.7",
43
- "re-resizable": "^6.9.11",
44
- "react-device-detect": "^2.2.3",
38
+ "@radix-ui/react-tooltip": "^1.1.7",
39
+ "@react-hook/resize-observer": "^2.0.2",
40
+ "class-variance-authority": "^0.7.1",
41
+ "re-resizable": "^6.10.3",
42
+ "react": "^18.2.0",
43
+ "react-dom": "^18.2.0",
45
44
  "react-error-boundary": "^4.0.13",
45
+ "react-icons": "^5.2.1",
46
46
  "react-responsive": "^9.0.2",
47
- "react-transition-group": "^4.4.5"
48
- },
49
- "peerDependencies": {
50
- "react": "^18.2.0",
51
- "react-dom": "^18.2.0"
47
+ "react-transition-group": "^4.4.5",
48
+ "tailwind-scrollbar": "^3.1.0",
49
+ "tailwindcss": "4.0.0",
50
+ "tailwindcss-animate": "^1.0.7"
52
51
  },
53
52
  "devDependencies": {
54
53
  "@faker-js/faker": "^8.3.1",
54
+ "@floating-ui/react": "^0.26.16",
55
+ "@radix-ui/colors": "^3.0.0",
56
+ "@radix-ui/react-alert-dialog": "^1.1.5",
57
+ "@radix-ui/react-avatar": "^1.1.2",
58
+ "@radix-ui/react-checkbox": "^1.1.3",
59
+ "@radix-ui/react-collapsible": "^1.0.3",
60
+ "@radix-ui/react-dialog": "^1.0.5",
61
+ "@radix-ui/react-dismissable-layer": "^1.1.4",
62
+ "@radix-ui/react-hover-card": "^1.1.5",
63
+ "@radix-ui/react-popover": "^1.1.5",
64
+ "@radix-ui/react-radio-group": "^1.2.2",
65
+ "@radix-ui/react-separator": "^1.1.1",
66
+ "@radix-ui/react-slot": "^1.0.2",
67
+ "@radix-ui/react-toast": "^1.1.5",
68
+ "@radix-ui/react-toggle": "^1.0.3",
69
+ "@radix-ui/react-toggle-group": "^1.1.1",
70
+ "@radix-ui/react-tooltip": "^1.1.7",
71
+ "@react-hook/resize-observer": "^2.0.2",
55
72
  "@rollup/plugin-commonjs": "^25.0.7",
56
- "@storybook/addon-a11y": "^7.4.5",
57
- "@storybook/addon-essentials": "^7.4.3",
58
- "@storybook/addon-interactions": "^7.4.3",
59
- "@storybook/addon-links": "^7.4.3",
60
- "@storybook/blocks": "^7.4.3",
61
- "@storybook/react": "^7.4.3",
62
- "@storybook/react-vite": "^7.4.3",
63
- "@storybook/testing-library": "^0.2.1",
64
- "@storybook/types": "^7.4.6",
73
+ "@storybook/addon-a11y": "^8.5.1",
74
+ "@storybook/addon-docs": "^8.5.2",
75
+ "@storybook/addon-essentials": "^8.5.1",
76
+ "@storybook/addon-interactions": "^8.5.1",
77
+ "@storybook/addon-links": "^8.5.1",
78
+ "@storybook/addon-themes": "^8.5.1",
79
+ "@storybook/blocks": "^8.5.1",
80
+ "@storybook/react": "^8.5.1",
81
+ "@storybook/react-vite": "^8.5.1",
82
+ "@storybook/types": "^8.5.1",
83
+ "@tailwindcss/vite": "4.0.0",
65
84
  "@types/node": "^20.8.10",
66
85
  "@types/react": "^18.2.15",
67
86
  "@types/react-dom": "^18.2.7",
@@ -71,26 +90,34 @@
71
90
  "@typescript-eslint/eslint-plugin": "^6.0.0",
72
91
  "@typescript-eslint/parser": "^6.0.0",
73
92
  "@vitejs/plugin-react-swc": "^3.3.2",
74
- "classnames": "^2.3.2",
93
+ "class-variance-authority": "^0.7.1",
75
94
  "eslint": "^8.45.0",
76
95
  "eslint-config-prettier": "^9.0.0",
77
96
  "eslint-plugin-prettier": "^5.0.0",
78
97
  "eslint-plugin-react": "^7.33.2",
79
98
  "eslint-plugin-react-hooks": "^4.6.0",
80
99
  "eslint-plugin-react-refresh": "^0.4.3",
81
- "eslint-plugin-storybook": "^0.6.13",
100
+ "eslint-plugin-simple-import-sort": "^12.1.1",
101
+ "eslint-plugin-storybook": "^0.11.2",
82
102
  "feather-icons-react": "^0.7.0",
83
103
  "husky": "^8.0.3",
84
104
  "lint-staged": "^14.0.1",
85
105
  "prettier": "^3.0.3",
106
+ "re-resizable": "^6.10.3",
86
107
  "react": "^18.2.0",
87
108
  "react-dom": "^18.2.0",
88
- "remark-gfm": "3.0.0",
109
+ "react-error-boundary": "^4.0.13",
110
+ "react-icons": "^5.2.1",
111
+ "react-responsive": "^9.0.2",
112
+ "react-transition-group": "^4.4.5",
113
+ "remark-gfm": "^4.0.0",
89
114
  "rollup-plugin-polyfill-node": "^0.12.0",
90
- "sass": "^1.68.0",
91
- "storybook": "^7.4.3",
115
+ "storybook": "^8.5.1",
116
+ "tailwind-scrollbar": "^3.1.0",
117
+ "tailwindcss": "4.0.0",
118
+ "tailwindcss-animate": "^1.0.7",
92
119
  "typescript": "^5.0.2",
93
- "vite": "^4.4.5",
120
+ "vite": "^5.4.0",
94
121
  "vite-plugin-dts": "^3.5.3",
95
122
  "vite-plugin-externalize-deps": "^0.7.0"
96
123
  },
@@ -104,8 +131,5 @@
104
131
  },
105
132
  "files": [
106
133
  "dist"
107
- ],
108
- "resolutions": {
109
- "jackspeak": "2.1.1"
110
- }
134
+ ]
111
135
  }
@@ -1,27 +0,0 @@
1
- import { Link } from "@radix-ui/themes";
2
- import { FlexProps } from "../Flex";
3
- import { ComponentProps, HTMLProps, ReactNode } from "react";
4
- import { Severity } from "../typings";
5
- export interface BreadcrumbItemProps extends Omit<HTMLProps<HTMLAnchorElement>, "size" | "ref" | "color"> {
6
- }
7
- export declare const Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLAnchorElement>>>;
8
- export interface BreadcrumbGroupProps extends Omit<HTMLProps<HTMLDivElement>, "height" | "width" | "wrap" | "ref" | "size"> {
9
- children: ReactNode;
10
- /** The separator used in between Breadcrumb items*/
11
- separator: ReactNode;
12
- /** The severity of the items in the Breadcrumb
13
- * @default "info"
14
- * */
15
- severity?: Severity;
16
- /** The text size of the items in the Breadcrumb */
17
- size?: ComponentProps<typeof Link>["size"];
18
- /** The gap between Breadcrumb items
19
- * @default "2"
20
- * */
21
- gap?: FlexProps["gap"];
22
- }
23
- export declare const Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
24
- export declare const Breadcrumb: {
25
- Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
26
- Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLAnchorElement>>>;
27
- };
@@ -1,10 +0,0 @@
1
- import type { Severity } from "../typings.ts";
2
- import { ComponentProps } from "react";
3
- import { Link } from "@radix-ui/themes";
4
- interface IBreadcrumbContext {
5
- severity: Severity;
6
- size: ComponentProps<typeof Link>["size"];
7
- }
8
- export declare const BreadcrumbContext: import("react").Context<IBreadcrumbContext>;
9
- export declare const useBreadcrumbContext: () => IBreadcrumbContext;
10
- export {};
@@ -1,2 +0,0 @@
1
- export { Breadcrumb } from "./Breadcrumb";
2
- export type { BreadcrumbGroupProps, BreadcrumbItemProps } from "./Breadcrumb";
@@ -1,25 +0,0 @@
1
- import { FC, ReactNode } from "react";
2
- import { ButtonGroupProps } from ".";
3
- import { ButtonProps } from "../Buttons/typings";
4
- import { Size } from "..";
5
- import { Responsive } from "@radix-ui/themes";
6
- interface ButtonListRootProps extends Pick<ButtonGroupProps, "size" | "variant" | "children"> {
7
- /** @default "medium" */
8
- size?: Responsive<Exclude<Size, "large">>;
9
- /** @default outline */
10
- variant?: Exclude<ButtonGroupProps["variant"], "solid">;
11
- /** Content to display before the list but within the card */
12
- before?: ReactNode;
13
- /** Content to display after the list but within the card */
14
- after?: ReactNode;
15
- className?: string;
16
- }
17
- /** A specialized version of `ButtonGroup` for vertical list of block-like buttons. */
18
- export declare const ButtonListRoot: FC<ButtonListRootProps>;
19
- interface ButtonListItemProps extends Omit<ButtonProps, "size" | "variant" | "severity" | "fluid"> {
20
- }
21
- export declare const ButtonList: {
22
- Root: FC<ButtonListRootProps>;
23
- Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ButtonListItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>>;
24
- };
25
- export {};
@@ -1,37 +0,0 @@
1
- import { Flex, MarginProps, Responsive } from "@radix-ui/themes";
2
- import { ComponentProps } from "react";
3
- import { Severity, Size, Variant } from "../typings";
4
- import { ButtonHoverEffect } from "../Buttons";
5
- export interface ButtonGroupProps extends Omit<ComponentProps<typeof Flex>, keyof MarginProps | "size" | "direction" | "asChild"> {
6
- /** The direction in which the Buttons within the ButtonGroup are stacked
7
- * @default row
8
- * */
9
- direction?: "column" | "row";
10
- /** The size of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
11
- * @default medium
12
- * */
13
- size?: Responsive<Size>;
14
- /** The variant of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
15
- * @default solid
16
- * */
17
- variant?: Variant;
18
- /** The severity of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup
19
- * @default primary
20
- * */
21
- severity?: Severity;
22
- /** The hover effects of the ButtonGroup, will be applied to all Buttons contained within the ButtonGroup */
23
- hoverEffects?: ButtonHoverEffect[];
24
- /** When merged the internal borders of the Buttons within the ButtonGroup will be flush with one another,
25
- * will overwrite gap prop if one is passed in
26
- * @default false
27
- * */
28
- merged?: boolean;
29
- /** When set to true, all Buttons will fill as much space as possible within the ButtonGroup
30
- * @default false
31
- * */
32
- fluid?: boolean;
33
- /** When set to true, all Buttons will have higher contrast
34
- * @default false
35
- * */
36
- highContrast?: boolean;
37
- }
@@ -1,9 +0,0 @@
1
- import { ButtonHoverEffect } from "./typings";
2
- import { KeyboardEvent } from "react";
3
- export declare const hoverEffectClassNameMapping: Record<ButtonHoverEffect, string | undefined>;
4
- /** Passing this to a `div` will make it behave like a `button`. However, it will **NOT** support the disabled state. */
5
- export declare const divButtonProps: {
6
- role: string;
7
- tabIndex: number;
8
- onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
9
- };
@@ -1,3 +0,0 @@
1
- import { FC } from "react";
2
- import { CheckboxProps } from "./typings";
3
- export declare const Checkbox: FC<CheckboxProps>;
@@ -1,3 +0,0 @@
1
- import { FC } from "react";
2
- import { SelectAllCheckboxProps } from "./typings";
3
- export declare const SelectAllCheckbox: FC<SelectAllCheckboxProps>;
@@ -1,3 +0,0 @@
1
- import { FC } from "react";
2
- import { ConfirmEditInputProps } from "./typings";
3
- export declare const ConfirmEditInput: FC<ConfirmEditInputProps>;
@@ -1,2 +0,0 @@
1
- export * from "./ConfirmEditInput";
2
- export * from "./typings";
@@ -1,15 +0,0 @@
1
- import { InputProps } from "../Input";
2
- import { ButtonProps } from "../Buttons/typings";
3
- import { ChangeEvent } from "react";
4
- export interface ConfirmEditInputProps extends InputProps {
5
- onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
6
- onEditActivate?: (text: string | undefined) => void;
7
- onEditConfirm?: (text: string | undefined) => void;
8
- onEditCancel?: (text: string | undefined) => void;
9
- textClassName?: string;
10
- inputClassName?: string;
11
- iconClassName?: string;
12
- mode?: "buttons" | "keys";
13
- buttonVariant?: ButtonProps["variant"];
14
- buttonAlwaysVisible?: boolean;
15
- }
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { AlertDialogProps } from "./typings";
3
- /**
4
- * The AlertDialog is used to confirm an action or prompt the user for a decision.
5
- * Unlike the Dialog, the AlertDialog is not dismissible by clicking outside of the dialog, nor can it be nested.
6
- *
7
- * To use, place the `AlertDialogProvider` at the root of your app and use the `useAlertDialog` hook to open the dialog.
8
- *
9
- * To set the content of the dialog, use the `content` prop or pass values for the `title`, `description`, and `onAction` props.
10
- */
11
- export declare const AlertDialog: import("react").NamedExoticComponent<AlertDialogProps>;
@@ -1,4 +0,0 @@
1
- import { AlertDialog } from "@radix-ui/themes";
2
- import { AlertDialogStandardContent } from "./typings";
3
- export declare const Title: typeof AlertDialog.Title;
4
- export declare const AlertDialogContent: (props: AlertDialogStandardContent) => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { AlertDialogContextType } from "./typings";
3
- interface AlertDialogProviderProps {
4
- children: React.ReactNode;
5
- }
6
- export declare const AlertDialogContent: import("react").Context<AlertDialogContextType>;
7
- export declare const AlertDialogProvider: import("react").NamedExoticComponent<AlertDialogProviderProps>;
8
- export {};
@@ -1,7 +0,0 @@
1
- export declare const useAlertDialog: () => import("./typings").AlertDialogContextType;
2
- interface useDiscardAlertDialogProps {
3
- onDiscard: () => void;
4
- onCancel?: () => void;
5
- }
6
- export declare const useDiscardAlertDialog: () => (props: useDiscardAlertDialogProps) => void;
7
- export {};
@@ -1,3 +0,0 @@
1
- export * from "./AlertDialog";
2
- export * from "./hooks";
3
- export * from "./context";
@@ -1,49 +0,0 @@
1
- import { AlertDialog } from "@radix-ui/themes";
2
- import { ReactNode } from "react";
3
- import { CloseDialog } from "../typings";
4
- import { Severity } from "../../typings.ts";
5
- interface AlertDialogBaseProps {
6
- open: boolean;
7
- setOpen: (open: boolean) => void;
8
- children?: ReactNode;
9
- }
10
- export interface AlertDialogStandardContent {
11
- /** The title of the Dialog. Should be only a few words. For example: "Delete users" */
12
- title: string;
13
- /** The description of the Dialog. Should be longer than the title and explain the consequences of the action. */
14
- description: string;
15
- /** Callback when the action button is clicked */
16
- onAction: () => void;
17
- /** Callback when the cancel button is clicked */
18
- onCancel?: CloseDialog;
19
- /** Textual content of the action button
20
- * @default Confirm
21
- */
22
- actionText?: ReactNode;
23
- /** Textual content of the cancel button
24
- * @default Cancel
25
- */
26
- cancelText?: ReactNode;
27
- /**
28
- * The severity (color) of the action button.
29
- * @default primary
30
- */
31
- severity?: Exclude<Severity, "info">;
32
- }
33
- export interface AlertDialogContentHelpers {
34
- /** Closes the dialog */
35
- close: CloseDialog;
36
- /** Specify the title of the alert. Required for accessability. */
37
- Title: typeof AlertDialog.Title;
38
- /** Specify the description of the alert. Required for accessability. */
39
- Description: typeof AlertDialog.Description;
40
- }
41
- export interface AlertDialogCustomContent {
42
- /** Custom alert content. Be sure to use the provided `Title` and `Description`
43
- * components to maintain the dialog accessability support */
44
- content: (helpers: AlertDialogContentHelpers) => ReactNode;
45
- }
46
- export type AlertDialogOptions = AlertDialogStandardContent | AlertDialogCustomContent;
47
- export type AlertDialogProps = AlertDialogBaseProps & AlertDialogOptions;
48
- export type AlertDialogContextType = (options: AlertDialogOptions) => void;
49
- export {};
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { BaseDialogProps } from "./typings";
3
- export declare const BaseDialog: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BaseDialogProps & import("react").RefAttributes<HTMLDivElement>>>;
@@ -1,2 +0,0 @@
1
- export * from "./BaseDialog";
2
- export * from "./typings";
@@ -1,31 +0,0 @@
1
- import { CSSProperties, ReactElement, ReactNode } from "react";
2
- import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
3
- import { CloseDialog, CloseDialogWithOptions } from "../typings";
4
- export interface BaseDialogProps {
5
- /** The content to be displayed within the Overlay. A prop pattern with a passed close function that can be used to
6
- * close the Overlay from the components rendering the content. pass {force: true} to the close function to avoid
7
- * the onInterruptClose process when using in an uncontrolled state. NOTE: when controlling the open state of the overlay,
8
- * the close function will have no effect on the open state of the Overlay */
9
- content: (close: CloseDialogWithOptions) => ReactNode;
10
- /** the element that should act as a trigger for opening the Overlay */
11
- children?: ReactElement;
12
- /** the initial open state of the Overlay */
13
- defaultOpen?: RadixDialogPrimitive.DialogProps["defaultOpen"];
14
- /** callback that is fired upon closing of the Overlay calls the close function to continue the closing process.
15
- * If the close function is not called, the Overlay will not be closed */
16
- onInterruptClose?: (close: CloseDialog) => void;
17
- /** callback fired when the Overlay is being closed, if onInterruptClose is specified, it fires if the closing process
18
- * is continued by calling the close function within the callback passed to onInterruptClose.
19
- * */
20
- onClose?: () => void;
21
- open?: boolean;
22
- onOpenChange?: (open: boolean) => void;
23
- className?: string;
24
- style?: CSSProperties;
25
- /** when true, renders an unstyled overlay filling the Overlays parent container */
26
- overlay?: boolean;
27
- /** className to be applied to the overlay component */
28
- overlayClass?: string;
29
- /** style object to be applied to the overlay component */
30
- overlayStyle?: CSSProperties;
31
- }
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { DialogProps } from "./typings";
3
- /**
4
- * Display or collect information in a modal. Unlike the `AlertDialog`, the `Dialog`'s can be nested
5
- * and close when clicking outside of the dialog content.
6
- */
7
- export declare const Dialog: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { DialogContentProps } from "./typings";
3
- export declare const DialogContent: import("react").NamedExoticComponent<DialogContentProps>;
@@ -1,3 +0,0 @@
1
- export * from "./Dialog";
2
- export * from "./utils";
3
- export * from "./typings";