@adea-ai/ui 0.131.0 → 0.131.1

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,kCAQhF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAwBtF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAOtF"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,kCAQhF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCA4BtF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAOtF"}

package/dist/components/ui/accordion/accordion.js

@@ -34,7 +34,7 @@ function AccordionTrigger(props) {
 		"class": "flex",
 		get children() {
 			return createComponent(Accordion.Trigger, mergeProps({ get ["class"]() {
-				return cn("flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium", "transition-colors ease-out outline-none", "hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", local.class);
+				return cn("group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium", "transition-colors ease-out outline-none", "hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", local.class);
 			} }, rest, { get children() {
 				return [memo(() => local.children), createComponent(ChevronDown, {
 					"class": "text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180",

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","KobalteAccordion","ChevronDown","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","AccordionItem","Item","AccordionTrigger","Trigger","Header","children","_$memo","AccordionContent","Content","_el$","_tmpl$","_$insert","Accordion","_$createComponent","KobalteAccordion","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'\nimport { ChevronDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Accordion.\n *\n * A list of collapsible sections. `collapsible` (the default) lets the user\n * close the open section; without it one section is always open, which is what\n * a settings page usually wants and a FAQ usually does not.\n *\n * The trigger is a real button with `aria-expanded` and the panel is\n * `aria-labelledby` the trigger, so the relationship survives even when the\n * panel is empty.\n */\nexport function Accordion(props: ComponentProps<typeof KobalteAccordion>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteAccordion class={cn('flex w-full flex-col', local.class)} {...rest} />\n}\n\nexport function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Item\n      class={cn('border-b border-border last:border-b-0', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteAccordion.Header class=\"flex\">\n      <KobalteAccordion.Trigger\n        class={cn(\n          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',\n          'transition-colors ease-out outline-none',\n          'hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'disabled:pointer-events-none disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <ChevronDown\n          class=\"text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180\"\n          aria-hidden=\"true\"\n        />\n      </KobalteAccordion.Trigger>\n    </KobalteAccordion.Header>\n  )\n}\n\nexport function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Content class={cn('overflow-hidden text-sm', local.class)} {...rest}>\n      <div class=\"pt-0 pb-3\">{props.children}</div>\n    </KobalteAccordion.Content>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUM,OAAgD;CACxE,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,WAAgBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,wBAAwBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACnF;AAEA,SAAgBI,cAAcN,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBY,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbL,GAAG,0CAA0CE,MAAMI,KAAK;CAAC,EAAA,GAC5DH,IAAI,CAAA;AAGd;AAEA,SAAgBM,iBAAiBR,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGR,UAAiBe,QAAM;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAAR,gBACrBR,UAAiBc,SAAOL,WAAA,EAAA,KAAA,WAAA;IAAA,OAChBL,GACL,qFACA,2CACA,yBACA,oFACA,oDACAE,MAAMI,KACR;GAAC,EAAA,GACGH,MAAI,EAAA,IAAAS,WAAA;IAAA,OAAA,CAAAC,WAEPX,MAAMU,QAAQ,GAAAR,gBACdP,aAAW;KAAA,SAAA;KAAA,eAAA;IAAA,CAAA,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAOpB;AAEA,SAAgBiB,iBAAiBb,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBmB,SAAOV,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,2BAA2BE,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAS,WAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,YAC3Df,MAAMW,QAAQ;EAAA,OAAAI;CAAA,EAAA,CAAA,CAAA;AAG5C"}
+{"version":3,"file":"accordion.js","names":["Accordion","KobalteAccordion","ChevronDown","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","AccordionItem","Item","AccordionTrigger","Trigger","Header","children","_$memo","AccordionContent","Content","_el$","_tmpl$","_$insert","Accordion","_$createComponent","KobalteAccordion","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'\nimport { ChevronDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Accordion.\n *\n * A list of collapsible sections. `collapsible` (the default) lets the user\n * close the open section; without it one section is always open, which is what\n * a settings page usually wants and a FAQ usually does not.\n *\n * The trigger is a real button with `aria-expanded` and the panel is\n * `aria-labelledby` the trigger, so the relationship survives even when the\n * panel is empty.\n */\nexport function Accordion(props: ComponentProps<typeof KobalteAccordion>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteAccordion class={cn('flex w-full flex-col', local.class)} {...rest} />\n}\n\nexport function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Item\n      class={cn('border-b border-border last:border-b-0', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteAccordion.Header class=\"flex\">\n      <KobalteAccordion.Trigger\n        class={cn(\n          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`\n          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so\n          // the trigger is the group; without the class the rotation selector has no\n          // ancestor to match and the chevron never turns.\n          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',\n          'transition-colors ease-out outline-none',\n          'hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'disabled:pointer-events-none disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <ChevronDown\n          class=\"text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180\"\n          aria-hidden=\"true\"\n        />\n      </KobalteAccordion.Trigger>\n    </KobalteAccordion.Header>\n  )\n}\n\nexport function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteAccordion.Content class={cn('overflow-hidden text-sm', local.class)} {...rest}>\n      <div class=\"pt-0 pb-3\">{props.children}</div>\n    </KobalteAccordion.Content>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUM,OAAgD;CACxE,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,WAAgBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,wBAAwBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACnF;AAEA,SAAgBI,cAAcN,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBY,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbL,GAAG,0CAA0CE,MAAMI,KAAK;CAAC,EAAA,GAC5DH,IAAI,CAAA;AAGd;AAEA,SAAgBM,iBAAiBR,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGR,UAAiBe,QAAM;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAAR,gBACrBR,UAAiBc,SAAOL,WAAA,EAAA,KAAA,WAAA;IAAA,OAChBL,GAKL,qGACA,2CACA,yBACA,oFACA,oDACAE,MAAMI,KACR;GAAC,EAAA,GACGH,MAAI,EAAA,IAAAS,WAAA;IAAA,OAAA,CAAAC,WAEPX,MAAMU,QAAQ,GAAAR,gBACdP,aAAW;KAAA,SAAA;KAAA,eAAA;IAAA,CAAA,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAOpB;AAEA,SAAgBiB,iBAAiBb,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBmB,SAAOV,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,2BAA2BE,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAS,WAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,YAC3Df,MAAMW,QAAQ;EAAA,OAAAI;CAAA,EAAA,CAAA,CAAA;AAG5C"}

package/dist/components/ui/radio-group/radio-group.d.ts

@@ -26,7 +26,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
      * `card` draws the option as a bordered, selectable card — for a choice
      * whose options need a sentence each (a source type, a sync budget), where a
      * bare radio row reads as a form field rather than a decision. The whole card
-     * is the hit target, and the selected card takes the primary edge.
+     * is the hit target, and the selected card takes the primary edge. The radio,
+     * `media` and text centre on one axis; the default variant keeps the radio on
+     * the first line of its label.
      */
     variant?: 'default' | 'card';
     /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */

package/dist/components/ui/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,eA+BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,iFAAiF;IACjF,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAiFxD"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,eA+BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,iFAAiF;IACjF,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAuFxD"}

package/dist/components/ui/radio-group/radio-group.js

@@ -94,7 +94,9 @@ function RadioGroupItem(props) {
 			return local.title;
 		},
 		get ["class"]() {
-			return cn("group/radio flex items-start gap-2.5", {
+			return cn("group/radio flex gap-2.5", {
+				"items-start": !card(),
+				"items-center": card(),
 				"relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card": card(),
 				"has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle": card()
 			}, local.class);

package/dist/components/ui/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\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  return (\n    <KobalteRadioGroup\n      data-slot=\"radio-group\"\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      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n  /**\n   * `card` draws the option as a bordered, selectable card — for a choice\n   * whose options need a sentence each (a source type, a sync budget), where a\n   * bare radio row reads as a form field rather than a decision. The whole card\n   * is the hit target, and the selected card takes the primary edge.\n   */\n  variant?: 'default' | 'card'\n  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n  media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'variant',\n    'media',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n  const card = () => local.variant === 'card'\n\n  return (\n    <KobalteRadioGroup.Item\n      data-slot=\"radio-group-item\"\n      data-variant={card() ? 'card' : undefined}\n      title={local.title}\n      class={cn(\n        'group/radio flex items-start gap-2.5',\n        {\n          'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':\n            card(),\n          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n            card(),\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\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-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.media ? (\n        <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n          {local.media}\n        </span>\n      ) : null}\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel\n              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n            >\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\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  return (\n    <KobalteRadioGroup\n      data-slot=\"radio-group\"\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      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n  /**\n   * `card` draws the option as a bordered, selectable card — for a choice\n   * whose options need a sentence each (a source type, a sync budget), where a\n   * bare radio row reads as a form field rather than a decision. The whole card\n   * is the hit target, and the selected card takes the primary edge. The radio,\n   * `media` and text centre on one axis; the default variant keeps the radio on\n   * the first line of its label.\n   */\n  variant?: 'default' | 'card'\n  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n  media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'variant',\n    'media',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n  const card = () => local.variant === 'card'\n\n  return (\n    <KobalteRadioGroup.Item\n      data-slot=\"radio-group-item\"\n      data-variant={card() ? 'card' : undefined}\n      title={local.title}\n      class={cn(\n        'group/radio flex gap-2.5',\n        {\n          'items-start': !card(),\n          // A card centres its radio, media and text on one axis. Top alignment\n          // is right for a bare row, where the radio sits on the label's first\n          // line, but in a card the media is taller than that line, so a\n          // top-aligned radio floats above the icon and the label beside it.\n          'items-center': card(),\n          'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':\n            card(),\n          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n            card(),\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\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-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.media ? (\n        <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n          {local.media}\n        </span>\n      ) : null}\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel\n              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n            >\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}

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

@@ -37,7 +37,11 @@ export function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.T
     <KobalteAccordion.Header class="flex">
       <KobalteAccordion.Trigger
         class={cn(
-          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
+          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`
+          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so
+          // the trigger is the group; without the class the rotation selector has no
+          // ancestor to match and the chevron never turns.
+          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
           'transition-colors ease-out outline-none',
           'hover:text-foreground',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',

package/dist/r/src/components/ui/radio-group/radio-group.tsx

@@ -63,7 +63,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    * `card` draws the option as a bordered, selectable card — for a choice
    * whose options need a sentence each (a source type, a sync budget), where a
    * bare radio row reads as a form field rather than a decision. The whole card
-   * is the hit target, and the selected card takes the primary edge.
+   * is the hit target, and the selected card takes the primary edge. The radio,
+   * `media` and text centre on one axis; the default variant keeps the radio on
+   * the first line of its label.
    */
   variant?: 'default' | 'card'
   /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
@@ -100,8 +102,14 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       data-variant={card() ? 'card' : undefined}
       title={local.title}
       class={cn(
-        'group/radio flex items-start gap-2.5',
+        'group/radio flex gap-2.5',
         {
+          'items-start': !card(),
+          // A card centres its radio, media and text on one axis. Top alignment
+          // is right for a bare row, where the radio sits on the label's first
+          // line, but in a card the media is taller than that line, so a
+          // top-aligned radio floats above the icon and the label beside it.
+          'items-center': card(),
           'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':
             card(),
           'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.131.0",
+  "version": "0.131.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/ui/accordion/accordion.tsx

@@ -37,7 +37,11 @@ export function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.T
     <KobalteAccordion.Header class="flex">
       <KobalteAccordion.Trigger
         class={cn(
-          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
+          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`
+          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so
+          // the trigger is the group; without the class the rotation selector has no
+          // ancestor to match and the chevron never turns.
+          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
           'transition-colors ease-out outline-none',
           'hover:text-foreground',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',

package/src/components/ui/radio-group/radio-group.tsx

@@ -63,7 +63,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    * `card` draws the option as a bordered, selectable card — for a choice
    * whose options need a sentence each (a source type, a sync budget), where a
    * bare radio row reads as a form field rather than a decision. The whole card
-   * is the hit target, and the selected card takes the primary edge.
+   * is the hit target, and the selected card takes the primary edge. The radio,
+   * `media` and text centre on one axis; the default variant keeps the radio on
+   * the first line of its label.
    */
   variant?: 'default' | 'card'
   /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
@@ -100,8 +102,14 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       data-variant={card() ? 'card' : undefined}
       title={local.title}
       class={cn(
-        'group/radio flex items-start gap-2.5',
+        'group/radio flex gap-2.5',
         {
+          'items-start': !card(),
+          // A card centres its radio, media and text on one axis. Top alignment
+          // is right for a bare row, where the radio sits on the label's first
+          // line, but in a card the media is taller than that line, so a
+          // top-aligned radio floats above the icon and the label beside it.
+          'items-center': card(),
           'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':
             card(),
           'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':