@accelint/design-toolkit 2.6.0 → 4.0.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 (184) hide show
  1. package/dist/components/accordion/index.d.ts +42 -0
  2. package/dist/components/accordion/index.js.map +1 -1
  3. package/dist/components/accordion/styles.d.ts +1 -1
  4. package/dist/components/accordion/styles.js +1 -1
  5. package/dist/components/accordion/styles.js.map +1 -1
  6. package/dist/components/avatar/index.d.ts +29 -0
  7. package/dist/components/avatar/index.js.map +1 -1
  8. package/dist/components/avatar/styles.d.ts +1 -1
  9. package/dist/components/badge/index.d.ts +24 -0
  10. package/dist/components/badge/index.js.map +1 -1
  11. package/dist/components/badge/styles.d.ts +1 -1
  12. package/dist/components/button/index.d.ts +104 -0
  13. package/dist/components/button/index.js +1 -1
  14. package/dist/components/button/index.js.map +1 -1
  15. package/dist/components/button/styles.d.ts +31 -109
  16. package/dist/components/button/styles.js +1 -1
  17. package/dist/components/button/styles.js.map +1 -1
  18. package/dist/components/button/types.d.ts +6 -4
  19. package/dist/components/checkbox/index.d.ts +33 -0
  20. package/dist/components/checkbox/index.js.map +1 -1
  21. package/dist/components/checkbox/styles.d.ts +4 -4
  22. package/dist/components/checkbox/styles.js +1 -1
  23. package/dist/components/checkbox/styles.js.map +1 -1
  24. package/dist/components/chip/index.d.ts +34 -0
  25. package/dist/components/chip/index.js.map +1 -1
  26. package/dist/components/chip/styles.d.ts +4 -4
  27. package/dist/components/chip/styles.js +1 -1
  28. package/dist/components/chip/styles.js.map +1 -1
  29. package/dist/components/classification-badge/index.d.ts +15 -0
  30. package/dist/components/classification-badge/index.js.map +1 -1
  31. package/dist/components/classification-banner/index.d.ts +11 -0
  32. package/dist/components/classification-banner/index.js.map +1 -1
  33. package/dist/components/color-picker/styles.d.ts +1 -1
  34. package/dist/components/color-picker/styles.js +1 -1
  35. package/dist/components/color-picker/styles.js.map +1 -1
  36. package/dist/components/combobox-field/index.d.ts +1 -0
  37. package/dist/components/combobox-field/styles.d.ts +6 -6
  38. package/dist/components/combobox-field/styles.js +1 -1
  39. package/dist/components/combobox-field/styles.js.map +1 -1
  40. package/dist/components/combobox-field/types.d.ts +1 -0
  41. package/dist/components/date-field/index.d.ts +45 -3
  42. package/dist/components/date-field/index.js +1 -1
  43. package/dist/components/date-field/index.js.map +1 -1
  44. package/dist/components/date-field/styles.d.ts +41 -51
  45. package/dist/components/date-field/styles.js +1 -1
  46. package/dist/components/date-field/styles.js.map +1 -1
  47. package/dist/components/date-field/types.d.ts +12 -15
  48. package/dist/components/details-list/styles.d.ts +1 -1
  49. package/dist/components/dialog/index.d.ts +48 -36
  50. package/dist/components/dialog/index.js +1 -1
  51. package/dist/components/dialog/index.js.map +1 -1
  52. package/dist/components/dialog/styles.d.ts +60 -0
  53. package/dist/components/dialog/styles.js +2 -0
  54. package/dist/components/dialog/styles.js.map +1 -0
  55. package/dist/components/dialog/types.d.ts +14 -0
  56. package/dist/components/dialog/types.js +2 -0
  57. package/dist/components/dialog/types.js.map +1 -0
  58. package/dist/components/drawer/events.d.ts +8 -0
  59. package/dist/components/drawer/events.js +2 -0
  60. package/dist/components/drawer/events.js.map +1 -0
  61. package/dist/components/drawer/index.d.ts +89 -43
  62. package/dist/components/drawer/index.js +1 -1
  63. package/dist/components/drawer/index.js.map +1 -1
  64. package/dist/components/drawer/styles.d.ts +50 -16
  65. package/dist/components/drawer/styles.js +1 -1
  66. package/dist/components/drawer/styles.js.map +1 -1
  67. package/dist/components/drawer/types.d.ts +154 -238
  68. package/dist/components/drawer/types.js +1 -1
  69. package/dist/components/drawer/types.js.map +1 -1
  70. package/dist/components/hero/styles.d.ts +1 -1
  71. package/dist/components/hotkey/index.d.ts +32 -1
  72. package/dist/components/hotkey/index.js +1 -1
  73. package/dist/components/hotkey/index.js.map +1 -1
  74. package/dist/components/hotkey/styles.d.ts +1 -1
  75. package/dist/components/icon/index.d.ts +29 -0
  76. package/dist/components/icon/index.js.map +1 -1
  77. package/dist/components/icon/styles.d.ts +1 -1
  78. package/dist/components/input/index.d.ts +19 -0
  79. package/dist/components/input/index.js +1 -1
  80. package/dist/components/input/index.js.map +1 -1
  81. package/dist/components/input/styles.d.ts +1 -1
  82. package/dist/components/input/styles.js +1 -1
  83. package/dist/components/input/styles.js.map +1 -1
  84. package/dist/components/input/types.d.ts +1 -0
  85. package/dist/components/label/index.d.ts +19 -0
  86. package/dist/components/label/index.js.map +1 -1
  87. package/dist/components/label/styles.d.ts +1 -1
  88. package/dist/components/menu/index.d.ts +69 -7
  89. package/dist/components/menu/index.js +1 -1
  90. package/dist/components/menu/index.js.map +1 -1
  91. package/dist/components/menu/styles.d.ts +11 -38
  92. package/dist/components/menu/styles.js +1 -1
  93. package/dist/components/menu/styles.js.map +1 -1
  94. package/dist/components/menu/types.d.ts +11 -16
  95. package/dist/components/options/index.d.ts +41 -0
  96. package/dist/components/options/index.js.map +1 -1
  97. package/dist/components/options/styles.d.ts +6 -6
  98. package/dist/components/options/styles.js +1 -1
  99. package/dist/components/options/styles.js.map +1 -1
  100. package/dist/components/options/types.d.ts +1 -1
  101. package/dist/components/popover/index.d.ts +36 -2
  102. package/dist/components/popover/index.js +1 -1
  103. package/dist/components/popover/index.js.map +1 -1
  104. package/dist/components/popover/styles.d.ts +1 -1
  105. package/dist/components/query-builder/index.d.ts +24 -0
  106. package/dist/components/query-builder/index.js.map +1 -1
  107. package/dist/components/radio/index.d.ts +31 -0
  108. package/dist/components/radio/index.js.map +1 -1
  109. package/dist/components/radio/styles.d.ts +4 -4
  110. package/dist/components/radio/styles.js +1 -1
  111. package/dist/components/radio/styles.js.map +1 -1
  112. package/dist/components/search-field/styles.d.ts +1 -1
  113. package/dist/components/search-field/styles.js +1 -1
  114. package/dist/components/search-field/styles.js.map +1 -1
  115. package/dist/components/search-field/types.d.ts +1 -0
  116. package/dist/components/select-field/index.d.ts +44 -0
  117. package/dist/components/select-field/index.js +1 -1
  118. package/dist/components/select-field/index.js.map +1 -1
  119. package/dist/components/select-field/styles.d.ts +7 -7
  120. package/dist/components/select-field/styles.js +1 -1
  121. package/dist/components/select-field/styles.js.map +1 -1
  122. package/dist/components/select-field/types.d.ts +1 -0
  123. package/dist/components/skeleton/styles.d.ts +1 -1
  124. package/dist/components/slider/index.d.ts +15 -20
  125. package/dist/components/slider/index.js +1 -1
  126. package/dist/components/slider/index.js.map +1 -1
  127. package/dist/components/slider/styles.d.ts +84 -0
  128. package/dist/components/slider/styles.js +2 -0
  129. package/dist/components/slider/styles.js.map +1 -0
  130. package/dist/components/slider/types.d.ts +22 -0
  131. package/dist/components/slider/types.js +2 -0
  132. package/dist/components/slider/types.js.map +1 -0
  133. package/dist/components/switch/index.d.ts +36 -0
  134. package/dist/components/switch/index.js +1 -1
  135. package/dist/components/switch/index.js.map +1 -1
  136. package/dist/components/switch/styles.d.ts +24 -22
  137. package/dist/components/switch/styles.js +1 -1
  138. package/dist/components/switch/styles.js.map +1 -1
  139. package/dist/components/switch/types.d.ts +1 -0
  140. package/dist/components/tabs/index.d.ts +46 -0
  141. package/dist/components/tabs/index.js.map +1 -1
  142. package/dist/components/text-area-field/index.d.ts +20 -0
  143. package/dist/components/text-area-field/index.js.map +1 -1
  144. package/dist/components/text-area-field/styles.d.ts +7 -7
  145. package/dist/components/text-area-field/styles.js +1 -1
  146. package/dist/components/text-area-field/styles.js.map +1 -1
  147. package/dist/components/text-field/index.d.ts +62 -0
  148. package/dist/components/text-field/index.js.map +1 -1
  149. package/dist/components/text-field/styles.d.ts +7 -7
  150. package/dist/components/text-field/types.d.ts +1 -0
  151. package/dist/components/tooltip/index.d.ts +42 -0
  152. package/dist/components/tooltip/index.js +1 -1
  153. package/dist/components/tooltip/index.js.map +1 -1
  154. package/dist/components/tooltip/styles.d.ts +1 -1
  155. package/dist/components/view-stack/events.d.ts +9 -0
  156. package/dist/components/view-stack/events.js +2 -0
  157. package/dist/components/view-stack/events.js.map +1 -0
  158. package/dist/components/view-stack/index.d.ts +13 -10
  159. package/dist/components/view-stack/index.js +1 -1
  160. package/dist/components/view-stack/index.js.map +1 -1
  161. package/dist/components/view-stack/types.d.ts +13 -9
  162. package/dist/index.css +3 -3
  163. package/dist/index.d.ts +23 -19
  164. package/dist/index.js +1 -1
  165. package/dist/lib/types.d.ts +6 -2
  166. package/dist/lib/utils.d.ts +15 -5
  167. package/dist/lib/utils.js +1 -1
  168. package/dist/lib/utils.js.map +1 -1
  169. package/dist/metafile-esm.json +1 -1
  170. package/dist/styles.css +1449 -774
  171. package/dist/tokens/index.js.map +1 -1
  172. package/dist/tokens/themes.css +12 -0
  173. package/dist/tokens/tokens.css +12 -0
  174. package/dist/variants/variants.css +19 -5
  175. package/package.json +16 -9
  176. package/dist/components/box/index.d.ts +0 -19
  177. package/dist/components/box/index.js +0 -2
  178. package/dist/components/box/index.js.map +0 -1
  179. package/dist/components/drawer/context.d.ts +0 -13
  180. package/dist/components/drawer/context.js +0 -2
  181. package/dist/components/drawer/context.js.map +0 -1
  182. package/dist/components/drawer/state.d.ts +0 -26
  183. package/dist/components/drawer/state.js +0 -2
  184. package/dist/components/drawer/state.js.map +0 -1
@@ -7,6 +7,7 @@ type SwitchProps = Omit<SwitchProps$1, 'className'> & RefAttributes<HTMLLabelEle
7
7
  control?: string;
8
8
  label?: string;
9
9
  };
10
+ labelPosition?: 'start' | 'end';
10
11
  };
11
12
 
12
13
  export type { SwitchProps };
@@ -3,6 +3,52 @@ import { TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as T
3
3
 
4
4
  interface TabsProps extends TabsProps$1 {
5
5
  }
6
+ /**
7
+ * Tabs - A tab navigation component for organizing content into sections
8
+ *
9
+ * Provides accessible tab navigation with keyboard support and proper ARIA implementation.
10
+ * Supports both horizontal and vertical orientations with icon and text variants.
11
+ * Perfect for organizing related content into separate, focusable sections.
12
+ *
13
+ * @example
14
+ * // Basic horizontal tabs
15
+ * <Tabs>
16
+ * <Tabs.List>
17
+ * <Tabs.Tab id="overview">Overview</Tabs.Tab>
18
+ * <Tabs.Tab id="details">Details</Tabs.Tab>
19
+ * <Tabs.Tab id="settings">Settings</Tabs.Tab>
20
+ * </Tabs.List>
21
+ * <Tabs.Panel id="overview">Overview content</Tabs.Panel>
22
+ * <Tabs.Panel id="details">Details content</Tabs.Panel>
23
+ * <Tabs.Panel id="settings">Settings content</Tabs.Panel>
24
+ * </Tabs>
25
+ *
26
+ * @example
27
+ * // Vertical tabs
28
+ * <Tabs orientation="vertical">
29
+ * <Tabs.List>
30
+ * <Tabs.Tab id="profile">Profile</Tabs.Tab>
31
+ * <Tabs.Tab id="account">Account</Tabs.Tab>
32
+ * </Tabs.List>
33
+ * <Tabs.Panel id="profile">Profile settings</Tabs.Panel>
34
+ * <Tabs.Panel id="account">Account settings</Tabs.Panel>
35
+ * </Tabs>
36
+ *
37
+ * @example
38
+ * // Icon tabs
39
+ * <Tabs>
40
+ * <Tabs.List variant="icons">
41
+ * <Tabs.Tab id="home">
42
+ * <Icon><Home /></Icon>
43
+ * </Tabs.Tab>
44
+ * <Tabs.Tab id="search">
45
+ * <Icon><Search /></Icon>
46
+ * </Tabs.Tab>
47
+ * </Tabs.List>
48
+ * <Tabs.Panel id="home">Home content</Tabs.Panel>
49
+ * <Tabs.Panel id="search">Search content</Tabs.Panel>
50
+ * </Tabs>
51
+ */
6
52
  declare const Tabs: {
7
53
  ({ children, className, orientation, isDisabled, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
8
54
  displayName: string;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/tabs/index.tsx"],"names":["rest","p","jsx","AriaTabs","orientation","l","v","i","Tabs","b","variant","drawer","containsExactChildren","AriaTabList","cn","tabListStyles","m","children","TabList","id","T","tabStyles","isSelected","isDisabled","Tab","P","TabPanel"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { containsExactChildren } from '@/lib/react';\nimport { cn } from '@/lib/utils';\nimport 'client-only';\nimport { cva } from 'class-variance-authority';\nimport {\n Tab as AriaTab,\n TabList as AriaTabList,\n type TabListProps as AriaTabListProps,\n TabPanel as AriaTabPanel,\n type TabPanelProps as AriaTabPanelProps,\n type TabProps as AriaTabProps,\n Tabs as AriaTabs,\n type TabsProps as AriaTabsProps,\n} from 'react-aria-components';\n\nexport interface TabsProps extends AriaTabsProps {}\n\nexport const Tabs = ({\n children,\n className,\n orientation = 'horizontal',\n isDisabled = false,\n ...rest\n}: TabsProps) => {\n containsExactChildren({\n children,\n componentName: Tabs.displayName,\n restrictions: [[TabList, { min: 1, max: 1 }]],\n });\n\n return (\n <AriaTabs\n orientation={orientation}\n isDisabled={isDisabled}\n className={cn(\n 'group flex w-content flex-row orientation-horizontal:flex-col',\n className,\n )}\n {...rest}\n >\n {children}\n </AriaTabs>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport interface TabListProps extends AriaTabListProps<object> {\n /** Whether the tabs are displaying iconography or text. */\n variant?: 'default' | 'icons';\n /** Whether the tabs are used as drawer controls. */\n drawer?: 'left' | 'right' | 'top' | 'bottom';\n}\n\nconst tabListStyles = cva('flex orientation-horizontal:flex-row flex-col', {\n variants: {\n variant: {\n icons:\n '[&>*]:p-xs orientation-horizontal:[&>*]:pr-s orientation-horizontal:[&>*]:pl-s [&>*]:leading-[0]',\n default: '[&>*]:p-s [&>*]:text-header-m',\n },\n drawer: {\n left: 'orientation-vertical:gap-xs rounded-r-large bg-surface-default p-s',\n right:\n 'orientation-vertical:gap-xs rounded-l-large bg-surface-default p-s',\n top: 'orientation-vertical:gap-xs rounded-b-large bg-surface-default p-s',\n bottom:\n 'orientation-vertical:gap-xs rounded-t-large bg-surface-default p-s',\n },\n },\n});\n\nconst TabList = ({\n children,\n className,\n variant = 'default',\n drawer = undefined,\n ...rest\n}: TabListProps) => {\n containsExactChildren({\n children,\n componentName: TabList.displayName,\n restrictions: [[Tab, { min: 1 }]],\n });\n\n return (\n <AriaTabList\n className={cn(tabListStyles({ variant, drawer }), className)}\n {...rest}\n >\n {children}\n </AriaTabList>\n );\n};\n\nTabList.displayName = 'Tabs.List';\nTabs.List = TabList;\n\nconst tabBaseStyles = cn(\n 'fg-default-dark cursor-pointer p-s outline-none',\n 'rounded-medium group-orientation-horizontal:rounded-small group-orientation-horizontal:rounded-b-none',\n 'group-orientation-horizontal:border-static-light group-orientation-horizontal:border-b',\n 'group-orientation-vertical:border group-orientation-vertical:border-transparent',\n);\n\nconst tabStyles = cva(tabBaseStyles, {\n variants: {\n isSelected: {\n true: 'fg-highlight bg-highlight-subtle group-orientation-horizontal:border-highlight',\n },\n isHovered: {\n true: 'fg-default-light group-orientation-horizontal:border-interactive-hover',\n },\n isFocused: {\n true: 'fg-default-light group-orientation-horizontal:border-interactive-hover',\n },\n isDisabled: {\n true: 'fg-disabled cursor-not-allowed group-orientation-horizontal:border-interactive-disabled',\n },\n },\n compoundVariants: [\n {\n isSelected: true,\n isHovered: true,\n className: 'fg-highlight group-orientation-horizontal:border-highlight',\n },\n {\n isSelected: true,\n isFocused: true,\n className:\n 'fg-highlight group-orientation-horizontal:border-interactive-hover group-orientation-vertical:border-interactive-hover',\n },\n {\n isDisabled: true,\n isSelected: true,\n className:\n 'fg-disabled bg-interactive-disabled group-orientation-horizontal:border-interactive-disabled',\n },\n ],\n});\n\nexport interface TabProps extends AriaTabProps {}\n\nconst Tab = ({\n id,\n children,\n className,\n isDisabled = false,\n ...rest\n}: TabProps) => {\n return (\n <AriaTab\n id={id}\n className={({ isSelected, isHovered, isFocused, isDisabled }) =>\n cn(\n tabStyles({ isSelected, isHovered, isFocused, isDisabled }),\n className,\n )\n }\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </AriaTab>\n );\n};\n\nTab.displayName = 'Tabs.Tab';\nTabs.Tab = Tab;\n\nexport interface TabPanelProps extends AriaTabPanelProps {}\n\nconst TabPanel = ({ id, children, className, ...rest }: TabPanelProps) => {\n return (\n <AriaTabPanel\n id={id}\n className={cn(\n 'fg-default-light p-s group-orientation-vertical:pt-0 group-orientation-horizontal:pl-0',\n className,\n )}\n {...rest}\n >\n {children}\n </AriaTabPanel>\n );\n};\n\nTabPanel.displayName = 'Tabs.Panel';\nTabs.Panel = TabPanel;\n"]}
1
+ {"version":3,"sources":["../../../src/components/tabs/index.tsx"],"names":["rest","p","jsx","AriaTabs","orientation","l","v","i","Tabs","b","variant","drawer","containsExactChildren","AriaTabList","cn","tabListStyles","m","children","TabList","id","T","tabStyles","isSelected","isDisabled","Tab","P","TabPanel"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { containsExactChildren } from '@/lib/react';\nimport { cn } from '@/lib/utils';\nimport 'client-only';\nimport { cva } from 'class-variance-authority';\nimport {\n Tab as AriaTab,\n TabList as AriaTabList,\n type TabListProps as AriaTabListProps,\n TabPanel as AriaTabPanel,\n type TabPanelProps as AriaTabPanelProps,\n type TabProps as AriaTabProps,\n Tabs as AriaTabs,\n type TabsProps as AriaTabsProps,\n} from 'react-aria-components';\n\nexport interface TabsProps extends AriaTabsProps {}\n\n/**\n * Tabs - A tab navigation component for organizing content into sections\n *\n * Provides accessible tab navigation with keyboard support and proper ARIA implementation.\n * Supports both horizontal and vertical orientations with icon and text variants.\n * Perfect for organizing related content into separate, focusable sections.\n *\n * @example\n * // Basic horizontal tabs\n * <Tabs>\n * <Tabs.List>\n * <Tabs.Tab id=\"overview\">Overview</Tabs.Tab>\n * <Tabs.Tab id=\"details\">Details</Tabs.Tab>\n * <Tabs.Tab id=\"settings\">Settings</Tabs.Tab>\n * </Tabs.List>\n * <Tabs.Panel id=\"overview\">Overview content</Tabs.Panel>\n * <Tabs.Panel id=\"details\">Details content</Tabs.Panel>\n * <Tabs.Panel id=\"settings\">Settings content</Tabs.Panel>\n * </Tabs>\n *\n * @example\n * // Vertical tabs\n * <Tabs orientation=\"vertical\">\n * <Tabs.List>\n * <Tabs.Tab id=\"profile\">Profile</Tabs.Tab>\n * <Tabs.Tab id=\"account\">Account</Tabs.Tab>\n * </Tabs.List>\n * <Tabs.Panel id=\"profile\">Profile settings</Tabs.Panel>\n * <Tabs.Panel id=\"account\">Account settings</Tabs.Panel>\n * </Tabs>\n *\n * @example\n * // Icon tabs\n * <Tabs>\n * <Tabs.List variant=\"icons\">\n * <Tabs.Tab id=\"home\">\n * <Icon><Home /></Icon>\n * </Tabs.Tab>\n * <Tabs.Tab id=\"search\">\n * <Icon><Search /></Icon>\n * </Tabs.Tab>\n * </Tabs.List>\n * <Tabs.Panel id=\"home\">Home content</Tabs.Panel>\n * <Tabs.Panel id=\"search\">Search content</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = ({\n children,\n className,\n orientation = 'horizontal',\n isDisabled = false,\n ...rest\n}: TabsProps) => {\n containsExactChildren({\n children,\n componentName: Tabs.displayName,\n restrictions: [[TabList, { min: 1, max: 1 }]],\n });\n\n return (\n <AriaTabs\n orientation={orientation}\n isDisabled={isDisabled}\n className={cn(\n 'group flex w-content flex-row orientation-horizontal:flex-col',\n className,\n )}\n {...rest}\n >\n {children}\n </AriaTabs>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport interface TabListProps extends AriaTabListProps<object> {\n /** Whether the tabs are displaying iconography or text. */\n variant?: 'default' | 'icons';\n /** Whether the tabs are used as drawer controls. */\n drawer?: 'left' | 'right' | 'top' | 'bottom';\n}\n\nconst tabListStyles = cva('flex orientation-horizontal:flex-row flex-col', {\n variants: {\n variant: {\n icons:\n '[&>*]:p-xs orientation-horizontal:[&>*]:pr-s orientation-horizontal:[&>*]:pl-s [&>*]:leading-[0]',\n default: '[&>*]:p-s [&>*]:text-header-m',\n },\n drawer: {\n left: 'orientation-vertical:gap-xs rounded-r-large bg-surface-default p-s',\n right:\n 'orientation-vertical:gap-xs rounded-l-large bg-surface-default p-s',\n top: 'orientation-vertical:gap-xs rounded-b-large bg-surface-default p-s',\n bottom:\n 'orientation-vertical:gap-xs rounded-t-large bg-surface-default p-s',\n },\n },\n});\n\nconst TabList = ({\n children,\n className,\n variant = 'default',\n drawer = undefined,\n ...rest\n}: TabListProps) => {\n containsExactChildren({\n children,\n componentName: TabList.displayName,\n restrictions: [[Tab, { min: 1 }]],\n });\n\n return (\n <AriaTabList\n className={cn(tabListStyles({ variant, drawer }), className)}\n {...rest}\n >\n {children}\n </AriaTabList>\n );\n};\n\nTabList.displayName = 'Tabs.List';\nTabs.List = TabList;\n\nconst tabBaseStyles = cn(\n 'fg-default-dark cursor-pointer p-s outline-none',\n 'rounded-medium group-orientation-horizontal:rounded-small group-orientation-horizontal:rounded-b-none',\n 'group-orientation-horizontal:border-static-light group-orientation-horizontal:border-b',\n 'group-orientation-vertical:border group-orientation-vertical:border-transparent',\n);\n\nconst tabStyles = cva(tabBaseStyles, {\n variants: {\n isSelected: {\n true: 'fg-highlight bg-highlight-subtle group-orientation-horizontal:border-highlight',\n },\n isHovered: {\n true: 'fg-default-light group-orientation-horizontal:border-interactive-hover',\n },\n isFocused: {\n true: 'fg-default-light group-orientation-horizontal:border-interactive-hover',\n },\n isDisabled: {\n true: 'fg-disabled cursor-not-allowed group-orientation-horizontal:border-interactive-disabled',\n },\n },\n compoundVariants: [\n {\n isSelected: true,\n isHovered: true,\n className: 'fg-highlight group-orientation-horizontal:border-highlight',\n },\n {\n isSelected: true,\n isFocused: true,\n className:\n 'fg-highlight group-orientation-horizontal:border-interactive-hover group-orientation-vertical:border-interactive-hover',\n },\n {\n isDisabled: true,\n isSelected: true,\n className:\n 'fg-disabled bg-interactive-disabled group-orientation-horizontal:border-interactive-disabled',\n },\n ],\n});\n\nexport interface TabProps extends AriaTabProps {}\n\nconst Tab = ({\n id,\n children,\n className,\n isDisabled = false,\n ...rest\n}: TabProps) => {\n return (\n <AriaTab\n id={id}\n className={({ isSelected, isHovered, isFocused, isDisabled }) =>\n cn(\n tabStyles({ isSelected, isHovered, isFocused, isDisabled }),\n className,\n )\n }\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </AriaTab>\n );\n};\n\nTab.displayName = 'Tabs.Tab';\nTabs.Tab = Tab;\n\nexport interface TabPanelProps extends AriaTabPanelProps {}\n\nconst TabPanel = ({ id, children, className, ...rest }: TabPanelProps) => {\n return (\n <AriaTabPanel\n id={id}\n className={cn(\n 'fg-default-light p-s group-orientation-vertical:pt-0 group-orientation-horizontal:pl-0',\n className,\n )}\n {...rest}\n >\n {children}\n </AriaTabPanel>\n );\n};\n\nTabPanel.displayName = 'Tabs.Panel';\nTabs.Panel = TabPanel;\n"]}
@@ -9,6 +9,26 @@ declare function TextAreaFieldProvider({ children, ...props }: ProviderProps<Tex
9
9
  declare namespace TextAreaFieldProvider {
10
10
  var displayName: string;
11
11
  }
12
+ /**
13
+ * TextAreaField - A multi-line text input component with label and validation
14
+ *
15
+ * Provides a complete form field experience for longer text content with integrated
16
+ * label, description, and error message components. Handles validation states and
17
+ * accessibility automatically while supporting resizable text areas.
18
+ *
19
+ * @example
20
+ * // Basic text area field
21
+ * <TextAreaField label="Comments" />
22
+ *
23
+ * @example
24
+ * // Text area with validation
25
+ * <TextAreaField
26
+ * isInvalid={true}
27
+ * errorMessage='Message is required'
28
+ * label='Foo'
29
+ * isRequired
30
+ * />
31
+ */
12
32
  declare function TextAreaField({ ref, ...props }: TextAreaFieldProps): react_jsx_runtime.JSX.Element;
13
33
  declare namespace TextAreaField {
14
34
  var displayName: string;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/text-area-field/index.tsx"],"names":["label","input","description","TextAreaFieldContext","E","b","props","jsx","e","TextAreaFieldProvider","useContextProps","ref","M","descriptionProp","errorMessageProp","inputProps","isSmall","size","L","composeRenderProps","classNames","className","field","isInvalidProp","errorMessage","isDisabled","isInvalid","isRequired","k","V","labelProp","Label","C","Text","y","error"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n type ContextValue,\n FieldError,\n Text,\n TextArea,\n TextField,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { TextAreaStyles } from './styles';\nimport type { TextAreaFieldProps } from './types';\n\nconst { field, label, input, description, error } = TextAreaStyles();\n\nexport const TextAreaFieldContext =\n createContext<ContextValue<TextAreaFieldProps, HTMLDivElement>>(null);\n\nfunction TextAreaFieldProvider({\n children,\n ...props\n}: ProviderProps<TextAreaFieldProps>) {\n return (\n <TextAreaFieldContext.Provider value={props}>\n {children}\n </TextAreaFieldContext.Provider>\n );\n}\nTextAreaFieldProvider.displayName = 'TextAreaField.Provider';\n\nexport function TextAreaField({ ref, ...props }: TextAreaFieldProps) {\n [props, ref] = useContextProps(props, ref ?? null, TextAreaFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n label: labelProp,\n inputProps,\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <TextField\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <TextArea\n {...inputProps}\n className={composeRenderProps(classNames?.input, (className) =>\n input({ className }),\n )}\n />\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n slot='description'\n className={description({ className: classNames?.description })}\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n </>\n )}\n </TextField>\n );\n}\nTextAreaField.displayName = 'TextAreaField';\nTextAreaField.Provider = TextAreaFieldProvider;\n"]}
1
+ {"version":3,"sources":["../../../src/components/text-area-field/index.tsx"],"names":["label","input","description","TextAreaFieldContext","E","b","props","jsx","e","TextAreaFieldProvider","useContextProps","ref","M","descriptionProp","errorMessageProp","inputProps","isSmall","size","L","composeRenderProps","classNames","className","field","isInvalidProp","errorMessage","isDisabled","isInvalid","isRequired","k","V","labelProp","Label","C","Text","y","error"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n type ContextValue,\n FieldError,\n Text,\n TextArea,\n TextField,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { TextAreaStyles } from './styles';\nimport type { TextAreaFieldProps } from './types';\n\nconst { field, label, input, description, error } = TextAreaStyles();\n\nexport const TextAreaFieldContext =\n createContext<ContextValue<TextAreaFieldProps, HTMLDivElement>>(null);\n\nfunction TextAreaFieldProvider({\n children,\n ...props\n}: ProviderProps<TextAreaFieldProps>) {\n return (\n <TextAreaFieldContext.Provider value={props}>\n {children}\n </TextAreaFieldContext.Provider>\n );\n}\nTextAreaFieldProvider.displayName = 'TextAreaField.Provider';\n\n/**\n * TextAreaField - A multi-line text input component with label and validation\n *\n * Provides a complete form field experience for longer text content with integrated\n * label, description, and error message components. Handles validation states and\n * accessibility automatically while supporting resizable text areas.\n *\n * @example\n * // Basic text area field\n * <TextAreaField label=\"Comments\" />\n *\n * @example\n * // Text area with validation\n * <TextAreaField\n * isInvalid={true}\n * errorMessage='Message is required'\n * label='Foo'\n * isRequired\n * />\n */\nexport function TextAreaField({ ref, ...props }: TextAreaFieldProps) {\n [props, ref] = useContextProps(props, ref ?? null, TextAreaFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n label: labelProp,\n inputProps,\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <TextField\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <TextArea\n {...inputProps}\n className={composeRenderProps(classNames?.input, (className) =>\n input({ className }),\n )}\n />\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n slot='description'\n className={description({ className: classNames?.description })}\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n </>\n )}\n </TextField>\n );\n}\nTextAreaField.displayName = 'TextAreaField';\nTextAreaField.Provider = TextAreaFieldProvider;\n"]}
@@ -4,21 +4,21 @@ import * as tailwind_merge from 'tailwind-merge';
4
4
  declare const TextAreaStyles: tailwind_variants.TVReturnType<{
5
5
  [key: string]: {
6
6
  [key: string]: tailwind_merge.ClassNameValue | {
7
+ description?: tailwind_merge.ClassNameValue;
7
8
  input?: tailwind_merge.ClassNameValue;
8
9
  label?: tailwind_merge.ClassNameValue;
9
- error?: tailwind_merge.ClassNameValue;
10
- description?: tailwind_merge.ClassNameValue;
11
10
  field?: tailwind_merge.ClassNameValue;
11
+ error?: tailwind_merge.ClassNameValue;
12
12
  };
13
13
  };
14
14
  } | {
15
15
  [x: string]: {
16
16
  [x: string]: tailwind_merge.ClassNameValue | {
17
+ description?: tailwind_merge.ClassNameValue;
17
18
  input?: tailwind_merge.ClassNameValue;
18
19
  label?: tailwind_merge.ClassNameValue;
19
- error?: tailwind_merge.ClassNameValue;
20
- description?: tailwind_merge.ClassNameValue;
21
20
  field?: tailwind_merge.ClassNameValue;
21
+ error?: tailwind_merge.ClassNameValue;
22
22
  };
23
23
  };
24
24
  } | {}, {
@@ -30,11 +30,11 @@ declare const TextAreaStyles: tailwind_variants.TVReturnType<{
30
30
  }, undefined, {
31
31
  [key: string]: {
32
32
  [key: string]: tailwind_merge.ClassNameValue | {
33
+ description?: tailwind_merge.ClassNameValue;
33
34
  input?: tailwind_merge.ClassNameValue;
34
35
  label?: tailwind_merge.ClassNameValue;
35
- error?: tailwind_merge.ClassNameValue;
36
- description?: tailwind_merge.ClassNameValue;
37
36
  field?: tailwind_merge.ClassNameValue;
37
+ error?: tailwind_merge.ClassNameValue;
38
38
  };
39
39
  };
40
40
  } | {}, {
@@ -49,6 +49,6 @@ declare const TextAreaStyles: tailwind_variants.TVReturnType<{
49
49
  input: string[];
50
50
  description: string[];
51
51
  error: string;
52
- }, undefined, unknown, unknown, undefined>>;
52
+ }, undefined, unknown, unknown>>;
53
53
 
54
54
  export { TextAreaStyles };
@@ -1,2 +1,2 @@
1
- import {tv}from'./../../lib/utils.js';const l=tv({slots:{field:"group/text-area-field flex flex-col gap-xs",label:"",input:["block w-full rounded-medium p-s font-display text-default-light outline outline-interactive placeholder:text-default-dark","group-size-medium/text-area-field:text-body-s group-size-small/text-area-field:text-body-xs","group-enabled/text-area-field:focus:outline-highlight","group-enabled/text-area-field:hover:outline-interactive-hover","group-enabled/text-area-field:group-invalid/text-area-field:outline-serious","group-disabled/text-area-field:text-disabled group-disabled/text-area-field:outline-interactive-disabled group-disabled/text-area-field:placeholder:text-disabled"],description:["fg-default-dark text-body-xs","group-disabled/text-area-field:fg-disabled"],error:"fg-serious text-body-xs"}});export{l as TextAreaStyles};//# sourceMappingURL=styles.js.map
1
+ import {tv}from'./../../lib/utils.js';const l=tv({slots:{field:"group/text-area-field flex flex-col gap-xs",label:"",input:["block w-full rounded-medium p-s font-display text-default-light outline outline-interactive placeholder:text-default-dark","group-size-medium/text-area-field:text-body-s group-size-small/text-area-field:text-body-xs","group-enabled/text-area-field:focus-visible:outline-highlight","group-enabled/text-area-field:hover:outline-interactive-hover","group-enabled/text-area-field:group-invalid/text-area-field:outline-serious","group-disabled/text-area-field:text-disabled group-disabled/text-area-field:outline-interactive-disabled group-disabled/text-area-field:placeholder:text-disabled"],description:["fg-default-dark text-body-xs","group-disabled/text-area-field:fg-disabled"],error:"fg-serious text-body-xs"}});export{l as TextAreaStyles};//# sourceMappingURL=styles.js.map
2
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/text-area-field/styles.ts"],"names":["e"],"mappings":"sCAeE,MAAA,CAAO,CACLA,EAAA,CAAA,CAAA,KAAO,CAAA,CAAA,KAAA,CAAA,4CAEP,CAAA,KAAO,CACL,EAAA,CAAA,KAAA,CAAA,CAAA,2HACA,CAAA,6FACA,CAAA,uDACA,CAAA,+DACA,CAAA,6EACA,CAAA,mKAEF,CAAA,CAAA,WACE,CAAA,CAAA,8BACA,CAAA,4CAEK,CAAA,CAAA,KAAA,CAAA,yBAEV,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const TextAreaStyles = tv({\n slots: {\n field: 'group/text-area-field flex flex-col gap-xs',\n label: '',\n input: [\n 'block w-full rounded-medium p-s font-display text-default-light outline outline-interactive placeholder:text-default-dark',\n 'group-size-medium/text-area-field:text-body-s group-size-small/text-area-field:text-body-xs',\n 'group-enabled/text-area-field:focus:outline-highlight',\n 'group-enabled/text-area-field:hover:outline-interactive-hover',\n 'group-enabled/text-area-field:group-invalid/text-area-field:outline-serious',\n 'group-disabled/text-area-field:text-disabled group-disabled/text-area-field:outline-interactive-disabled group-disabled/text-area-field:placeholder:text-disabled',\n ],\n description: [\n 'fg-default-dark text-body-xs',\n 'group-disabled/text-area-field:fg-disabled',\n ],\n error: 'fg-serious text-body-xs',\n },\n});\n"]}
1
+ {"version":3,"sources":["../../../src/components/text-area-field/styles.ts"],"names":["e"],"mappings":"sCAeE,MAAA,CAAO,CACLA,EAAA,CAAA,CAAA,KAAO,CAAA,CAAA,KAAA,CAAA,4CAEP,CAAA,KAAO,CACL,EAAA,CAAA,KAAA,CAAA,CAAA,2HACA,CAAA,6FACA,CAAA,+DACA,CAAA,+DACA,CAAA,6EACA,CAAA,mKAEF,CAAA,CAAA,WACE,CAAA,CAAA,8BACA,CAAA,4CAEK,CAAA,CAAA,KAAA,CAAA,yBAEV,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const TextAreaStyles = tv({\n slots: {\n field: 'group/text-area-field flex flex-col gap-xs',\n label: '',\n input: [\n 'block w-full rounded-medium p-s font-display text-default-light outline outline-interactive placeholder:text-default-dark',\n 'group-size-medium/text-area-field:text-body-s group-size-small/text-area-field:text-body-xs',\n 'group-enabled/text-area-field:focus-visible:outline-highlight',\n 'group-enabled/text-area-field:hover:outline-interactive-hover',\n 'group-enabled/text-area-field:group-invalid/text-area-field:outline-serious',\n 'group-disabled/text-area-field:text-disabled group-disabled/text-area-field:outline-interactive-disabled group-disabled/text-area-field:placeholder:text-disabled',\n ],\n description: [\n 'fg-default-dark text-body-xs',\n 'group-disabled/text-area-field:fg-disabled',\n ],\n error: 'fg-serious text-body-xs',\n },\n});\n"]}
@@ -16,6 +16,68 @@ declare function TextFieldProvider({ children, ...props }: ProviderProps<TextFie
16
16
  declare namespace TextFieldProvider {
17
17
  var displayName: string;
18
18
  }
19
+ /**
20
+ * TextField - A complete form field component with label, input, and validation
21
+ *
22
+ * Provides a comprehensive form field experience combining label, input, description,
23
+ * and error message components. Handles validation states and accessibility
24
+ * automatically while supporting extensive customization through styling props.
25
+ *
26
+ * @example
27
+ * // Basic text field with label and required validation
28
+ * <TextField label='Full Name' isRequired defaultValue='John Doe' />
29
+ *
30
+ * @example
31
+ * // Text field with placeholder and description
32
+ * <TextField
33
+ * label='Email Address'
34
+ * inputProps={{ placeholder: 'Enter your email address', type: 'email' }}
35
+ * description='We will never share your email with third parties'
36
+ * />
37
+ *
38
+ * @example
39
+ * // Text field with error state
40
+ * <TextField
41
+ * label='Username'
42
+ * isInvalid
43
+ * errorMessage='Username must be at least 3 characters long'
44
+ * inputProps={{ placeholder: 'Enter username' }}
45
+ * />
46
+ *
47
+ * @example
48
+ * // Small size text field with clearable input
49
+ * <TextField
50
+ * label='Search'
51
+ * size='small'
52
+ * inputProps={{
53
+ * placeholder: 'Type to search...',
54
+ * isClearable: true,
55
+ * type: 'search'
56
+ * }}
57
+ * />
58
+ *
59
+ * @example
60
+ * // Disabled text field
61
+ * <TextField
62
+ * label='Status'
63
+ * isDisabled
64
+ * defaultValue='Inactive'
65
+ * description='This field cannot be edited'
66
+ * />
67
+ *
68
+ * @example
69
+ * // Password field with validation
70
+ * <TextField
71
+ * label='Password'
72
+ * isRequired
73
+ * inputProps={{
74
+ * type: 'password',
75
+ * placeholder: 'Enter a secure password',
76
+ * minLength: 8
77
+ * }}
78
+ * description='Password must be at least 8 characters'
79
+ * />
80
+ */
19
81
  declare function TextField({ ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
20
82
  declare namespace TextField {
21
83
  var displayName: string;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["description","TextFieldStyles","TextFieldProvider","N","children","e","props","ref","L","rest","errorMessageProp","size","AriaTextField","composeRenderProps","classNames","className","field","c","isDisabled","isInvalid","isRequired","labelProp","isSmall","jsx","Label","label","g","inputProps","M","descriptionProp","I","error","errorMessage","TextField"],"mappings":"+TA8BsB,MAAA,CAAA,KAAAA,CAAa,CAAA,CAAA,KAAM,CAAA,CAAIC,CAAAA,WAGqB,CAAA,CAElE,CAAA,KAAA,CAAA,CAAA,CAASC,CAAAA,eAAkB,EACzB,CAAA,CAAA,CAAAC,aAAA,CAAA,IAAAC,EACA,SAEA,CAAA,CAAA,CAAA,QACoB,CAAA,CAAA,CAAA,GAAjB,CAA0B,CAAA,CAAA,CAAA,OACxBC,GAAA,CAAA,CAAA,CAAA,QAIPH,CAAkB,CAAA,KAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAEzB,CAAA,oBAAmC,CAAmB,SAC5BI,CAAAA,CAAOC,CAAAA,GAAO,CAAA,CAAA,CAAA,GAAsB,CAEnE,CAAA,CAAA,CAAA,CAAA,CAAM,CACJ,CAAA,CAAA,CAAAC,eAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IACA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,UACA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,YAEA,CAAA,CAAA,CAAA,UAAO,CAAA,CAAA,CACP,KAAA,CAAA,CAAA,CAAA,IACA,CAAA,CAAA,CAAGC,QAEgBC,CAAAA,SACLC,CAAAA,CAAAA,CAAS,GAAA,CAAA,CAAA,CAAA,CAAA,CAEzB,CAAA,CAAA,CAAA,EAAA,IACGC,CAAAA,CAAA,CACE,CAAA,GAAGH,OAEJ,CAAA,OAAAJ,GAAA,CAAWQ,SAAAA,CAAmBC,CAAAA,GAAY,CAAA,CAAA,GAAQC,CAAAA,CAAAA,CAChDC,SAAQ,CAAAC,kBAAA,CAAA,CAAAF,EAAW,KAErB,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAA4C,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,SACnD,CAAA,CAAA,GAAA,CAAWJ,CAAAA,IAEV,CAAA,MAAA,CAAA,CACC,WAAE,CAAAO,CAAAA,CAAY,QAAA,CAAA,CAAAC,CAAAA,UAAW,CAAA,CAAAC,CAAW,SAGjC,CAAA,CAAA,CAAA,UAAEC,CAAAA,CAAa,CAACC,GACfC,IAAAA,CAACC,QAAAA,CAAA,CACC,QAAA,CAAA,CAAWC,CAAAA,CAAM,CAAE,EAAA,CAAA,CAAA,EAAApB,GAAA,CAAAqB,KAAA,CAAWZ,CAAAA,SAAmB,CACjD,CAAA,CAAA,CAAA,SAAYI,CACZ,CAAA,EAAA,KAAA,CAAA,CAAA,CAAYE,UAEX,CAAAC,CAAAA,CACH,UAGIM,CAAAA,CACJ,CAAA,QAAA,CAAA,CAAYb,CAAAA,CAAAA,CAAYT,GAAA,CAAAuB,KAAA,CAAA,CAAA,GACxB,CAAA,CAAA,UACA,CAAA,CAAA,EAAA,KACA,CAAA,QACA,CAAA,CAAA,CAAA,QAED,CAAC,CAACC,CAAAA,IAAqBP,CAAAA,CAAAA,CAAWH,SAE/B,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EACLd,GAAA,CAAAyB,IAAA,CAAA,CAAA,IAAA,CAAW9B,aAAyBc,CAAAA,SAAY,CAAA,CAAA,CAAA,CAAY,SAE3D,CAAA,CAAA,EAAAe,WAIH,CAAA,CAAA,CAAA,QAA8Bf,CAAY,CAAA,CAAA,CAAA,CAAAT,GAAA,CAAQU,UAAAA,CAAAA,CAChDgB,SAAQ,CAAAd,kBAAA,CAAA,CAAAF,EAAW,KAGpB,CAAA,CAAA,EAAA,CAAA,CAAA,CAAAiB,SAObC,CAAAA,CAAU,CAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACxBA,WAAqB/B,CAAAA,WAAAA,CAAAA,CAAAA,CAAAA,QAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport {\n TextField as AriaTextField,\n type ContextValue,\n FieldError,\n Text,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\n\nimport type { ProviderProps } from '@/lib/types';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldStyles } from './styles';\nimport type { TextFieldProps } from './types';\n\nconst { field, label, description, error } = TextFieldStyles();\n\nexport const TextFieldContext =\n createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nfunction TextFieldProvider({\n children,\n ...props\n}: ProviderProps<TextFieldProps>) {\n return (\n <TextFieldContext.Provider value={props}>\n {children}\n </TextFieldContext.Provider>\n );\n}\nTextFieldProvider.displayName = 'TextField.Provider';\n\nexport function TextField({ ref, ...props }: TextFieldProps) {\n [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n label: labelProp,\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <AriaTextField\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <Input\n {...inputProps}\n classNames={classNames?.input}\n disabled={isDisabled}\n required={isRequired}\n size={size}\n isInvalid={isInvalid}\n />\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n slot='description'\n className={description({ className: classNames?.description })}\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n </>\n )}\n </AriaTextField>\n );\n}\nTextField.displayName = 'TextField';\nTextField.Provider = TextFieldProvider;\n"]}
1
+ {"version":3,"sources":["../../../src/components/text-field/index.tsx"],"names":["description","TextFieldStyles","TextFieldProvider","N","children","e","props","ref","L","rest","errorMessageProp","size","AriaTextField","composeRenderProps","classNames","className","field","c","isDisabled","isInvalid","isRequired","labelProp","isSmall","jsx","Label","label","g","inputProps","M","descriptionProp","I","error","errorMessage","TextField"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport {\n TextField as AriaTextField,\n type ContextValue,\n FieldError,\n Text,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\n\nimport type { ProviderProps } from '@/lib/types';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldStyles } from './styles';\nimport type { TextFieldProps } from './types';\n\nconst { field, label, description, error } = TextFieldStyles();\n\nexport const TextFieldContext =\n createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nfunction TextFieldProvider({\n children,\n ...props\n}: ProviderProps<TextFieldProps>) {\n return (\n <TextFieldContext.Provider value={props}>\n {children}\n </TextFieldContext.Provider>\n );\n}\nTextFieldProvider.displayName = 'TextField.Provider';\n\n/**\n * TextField - A complete form field component with label, input, and validation\n *\n * Provides a comprehensive form field experience combining label, input, description,\n * and error message components. Handles validation states and accessibility\n * automatically while supporting extensive customization through styling props.\n *\n * @example\n * // Basic text field with label and required validation\n * <TextField label='Full Name' isRequired defaultValue='John Doe' />\n *\n * @example\n * // Text field with placeholder and description\n * <TextField\n * label='Email Address'\n * inputProps={{ placeholder: 'Enter your email address', type: 'email' }}\n * description='We will never share your email with third parties'\n * />\n *\n * @example\n * // Text field with error state\n * <TextField\n * label='Username'\n * isInvalid\n * errorMessage='Username must be at least 3 characters long'\n * inputProps={{ placeholder: 'Enter username' }}\n * />\n *\n * @example\n * // Small size text field with clearable input\n * <TextField\n * label='Search'\n * size='small'\n * inputProps={{\n * placeholder: 'Type to search...',\n * isClearable: true,\n * type: 'search'\n * }}\n * />\n *\n * @example\n * // Disabled text field\n * <TextField\n * label='Status'\n * isDisabled\n * defaultValue='Inactive'\n * description='This field cannot be edited'\n * />\n *\n * @example\n * // Password field with validation\n * <TextField\n * label='Password'\n * isRequired\n * inputProps={{\n * type: 'password',\n * placeholder: 'Enter a secure password',\n * minLength: 8\n * }}\n * description='Password must be at least 8 characters'\n * />\n */\nexport function TextField({ ref, ...props }: TextFieldProps) {\n [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n const {\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n label: labelProp,\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <AriaTextField\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <Input\n {...inputProps}\n classNames={classNames?.input}\n disabled={isDisabled}\n required={isRequired}\n size={size}\n isInvalid={isInvalid}\n />\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n slot='description'\n className={description({ className: classNames?.description })}\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n </>\n )}\n </AriaTextField>\n );\n}\nTextField.displayName = 'TextField';\nTextField.Provider = TextFieldProvider;\n"]}
@@ -4,21 +4,21 @@ import * as tailwind_merge from 'tailwind-merge';
4
4
  declare const TextFieldStyles: tailwind_variants.TVReturnType<{
5
5
  [key: string]: {
6
6
  [key: string]: tailwind_merge.ClassNameValue | {
7
+ description?: tailwind_merge.ClassNameValue;
7
8
  input?: tailwind_merge.ClassNameValue;
8
9
  label?: tailwind_merge.ClassNameValue;
9
- error?: tailwind_merge.ClassNameValue;
10
- description?: tailwind_merge.ClassNameValue;
11
10
  field?: tailwind_merge.ClassNameValue;
11
+ error?: tailwind_merge.ClassNameValue;
12
12
  };
13
13
  };
14
14
  } | {
15
15
  [x: string]: {
16
16
  [x: string]: tailwind_merge.ClassNameValue | {
17
+ description?: tailwind_merge.ClassNameValue;
17
18
  input?: tailwind_merge.ClassNameValue;
18
19
  label?: tailwind_merge.ClassNameValue;
19
- error?: tailwind_merge.ClassNameValue;
20
- description?: tailwind_merge.ClassNameValue;
21
20
  field?: tailwind_merge.ClassNameValue;
21
+ error?: tailwind_merge.ClassNameValue;
22
22
  };
23
23
  };
24
24
  } | {}, {
@@ -30,11 +30,11 @@ declare const TextFieldStyles: tailwind_variants.TVReturnType<{
30
30
  }, undefined, {
31
31
  [key: string]: {
32
32
  [key: string]: tailwind_merge.ClassNameValue | {
33
+ description?: tailwind_merge.ClassNameValue;
33
34
  input?: tailwind_merge.ClassNameValue;
34
35
  label?: tailwind_merge.ClassNameValue;
35
- error?: tailwind_merge.ClassNameValue;
36
- description?: tailwind_merge.ClassNameValue;
37
36
  field?: tailwind_merge.ClassNameValue;
37
+ error?: tailwind_merge.ClassNameValue;
38
38
  };
39
39
  };
40
40
  } | {}, {
@@ -49,6 +49,6 @@ declare const TextFieldStyles: tailwind_variants.TVReturnType<{
49
49
  input: string;
50
50
  description: string[];
51
51
  error: string;
52
- }, undefined, unknown, unknown, undefined>>;
52
+ }, undefined, unknown, unknown>>;
53
53
 
54
54
  export { TextFieldStyles };
@@ -4,6 +4,7 @@ import { InputProps } from '../input/types.js';
4
4
  import { LabelProps } from '../label/types.js';
5
5
  import 'tailwind-variants';
6
6
  import '../button/types.js';
7
+ import '../../lib/types.js';
7
8
  import '../button/styles.js';
8
9
  import 'tailwind-merge';
9
10
  import '../input/styles.js';
@@ -4,6 +4,48 @@ import { ContextValue } from 'react-aria-components';
4
4
  import { TooltipProps, TooltipTriggerProps, TooltipBodyProps } from './types.js';
5
5
 
6
6
  declare const TooltipContext: react.Context<ContextValue<TooltipProps, HTMLDivElement>>;
7
+ /**
8
+ * Tooltip - A contextual popup component for providing additional information
9
+ *
10
+ * Displays helpful information when users hover over or focus on an element.
11
+ * Provides accessible tooltip functionality with proper positioning, keyboard
12
+ * navigation, and screen reader support for enhanced user experience.
13
+ *
14
+ * @example
15
+ * // Basic tooltip
16
+ * <Tooltip>
17
+ * <Tooltip.Trigger>
18
+ * <Button>Hover me</Button>
19
+ * </Tooltip.Trigger>
20
+ * <Tooltip.Body>
21
+ * This is helpful information
22
+ * </Tooltip.Body>
23
+ * </Tooltip>
24
+ *
25
+ * @example
26
+ * // Tooltip with custom positioning
27
+ * <Tooltip>
28
+ * <Tooltip.Trigger>
29
+ * <Button>Hover for info</Button>
30
+ * </Tooltip.Trigger>
31
+ * <Tooltip.Body placement="top" offset={10}>
32
+ * Positioned above with custom offset
33
+ * </Tooltip.Body>
34
+ * </Tooltip>
35
+ *
36
+ * @example
37
+ * // Icon with tooltip
38
+ * <Tooltip>
39
+ * <Tooltip.Trigger>
40
+ * <Button variant="icon">
41
+ * <Icon><Info /></Icon>
42
+ * </Button>
43
+ * </Tooltip.Trigger>
44
+ * <Tooltip.Body>
45
+ * Additional context for this action
46
+ * </Tooltip.Body>
47
+ * </Tooltip>
48
+ */
7
49
  declare function Tooltip({ ref, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
8
50
  declare namespace Tooltip {
9
51
  var displayName: string;
@@ -1,2 +1,2 @@
1
- import {jsx}from'react/jsx-runtime';import {createContext}from'react';import'client-only';import {containsExactChildren}from'./../../lib/react.js';import {useContextProps,TooltipTrigger,Focusable,Tooltip,composeRenderProps}from'react-aria-components';import {TooltipStyles}from'./styles.js';const x=createContext(null);function r({ref:t,...o}){[o,t]=useContextProps(o,t??null,x);const{children:i,...e}=o;return containsExactChildren({children:i,componentName:r.displayName,restrictions:[[p,{min:1,max:1}],[l,{min:1,max:1}]]}),jsx(TooltipTrigger,{...e,children:i})}r.displayName="Tooltip";function p({children:t,...o}){return jsx(Focusable,{...o,children:t})}p.displayName="Tooltip.Trigger";function l({children:t,className:o,offset:i=5,placement:e="bottom",...T}){return jsx(Tooltip,{...T,className:composeRenderProps(o,s=>TooltipStyles({className:s})),offset:i,placement:e,children:t})}l.displayName="Tooltip.Body",r.Trigger=p,r.Body=l;export{r as Tooltip,x as TooltipContext};//# sourceMappingURL=index.js.map
1
+ import {jsx}from'react/jsx-runtime';import {createContext}from'react';import'client-only';import {containsExactChildren}from'./../../lib/react.js';import {useContextProps,TooltipTrigger,Focusable,Tooltip,composeRenderProps}from'react-aria-components';import {TooltipStyles}from'./styles.js';const x=createContext(null);function r({ref:t,...o}){[o,t]=useContextProps(o,t??null,x);const{children:i,delay:e=250,...p}=o;return containsExactChildren({children:i,componentName:r.displayName,restrictions:[[l,{min:1,max:1}],[n,{min:1,max:1}]]}),jsx(TooltipTrigger,{...p,delay:e,children:i})}r.displayName="Tooltip";function l({children:t,...o}){return jsx(Focusable,{...o,children:t})}l.displayName="Tooltip.Trigger";function n({children:t,className:o,offset:i=5,placement:e="bottom",...p}){return jsx(Tooltip,{...p,className:composeRenderProps(o,a=>TooltipStyles({className:a})),offset:i,placement:e,children:t})}n.displayName="Tooltip.Body",r.Trigger=l,r.Body=n;export{r as Tooltip,x as TooltipContext};//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["props","useContextProps","ref","TooltipContext","d","rest","m","Tooltip","jsx","AriaTooltipTrigger","n","g","children","u","TooltipTrigger","className","placement","c","y","f","offset","TooltipBody"],"mappings":"6TAiC0B,WAAc,CAAiB,CACvD,CAACA,GAAU,CAAA,CAAIC,CAAAA,GAAuBC,CAAAA,CAAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAMC,CAAc,CAAAC,eAEjE,CAAA,CAAA,CAAA,CAAA,EAAQ,IAAA,CAAA,CAAA,CAAA,CAAA,KAAU,CAAGC,QAErB,CAAA,CAAA,CAAA,GAAsB,CACpB,CAAA,CAAA,CAAA,CAAA,OACAC,qBAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAeC,aAAQ,CACvB,CAAA,CAAA,WAAc,CACZ,cAAgC,CAAE,CAAC,EACnC,GAAc,CAAE,CAAA,CAAA,GAAK,CAAG,IAAK,CAAE,CAAC,CAClC,CACF,GAEOC,CAAAA,CAACC,IAAoB,CAAA,CAAGJ,EAAO,CAAA,CAAA,CAAA,CAAAK,GAAA,CAAAC,cAAA,CAAA,CAAAC,GACxC,CACAL,SAAQ,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,+BAEc,CAAA,CAAA,CAAGP,QACrC,CAAA,CAAA,CAAOQ,IAAC,CAAW,CAAA,CAAA,OAAWE,GAAA,CAAAG,SAAA,CAAA,CAAAD,GAChC,CACAE,SAAe,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,2BAI3B,CAAA,CAAA,CAAA,QAAAC,CACA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,MAAA,CAAAC,EAAY,CAAA,CAAA,SACZ,CAAGhB,CACL,CAAA,QACE,CACEQ,IAAC,CACE,CAAA,CAAA,OACDE,GAAA,CAAAO,OAAA,CAAA,CAAA,GAA8BF,EAAYA,SACxB,CAAAG,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAUC,aAAC,CAC7B,UACQC,CACR,WAAWJ,CAEV,CAAA,CAAA,SACH,CAEJ,CACAK,SAAY,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,eAGlB,CAAA,CAAA,OAAOA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,IAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\nimport { createContext } from 'react';\nimport 'client-only';\nimport { containsExactChildren } from '@/lib/react';\nimport {\n Tooltip as AriaTooltip,\n TooltipTrigger as AriaTooltipTrigger,\n type ContextValue,\n Focusable,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { TooltipStyles } from './styles';\nimport type {\n TooltipBodyProps,\n TooltipProps,\n TooltipTriggerProps,\n} from './types';\n\nexport const TooltipContext =\n createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\nexport function Tooltip({ ref, ...props }: TooltipProps) {\n [props, ref] = useContextProps(props, ref ?? null, TooltipContext);\n\n const { children, ...rest } = props;\n\n containsExactChildren({\n children,\n componentName: Tooltip.displayName,\n restrictions: [\n [TooltipTrigger, { min: 1, max: 1 }],\n [TooltipBody, { min: 1, max: 1 }],\n ],\n });\n\n return <AriaTooltipTrigger {...rest}>{children}</AriaTooltipTrigger>;\n}\nTooltip.displayName = 'Tooltip';\n\nfunction TooltipTrigger({ children, ...props }: TooltipTriggerProps) {\n return <Focusable {...props}>{children}</Focusable>;\n}\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nfunction TooltipBody({\n children,\n className,\n offset = 5,\n placement = 'bottom',\n ...props\n}: TooltipBodyProps) {\n return (\n <AriaTooltip\n {...props}\n className={composeRenderProps(className, (className) =>\n TooltipStyles({ className }),\n )}\n offset={offset}\n placement={placement}\n >\n {children}\n </AriaTooltip>\n );\n}\nTooltipBody.displayName = 'Tooltip.Body';\n\nTooltip.Trigger = TooltipTrigger;\nTooltip.Body = TooltipBody;\n"]}
1
+ {"version":3,"sources":["../../../src/components/tooltip/index.tsx"],"names":["s","props","useContextProps","ref","TooltipContext","m","Tooltip","jsx","AriaTooltipTrigger","rest","T","delay","Focusable","children","TooltipTrigger","className","placement","c","d","f","offset","TooltipBody"],"mappings":"mSA2EO,MAAA,CAAA,CAAAA,aAAA,CAAA,IAAmB,EAAA,UAA+B,CACvD,CAACC,GAAU,EAAIC,CAAAA,GAAuBC,GAAO,CAAA,CAAA,CAAA,CAAA,CAAMC,CAAc,gBAEjE,CAAA,CAAA,CAAA,CAAA,EAAQ,aAAU,CAAA,QAAQ,CAAK,CAAA,CAAA,KAAYH,CAE3C,SAAsB,CACpB,CAAA,CAAA,CAAA,CAAA,OACAI,kCAAeC,aAAQ,CACvB,aAAc,CACZ,YAA2B,CAAA,CAAK,CAAE,CAAC,CAAA,CACnC,GAAc,CAAE,CAAA,CAAA,IAAQ,CAAA,CAAA,CAAA,CAAK,CAAE,CAAC,CAClC,CACF,GAGEC,EAACC,CAAAA,KAAuBC,CAAAA,CAAM,CAAA,CAAA,CAAA,CAAAC,GAAA,CAAOC,eAClC,CAAA,GAAA,CAAA,CAAA,KACH,CAEJ,CACAL,CAAAA,aAAsB,CAAA,CAAA,WAEtB,CAAA,SAA0B,CAAA,SAAU,CAAA,CAAA,CAAGL,WAC9BM,GAACK,CAAA,CAAW,CAAA,CAAA,sBAAWC,GAChC,CACAC,CAAAA,QAAe,CAAA,CAAA,CAAA,CAAA,CAAc,+BAG3B,CAAA,SACA,CAAA,CAAA,CAAA,QAAAC,CACA,WACA,UAAAC,CAAAA,CAAY,CAAA,CAAA,UACTf,CACL,CAAA,QACE,CACEM,IAAC,CACE,CAAA,CAAA,OACDG,GAAA,CAAAO,OAAA,CAAA,CAAA,GAA8BF,EAAYA,SACxB,CAAAG,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAUC,aAAC,CAC7B,UACQC,CACR,WAAWJ,CAEV,CAAA,CAAA,SACH,CAEJ,CACAK,SAAY,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,eAGlB,CAAA,CAAA,OAAOA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,IAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\nimport { createContext } from 'react';\nimport 'client-only';\nimport { containsExactChildren } from '@/lib/react';\nimport {\n Tooltip as AriaTooltip,\n TooltipTrigger as AriaTooltipTrigger,\n type ContextValue,\n Focusable,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { TooltipStyles } from './styles';\nimport type {\n TooltipBodyProps,\n TooltipProps,\n TooltipTriggerProps,\n} from './types';\n\nexport const TooltipContext =\n createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\n/**\n * Tooltip - A contextual popup component for providing additional information\n *\n * Displays helpful information when users hover over or focus on an element.\n * Provides accessible tooltip functionality with proper positioning, keyboard\n * navigation, and screen reader support for enhanced user experience.\n *\n * @example\n * // Basic tooltip\n * <Tooltip>\n * <Tooltip.Trigger>\n * <Button>Hover me</Button>\n * </Tooltip.Trigger>\n * <Tooltip.Body>\n * This is helpful information\n * </Tooltip.Body>\n * </Tooltip>\n *\n * @example\n * // Tooltip with custom positioning\n * <Tooltip>\n * <Tooltip.Trigger>\n * <Button>Hover for info</Button>\n * </Tooltip.Trigger>\n * <Tooltip.Body placement=\"top\" offset={10}>\n * Positioned above with custom offset\n * </Tooltip.Body>\n * </Tooltip>\n *\n * @example\n * // Icon with tooltip\n * <Tooltip>\n * <Tooltip.Trigger>\n * <Button variant=\"icon\">\n * <Icon><Info /></Icon>\n * </Button>\n * </Tooltip.Trigger>\n * <Tooltip.Body>\n * Additional context for this action\n * </Tooltip.Body>\n * </Tooltip>\n */\nexport function Tooltip({ ref, ...props }: TooltipProps) {\n [props, ref] = useContextProps(props, ref ?? null, TooltipContext);\n\n const { children, delay = 250, ...rest } = props;\n\n containsExactChildren({\n children,\n componentName: Tooltip.displayName,\n restrictions: [\n [TooltipTrigger, { min: 1, max: 1 }],\n [TooltipBody, { min: 1, max: 1 }],\n ],\n });\n\n return (\n <AriaTooltipTrigger {...rest} delay={delay}>\n {children}\n </AriaTooltipTrigger>\n );\n}\nTooltip.displayName = 'Tooltip';\n\nfunction TooltipTrigger({ children, ...props }: TooltipTriggerProps) {\n return <Focusable {...props}>{children}</Focusable>;\n}\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nfunction TooltipBody({\n children,\n className,\n offset = 5,\n placement = 'bottom',\n ...props\n}: TooltipBodyProps) {\n return (\n <AriaTooltip\n {...props}\n className={composeRenderProps(className, (className) =>\n TooltipStyles({ className }),\n )}\n offset={offset}\n placement={placement}\n >\n {children}\n </AriaTooltip>\n );\n}\nTooltipBody.displayName = 'Tooltip.Body';\n\nTooltip.Trigger = TooltipTrigger;\nTooltip.Body = TooltipBody;\n"]}
@@ -1,5 +1,5 @@
1
1
  import * as tailwind_variants from 'tailwind-variants';
2
2
 
3
- declare const TooltipStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay", unknown, unknown, undefined>>;
3
+ declare const TooltipStyles: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "fg-default-light flex max-w-[160px] items-center justify-center break-words rounded-small bg-surface-overlay px-s py-xs text-center text-body-xs shadow-elevation-overlay", unknown, unknown>>;
4
4
 
5
5
  export { TooltipStyles };
@@ -0,0 +1,9 @@
1
+ declare const ViewStackEventNamespace = "ViewStack";
2
+ declare const ViewStackEventTypes: {
3
+ readonly back: "ViewStack:back";
4
+ readonly clear: "ViewStack:clear";
5
+ readonly reset: "ViewStack:reset";
6
+ readonly push: "ViewStack:push";
7
+ };
8
+
9
+ export { ViewStackEventNamespace, ViewStackEventTypes };
@@ -0,0 +1,2 @@
1
+ const e="ViewStack",t={back:`${e}:back`,clear:`${e}:clear`,reset:`${e}:reset`,push:`${e}:push`};export{e as ViewStackEventNamespace,t as ViewStackEventTypes};//# sourceMappingURL=events.js.map
2
+ //# sourceMappingURL=events.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/view-stack/events.ts"],"names":["ViewStackEventNamespace","ViewStackEventTypes"],"mappings":"AAYO,MAAMA,EAA0B,WAAA,CAE1BC,CAAAA,CAAsB,CACjC,IAAA,CAAM,CAAA,EAAGD,CAAuB,CAAA,KAAA,CAAA,CAChC,KAAA,CAAO,GAAGA,CAAuB,CAAA,MAAA,CAAA,CACjC,MAAO,CAAA,EAAGA,CAAuB,SACjC,IAAA,CAAM,CAAA,EAAGA,CAAuB,CAAA,KAAA,CAClC","file":"events.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const ViewStackEventNamespace = 'ViewStack';\n\nexport const ViewStackEventTypes = {\n back: `${ViewStackEventNamespace}:back`,\n clear: `${ViewStackEventNamespace}:clear`,\n reset: `${ViewStackEventNamespace}:reset`,\n push: `${ViewStackEventNamespace}:push`,\n} as const;\n"]}
@@ -1,14 +1,17 @@
1
- import * as react from 'react';
2
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { ViewStackProps, ViewStackViewProps, ViewStackTriggerProps } from './types.js';
4
- import '@accelint/core';
2
+ import * as react from 'react';
3
+ import { UniqueId } from '@accelint/core';
4
+ import { ViewStackProps, ViewStackViewProps, ViewStackTriggerProps, ViewStackContextValue } from './types.js';
5
+ import '@accelint/bus';
5
6
  import 'react-aria-components';
7
+ import './events.js';
6
8
 
7
- declare const ViewStackEventTypes: {
8
- readonly back: "ViewStack:back";
9
- readonly clear: "ViewStack:clear";
10
- readonly reset: "ViewStack:reset";
11
- readonly push: "ViewStack:push";
9
+ declare const ViewStackContext: react.Context<ViewStackContextValue>;
10
+ declare const ViewStackEventHandlers: {
11
+ readonly back: (stack: UniqueId) => void;
12
+ readonly clear: (stack: UniqueId) => void;
13
+ readonly push: (view: UniqueId) => void;
14
+ readonly reset: (stack: UniqueId) => void;
12
15
  };
13
16
  declare function ViewStackTrigger({ children, for: types }: ViewStackTriggerProps): react_jsx_runtime.JSX.Element;
14
17
  declare namespace ViewStackTrigger {
@@ -18,11 +21,11 @@ declare function ViewStackView({ id, children }: ViewStackViewProps): react.Reac
18
21
  declare namespace ViewStackView {
19
22
  var displayName: string;
20
23
  }
21
- declare function ViewStack({ id, children, defaultView }: ViewStackProps): react_jsx_runtime.JSX.Element;
24
+ declare function ViewStack({ id, children, defaultView, onChange, }: ViewStackProps): react_jsx_runtime.JSX.Element;
22
25
  declare namespace ViewStack {
23
26
  var displayName: string;
24
27
  var View: typeof ViewStackView;
25
28
  var Trigger: typeof ViewStackTrigger;
26
29
  }
27
30
 
28
- export { ViewStack, ViewStackEventTypes };
31
+ export { ViewStack, ViewStackContext, ViewStackEventHandlers };
@@ -1,2 +1,2 @@
1
- import {jsx}from'react/jsx-runtime';import'client-only';import {Broadcast}from'@accelint/bus';import {isUUID}from'@accelint/core';import {PressResponder}from'@react-aria/interactions';import {createContext,useRef,useState,useCallback,useEffect,useContext}from'react';import {Pressable}from'react-aria-components';const r=Broadcast.getInstance(),w="ViewStack",v=createContext({parent:null,stack:[],view:null,register:()=>{},unregister:()=>{}}),i={back:`${w}:back`,clear:`${w}:clear`,reset:`${w}:reset`,push:`${w}:push`};function y({children:e,for:c}){const{parent:t}=useContext(v);function o(){for(const n of Array.isArray(c)?c:[c])if(isUUID(n))r.emit(i.push,{view:n});else {const[s,p]=n.split(":"),k=p??t;k&&r.emit(`${w}:${s}`,{stack:k});}}return jsx(PressResponder,{onPress:o,children:jsx(Pressable,{children:e})})}y.displayName="ViewStack.Trigger";function E({id:e,children:c}){const{parent:t,view:o,register:n,unregister:s}=useContext(v);if(!t)throw new Error("ViewStack.View must be implemented within a ViewStack");if(!isUUID(e))throw new Error("ViewStack.View's id must be a UniqueId");return useEffect(()=>{n(e);},[n,s,e]),o===e?c:null}E.displayName="ViewStack.View";function m({id:e,children:c,defaultView:t}){if(!isUUID(e))throw new Error("ViewStack's id must be a UniqueId");const o=useRef(new Set),[n,s]=useState(t?[t]:[]),p=n.at(-1)??null,k=useCallback(a=>{e===a?.payload?.stack&&s(u=>u.length<=1?t?[t]:[]:u.slice(0,-1));},[e,t]),S=useCallback(a=>{e===a?.payload?.stack&&s(()=>[]);},[e]),V=useCallback(a=>{e===a?.payload?.stack&&s(()=>t?[t]:[]);},[e,t]),f=useCallback(a=>{o.current.has(a?.payload?.view)&&s(u=>[...u,a?.payload?.view]);},[]);return useEffect(()=>(r.on(i.back,k),r.on(i.clear,S),r.on(i.reset,V),r.on(i.push,f),()=>{r.off(i.back,k),r.off(i.clear,S),r.off(i.reset,V),r.off(i.push,f);}),[k,S,V,f]),jsx(v.Provider,{value:{parent:e,stack:n,view:p,register:a=>o.current.add(a),unregister:a=>o.current.delete(a)},children:c})}m.displayName="ViewStack",m.View=E,m.Trigger=y;export{m as ViewStack,i as ViewStackEventTypes};//# sourceMappingURL=index.js.map
1
+ import {jsx}from'react/jsx-runtime';import'client-only';import {Broadcast}from'@accelint/bus';import {isUUID}from'@accelint/core';import {createContext,useRef,useState,useCallback,useEffect,useContext}from'react';import {Pressable}from'react-aria-components';import {ViewStackEventTypes}from'./events.js';const u=Broadcast.getInstance(),p=createContext({parent:null,stack:[],view:null,register:()=>{},unregister:()=>{}}),T={back:e=>u.emit(ViewStackEventTypes.back,{stack:e}),clear:e=>u.emit(ViewStackEventTypes.clear,{stack:e}),push:e=>u.emit(ViewStackEventTypes.push,{view:e}),reset:e=>u.emit(ViewStackEventTypes.reset,{stack:e})};function P({children:e,for:k}){const{parent:r}=useContext(p);function i(){for(const n of Array.isArray(k)?k:[k]){let[s,a]=isUUID(n)?["push",n]:n.split(":");a??=r,a&&T[s](a);}}return jsx(Pressable,{onPress:i,children:e})}P.displayName="ViewStack.Trigger";function y({id:e,children:k}){const{parent:r,view:i,register:n,unregister:s}=useContext(p);if(!r)throw new Error("ViewStack.View must be implemented within a ViewStack");if(!isUUID(e))throw new Error("ViewStack.View's id must be a UniqueId");return useEffect(()=>{n(e);},[n,s,e]),i===e?k:null}y.displayName="ViewStack.View";function S({id:e,children:k,defaultView:r,onChange:i}){if(!isUUID(e))throw new Error("ViewStack's id must be a UniqueId");const n=useRef(new Set),[s,a]=useState(r?[r]:[]),U=s.at(-1)??null,V=useCallback(t=>{if(e===t?.payload?.stack){const c=s.slice(0,-1);!c.length&&r&&c.push(r),a(c),i?.(c.at(-1)??null);}},[e,r,i,s]),f=useCallback(t=>{e===t?.payload?.stack&&(a([]),i?.(null));},[e,i]),m=useCallback(t=>{n.current.has(t?.payload?.view)&&(a(c=>[...c,t?.payload?.view]),i?.(t?.payload?.view));},[i]),v=useCallback(t=>{e===t?.payload?.stack&&(a(r?[r]:[]),i?.(r??null));},[e,r,i]);return useEffect(()=>{const t=[u.on(ViewStackEventTypes.back,V),u.on(ViewStackEventTypes.clear,f),u.on(ViewStackEventTypes.push,m),u.on(ViewStackEventTypes.reset,v)];return ()=>{for(const c of t)c();}},[V,f,m,v]),jsx(p.Provider,{value:{parent:e,stack:s,view:U,register:t=>n.current.add(t),unregister:t=>n.current.delete(t)},children:k})}S.displayName="ViewStack",S.View=y,S.Trigger=P;export{S as ViewStack,p as ViewStackContext,T as ViewStackEventHandlers};//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map