@adea-ai/ui 0.129.0 → 0.130.1

package/dist/components/composites/settings/settings.js

@@ -66,7 +66,7 @@ function SettingsSection(props) {
 			}
 		}), null);
 		insert(_el$6, () => local.children);
-		effect(() => className(_el$6, cn(local.bodyLayout === "content" ? "flex flex-col gap-4" : "divide-y divide-border rounded-xl border border-border")));
+		effect(() => className(_el$6, cn(local.bodyLayout === "content" ? "flex flex-col gap-4" : "divide-y divide-border rounded-xl border border-border [&>[data-slot=empty-description]]:p-4")));
 		return _el$;
 	})();
 }

package/dist/components/composites/settings/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","names":["ComponentProps","JSX","createUniqueId","Show","splitProps","createFormFieldContext","FormFieldContext","cn","Heading","SettingsSection","props","title","description","action","Element","bodyLayout","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$6","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","when","_el$4","_tmpl$","_el$5","_tmpl$2","_$effect","_$className","SettingsRow","label","orientation","bare","rowId","labelId","descriptionId","field","defaultControlId","hint","error","undefined","group","Provider","value","_el$7","_tmpl$4","_el$8","_el$9","_el$1","_$setAttribute","_el$0","SettingsField","htmlFor","_el$10","_tmpl$5","_el$11","_el$12","_el$14","_el$13","SettingsPage","_el$15","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { Heading } from '../../ui/typography'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row puts the label and description at the start and the control at the\n * end (stacked on a narrow window), so controls line up down the page's end\n * edge regardless of how long the labels are. `SettingsRow` also\n * exposes its label and description through the shared form-field context to\n * the first control inside it. `SettingsField` is the visual stacked layout;\n * use `FormField` when the control needs label, help, or validation wiring.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */\n    bodyLayout?: 'rows' | 'content'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'title',\n    'description',\n    'action',\n    'bodyLayout',\n    'children',\n  ])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            {local.title}\n          </Heading>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-section-body\"\n        class={cn(\n          local.bodyLayout === 'content'\n            ? 'flex flex-col gap-4'\n            : 'divide-y divide-border rounded-xl border border-border'\n        )}\n      >\n        {local.children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * The label and description are linked to a shared control through field\n * context. An explicit `aria-label` or `aria-labelledby` on the control keeps\n * precedence; otherwise the visible row label names it.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n  const rowId = createUniqueId()\n  const labelId = `${rowId}-label`\n  const descriptionId = `${rowId}-description`\n  const field = createFormFieldContext({\n    defaultControlId: rowId,\n    labelId,\n    descriptionId,\n    hint: () => local.description,\n    error: () => undefined,\n    group: () => false,\n  })\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div\n        data-slot=\"settings-row\"\n        class={cn(\n          'flex gap-4 p-4',\n          local.orientation === 'vertical'\n            ? 'flex-col'\n            : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n          local.class\n        )}\n        {...rest}\n      >\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <div id={labelId} data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n            {local.label}\n          </div>\n          <Show when={local.description}>\n            <p id={descriptionId} class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n              {local.description}\n            </p>\n          </Show>\n        </div>\n        <div\n          data-slot=\"settings-row-control\"\n          class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n        >\n          {local.children}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"settings.js","names":["ComponentProps","JSX","createUniqueId","Show","splitProps","createFormFieldContext","FormFieldContext","cn","Heading","SettingsSection","props","title","description","action","Element","bodyLayout","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$6","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","when","_el$4","_tmpl$","_el$5","_tmpl$2","_$effect","_$className","SettingsRow","label","orientation","bare","rowId","labelId","descriptionId","field","defaultControlId","hint","error","undefined","group","Provider","value","_el$7","_tmpl$4","_el$8","_el$9","_el$1","_$setAttribute","_el$0","SettingsField","htmlFor","_el$10","_tmpl$5","_el$11","_el$12","_el$14","_el$13","SettingsPage","_el$15","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { Heading } from '../../ui/typography'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row puts the label and description at the start and the control at the\n * end (stacked on a narrow window), so controls line up down the page's end\n * edge regardless of how long the labels are. `SettingsRow` also\n * exposes its label and description through the shared form-field context to\n * the first control inside it. `SettingsField` is the visual stacked layout;\n * use `FormField` when the control needs label, help, or validation wiring.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */\n    bodyLayout?: 'rows' | 'content'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'title',\n    'description',\n    'action',\n    'bodyLayout',\n    'children',\n  ])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            {local.title}\n          </Heading>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-section-body\"\n        class={cn(\n          local.bodyLayout === 'content'\n            ? 'flex flex-col gap-4'\n            : 'divide-y divide-border rounded-xl border border-border [&>[data-slot=empty-description]]:p-4'\n        )}\n      >\n        {local.children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * The label and description are linked to a shared control through field\n * context. An explicit `aria-label` or `aria-labelledby` on the control keeps\n * precedence; otherwise the visible row label names it.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n  const rowId = createUniqueId()\n  const labelId = `${rowId}-label`\n  const descriptionId = `${rowId}-description`\n  const field = createFormFieldContext({\n    defaultControlId: rowId,\n    labelId,\n    descriptionId,\n    hint: () => local.description,\n    error: () => undefined,\n    group: () => false,\n  })\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div\n        data-slot=\"settings-row\"\n        class={cn(\n          'flex gap-4 p-4',\n          local.orientation === 'vertical'\n            ? 'flex-col'\n            : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n          local.class\n        )}\n        {...rest}\n      >\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <div id={labelId} data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n            {local.label}\n          </div>\n          <Show when={local.description}>\n            <p id={descriptionId} class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n              {local.description}\n            </p>\n          </Show>\n        </div>\n        <div\n          data-slot=\"settings-row-control\"\n          class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n        >\n          {local.children}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/textarea/textarea.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, Ref } from 'solid-js';
 import { type VariantProps } from 'class-variance-authority';
 export declare const textareaVariants: (props?: ({
-    variant?: "default" | "composer" | null | undefined;
+    variant?: "code" | "default" | "composer" | null | undefined;
     size?: "default" | "comfortable" | null | undefined;
     resize?: "none" | "both" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -20,7 +20,8 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> & VariantPr
  * engine supports it, which is the behaviour a chat composer wants; `rows`
  * remains the fallback so an unsupported engine still gets a usable height.
  * `variant="composer"` removes the standalone field surface when nested in a
- * composer shell. `size="comfortable"` caps growth at the shared 12rem rung, and
+ * composer shell. `variant="code"` keeps the field surface and sets the
+ * monospace face, for commands, snippets and other literal text. `size="comfortable"` caps growth at the shared 12rem rung, and
  * the finite `resize` variants keep browser resize behavior explicit.
  */
 export declare function Textarea(props: TextareaProps): import("solid-js").JSX.Element;

package/dist/components/ui/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,gBAAgB;;;;8EAgC5B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAClE,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACtC,qFAAqF;IACrF,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAC/B,CAAA;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAwC5C"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,gBAAgB;;;;8EAiC5B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAClE,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACtC,qFAAqF;IACrF,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAC/B,CAAA;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAwC5C"}

package/dist/components/ui/textarea/textarea.js

@@ -17,7 +17,8 @@ var textareaVariants = cva([
 	variants: {
 		variant: {
 			default: "",
-			composer: "border-0 bg-transparent p-0 shadow-none focus-visible:ring-0"
+			composer: "border-0 bg-transparent p-0 shadow-none focus-visible:ring-0",
+			code: "font-mono"
 		},
 		size: {
 			default: "min-h-16",
@@ -46,7 +47,8 @@ var textareaVariants = cva([
 * engine supports it, which is the behaviour a chat composer wants; `rows`
 * remains the fallback so an unsupported engine still gets a usable height.
 * `variant="composer"` removes the standalone field surface when nested in a
-* composer shell. `size="comfortable"` caps growth at the shared 12rem rung, and
+* composer shell. `variant="code"` keeps the field surface and sets the
+* monospace face, for commands, snippets and other literal text. `size="comfortable"` caps growth at the shared 12rem rung, and
 * the finite `resize` variants keep browser resize behavior explicit.
 */
 function Textarea(props) {

package/dist/components/ui/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["ComponentProps","Ref","splitProps","cva","VariantProps","useFormFieldControl","cn","textareaVariants","variants","variant","default","composer","size","comfortable","resize","vertical","none","both","defaultVariants","TextareaProps","Omit","ref","HTMLTextAreaElement","Textarea","props","local","rest","field","id","_el$","_tmpl$","_ref$","_$use","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$use","_$mergeProps"],"sources":["../../../../src/components/ui/textarea/textarea.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport const textareaVariants = cva(\n  [\n    'flex field-sizing-content w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',\n    'transition-[color,box-shadow,border-color] ease-out outline-none',\n    'placeholder:text-muted-foreground',\n    'selection:bg-primary selection:text-primary-foreground',\n    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n    'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        default: '',\n        composer: 'border-0 bg-transparent p-0 shadow-none focus-visible:ring-0',\n      },\n      size: {\n        default: 'min-h-16',\n        comfortable: 'min-h-16 max-h-48',\n      },\n      resize: {\n        vertical: 'resize-y',\n        none: 'resize-none',\n        both: 'resize',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      resize: 'vertical',\n    },\n  }\n)\n\nexport type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &\n  VariantProps<typeof textareaVariants> & {\n    /** Solid's actual textarea element, rather than its containing component or form. */\n    ref?: Ref<HTMLTextAreaElement>\n  }\n\n/**\n * Textarea.\n *\n * Shares the Input's border, focus and invalid treatment exactly — the two are\n * the same control at different aspect ratios, and a form that mixes them must\n * not show a seam between them.\n *\n * `field-sizing: content` lets the element grow with its content where the\n * engine supports it, which is the behaviour a chat composer wants; `rows`\n * remains the fallback so an unsupported engine still gets a usable height.\n * `variant=\"composer\"` removes the standalone field surface when nested in a\n * composer shell. `size=\"comfortable\"` caps growth at the shared 12rem rung, and\n * the finite `resize` variants keep browser resize behavior explicit.\n */\nexport function Textarea(props: TextareaProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'resize',\n    'ref',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      ref={local.ref}\n      class={cn(\n        textareaVariants({ variant: local.variant, size: local.size, resize: local.resize }),\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAMA,IAAaO,mBAAmBJ,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;AAA8E,GAEhF;CACEK,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,UAAU;EACZ;EACAC,MAAM;GACJF,SAAS;GACTG,aAAa;EACf;EACAC,QAAQ;GACNC,UAAU;GACVC,MAAM;GACNC,MAAM;EACR;CACF;CACAC,iBAAiB;EACfT,SAAS;EACTG,MAAM;EACNE,QAAQ;CACV;AACF,CACF;;;;;;;;;;;;;;;AAsBA,SAAgBS,SAASC,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,QAAQtB,oBAAoB,WAAW;EAC3CuB,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CAED,cAAA;EAAA,IAAAI,OAAAC,OAAA;EAAA,IAAAC,QASSN,MAAMJ;EAAG,OAAAU,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAATJ,MAAMJ,MAAGQ;EAAAI,OAAAJ,MAAAK,WAAA;GAAA,IANdN,KAAE;IAAA,OAAED,OAAOC,MAAMH,MAAMG;GAAE;GAAA,KAAA,gBAAA;IAAA,OACbH,MAAM;GAAa;GAAA,KAAA,qBAAA;IAAA,OACdE,QAAQ,sBAAsBF,MAAM;GAAkB;GAAA,KAAA,sBAAA;IAAA,OACrDE,QAAQ,uBAAuBF,MAAM;GAAmB;GAAA,KAAA,kBAAA;IAAA,OAC5DE,QAAQ,mBAAmBF,MAAM;GAAe;GAAA,KAAA,uBAAA;IAAA,OAC3CE,QAAQ,wBAAwBF,MAAM;GAAoB;GAAA,KAAA,WAAA;IAAA,OAEtEnB,GACLC,iBAAiB;KAAEE,SAASgB,MAAMhB;KAASG,MAAMa,MAAMb;KAAME,QAAQW,MAAMX;IAAO,CAAC,GACnFW,MAAMe,KACR;GAAC;EAAA,GACGd,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAG;CAAA,EAAA,CAAA;AAGd"}
+{"version":3,"file":"textarea.js","names":["ComponentProps","Ref","splitProps","cva","VariantProps","useFormFieldControl","cn","textareaVariants","variants","variant","default","composer","code","size","comfortable","resize","vertical","none","both","defaultVariants","TextareaProps","Omit","ref","HTMLTextAreaElement","Textarea","props","local","rest","field","id","_el$","_tmpl$","_ref$","_$use","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$use","_$mergeProps"],"sources":["../../../../src/components/ui/textarea/textarea.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport const textareaVariants = cva(\n  [\n    'flex field-sizing-content w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',\n    'transition-[color,box-shadow,border-color] ease-out outline-none',\n    'placeholder:text-muted-foreground',\n    'selection:bg-primary selection:text-primary-foreground',\n    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n    'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        default: '',\n        composer: 'border-0 bg-transparent p-0 shadow-none focus-visible:ring-0',\n        code: 'font-mono',\n      },\n      size: {\n        default: 'min-h-16',\n        comfortable: 'min-h-16 max-h-48',\n      },\n      resize: {\n        vertical: 'resize-y',\n        none: 'resize-none',\n        both: 'resize',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      resize: 'vertical',\n    },\n  }\n)\n\nexport type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &\n  VariantProps<typeof textareaVariants> & {\n    /** Solid's actual textarea element, rather than its containing component or form. */\n    ref?: Ref<HTMLTextAreaElement>\n  }\n\n/**\n * Textarea.\n *\n * Shares the Input's border, focus and invalid treatment exactly — the two are\n * the same control at different aspect ratios, and a form that mixes them must\n * not show a seam between them.\n *\n * `field-sizing: content` lets the element grow with its content where the\n * engine supports it, which is the behaviour a chat composer wants; `rows`\n * remains the fallback so an unsupported engine still gets a usable height.\n * `variant=\"composer\"` removes the standalone field surface when nested in a\n * composer shell. `variant=\"code\"` keeps the field surface and sets the\n * monospace face, for commands, snippets and other literal text. `size=\"comfortable\"` caps growth at the shared 12rem rung, and\n * the finite `resize` variants keep browser resize behavior explicit.\n */\nexport function Textarea(props: TextareaProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'resize',\n    'ref',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      ref={local.ref}\n      class={cn(\n        textareaVariants({ variant: local.variant, size: local.size, resize: local.resize }),\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAMA,IAAaO,mBAAmBJ,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;AAA8E,GAEhF;CACEK,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,UAAU;GACVC,MAAM;EACR;EACAC,MAAM;GACJH,SAAS;GACTI,aAAa;EACf;EACAC,QAAQ;GACNC,UAAU;GACVC,MAAM;GACNC,MAAM;EACR;CACF;CACAC,iBAAiB;EACfV,SAAS;EACTI,MAAM;EACNE,QAAQ;CACV;AACF,CACF;;;;;;;;;;;;;;;;AAuBA,SAAgBS,SAASC,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQzB,WAAWuB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,QAAQvB,oBAAoB,WAAW;EAC3CwB,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CAED,cAAA;EAAA,IAAAI,OAAAC,OAAA;EAAA,IAAAC,QASSN,MAAMJ;EAAG,OAAAU,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAATJ,MAAMJ,MAAGQ;EAAAI,OAAAJ,MAAAK,WAAA;GAAA,IANdN,KAAE;IAAA,OAAED,OAAOC,MAAMH,MAAMG;GAAE;GAAA,KAAA,gBAAA;IAAA,OACbH,MAAM;GAAa;GAAA,KAAA,qBAAA;IAAA,OACdE,QAAQ,sBAAsBF,MAAM;GAAkB;GAAA,KAAA,sBAAA;IAAA,OACrDE,QAAQ,uBAAuBF,MAAM;GAAmB;GAAA,KAAA,kBAAA;IAAA,OAC5DE,QAAQ,mBAAmBF,MAAM;GAAe;GAAA,KAAA,uBAAA;IAAA,OAC3CE,QAAQ,wBAAwBF,MAAM;GAAoB;GAAA,KAAA,WAAA;IAAA,OAEtEpB,GACLC,iBAAiB;KAAEE,SAASiB,MAAMjB;KAASI,MAAMa,MAAMb;KAAME,QAAQW,MAAMX;IAAO,CAAC,GACnFW,MAAMe,KACR;GAAC;EAAA,GACGd,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAG;CAAA,EAAA,CAAA;AAGd"}

package/dist/r/src/components/composites/settings/settings.tsx

@@ -61,7 +61,7 @@ export function SettingsSection(
         class={cn(
           local.bodyLayout === 'content'
             ? 'flex flex-col gap-4'
-            : 'divide-y divide-border rounded-xl border border-border'
+            : 'divide-y divide-border rounded-xl border border-border [&>[data-slot=empty-description]]:p-4'
         )}
       >
         {local.children}

package/dist/r/src/components/ui/textarea/textarea.tsx

@@ -19,6 +19,7 @@ export const textareaVariants = cva(
       variant: {
         default: '',
         composer: 'border-0 bg-transparent p-0 shadow-none focus-visible:ring-0',
+        code: 'font-mono',
       },
       size: {
         default: 'min-h-16',
@@ -55,7 +56,8 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &
  * engine supports it, which is the behaviour a chat composer wants; `rows`
  * remains the fallback so an unsupported engine still gets a usable height.
  * `variant="composer"` removes the standalone field surface when nested in a
- * composer shell. `size="comfortable"` caps growth at the shared 12rem rung, and
+ * composer shell. `variant="code"` keeps the field surface and sets the
+ * monospace face, for commands, snippets and other literal text. `size="comfortable"` caps growth at the shared 12rem rung, and
  * the finite `resize` variants keep browser resize behavior explicit.
  */
 export function Textarea(props: TextareaProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.129.0",
+  "version": "0.130.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/src/components/composites/settings/settings.tsx

@@ -61,7 +61,7 @@ export function SettingsSection(
         class={cn(
           local.bodyLayout === 'content'
             ? 'flex flex-col gap-4'
-            : 'divide-y divide-border rounded-xl border border-border'
+            : 'divide-y divide-border rounded-xl border border-border [&>[data-slot=empty-description]]:p-4'
         )}
       >
         {local.children}

package/src/components/ui/textarea/textarea.tsx

@@ -19,6 +19,7 @@ export const textareaVariants = cva(
       variant: {
         default: '',
         composer: 'border-0 bg-transparent p-0 shadow-none focus-visible:ring-0',
+        code: 'font-mono',
       },
       size: {
         default: 'min-h-16',
@@ -55,7 +56,8 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &
  * engine supports it, which is the behaviour a chat composer wants; `rows`
  * remains the fallback so an unsupported engine still gets a usable height.
  * `variant="composer"` removes the standalone field surface when nested in a
- * composer shell. `size="comfortable"` caps growth at the shared 12rem rung, and
+ * composer shell. `variant="code"` keeps the field surface and sets the
+ * monospace face, for commands, snippets and other literal text. `size="comfortable"` caps growth at the shared 12rem rung, and
  * the finite `resize` variants keep browser resize behavior explicit.
  */
 export function Textarea(props: TextareaProps) {