@bergetai/ui 0.19.2 → 0.20.0

package/dist/components/composer/Composer.cjs

@@ -0,0 +1,81 @@
+"use client";
+const require_utils = require("../../lib/utils.cjs");
+const require_input_group = require("../../primitives/input-group.cjs");
+const require_InputGroup = require("../input-group/InputGroup.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/composer/Composer.tsx
+/**
+* Berget composer: the chat input surface from the Playground composer.
+*
+* A thin composition over the Berget `InputGroup` wrapper (which already
+* carries the composer treatment — raised surface, transparent border,
+* 16px radius) with a textarea, a bottom action row, and a circular submit
+* button.
+*
+* Extra actions are added by composition: place anything inside
+* `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,
+* toggles — and the submit button stays pinned to the end.
+*
+* ```tsx
+* <Composer>
+*   <ComposerTextarea placeholder="Ask anything…" />
+*   <ComposerActions>
+*     <DropdownMenu>…</DropdownMenu>
+*     <ComposerSubmit aria-label="Send"><ArrowUpIcon /></ComposerSubmit>
+*   </ComposerActions>
+* </Composer>
+* ```
+*
+* Submission is owned by the consumer — wrap in a `<form onSubmit>` and let
+* `ComposerSubmit` (default `type="submit"`) trigger it.
+*/
+const Composer = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputGroup.InputGroup, {
+	className: require_utils.cn(`
+        gap-0 border-berget-composer-border bg-berget-composer-bg
+        has-[[data-slot=input-group-control]:focus-visible]:border-berget-composer-border
+        dark:border-berget-composer-border dark:bg-berget-composer-bg
+      `, className),
+	...props
+});
+Composer.displayName = "Composer";
+const ComposerTextarea = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_group.InputGroupTextarea, {
+	className: require_utils.cn(`
+        max-h-40 min-h-9 px-3 py-2
+        placeholder:text-berget-muted-foreground/50
+      `, className),
+	...props
+});
+ComposerTextarea.displayName = "ComposerTextarea";
+/**
+* Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in
+* the row render round, so consumer-added actions share the composer's
+* circular button treatment.
+*/
+const ComposerActions = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputGroup.InputGroupAddon, {
+	align: "block-end",
+	className: require_utils.cn(`
+        pt-0.5
+        **:data-[size^=icon]:rounded-berget-full
+      `, className),
+	...props
+});
+ComposerActions.displayName = "ComposerActions";
+/**
+* Circular send button. Pins to the end of the action row via `ml-auto`,
+* submits the surrounding form by default.
+*/
+const ComposerSubmit = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_group.InputGroupButton, {
+	type: "submit",
+	variant: "default",
+	size: "icon-sm",
+	className: require_utils.cn("ml-auto rounded-berget-full", className),
+	...props
+});
+ComposerSubmit.displayName = "ComposerSubmit";
+//#endregion
+exports.Composer = Composer;
+exports.ComposerActions = ComposerActions;
+exports.ComposerSubmit = ComposerSubmit;
+exports.ComposerTextarea = ComposerTextarea;
+
+//# sourceMappingURL=Composer.cjs.map

package/dist/components/composer/Composer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.cjs","names":["InputGroup","cn","InputGroupTextarea","InputGroupAddon","InputGroupButton"],"sources":["../../../src/components/composer/Composer.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  InputGroup,\n  type InputGroupAddonProps,\n  type InputGroupProps,\n  InputGroupAddon,\n  InputGroupTextarea,\n  InputGroupButton,\n} from '../input-group';\n\nexport type ComposerProps = InputGroupProps;\nexport type ComposerTextareaProps = React.ComponentProps<typeof InputGroupTextarea>;\nexport type ComposerActionsProps = InputGroupAddonProps;\nexport type ComposerSubmitProps = Omit<React.ComponentProps<'button'>, 'type'>;\n\n/**\n * Berget composer: the chat input surface from the Playground composer.\n *\n * A thin composition over the Berget `InputGroup` wrapper (which already\n * carries the composer treatment — raised surface, transparent border,\n * 16px radius) with a textarea, a bottom action row, and a circular submit\n * button.\n *\n * Extra actions are added by composition: place anything inside\n * `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,\n * toggles — and the submit button stays pinned to the end.\n *\n * ```tsx\n * <Composer>\n *   <ComposerTextarea placeholder=\"Ask anything…\" />\n *   <ComposerActions>\n *     <DropdownMenu>…</DropdownMenu>\n *     <ComposerSubmit aria-label=\"Send\"><ArrowUpIcon /></ComposerSubmit>\n *   </ComposerActions>\n * </Composer>\n * ```\n *\n * Submission is owned by the consumer — wrap in a `<form onSubmit>` and let\n * `ComposerSubmit` (default `type=\"submit\"`) trigger it.\n */\nconst Composer = ({ className, ...props }: ComposerProps) => (\n  // bg/border come from component-scoped --berget-composer-* tokens: solid\n  // granite-900 bg + granite-800 border in dark, raised tint + subtle border\n  // in light. `dark:` classes would track prefers-color-scheme, not the\n  // Berget data-theme — do not convert. The has-[...focus] twin keeps the\n  // border through focus, overriding the wrapper's focus:border-transparent.\n  <InputGroup\n    className={cn(\n      `\n        gap-0 border-berget-composer-border bg-berget-composer-bg\n        has-[[data-slot=input-group-control]:focus-visible]:border-berget-composer-border\n        dark:border-berget-composer-border dark:bg-berget-composer-bg\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposer.displayName = 'Composer';\n\nconst ComposerTextarea = ({ className, ...props }: ComposerTextareaProps) => (\n  <InputGroupTextarea\n    // Softer placeholder than the primitive's `placeholder:text-muted-foreground`.\n    className={cn(\n      `\n        max-h-40 min-h-9 px-3 py-2\n        placeholder:text-berget-muted-foreground/50\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposerTextarea.displayName = 'ComposerTextarea';\n\n/**\n * Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in\n * the row render round, so consumer-added actions share the composer's\n * circular button treatment.\n */\nconst ComposerActions = ({ className, ...props }: ComposerActionsProps) => (\n  <InputGroupAddon\n    align=\"block-end\"\n    className={cn(\n      `\n        pt-0.5\n        **:data-[size^=icon]:rounded-berget-full\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposerActions.displayName = 'ComposerActions';\n\n/**\n * Circular send button. Pins to the end of the action row via `ml-auto`,\n * submits the surrounding form by default.\n */\nconst ComposerSubmit = ({ className, ...props }: ComposerSubmitProps) => (\n  <InputGroupButton\n    type=\"submit\"\n    variant=\"default\"\n    size=\"icon-sm\"\n    className={cn('ml-auto rounded-berget-full', className)}\n    {...props}\n  />\n);\nComposerSubmit.displayName = 'ComposerSubmit';\n\nexport { Composer, ComposerTextarea, ComposerActions, ComposerSubmit };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAY,EAAE,WAAW,GAAG,YAMhC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;CACE,WAAWC,cAAAA,GACT;;;;SAKA,SACF;CACA,GAAI;AACL,CAAA;AAEH,SAAS,cAAc;AAEvB,MAAM,oBAAoB,EAAE,WAAW,GAAG,YACxC,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,oBAAD;CAEE,WAAWD,cAAAA,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,iBAAiB,cAAc;;;;;;AAO/B,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,iBAAA,GAAA,kBAAA,IAAA,CAACE,mBAAAA,iBAAD;CACE,OAAM;CACN,WAAWF,cAAAA,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,gBAAgB,cAAc;;;;;AAM9B,MAAM,kBAAkB,EAAE,WAAW,GAAG,YACtC,iBAAA,GAAA,kBAAA,IAAA,CAACG,oBAAAA,kBAAD;CACE,MAAK;CACL,SAAQ;CACR,MAAK;CACL,WAAWH,cAAAA,GAAG,+BAA+B,SAAS;CACtD,GAAI;AACL,CAAA;AAEH,eAAe,cAAc"}

package/dist/components/composer/Composer.d.cts

@@ -0,0 +1,62 @@
+import { InputGroupTextarea } from "../../primitives/input-group.cjs";
+import { InputGroupAddonProps, InputGroupProps } from "../input-group/InputGroup.cjs";
+import "../input-group/index.cjs";
+import * as React from "react";
+//#region src/components/composer/Composer.d.ts
+export type ComposerProps = InputGroupProps;
+export type ComposerTextareaProps = React.ComponentProps<typeof InputGroupTextarea>;
+export type ComposerActionsProps = InputGroupAddonProps;
+export type ComposerSubmitProps = Omit<React.ComponentProps<'button'>, 'type'>;
+/**
+ * Berget composer: the chat input surface from the Playground composer.
+ *
+ * A thin composition over the Berget `InputGroup` wrapper (which already
+ * carries the composer treatment — raised surface, transparent border,
+ * 16px radius) with a textarea, a bottom action row, and a circular submit
+ * button.
+ *
+ * Extra actions are added by composition: place anything inside
+ * `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,
+ * toggles — and the submit button stays pinned to the end.
+ *
+ * ```tsx
+ * <Composer>
+ *   <ComposerTextarea placeholder="Ask anything…" />
+ *   <ComposerActions>
+ *     <DropdownMenu>…</DropdownMenu>
+ *     <ComposerSubmit aria-label="Send"><ArrowUpIcon /></ComposerSubmit>
+ *   </ComposerActions>
+ * </Composer>
+ * ```
+ *
+ * Submission is owned by the consumer — wrap in a `<form onSubmit>` and let
+ * `ComposerSubmit` (default `type="submit"`) trigger it.
+ */
+declare const Composer: {
+  ({ className, ...props }: ComposerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+declare const ComposerTextarea: {
+  ({ className, ...props }: ComposerTextareaProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in
+ * the row render round, so consumer-added actions share the composer's
+ * circular button treatment.
+ */
+declare const ComposerActions: {
+  ({ className, ...props }: ComposerActionsProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Circular send button. Pins to the end of the action row via `ml-auto`,
+ * submits the surrounding form by default.
+ */
+declare const ComposerSubmit: {
+  ({ className, ...props }: ComposerSubmitProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Composer, ComposerActions, ComposerSubmit, ComposerTextarea };
+//# sourceMappingURL=Composer.d.cts.map

package/dist/components/composer/Composer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.d.cts","names":[],"sources":["../../../src/components/composer/Composer.tsx"],"mappings":";;;;;YAaY,gBAAgB;YAChB,wBAAwB,MAAM,sBAAsB;YACpD,uBAAuB;YACvB,sBAAsB,KAAK,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvC;KAAqC,cAAA,SAAA,4CAAa,IAAA;;;cAoBlD;KAA6C,cAAA,SAAA,oDAAqB,IAAA;;;;;;;;cAoBlE;KAA4C,cAAA,SAAA,mDAAoB,IAAA;;;;;;;cAmBhE;KAA2C,cAAA,SAAA,kDAAmB,IAAA"}

package/dist/components/composer/Composer.d.mts

@@ -0,0 +1,62 @@
+import { InputGroupTextarea } from "../../primitives/input-group.mjs";
+import { InputGroupAddonProps, InputGroupProps } from "../input-group/InputGroup.mjs";
+import "../input-group/index.mjs";
+import * as React from "react";
+//#region src/components/composer/Composer.d.ts
+export type ComposerProps = InputGroupProps;
+export type ComposerTextareaProps = React.ComponentProps<typeof InputGroupTextarea>;
+export type ComposerActionsProps = InputGroupAddonProps;
+export type ComposerSubmitProps = Omit<React.ComponentProps<'button'>, 'type'>;
+/**
+ * Berget composer: the chat input surface from the Playground composer.
+ *
+ * A thin composition over the Berget `InputGroup` wrapper (which already
+ * carries the composer treatment — raised surface, transparent border,
+ * 16px radius) with a textarea, a bottom action row, and a circular submit
+ * button.
+ *
+ * Extra actions are added by composition: place anything inside
+ * `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,
+ * toggles — and the submit button stays pinned to the end.
+ *
+ * ```tsx
+ * <Composer>
+ *   <ComposerTextarea placeholder="Ask anything…" />
+ *   <ComposerActions>
+ *     <DropdownMenu>…</DropdownMenu>
+ *     <ComposerSubmit aria-label="Send"><ArrowUpIcon /></ComposerSubmit>
+ *   </ComposerActions>
+ * </Composer>
+ * ```
+ *
+ * Submission is owned by the consumer — wrap in a `<form onSubmit>` and let
+ * `ComposerSubmit` (default `type="submit"`) trigger it.
+ */
+declare const Composer: {
+  ({ className, ...props }: ComposerProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+declare const ComposerTextarea: {
+  ({ className, ...props }: ComposerTextareaProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in
+ * the row render round, so consumer-added actions share the composer's
+ * circular button treatment.
+ */
+declare const ComposerActions: {
+  ({ className, ...props }: ComposerActionsProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+/**
+ * Circular send button. Pins to the end of the action row via `ml-auto`,
+ * submits the surrounding form by default.
+ */
+declare const ComposerSubmit: {
+  ({ className, ...props }: ComposerSubmitProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Composer, ComposerActions, ComposerSubmit, ComposerTextarea };
+//# sourceMappingURL=Composer.d.mts.map

package/dist/components/composer/Composer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.d.mts","names":[],"sources":["../../../src/components/composer/Composer.tsx"],"mappings":";;;;;YAaY,gBAAgB;YAChB,wBAAwB,MAAM,sBAAsB;YACpD,uBAAuB;YACvB,sBAAsB,KAAK,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvC;KAAqC,cAAA,SAAA,4CAAa,IAAA;;;cAoBlD;KAA6C,cAAA,SAAA,oDAAqB,IAAA;;;;;;;;cAoBlE;KAA4C,cAAA,SAAA,mDAAoB,IAAA;;;;;;;cAmBhE;KAA2C,cAAA,SAAA,kDAAmB,IAAA"}

package/dist/components/composer/Composer.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../../lib/utils.mjs";
+import { InputGroupButton, InputGroupTextarea } from "../../primitives/input-group.mjs";
+import { InputGroup, InputGroupAddon } from "../input-group/InputGroup.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/composer/Composer.tsx
+/**
+* Berget composer: the chat input surface from the Playground composer.
+*
+* A thin composition over the Berget `InputGroup` wrapper (which already
+* carries the composer treatment — raised surface, transparent border,
+* 16px radius) with a textarea, a bottom action row, and a circular submit
+* button.
+*
+* Extra actions are added by composition: place anything inside
+* `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,
+* toggles — and the submit button stays pinned to the end.
+*
+* ```tsx
+* <Composer>
+*   <ComposerTextarea placeholder="Ask anything…" />
+*   <ComposerActions>
+*     <DropdownMenu>…</DropdownMenu>
+*     <ComposerSubmit aria-label="Send"><ArrowUpIcon /></ComposerSubmit>
+*   </ComposerActions>
+* </Composer>
+* ```
+*
+* Submission is owned by the consumer — wrap in a `<form onSubmit>` and let
+* `ComposerSubmit` (default `type="submit"`) trigger it.
+*/
+const Composer = ({ className, ...props }) => /* @__PURE__ */ jsx(InputGroup, {
+	className: cn(`
+        gap-0 border-berget-composer-border bg-berget-composer-bg
+        has-[[data-slot=input-group-control]:focus-visible]:border-berget-composer-border
+        dark:border-berget-composer-border dark:bg-berget-composer-bg
+      `, className),
+	...props
+});
+Composer.displayName = "Composer";
+const ComposerTextarea = ({ className, ...props }) => /* @__PURE__ */ jsx(InputGroupTextarea, {
+	className: cn(`
+        max-h-40 min-h-9 px-3 py-2
+        placeholder:text-berget-muted-foreground/50
+      `, className),
+	...props
+});
+ComposerTextarea.displayName = "ComposerTextarea";
+/**
+* Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in
+* the row render round, so consumer-added actions share the composer's
+* circular button treatment.
+*/
+const ComposerActions = ({ className, ...props }) => /* @__PURE__ */ jsx(InputGroupAddon, {
+	align: "block-end",
+	className: cn(`
+        pt-0.5
+        **:data-[size^=icon]:rounded-berget-full
+      `, className),
+	...props
+});
+ComposerActions.displayName = "ComposerActions";
+/**
+* Circular send button. Pins to the end of the action row via `ml-auto`,
+* submits the surrounding form by default.
+*/
+const ComposerSubmit = ({ className, ...props }) => /* @__PURE__ */ jsx(InputGroupButton, {
+	type: "submit",
+	variant: "default",
+	size: "icon-sm",
+	className: cn("ml-auto rounded-berget-full", className),
+	...props
+});
+ComposerSubmit.displayName = "ComposerSubmit";
+//#endregion
+export { Composer, ComposerActions, ComposerSubmit, ComposerTextarea };
+
+//# sourceMappingURL=Composer.mjs.map

package/dist/components/composer/Composer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.mjs","names":[],"sources":["../../../src/components/composer/Composer.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  InputGroup,\n  type InputGroupAddonProps,\n  type InputGroupProps,\n  InputGroupAddon,\n  InputGroupTextarea,\n  InputGroupButton,\n} from '../input-group';\n\nexport type ComposerProps = InputGroupProps;\nexport type ComposerTextareaProps = React.ComponentProps<typeof InputGroupTextarea>;\nexport type ComposerActionsProps = InputGroupAddonProps;\nexport type ComposerSubmitProps = Omit<React.ComponentProps<'button'>, 'type'>;\n\n/**\n * Berget composer: the chat input surface from the Playground composer.\n *\n * A thin composition over the Berget `InputGroup` wrapper (which already\n * carries the composer treatment — raised surface, transparent border,\n * 16px radius) with a textarea, a bottom action row, and a circular submit\n * button.\n *\n * Extra actions are added by composition: place anything inside\n * `ComposerActions` before `ComposerSubmit` — dropdown triggers, sliders,\n * toggles — and the submit button stays pinned to the end.\n *\n * ```tsx\n * <Composer>\n *   <ComposerTextarea placeholder=\"Ask anything…\" />\n *   <ComposerActions>\n *     <DropdownMenu>…</DropdownMenu>\n *     <ComposerSubmit aria-label=\"Send\"><ArrowUpIcon /></ComposerSubmit>\n *   </ComposerActions>\n * </Composer>\n * ```\n *\n * Submission is owned by the consumer — wrap in a `<form onSubmit>` and let\n * `ComposerSubmit` (default `type=\"submit\"`) trigger it.\n */\nconst Composer = ({ className, ...props }: ComposerProps) => (\n  // bg/border come from component-scoped --berget-composer-* tokens: solid\n  // granite-900 bg + granite-800 border in dark, raised tint + subtle border\n  // in light. `dark:` classes would track prefers-color-scheme, not the\n  // Berget data-theme — do not convert. The has-[...focus] twin keeps the\n  // border through focus, overriding the wrapper's focus:border-transparent.\n  <InputGroup\n    className={cn(\n      `\n        gap-0 border-berget-composer-border bg-berget-composer-bg\n        has-[[data-slot=input-group-control]:focus-visible]:border-berget-composer-border\n        dark:border-berget-composer-border dark:bg-berget-composer-bg\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposer.displayName = 'Composer';\n\nconst ComposerTextarea = ({ className, ...props }: ComposerTextareaProps) => (\n  <InputGroupTextarea\n    // Softer placeholder than the primitive's `placeholder:text-muted-foreground`.\n    className={cn(\n      `\n        max-h-40 min-h-9 px-3 py-2\n        placeholder:text-berget-muted-foreground/50\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposerTextarea.displayName = 'ComposerTextarea';\n\n/**\n * Bottom action row of the composer. Icon buttons (`icon-*` sizes) placed in\n * the row render round, so consumer-added actions share the composer's\n * circular button treatment.\n */\nconst ComposerActions = ({ className, ...props }: ComposerActionsProps) => (\n  <InputGroupAddon\n    align=\"block-end\"\n    className={cn(\n      `\n        pt-0.5\n        **:data-[size^=icon]:rounded-berget-full\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nComposerActions.displayName = 'ComposerActions';\n\n/**\n * Circular send button. Pins to the end of the action row via `ml-auto`,\n * submits the surrounding form by default.\n */\nconst ComposerSubmit = ({ className, ...props }: ComposerSubmitProps) => (\n  <InputGroupButton\n    type=\"submit\"\n    variant=\"default\"\n    size=\"icon-sm\"\n    className={cn('ml-auto rounded-berget-full', className)}\n    {...props}\n  />\n);\nComposerSubmit.displayName = 'ComposerSubmit';\n\nexport { Composer, ComposerTextarea, ComposerActions, ComposerSubmit };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAY,EAAE,WAAW,GAAG,YAMhC,oBAAC,YAAD;CACE,WAAW,GACT;;;;SAKA,SACF;CACA,GAAI;AACL,CAAA;AAEH,SAAS,cAAc;AAEvB,MAAM,oBAAoB,EAAE,WAAW,GAAG,YACxC,oBAAC,oBAAD;CAEE,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,iBAAiB,cAAc;;;;;;AAO/B,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,oBAAC,iBAAD;CACE,OAAM;CACN,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,gBAAgB,cAAc;;;;;AAM9B,MAAM,kBAAkB,EAAE,WAAW,GAAG,YACtC,oBAAC,kBAAD;CACE,MAAK;CACL,SAAQ;CACR,MAAK;CACL,WAAW,GAAG,+BAA+B,SAAS;CACtD,GAAI;AACL,CAAA;AAEH,eAAe,cAAc"}

package/dist/components/composer/index.d.cts

@@ -0,0 +1,2 @@
+import { Composer, ComposerActions, ComposerActionsProps, ComposerProps, ComposerSubmit, ComposerSubmitProps, ComposerTextarea, ComposerTextareaProps } from "./Composer.cjs";
+export { Composer, ComposerActions, type ComposerActionsProps, type ComposerProps, ComposerSubmit, type ComposerSubmitProps, ComposerTextarea, type ComposerTextareaProps };

package/dist/components/composer/index.d.mts

@@ -0,0 +1,2 @@
+import { Composer, ComposerActions, ComposerActionsProps, ComposerProps, ComposerSubmit, ComposerSubmitProps, ComposerTextarea, ComposerTextareaProps } from "./Composer.mjs";
+export { Composer, ComposerActions, type ComposerActionsProps, type ComposerProps, ComposerSubmit, type ComposerSubmitProps, ComposerTextarea, type ComposerTextareaProps };

package/dist/index.cjs

@@ -45,6 +45,7 @@ const require_Slider = require("./components/slider/Slider.cjs");
 const require_textarea = require("./primitives/textarea.cjs");
 const require_input_group = require("./primitives/input-group.cjs");
 const require_InputGroup = require("./components/input-group/InputGroup.cjs");
+const require_Composer = require("./components/composer/Composer.cjs");
 const require_Checkbox = require("./components/checkbox/Checkbox.cjs");
 const require_Switch = require("./components/switch/Switch.cjs");
 const require_select = require("./primitives/select.cjs");
@@ -118,6 +119,10 @@ exports.ComboboxSeparator = require_combobox.ComboboxSeparator;
 exports.ComboboxStatus = require_combobox.ComboboxStatus;
 exports.ComboboxTrigger = require_combobox.ComboboxTrigger;
 exports.ComboboxValue = require_combobox.ComboboxValue;
+exports.Composer = require_Composer.Composer;
+exports.ComposerActions = require_Composer.ComposerActions;
+exports.ComposerSubmit = require_Composer.ComposerSubmit;
+exports.ComposerTextarea = require_Composer.ComposerTextarea;
 exports.Container = require_Container.Container;
 exports.CountrySelect = require_CountrySelect.CountrySelect;
 exports.Dialog = require_Dialog.Dialog;

package/dist/index.d.cts

@@ -71,6 +71,8 @@ import "./components/slider/index.cjs";
 import { InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.cjs";
 import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps } from "./components/input-group/InputGroup.cjs";
 import "./components/input-group/index.cjs";
+import { Composer, ComposerActions, ComposerActionsProps, ComposerProps, ComposerSubmit, ComposerSubmitProps, ComposerTextarea, ComposerTextareaProps } from "./components/composer/Composer.cjs";
+import "./components/composer/index.cjs";
 import { Checkbox, CheckboxProps, checkboxVariants } from "./components/checkbox/Checkbox.cjs";
 import "./components/checkbox/index.cjs";
 import { Switch, SwitchProps, switchRootVariants, switchThumbVariants } from "./components/switch/Switch.cjs";
@@ -111,4 +113,4 @@ import { cn } from "./lib/utils.cjs";
 import { WindowFrame, WindowFrameProps, WindowTab } from "./components/window-frame/WindowFrame.cjs";
 import "./components/window-frame/index.cjs";
 import { FOG_BRAND_PALETTE, FogIllustration, FogIllustrationProps, FogPalette } from "./components/fog-illustration/FogIllustration.cjs";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Composer, ComposerActions, type ComposerActionsProps, type ComposerProps, ComposerSubmit, type ComposerSubmitProps, ComposerTextarea, type ComposerTextareaProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/index.d.mts

@@ -71,6 +71,8 @@ import "./components/slider/index.mjs";
 import { InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.mjs";
 import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps } from "./components/input-group/InputGroup.mjs";
 import "./components/input-group/index.mjs";
+import { Composer, ComposerActions, ComposerActionsProps, ComposerProps, ComposerSubmit, ComposerSubmitProps, ComposerTextarea, ComposerTextareaProps } from "./components/composer/Composer.mjs";
+import "./components/composer/index.mjs";
 import { Checkbox, CheckboxProps, checkboxVariants } from "./components/checkbox/Checkbox.mjs";
 import "./components/checkbox/index.mjs";
 import { Switch, SwitchProps, switchRootVariants, switchThumbVariants } from "./components/switch/Switch.mjs";
@@ -111,4 +113,4 @@ import { cn } from "./lib/utils.mjs";
 import { WindowFrame, WindowFrameProps, WindowTab } from "./components/window-frame/WindowFrame.mjs";
 import "./components/window-frame/index.mjs";
 import { FOG_BRAND_PALETTE, FogIllustration, FogIllustrationProps, FogPalette } from "./components/fog-illustration/FogIllustration.mjs";
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, type AnchorVariantsProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, type ButtonProps, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Composer, ComposerActions, type ComposerActionsProps, type ComposerProps, ComposerSubmit, type ComposerSubmitProps, ComposerTextarea, type ComposerTextareaProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, Icon, type IconProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, InputGroupInput, type InputGroupProps, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, type ModelCardProps, type ModelCategory, type ModelLifecycle, ModelLogo, type ModelLogoProps, type ModelLogoProvider, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TerminalExample, Textarea, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/index.mjs

@@ -44,6 +44,7 @@ import { Slider } from "./components/slider/Slider.mjs";
 import { Textarea } from "./primitives/textarea.mjs";
 import { InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.mjs";
 import { InputGroup, InputGroupAddon } from "./components/input-group/InputGroup.mjs";
+import { Composer, ComposerActions, ComposerSubmit, ComposerTextarea } from "./components/composer/Composer.mjs";
 import { Checkbox, checkboxVariants } from "./components/checkbox/Checkbox.mjs";
 import { Switch, switchRootVariants, switchThumbVariants } from "./components/switch/Switch.mjs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.mjs";
@@ -63,4 +64,4 @@ import { CodeBlock, CodeBlockHeader, CodeBlockTitle } from "./components/code-bl
 import { useHighlightedCode } from "./hooks/use-highlighted-code.mjs";
 import { WindowFrame } from "./components/window-frame/WindowFrame.mjs";
 import { FOG_BRAND_PALETTE, FogIllustration } from "./components/fog-illustration/FogIllustration.mjs";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Anchor, Badge, BergetLogo, Box, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Container, CountrySelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, Grid, Icon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LanguageSelect, Link, List, ListHeader, ListItem, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, ModelLogo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, WindowFrame, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Anchor, Badge, BergetLogo, Box, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, COUNTRIES, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Composer, ComposerActions, ComposerSubmit, ComposerTextarea, Container, CountrySelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FOG_BRAND_PALETTE, FeatureList, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, Grid, Icon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LanguageSelect, Link, List, ListHeader, ListItem, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelCard, ModelLogo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLogo, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPageHeader, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, WindowFrame, alertVariants, anchorVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, categoryLabels, checkboxVariants, cn, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, switchRootVariants, switchThumbVariants, tabsListVariants, tabsTriggerVariants, typographyVariants, useHighlightedCode, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };

package/dist/styles/index.css

@@ -251,6 +251,13 @@
   --berget-destructive: color-mix(in oklch, var(--berget-brand-muscaria-400) 20%, transparent);
   --berget-destructive-border: var(--berget-brand-muscaria-400);
   --berget-destructive-foreground: var(--berget-brand-muscaria-400);
+  /* ^ The full-strength colour. `destructive` utilities (text-destructive,
+     border-destructive/50, ring-destructive/20, bg-destructive/10 …) follow
+     the shadcn contract and assume a SOLID base colour, so the @theme alias
+     (section D) maps --color-destructive to this token — NOT to the 20%
+     pre-tinted --berget-destructive background fill above. Components that
+     want the tinted status surface use bg-berget-destructive + the -border/
+     -foreground companions (see Checkbox). */
 
   /* ── Sidebar ────────────────────────────────────────────────────── */
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
@@ -278,6 +285,12 @@
   --berget-surface-subtle: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   --berget-surface-raised: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
 
+  /* ── Composer ───────────────────────────────────────────────────── */
+  /* Component-scoped: solid granite-900 in dark (overrides the near-white
+     raised mist), keeps the light raised tint in light theme. */
+  --berget-composer-bg: var(--berget-brand-granite-900);
+  --berget-composer-border: var(--berget-brand-granite-800);
+
   /* ── Subtle borders ──────────────────────────────────────────────── */
   --berget-border-subtle: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
   --berget-border-interactive: color-mix(in oklch, var(--berget-foreground) 20%, transparent);
@@ -628,7 +641,10 @@
   /* ── Destructive ────────────────────────────────────────────────── */
   --berget-destructive: color-mix(in oklch, var(--berget-brand-muscaria-500) 20%, transparent);
   --berget-destructive-border: var(--berget-brand-muscaria-500);
-  --berget-destructive-foreground: var(--berget-brand-muscaria-500);
+  /* Foreground steps up to -600 in light mode like its status siblings
+     (info/success/warning), keeping text-destructive above WCAG AA (4.5:1)
+     on light surfaces — muscaria-500 lands at 4.3:1. */
+  --berget-destructive-foreground: var(--berget-brand-muscaria-600);
 
   /* ── Sidebar ────────────────────────────────────────────────────── */
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-100) 40%, transparent);
@@ -655,6 +671,10 @@
   --berget-surface-subtle: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
   --berget-surface-raised: color-mix(in oklch, var(--berget-brand-granite-950) 10%, transparent);
 
+  /* ── Composer ───────────────────────────────────────────────────── */
+  --berget-composer-bg: var(--berget-surface-raised);
+  --berget-composer-border: var(--berget-border-subtle);
+
   /* ── Subtle borders ──────────────────────────────────────────────── */
   --berget-border-subtle: color-mix(in oklch, var(--berget-brand-granite-950) 10%, transparent);
   --berget-border-interactive: color-mix(
@@ -1064,7 +1084,7 @@
   --color-secondary-foreground: var(--berget-secondary-foreground);
   --color-accent: var(--berget-accent);
   --color-accent-foreground: var(--berget-accent-foreground);
-  --color-destructive: var(--berget-destructive);
+  --color-destructive: var(--berget-destructive-foreground);
   --color-destructive-foreground: var(--berget-destructive-foreground);
   --color-muted: var(--berget-muted);
   --color-muted-foreground: var(--berget-muted-foreground);
@@ -1215,6 +1235,8 @@
   --color-berget-surface-hover: var(--berget-surface-hover);
   --color-berget-surface-subtle: var(--berget-surface-subtle);
   --color-berget-surface-raised: var(--berget-surface-raised);
+  --color-berget-composer-bg: var(--berget-composer-bg);
+  --color-berget-composer-border: var(--berget-composer-border);
   --color-berget-border-subtle: var(--berget-border-subtle);
   --color-berget-border-interactive: var(--berget-border-interactive);
   --color-berget-border-interactive-elevated: var(--berget-border-interactive-elevated);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bergetai/ui",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",