@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.
- package/dist/Button-QCM8ZKgR.d.ts +98 -0
- package/dist/CodeBlock-CttHhWcb.js +356 -0
- package/dist/CodeBlock-V6pgafSS.d.ts +174 -0
- package/dist/Select-CRsKCJ9x.d.ts +200 -0
- package/dist/class-names-9UtZwb0J.js +12 -0
- package/dist/components/Accordion.d.ts +81 -0
- package/dist/components/Accordion.js +97 -0
- package/dist/components/AgentConnection.d.ts +69 -0
- package/dist/components/AgentConnection.js +176 -0
- package/dist/components/AlertDialog.d.ts +148 -0
- package/dist/components/AlertDialog.js +141 -0
- package/dist/components/Artifact.d.ts +128 -0
- package/dist/components/Artifact.js +115 -0
- package/dist/components/Autocomplete.d.ts +186 -0
- package/dist/components/Autocomplete.js +186 -0
- package/dist/components/Avatar.d.ts +134 -0
- package/dist/components/Avatar.js +118 -0
- package/dist/components/Badge.d.ts +68 -0
- package/dist/components/Badge.js +108 -0
- package/dist/components/Button.d.ts +2 -0
- package/dist/components/Button.js +73 -0
- package/dist/components/Card.d.ts +87 -0
- package/dist/components/Card.js +81 -0
- package/dist/components/ChainOfThought.d.ts +153 -0
- package/dist/components/ChainOfThought.js +157 -0
- package/dist/components/Checkbox.d.ts +35 -0
- package/dist/components/Checkbox.js +47 -0
- package/dist/components/CheckboxGroup.d.ts +76 -0
- package/dist/components/CheckboxGroup.js +69 -0
- package/dist/components/CodeBlock.d.ts +2 -0
- package/dist/components/CodeBlock.js +2 -0
- package/dist/components/Collapsible.d.ts +127 -0
- package/dist/components/Collapsible.js +103 -0
- package/dist/components/Combobox.d.ts +177 -0
- package/dist/components/Combobox.js +179 -0
- package/dist/components/Commit.d.ts +265 -0
- package/dist/components/Commit.js +282 -0
- package/dist/components/Context.d.ts +129 -0
- package/dist/components/Context.js +309 -0
- package/dist/components/ContextMenu.d.ts +282 -0
- package/dist/components/ContextMenu.js +270 -0
- package/dist/components/Conversation.d.ts +166 -0
- package/dist/components/Conversation.js +202 -0
- package/dist/components/Dialog.d.ts +120 -0
- package/dist/components/Dialog.js +114 -0
- package/dist/components/EnvironmentVariables.d.ts +176 -0
- package/dist/components/EnvironmentVariables.js +221 -0
- package/dist/components/Field.d.ts +281 -0
- package/dist/components/Field.js +274 -0
- package/dist/components/Fieldset.d.ts +93 -0
- package/dist/components/Fieldset.js +81 -0
- package/dist/components/FileTree.d.ts +116 -0
- package/dist/components/FileTree.js +310 -0
- package/dist/components/Form.d.ts +94 -0
- package/dist/components/Form.js +88 -0
- package/dist/components/GithubMotionMark.d.ts +13 -0
- package/dist/components/GithubMotionMark.js +23 -0
- package/dist/components/Input.d.ts +33 -0
- package/dist/components/Input.js +27 -0
- package/dist/components/Label.d.ts +44 -0
- package/dist/components/Label.js +41 -0
- package/dist/components/Menu.d.ts +395 -0
- package/dist/components/Menu.js +338 -0
- package/dist/components/Menubar.d.ts +331 -0
- package/dist/components/Menubar.js +299 -0
- package/dist/components/Message.d.ts +216 -0
- package/dist/components/Message.js +245 -0
- package/dist/components/Meter.d.ts +151 -0
- package/dist/components/Meter.js +121 -0
- package/dist/components/ModelSelector.d.ts +198 -0
- package/dist/components/ModelSelector.js +306 -0
- package/dist/components/NaniteScene.d.ts +33 -0
- package/dist/components/NaniteScene.js +405 -0
- package/dist/components/NavigationMenu.d.ts +256 -0
- package/dist/components/NavigationMenu.js +228 -0
- package/dist/components/NumberField.d.ts +159 -0
- package/dist/components/NumberField.js +123 -0
- package/dist/components/Popover.d.ts +278 -0
- package/dist/components/Popover.js +245 -0
- package/dist/components/PreviewCard.d.ts +156 -0
- package/dist/components/PreviewCard.js +156 -0
- package/dist/components/PricingPage.d.ts +209 -0
- package/dist/components/PricingPage.js +506 -0
- package/dist/components/Progress.d.ts +58 -0
- package/dist/components/Progress.js +51 -0
- package/dist/components/PromptInput.d.ts +399 -0
- package/dist/components/PromptInput.js +737 -0
- package/dist/components/Queue.d.ts +241 -0
- package/dist/components/Queue.js +225 -0
- package/dist/components/RadioGroup.d.ts +78 -0
- package/dist/components/RadioGroup.js +72 -0
- package/dist/components/Reasoning.d.ts +88 -0
- package/dist/components/Reasoning.js +187 -0
- package/dist/components/ScrollArea.d.ts +160 -0
- package/dist/components/ScrollArea.js +145 -0
- package/dist/components/Select.d.ts +2 -0
- package/dist/components/Select.js +260 -0
- package/dist/components/Separator.d.ts +45 -0
- package/dist/components/Separator.js +40 -0
- package/dist/components/Shell.d.ts +163 -0
- package/dist/components/Shell.js +137 -0
- package/dist/components/Slider.d.ts +120 -0
- package/dist/components/Slider.js +115 -0
- package/dist/components/Sources.d.ts +91 -0
- package/dist/components/Sources.js +121 -0
- package/dist/components/Stepper.d.ts +190 -0
- package/dist/components/Stepper.js +315 -0
- package/dist/components/Switch.d.ts +57 -0
- package/dist/components/Switch.js +55 -0
- package/dist/components/Tabs.d.ts +84 -0
- package/dist/components/Tabs.js +78 -0
- package/dist/components/Task.d.ts +100 -0
- package/dist/components/Task.js +120 -0
- package/dist/components/Terminal.d.ts +118 -0
- package/dist/components/Terminal.js +234 -0
- package/dist/components/TestResults.d.ts +236 -0
- package/dist/components/TestResults.js +346 -0
- package/dist/components/Toast.d.ts +192 -0
- package/dist/components/Toast.js +163 -0
- package/dist/components/Toggle.d.ts +69 -0
- package/dist/components/Toggle.js +66 -0
- package/dist/components/ToggleGroup.d.ts +69 -0
- package/dist/components/ToggleGroup.js +99 -0
- package/dist/components/Tool.d.ts +119 -0
- package/dist/components/Tool.js +192 -0
- package/dist/components/Toolbar.d.ts +162 -0
- package/dist/components/Toolbar.js +126 -0
- package/dist/components/Tooltip.d.ts +81 -0
- package/dist/components/Tooltip.js +74 -0
- package/dist/components/WebPreview.d.ts +143 -0
- package/dist/components/WebPreview.js +280 -0
- package/dist/components/useStickToBottom.d.ts +30 -0
- package/dist/components/useStickToBottom.js +95 -0
- package/dist/copy-button-BIATcZWZ.d.ts +16 -0
- package/dist/copy-button-BNgclDrO.js +43 -0
- package/dist/icons-BsWc8g4E.js +221 -0
- package/dist/styles/accordion.css +10 -10
- package/dist/styles/agent-connection.css +18 -17
- package/dist/styles/alert-dialog.css +48 -29
- package/dist/styles/artifact.css +10 -10
- package/dist/styles/autocomplete.css +25 -24
- package/dist/styles/avatar.css +96 -6
- package/dist/styles/badge.css +78 -14
- package/dist/styles/base.css +9 -9
- package/dist/styles/button.css +57 -38
- package/dist/styles/card.css +57 -10
- package/dist/styles/chain-of-thought.css +47 -33
- package/dist/styles/checkbox.css +24 -10
- package/dist/styles/code-block.css +22 -15
- package/dist/styles/collapsible.css +14 -12
- package/dist/styles/combobox.css +26 -25
- package/dist/styles/commit.css +49 -24
- package/dist/styles/context-menu.css +70 -16
- package/dist/styles/context.css +15 -15
- package/dist/styles/conversation.css +12 -12
- package/dist/styles/dialog.css +52 -16
- package/dist/styles/environment-variables.css +19 -19
- package/dist/styles/field.css +184 -22
- package/dist/styles/fieldset.css +5 -4
- package/dist/styles/file-tree.css +17 -17
- package/dist/styles/index.css.d.ts +1 -0
- package/dist/styles/input.css +45 -11
- package/dist/styles/label.css +21 -4
- package/dist/styles/menu.css +55 -32
- package/dist/styles/menubar.css +80 -28
- package/dist/styles/message.css +22 -13
- package/dist/styles/meter.css +8 -8
- package/dist/styles/model-selector.css +33 -21
- package/dist/styles/navigation-menu.css +26 -24
- package/dist/styles/number-field.css +20 -18
- package/dist/styles/popover.css +38 -28
- package/dist/styles/preview-card.css +15 -13
- package/dist/styles/pricing-page.css +53 -53
- package/dist/styles/progress.css +7 -7
- package/dist/styles/prompt-input.css +73 -24
- package/dist/styles/queue.css +58 -32
- package/dist/styles/radio.css +26 -11
- package/dist/styles/reasoning.css +15 -11
- package/dist/styles/scroll-area.css +6 -6
- package/dist/styles/scrollbars.css +4 -4
- package/dist/styles/select.css +84 -25
- package/dist/styles/separator.css +1 -1
- package/dist/styles/shell.css +21 -20
- package/dist/styles/slider.css +35 -11
- package/dist/styles/sources.css +20 -20
- package/dist/styles/stepper.css +22 -22
- package/dist/styles/switch.css +29 -13
- package/dist/styles/tabs.css +23 -16
- package/dist/styles/task.css +27 -23
- package/dist/styles/terminal.css +16 -13
- package/dist/styles/test-results.css +79 -32
- package/dist/styles/toast.css +26 -25
- package/dist/styles/toggle-group.css +12 -12
- package/dist/styles/toggle.css +29 -11
- package/dist/styles/tool.css +54 -32
- package/dist/styles/toolbar.css +30 -28
- package/dist/styles/tooltip.css +10 -8
- package/dist/styles/web-preview.css +37 -21
- package/dist/utils/structured-code.d.ts +10 -0
- package/dist/utils/structured-code.js +81 -0
- package/package.json +16 -7
- package/dist/index.d.ts +0 -7236
- 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 };
|