@mcp-b/react-components 0.1.1 → 0.1.2

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 (203) hide show
  1. package/dist/Button-QCM8ZKgR.d.ts +98 -0
  2. package/dist/CodeBlock-CttHhWcb.js +356 -0
  3. package/dist/CodeBlock-V6pgafSS.d.ts +174 -0
  4. package/dist/Select-CRsKCJ9x.d.ts +200 -0
  5. package/dist/class-names-9UtZwb0J.js +12 -0
  6. package/dist/components/Accordion.d.ts +81 -0
  7. package/dist/components/Accordion.js +97 -0
  8. package/dist/components/AgentConnection.d.ts +69 -0
  9. package/dist/components/AgentConnection.js +176 -0
  10. package/dist/components/AlertDialog.d.ts +148 -0
  11. package/dist/components/AlertDialog.js +141 -0
  12. package/dist/components/Artifact.d.ts +128 -0
  13. package/dist/components/Artifact.js +115 -0
  14. package/dist/components/Autocomplete.d.ts +186 -0
  15. package/dist/components/Autocomplete.js +186 -0
  16. package/dist/components/Avatar.d.ts +134 -0
  17. package/dist/components/Avatar.js +118 -0
  18. package/dist/components/Badge.d.ts +68 -0
  19. package/dist/components/Badge.js +108 -0
  20. package/dist/components/Button.d.ts +2 -0
  21. package/dist/components/Button.js +73 -0
  22. package/dist/components/Card.d.ts +87 -0
  23. package/dist/components/Card.js +81 -0
  24. package/dist/components/ChainOfThought.d.ts +153 -0
  25. package/dist/components/ChainOfThought.js +157 -0
  26. package/dist/components/Checkbox.d.ts +35 -0
  27. package/dist/components/Checkbox.js +47 -0
  28. package/dist/components/CheckboxGroup.d.ts +76 -0
  29. package/dist/components/CheckboxGroup.js +69 -0
  30. package/dist/components/CodeBlock.d.ts +2 -0
  31. package/dist/components/CodeBlock.js +2 -0
  32. package/dist/components/Collapsible.d.ts +127 -0
  33. package/dist/components/Collapsible.js +103 -0
  34. package/dist/components/Combobox.d.ts +177 -0
  35. package/dist/components/Combobox.js +179 -0
  36. package/dist/components/Commit.d.ts +265 -0
  37. package/dist/components/Commit.js +282 -0
  38. package/dist/components/Context.d.ts +129 -0
  39. package/dist/components/Context.js +309 -0
  40. package/dist/components/ContextMenu.d.ts +282 -0
  41. package/dist/components/ContextMenu.js +270 -0
  42. package/dist/components/Conversation.d.ts +166 -0
  43. package/dist/components/Conversation.js +202 -0
  44. package/dist/components/Dialog.d.ts +120 -0
  45. package/dist/components/Dialog.js +114 -0
  46. package/dist/components/EnvironmentVariables.d.ts +176 -0
  47. package/dist/components/EnvironmentVariables.js +221 -0
  48. package/dist/components/Field.d.ts +281 -0
  49. package/dist/components/Field.js +274 -0
  50. package/dist/components/Fieldset.d.ts +93 -0
  51. package/dist/components/Fieldset.js +81 -0
  52. package/dist/components/FileTree.d.ts +116 -0
  53. package/dist/components/FileTree.js +310 -0
  54. package/dist/components/Form.d.ts +94 -0
  55. package/dist/components/Form.js +88 -0
  56. package/dist/components/GithubMotionMark.d.ts +13 -0
  57. package/dist/components/GithubMotionMark.js +23 -0
  58. package/dist/components/Input.d.ts +33 -0
  59. package/dist/components/Input.js +27 -0
  60. package/dist/components/Label.d.ts +44 -0
  61. package/dist/components/Label.js +41 -0
  62. package/dist/components/Menu.d.ts +395 -0
  63. package/dist/components/Menu.js +338 -0
  64. package/dist/components/Menubar.d.ts +331 -0
  65. package/dist/components/Menubar.js +299 -0
  66. package/dist/components/Message.d.ts +216 -0
  67. package/dist/components/Message.js +245 -0
  68. package/dist/components/Meter.d.ts +151 -0
  69. package/dist/components/Meter.js +121 -0
  70. package/dist/components/ModelSelector.d.ts +198 -0
  71. package/dist/components/ModelSelector.js +306 -0
  72. package/dist/components/NaniteScene.d.ts +33 -0
  73. package/dist/components/NaniteScene.js +405 -0
  74. package/dist/components/NavigationMenu.d.ts +256 -0
  75. package/dist/components/NavigationMenu.js +228 -0
  76. package/dist/components/NumberField.d.ts +159 -0
  77. package/dist/components/NumberField.js +123 -0
  78. package/dist/components/Popover.d.ts +278 -0
  79. package/dist/components/Popover.js +245 -0
  80. package/dist/components/PreviewCard.d.ts +156 -0
  81. package/dist/components/PreviewCard.js +156 -0
  82. package/dist/components/PricingPage.d.ts +209 -0
  83. package/dist/components/PricingPage.js +506 -0
  84. package/dist/components/Progress.d.ts +58 -0
  85. package/dist/components/Progress.js +51 -0
  86. package/dist/components/PromptInput.d.ts +399 -0
  87. package/dist/components/PromptInput.js +737 -0
  88. package/dist/components/Queue.d.ts +241 -0
  89. package/dist/components/Queue.js +225 -0
  90. package/dist/components/RadioGroup.d.ts +78 -0
  91. package/dist/components/RadioGroup.js +72 -0
  92. package/dist/components/Reasoning.d.ts +88 -0
  93. package/dist/components/Reasoning.js +187 -0
  94. package/dist/components/ScrollArea.d.ts +160 -0
  95. package/dist/components/ScrollArea.js +145 -0
  96. package/dist/components/Select.d.ts +2 -0
  97. package/dist/components/Select.js +260 -0
  98. package/dist/components/Separator.d.ts +45 -0
  99. package/dist/components/Separator.js +40 -0
  100. package/dist/components/Shell.d.ts +163 -0
  101. package/dist/components/Shell.js +137 -0
  102. package/dist/components/Slider.d.ts +120 -0
  103. package/dist/components/Slider.js +115 -0
  104. package/dist/components/Sources.d.ts +91 -0
  105. package/dist/components/Sources.js +121 -0
  106. package/dist/components/Stepper.d.ts +190 -0
  107. package/dist/components/Stepper.js +315 -0
  108. package/dist/components/Switch.d.ts +57 -0
  109. package/dist/components/Switch.js +55 -0
  110. package/dist/components/Tabs.d.ts +84 -0
  111. package/dist/components/Tabs.js +78 -0
  112. package/dist/components/Task.d.ts +100 -0
  113. package/dist/components/Task.js +120 -0
  114. package/dist/components/Terminal.d.ts +118 -0
  115. package/dist/components/Terminal.js +234 -0
  116. package/dist/components/TestResults.d.ts +236 -0
  117. package/dist/components/TestResults.js +346 -0
  118. package/dist/components/Toast.d.ts +192 -0
  119. package/dist/components/Toast.js +163 -0
  120. package/dist/components/Toggle.d.ts +69 -0
  121. package/dist/components/Toggle.js +66 -0
  122. package/dist/components/ToggleGroup.d.ts +69 -0
  123. package/dist/components/ToggleGroup.js +99 -0
  124. package/dist/components/Tool.d.ts +119 -0
  125. package/dist/components/Tool.js +192 -0
  126. package/dist/components/Toolbar.d.ts +162 -0
  127. package/dist/components/Toolbar.js +126 -0
  128. package/dist/components/Tooltip.d.ts +81 -0
  129. package/dist/components/Tooltip.js +74 -0
  130. package/dist/components/WebPreview.d.ts +143 -0
  131. package/dist/components/WebPreview.js +280 -0
  132. package/dist/components/useStickToBottom.d.ts +30 -0
  133. package/dist/components/useStickToBottom.js +95 -0
  134. package/dist/copy-button-BIATcZWZ.d.ts +16 -0
  135. package/dist/copy-button-BNgclDrO.js +43 -0
  136. package/dist/icons-BsWc8g4E.js +221 -0
  137. package/dist/styles/accordion.css +10 -10
  138. package/dist/styles/agent-connection.css +18 -17
  139. package/dist/styles/alert-dialog.css +48 -29
  140. package/dist/styles/artifact.css +10 -10
  141. package/dist/styles/autocomplete.css +25 -24
  142. package/dist/styles/avatar.css +96 -6
  143. package/dist/styles/badge.css +78 -14
  144. package/dist/styles/base.css +9 -9
  145. package/dist/styles/button.css +57 -38
  146. package/dist/styles/card.css +57 -10
  147. package/dist/styles/chain-of-thought.css +47 -33
  148. package/dist/styles/checkbox.css +24 -10
  149. package/dist/styles/code-block.css +22 -15
  150. package/dist/styles/collapsible.css +14 -12
  151. package/dist/styles/combobox.css +26 -25
  152. package/dist/styles/commit.css +49 -24
  153. package/dist/styles/context-menu.css +70 -16
  154. package/dist/styles/context.css +15 -15
  155. package/dist/styles/conversation.css +12 -12
  156. package/dist/styles/dialog.css +52 -16
  157. package/dist/styles/environment-variables.css +19 -19
  158. package/dist/styles/field.css +184 -22
  159. package/dist/styles/fieldset.css +5 -4
  160. package/dist/styles/file-tree.css +17 -17
  161. package/dist/styles/index.css.d.ts +1 -0
  162. package/dist/styles/input.css +45 -11
  163. package/dist/styles/label.css +21 -4
  164. package/dist/styles/menu.css +55 -32
  165. package/dist/styles/menubar.css +80 -28
  166. package/dist/styles/message.css +22 -13
  167. package/dist/styles/meter.css +8 -8
  168. package/dist/styles/model-selector.css +33 -21
  169. package/dist/styles/navigation-menu.css +26 -24
  170. package/dist/styles/number-field.css +20 -18
  171. package/dist/styles/popover.css +38 -28
  172. package/dist/styles/preview-card.css +15 -13
  173. package/dist/styles/pricing-page.css +53 -53
  174. package/dist/styles/progress.css +7 -7
  175. package/dist/styles/prompt-input.css +73 -24
  176. package/dist/styles/queue.css +58 -32
  177. package/dist/styles/radio.css +26 -11
  178. package/dist/styles/reasoning.css +15 -11
  179. package/dist/styles/scroll-area.css +6 -6
  180. package/dist/styles/scrollbars.css +4 -4
  181. package/dist/styles/select.css +84 -25
  182. package/dist/styles/separator.css +1 -1
  183. package/dist/styles/shell.css +21 -20
  184. package/dist/styles/slider.css +35 -11
  185. package/dist/styles/sources.css +20 -20
  186. package/dist/styles/stepper.css +22 -22
  187. package/dist/styles/switch.css +29 -13
  188. package/dist/styles/tabs.css +23 -16
  189. package/dist/styles/task.css +27 -23
  190. package/dist/styles/terminal.css +16 -13
  191. package/dist/styles/test-results.css +79 -32
  192. package/dist/styles/toast.css +26 -25
  193. package/dist/styles/toggle-group.css +12 -12
  194. package/dist/styles/toggle.css +29 -11
  195. package/dist/styles/tool.css +54 -32
  196. package/dist/styles/toolbar.css +30 -28
  197. package/dist/styles/tooltip.css +10 -8
  198. package/dist/styles/web-preview.css +37 -21
  199. package/dist/utils/structured-code.d.ts +10 -0
  200. package/dist/utils/structured-code.js +81 -0
  201. package/package.json +16 -7
  202. package/dist/index.d.ts +0 -7236
  203. package/dist/index.js +0 -8945
@@ -0,0 +1,47 @@
1
+ import "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
4
+ //#region src/components/Checkbox.tsx
5
+ function CheckIcon(props) {
6
+ return /* @__PURE__ */ jsx("svg", {
7
+ fill: "currentcolor",
8
+ width: "10",
9
+ height: "10",
10
+ viewBox: "0 0 10 10",
11
+ "aria-hidden": "true",
12
+ focusable: "false",
13
+ ...props,
14
+ children: /* @__PURE__ */ jsx("path", { d: "M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" })
15
+ });
16
+ }
17
+ /**
18
+ * An accessible checkbox component with custom styling.
19
+ *
20
+ * @example
21
+ * ```tsx
22
+ * <Checkbox defaultChecked onChange={(checked) => console.log(checked)} />
23
+ *
24
+ * <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
25
+ * <Checkbox id="terms" checked={agreed} onChange={setAgreed} />
26
+ * <Label htmlFor="terms">I agree to the terms</Label>
27
+ * </div>
28
+ * ```
29
+ *
30
+ * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
31
+ */
32
+ function Checkbox({ className = "", ref, ...props }) {
33
+ const classes = ["checkbox", className].filter(Boolean).join(" ");
34
+ return /* @__PURE__ */ jsx(Checkbox$1.Root, {
35
+ ref,
36
+ "data-slot": "checkbox",
37
+ className: classes,
38
+ ...props,
39
+ children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
40
+ "data-slot": "checkbox-indicator",
41
+ className: "checkbox__indicator",
42
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
43
+ })
44
+ });
45
+ }
46
+ //#endregion
47
+ export { Checkbox };
@@ -0,0 +1,76 @@
1
+ import * as React from "react";
2
+ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
3
+
4
+ //#region src/components/CheckboxGroup.d.ts
5
+ /**
6
+ * Props for the CheckboxGroup component.
7
+ */
8
+ interface CheckboxGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxGroup$1>, "className"> {
9
+ /** Additional CSS class names */
10
+ className?: string;
11
+ }
12
+ /**
13
+ * Provides shared state management for a series of checkboxes.
14
+ * Works in conjunction with individual Checkbox components.
15
+ *
16
+ * @example
17
+ * ```tsx
18
+ * // Basic usage
19
+ * <CheckboxGroup defaultValue={['option1']}>
20
+ * <label>
21
+ * <Checkbox name="option1" />
22
+ * Option 1
23
+ * </label>
24
+ * <label>
25
+ * <Checkbox name="option2" />
26
+ * Option 2
27
+ * </label>
28
+ * </CheckboxGroup>
29
+ * ```
30
+ *
31
+ * @example
32
+ * ```tsx
33
+ * // Controlled state
34
+ * const [values, setValues] = useState(['email']);
35
+ *
36
+ * <CheckboxGroup value={values} onValueChange={setValues}>
37
+ * <label>
38
+ * <Checkbox name="email" />
39
+ * Email notifications
40
+ * </label>
41
+ * <label>
42
+ * <Checkbox name="sms" />
43
+ * SMS notifications
44
+ * </label>
45
+ * </CheckboxGroup>
46
+ * ```
47
+ *
48
+ * @example
49
+ * ```tsx
50
+ * // With Fieldset for accessibility
51
+ * <Fieldset.Root>
52
+ * <Fieldset.Legend>Notifications</Fieldset.Legend>
53
+ * <CheckboxGroup defaultValue={['updates']}>
54
+ * <label>
55
+ * <Checkbox name="updates" />
56
+ * Product updates
57
+ * </label>
58
+ * <label>
59
+ * <Checkbox name="newsletter" />
60
+ * Newsletter
61
+ * </label>
62
+ * </CheckboxGroup>
63
+ * </Fieldset.Root>
64
+ * ```
65
+ *
66
+ * @see {@link https://base-ui.com/react/components/checkbox-group | Base UI CheckboxGroup}
67
+ */
68
+ declare function CheckboxGroup({
69
+ className,
70
+ ref,
71
+ ...props
72
+ }: CheckboxGroupProps & {
73
+ ref?: React.Ref<HTMLDivElement>;
74
+ }): React.JSX.Element;
75
+ //#endregion
76
+ export { CheckboxGroup, CheckboxGroupProps };
@@ -0,0 +1,69 @@
1
+ import "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
4
+ //#region src/components/CheckboxGroup.tsx
5
+ /**
6
+ * Provides shared state management for a series of checkboxes.
7
+ * Works in conjunction with individual Checkbox components.
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * // Basic usage
12
+ * <CheckboxGroup defaultValue={['option1']}>
13
+ * <label>
14
+ * <Checkbox name="option1" />
15
+ * Option 1
16
+ * </label>
17
+ * <label>
18
+ * <Checkbox name="option2" />
19
+ * Option 2
20
+ * </label>
21
+ * </CheckboxGroup>
22
+ * ```
23
+ *
24
+ * @example
25
+ * ```tsx
26
+ * // Controlled state
27
+ * const [values, setValues] = useState(['email']);
28
+ *
29
+ * <CheckboxGroup value={values} onValueChange={setValues}>
30
+ * <label>
31
+ * <Checkbox name="email" />
32
+ * Email notifications
33
+ * </label>
34
+ * <label>
35
+ * <Checkbox name="sms" />
36
+ * SMS notifications
37
+ * </label>
38
+ * </CheckboxGroup>
39
+ * ```
40
+ *
41
+ * @example
42
+ * ```tsx
43
+ * // With Fieldset for accessibility
44
+ * <Fieldset.Root>
45
+ * <Fieldset.Legend>Notifications</Fieldset.Legend>
46
+ * <CheckboxGroup defaultValue={['updates']}>
47
+ * <label>
48
+ * <Checkbox name="updates" />
49
+ * Product updates
50
+ * </label>
51
+ * <label>
52
+ * <Checkbox name="newsletter" />
53
+ * Newsletter
54
+ * </label>
55
+ * </CheckboxGroup>
56
+ * </Fieldset.Root>
57
+ * ```
58
+ *
59
+ * @see {@link https://base-ui.com/react/components/checkbox-group | Base UI CheckboxGroup}
60
+ */
61
+ function CheckboxGroup({ className = "", ref, ...props }) {
62
+ return /* @__PURE__ */ jsx(CheckboxGroup$1, {
63
+ ref,
64
+ className: ["checkbox-group", className].filter(Boolean).join(" "),
65
+ ...props
66
+ });
67
+ }
68
+ //#endregion
69
+ export { CheckboxGroup };
@@ -0,0 +1,2 @@
1
+ import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-V6pgafSS.js";
2
+ export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockActionsProps, CodeBlockContainer, CodeBlockContainerProps, CodeBlockContent, CodeBlockContentProps, CodeBlockCopyButton, CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockFilenameProps, CodeBlockHeader, CodeBlockHeaderProps, type CodeBlockLanguage, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorItemProps, CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, CodeBlockLanguageSelectorValueProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps, TokenizedCode, highlightCode };
@@ -0,0 +1,2 @@
1
+ import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-CttHhWcb.js";
2
+ export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };
@@ -0,0 +1,127 @@
1
+ import * as React from "react";
2
+ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
3
+
4
+ //#region src/components/Collapsible.d.ts
5
+ /**
6
+ * Props for the Collapsible.Root component.
7
+ */
8
+ interface CollapsibleRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Root>, "className"> {
9
+ /** Additional CSS class names */
10
+ className?: string;
11
+ /** Skip the default design-system Collapsible classes for internal composition. */
12
+ unstyled?: boolean;
13
+ }
14
+ /**
15
+ * Props for the Collapsible.Trigger component.
16
+ */
17
+ interface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Trigger>, "className"> {
18
+ /** Additional CSS class names */
19
+ className?: string;
20
+ /** Skip the default design-system Collapsible classes for internal composition. */
21
+ unstyled?: boolean;
22
+ }
23
+ /**
24
+ * Props for the Collapsible.Panel component.
25
+ */
26
+ interface CollapsiblePanelProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Panel>, "className"> {
27
+ /** Additional CSS class names */
28
+ className?: string;
29
+ /** Skip the default design-system Collapsible classes for internal composition. */
30
+ unstyled?: boolean;
31
+ }
32
+ /**
33
+ * Container that groups all collapsible parts. Renders a `<div>` element.
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * <Collapsible.Root>
38
+ * <Collapsible.Trigger>Show more</Collapsible.Trigger>
39
+ * <Collapsible.Panel>Hidden content here</Collapsible.Panel>
40
+ * </Collapsible.Root>
41
+ * ```
42
+ *
43
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
44
+ */
45
+ declare function CollapsibleRoot({
46
+ className,
47
+ unstyled,
48
+ ref,
49
+ ...props
50
+ }: CollapsibleRootProps & {
51
+ ref?: React.Ref<HTMLDivElement>;
52
+ }): React.JSX.Element;
53
+ /**
54
+ * Button that toggles the panel visibility. Renders a `<button>` element.
55
+ */
56
+ declare function CollapsibleTrigger({
57
+ className,
58
+ unstyled,
59
+ ref,
60
+ ...props
61
+ }: CollapsibleTriggerProps & {
62
+ ref?: React.Ref<HTMLButtonElement>;
63
+ }): React.JSX.Element;
64
+ /**
65
+ * The collapsible panel containing hidden content. Renders a `<div>` element.
66
+ * Supports CSS animations via `--collapsible-panel-height` variable.
67
+ */
68
+ declare function CollapsiblePanel({
69
+ className,
70
+ unstyled,
71
+ ref,
72
+ ...props
73
+ }: CollapsiblePanelProps & {
74
+ ref?: React.Ref<HTMLDivElement>;
75
+ }): React.JSX.Element;
76
+ declare const CollapsibleContent: typeof CollapsiblePanel;
77
+ /**
78
+ * A collapsible panel controlled by a button.
79
+ * Useful for progressive disclosure of content.
80
+ *
81
+ * @example
82
+ * ```tsx
83
+ * // Basic usage
84
+ * <Collapsible.Root>
85
+ * <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
86
+ * <Collapsible.Panel>
87
+ * <p>This content can be shown or hidden.</p>
88
+ * </Collapsible.Panel>
89
+ * </Collapsible.Root>
90
+ * ```
91
+ *
92
+ * @example
93
+ * ```tsx
94
+ * // Controlled state
95
+ * const [open, setOpen] = useState(false);
96
+ *
97
+ * <Collapsible.Root open={open} onOpenChange={setOpen}>
98
+ * <Collapsible.Trigger>
99
+ * {open ? 'Hide' : 'Show'} details
100
+ * </Collapsible.Trigger>
101
+ * <Collapsible.Panel>
102
+ * <p>Detailed information here.</p>
103
+ * </Collapsible.Panel>
104
+ * </Collapsible.Root>
105
+ * ```
106
+ *
107
+ * @example
108
+ * ```tsx
109
+ * // Default open
110
+ * <Collapsible.Root defaultOpen>
111
+ * <Collapsible.Trigger>Collapse</Collapsible.Trigger>
112
+ * <Collapsible.Panel>
113
+ * <p>Initially visible content.</p>
114
+ * </Collapsible.Panel>
115
+ * </Collapsible.Root>
116
+ * ```
117
+ *
118
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
119
+ */
120
+ declare const Collapsible: typeof CollapsibleRoot & {
121
+ Root: typeof CollapsibleRoot;
122
+ Trigger: typeof CollapsibleTrigger;
123
+ Panel: typeof CollapsiblePanel;
124
+ Content: typeof CollapsiblePanel;
125
+ };
126
+ //#endregion
127
+ export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps };
@@ -0,0 +1,103 @@
1
+ import "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
4
+ //#region src/components/Collapsible.tsx
5
+ /**
6
+ * Container that groups all collapsible parts. Renders a `<div>` element.
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * <Collapsible.Root>
11
+ * <Collapsible.Trigger>Show more</Collapsible.Trigger>
12
+ * <Collapsible.Panel>Hidden content here</Collapsible.Panel>
13
+ * </Collapsible.Root>
14
+ * ```
15
+ *
16
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
17
+ */
18
+ function CollapsibleRoot({ className = "", unstyled = false, ref, ...props }) {
19
+ const classes = unstyled ? className : ["collapsible", className].filter(Boolean).join(" ");
20
+ return /* @__PURE__ */ jsx(Collapsible$1.Root, {
21
+ ref,
22
+ "data-slot": "collapsible",
23
+ className: classes,
24
+ ...props
25
+ });
26
+ }
27
+ /**
28
+ * Button that toggles the panel visibility. Renders a `<button>` element.
29
+ */
30
+ function CollapsibleTrigger({ className = "", unstyled = false, ref, ...props }) {
31
+ const classes = unstyled ? className : ["collapsible__trigger", className].filter(Boolean).join(" ");
32
+ return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
33
+ ref,
34
+ "data-slot": "collapsible-trigger",
35
+ className: classes,
36
+ ...props
37
+ });
38
+ }
39
+ /**
40
+ * The collapsible panel containing hidden content. Renders a `<div>` element.
41
+ * Supports CSS animations via `--collapsible-panel-height` variable.
42
+ */
43
+ function CollapsiblePanel({ className = "", unstyled = false, ref, ...props }) {
44
+ const classes = unstyled ? className : ["collapsible__panel", className].filter(Boolean).join(" ");
45
+ return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
46
+ ref,
47
+ "data-slot": "collapsible-content",
48
+ className: classes,
49
+ ...props
50
+ });
51
+ }
52
+ const CollapsibleContent = CollapsiblePanel;
53
+ /**
54
+ * A collapsible panel controlled by a button.
55
+ * Useful for progressive disclosure of content.
56
+ *
57
+ * @example
58
+ * ```tsx
59
+ * // Basic usage
60
+ * <Collapsible.Root>
61
+ * <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
62
+ * <Collapsible.Panel>
63
+ * <p>This content can be shown or hidden.</p>
64
+ * </Collapsible.Panel>
65
+ * </Collapsible.Root>
66
+ * ```
67
+ *
68
+ * @example
69
+ * ```tsx
70
+ * // Controlled state
71
+ * const [open, setOpen] = useState(false);
72
+ *
73
+ * <Collapsible.Root open={open} onOpenChange={setOpen}>
74
+ * <Collapsible.Trigger>
75
+ * {open ? 'Hide' : 'Show'} details
76
+ * </Collapsible.Trigger>
77
+ * <Collapsible.Panel>
78
+ * <p>Detailed information here.</p>
79
+ * </Collapsible.Panel>
80
+ * </Collapsible.Root>
81
+ * ```
82
+ *
83
+ * @example
84
+ * ```tsx
85
+ * // Default open
86
+ * <Collapsible.Root defaultOpen>
87
+ * <Collapsible.Trigger>Collapse</Collapsible.Trigger>
88
+ * <Collapsible.Panel>
89
+ * <p>Initially visible content.</p>
90
+ * </Collapsible.Panel>
91
+ * </Collapsible.Root>
92
+ * ```
93
+ *
94
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
95
+ */
96
+ const Collapsible = Object.assign(CollapsibleRoot, {
97
+ Root: CollapsibleRoot,
98
+ Trigger: CollapsibleTrigger,
99
+ Panel: CollapsiblePanel,
100
+ Content: CollapsibleContent
101
+ });
102
+ //#endregion
103
+ export { Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };
@@ -0,0 +1,177 @@
1
+ import * as React from "react";
2
+ import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
3
+
4
+ //#region src/components/Combobox.d.ts
5
+ declare function ComboboxInput({
6
+ className,
7
+ ref,
8
+ ...props
9
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Input>, "className"> & {
10
+ className?: string;
11
+ } & {
12
+ ref?: React.Ref<HTMLInputElement>;
13
+ }): React.JSX.Element;
14
+ declare function ComboboxTrigger({
15
+ className,
16
+ ref,
17
+ ...props
18
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Trigger>, "className"> & {
19
+ className?: string;
20
+ } & {
21
+ ref?: React.Ref<HTMLButtonElement>;
22
+ }): React.JSX.Element;
23
+ declare function Clear({
24
+ className,
25
+ ref,
26
+ ...props
27
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Clear>, "className"> & {
28
+ className?: string;
29
+ } & {
30
+ ref?: React.Ref<HTMLButtonElement>;
31
+ }): React.JSX.Element;
32
+ declare function ComboboxPositioner({
33
+ className,
34
+ ref,
35
+ ...props
36
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Positioner>, "className"> & {
37
+ className?: string;
38
+ } & {
39
+ ref?: React.Ref<HTMLDivElement>;
40
+ }): React.JSX.Element;
41
+ declare function ComboboxPopup({
42
+ className,
43
+ tabIndex,
44
+ ref,
45
+ ...props
46
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Popup>, "className"> & {
47
+ className?: string;
48
+ } & {
49
+ ref?: React.Ref<HTMLDivElement>;
50
+ }): React.JSX.Element;
51
+ declare function ComboboxList({
52
+ className,
53
+ ref,
54
+ ...props
55
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.List>, "className"> & {
56
+ className?: string;
57
+ } & {
58
+ ref?: React.Ref<HTMLDivElement>;
59
+ }): React.JSX.Element;
60
+ declare function ComboboxItem({
61
+ className,
62
+ ref,
63
+ ...props
64
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Item>, "className"> & {
65
+ className?: string;
66
+ } & {
67
+ ref?: React.Ref<HTMLDivElement>;
68
+ }): React.JSX.Element;
69
+ declare function ItemIndicator({
70
+ className,
71
+ ref,
72
+ ...props
73
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.ItemIndicator>, "className"> & {
74
+ className?: string;
75
+ } & {
76
+ ref?: React.Ref<HTMLSpanElement>;
77
+ }): React.JSX.Element;
78
+ declare function ComboboxEmpty({
79
+ className,
80
+ ref,
81
+ ...props
82
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Empty>, "className"> & {
83
+ className?: string;
84
+ } & {
85
+ ref?: React.Ref<HTMLDivElement>;
86
+ }): React.JSX.Element;
87
+ declare function ComboboxGroup({
88
+ className,
89
+ ref,
90
+ ...props
91
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.Group>, "className"> & {
92
+ className?: string;
93
+ } & {
94
+ ref?: React.Ref<HTMLDivElement>;
95
+ }): React.JSX.Element;
96
+ declare function ComboboxLabel({
97
+ className,
98
+ ref,
99
+ ...props
100
+ }: Omit<React.ComponentPropsWithRef<typeof Combobox$1.GroupLabel>, "className"> & {
101
+ className?: string;
102
+ } & {
103
+ ref?: React.Ref<HTMLDivElement>;
104
+ }): React.JSX.Element;
105
+ /**
106
+ * An input combined with a filterable list of predefined items.
107
+ * Supports single and multiple selection, async search, and grouping.
108
+ *
109
+ * @example
110
+ * ```tsx
111
+ * // Basic single select
112
+ * const fruits = [
113
+ * { label: 'Apple', value: 'apple' },
114
+ * { label: 'Banana', value: 'banana' },
115
+ * { label: 'Orange', value: 'orange' },
116
+ * ];
117
+ *
118
+ * <Combobox.Root items={fruits}>
119
+ * <Combobox.Input placeholder="Select a fruit" />
120
+ * <Combobox.Trigger>
121
+ * <ChevronDownIcon />
122
+ * </Combobox.Trigger>
123
+ * <Combobox.Portal>
124
+ * <Combobox.Positioner>
125
+ * <Combobox.Popup>
126
+ * <Combobox.List>
127
+ * {(item) => (
128
+ * <Combobox.Item value={item}>
129
+ * <Combobox.ItemIndicator>
130
+ * <CheckIcon />
131
+ * </Combobox.ItemIndicator>
132
+ * {item.label}
133
+ * </Combobox.Item>
134
+ * )}
135
+ * </Combobox.List>
136
+ * <Combobox.Empty>No results found</Combobox.Empty>
137
+ * </Combobox.Popup>
138
+ * </Combobox.Positioner>
139
+ * </Combobox.Portal>
140
+ * </Combobox.Root>
141
+ * ```
142
+ *
143
+ * @see {@link https://base-ui.com/react/components/combobox | Base UI Combobox}
144
+ */
145
+ declare const ComboboxContent: typeof ComboboxPopup;
146
+ declare const ComboboxValue: typeof Combobox$1.Value;
147
+ declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
148
+ declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
149
+ declare const ComboboxChipsInput: typeof ComboboxInput;
150
+ declare const ComboboxCollection: typeof Combobox$1.Collection;
151
+ declare const ComboboxSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
152
+ declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
153
+ declare const Combobox: typeof Combobox$1.Root & {
154
+ Root: typeof Combobox$1.Root;
155
+ Input: typeof ComboboxInput;
156
+ Trigger: typeof ComboboxTrigger;
157
+ Clear: typeof Clear;
158
+ Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
159
+ Positioner: typeof ComboboxPositioner;
160
+ Popup: typeof ComboboxPopup;
161
+ Content: typeof ComboboxPopup;
162
+ List: typeof ComboboxList;
163
+ Item: typeof ComboboxItem;
164
+ ItemIndicator: typeof ItemIndicator;
165
+ Empty: typeof ComboboxEmpty;
166
+ Group: typeof ComboboxGroup;
167
+ GroupLabel: typeof ComboboxLabel;
168
+ Label: typeof ComboboxLabel;
169
+ Value: typeof Combobox$1.Value;
170
+ Chips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
171
+ Chip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
172
+ ChipsInput: typeof ComboboxInput;
173
+ Collection: typeof Combobox$1.Collection;
174
+ Separator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
175
+ };
176
+ //#endregion
177
+ export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPositioner, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };