npm - @adea-ai/ui - Versions diffs - 0.116.0 → 0.118.0 - Mend

@adea-ai/ui 0.116.0 → 0.118.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/dist/components/ui/entity-icon/entity-icon.d.ts CHANGED Viewed

@@ -25,6 +25,14 @@ import { type VariantProps } from '#lib/variants';
  * `shape="rounded"` is the default because a rounded square reads as an object
  * and a circle reads as a person; use `circle` only when the tile really does
  * hold a face.
+ *
+ * `monochrome` is for a third-party brand mark — a vendor logo drawn with its
+ * own `fill`. A brand's hex is chosen for a white page: GitHub's near-black and
+ * Slack's aubergine all but vanish on a dark tile, and no tone can be picked
+ * that suits every brand in both themes. `monochrome` repaints any explicitly
+ * filled shape in the tile's glyph colour (the tone's), so the mark stays
+ * recognisable by its shape and legible in every theme. Stroke-drawn icons
+ * (Lucide, `fill="none"`) are left alone.
  */
 export declare const entityIconVariants: (props?: ({
     shape?: "circle" | "square" | "rounded" | null | undefined;
@@ -50,6 +58,8 @@ export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> & EntityI
     badge?: JSX.Element;
     /** A second edge, drawn outside the tile — an active or selected ring. */
     ring?: boolean;
+    /** Repaint a brand mark's own fills in the tile's glyph colour. */
+    monochrome?: boolean;
 };
 /**
  * Two letters from a name, chosen so the result is stable and readable: the

package/dist/components/ui/entity-icon/entity-icon.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"entity-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD~~;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG~~;AACH,eAAO,MAAM,kBAAkB;;;;8EA+B9B,CAAA;AAED,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAErE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACpE,sBAAsB,GAAG;IACvB,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACxC,wEAAwE;IACxE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;~~CACf~~,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI7C;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,~~eA+ChD~~"}
1	+ {"version":3,"file":"entity-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,kBAAkB;;;;8EA+B9B,CAAA;AAED,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAErE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACpE,sBAAsB,GAAG;IACvB,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACxC,wEAAwE;IACxE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI7C;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAoDhD"}

package/dist/components/ui/entity-icon/entity-icon.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Show, createSignal, splitProps } from "solid-js";
 //#region src/components/ui/entity-icon/entity-icon.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<img data-slot=entity-icon-image alt aria-hidden=true class="pointer-events-none absolute inset-0 size-full object-contain">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span role=img>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span data-slot=entity-icon role=img>`);
 /**
 * EntityIcon.
 *
@@ -31,6 +31,14 @@ var _tmpl$3 = /*#__PURE__*/ template(`<span role=img>`);
 * `shape="rounded"` is the default because a rounded square reads as an object
 * and a circle reads as a person; use `circle` only when the tile really does
 * hold a face.
+*
+* `monochrome` is for a third-party brand mark — a vendor logo drawn with its
+* own `fill`. A brand's hex is chosen for a white page: GitHub's near-black and
+* Slack's aubergine all but vanish on a dark tile, and no tone can be picked
+* that suits every brand in both themes. `monochrome` repaints any explicitly
+* filled shape in the tile's glyph colour (the tone's), so the mark stays
+* recognisable by its shape and legible in every theme. Stroke-drawn icons
+* (Lucide, `fill="none"`) are left alone.
 */
 var entityIconVariants = cva("relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: {
@@ -102,6 +110,7 @@ function EntityIcon(props) {
 		"fallback",
 		"badge",
 		"ring",
+		"monochrome",
 		"shape",
 		"size",
 		"tone",
@@ -126,7 +135,7 @@ function EntityIcon(props) {
 					shape: local.shape,
 					size: local.size,
 					tone: local.tone
-				}), local.ring && "ring-2 ring-ring ring-offset-2 ring-offset-background", local.class);
+				}), local.ring && "ring-2 ring-ring ring-offset-2 ring-offset-background", local.monochrome && "[&_[fill]:not([fill='none'])]:fill-current", local.class);
 			},
 			get ["aria-label"]() {
 				return local.name;

package/dist/components/ui/entity-icon/entity-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"entity-icon.js","names":["createSignal","Show","splitProps","Component","ComponentProps","JSX","Dynamic","cva","VariantProps","cn","entityIconVariants","variants","shape","rounded","circle","square","size","xs","sm","md","lg","xl","tone","neutral","primary","bare","success","warning","danger","info","defaultVariants","EntityIconVariantProps","EntityIconProps","Omit","name","src","icon","Element","fallback","badge","ring","monogram","words","trim","split","filter","Boolean","length","toUpperCase","slice","Glyph","kind","value","props","glyph","_$createComponent","component","EntityIconImage","failed","setFailed","when","children","_el$","_tmpl$","addEventListener","_$effect","_$setAttribute","EntityIcon","local","rest","undefined","_el$2","_tmpl$3","_$spread","_$mergeProps","class","aria-label","_$insert","_$memo","keyed","_el$3","_tmpl$2","_$createComponent","_$setAttribute","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"sourcesContent":["import {\n createSignal,\n Show,\n splitProps,\n type Component,\n type ComponentProps,\n type JSX,\n} from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/*\n EntityIcon.\n \n A tile that stands for a thing: a room, a project, an agent, an installed\n * plugin, a workspace. Its job is to be identifiable in a column of its\n * siblings, which is a different job from `Avatar`'s (identifying a person) and\n * the reason the two are separate components rather than one with a `round` prop.\n \n Three decisions are baked in because getting them wrong is what makes icon\n * grids look messy:\n \n 1. A glyph is always present. A brand with no logo gets a monogram, not an\n * empty box. `fallback` takes the name and returns the glyph, so a caller can\n * choose initials, a domain letter, or a kind icon. When `src` is supplied,\n * its contained image overlays that glyph and failure reveals the glyph below.\n * 2. The tile owns its own contrast. `tone` tints the background while\n * monogram text keeps the body foreground; vector glyphs retain the status\n * colour. A caller never picks a colour pair or ships a glyph that disappears.\n * 3. Size is on the control ladder, not arbitrary. A tile in a rail and a\n * tile in a detail header are the same two or three sizes every other\n * interactive element uses.\n \n `shape=\"rounded\"` is the default because a rounded square reads as an object\n * and a circle reads as a person; use `circle` only when the tile really does\n * hold a face.\n /\nexport const entityIconVariants = cva(\n 'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n shape: {\n rounded: 'rounded-lg',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n size: {\n xs: 'size-5 text-2xs [&_svg]:size-3',\n sm: 'size-6 text-2xs [&_svg]:size-3.5',\n md: 'size-8 text-xs [&_svg]:size-4',\n lg: 'size-10 text-sm [&_svg]:size-5',\n xl: 'size-12 text-base [&_svg]:size-6',\n },\n tone: {\n /* Neutral: an inset tile with a hairline edge — the default. /\n neutral: 'border-border bg-muted text-muted-foreground',\n /* On the brand: for a thing the application itself owns. /\n primary: 'border-transparent bg-primary-subtle text-primary',\n /* Bare: no fill and no edge, for a tile that already sits on a surface. /\n bare: 'border-transparent bg-transparent text-foreground',\n success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',\n warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',\n danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',\n info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',\n },\n },\n defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },\n }\n)\n\ntype EntityIconVariantProps = VariantProps<typeof entityIconVariants>\n\nexport type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &\n EntityIconVariantProps & {\n /* The entity's name. Used for the accessible label and, via `fallback`, the monogram. /\n name: string\n /* Optional image URL. The image is decorative; `name` remains the accessible label. /\n src?: string\n /\n A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element\n * (`icon={<Wrench />}`). Both are accepted because both are what a caller\n * naturally writes, and the difference is an implementation detail they should\n * not have to know.\n /\n icon?: Component \| JSX.Element\n /* Glyph for an entity with no icon. Defaults to the name's first two letters. /\n fallback?: (name: string) => JSX.Element\n /* A corner badge: a status dot, an unread count, an installed tick. /\n badge?: JSX.Element\n /* A second edge, drawn outside the tile — an active or selected ring. /\n ring?: boolean\n }\n\n/\n Two letters from a name, chosen so the result is stable and readable: the\n * first letter of the first two words when there are two (\"Agent HQ\" → \"AH\"),\n * otherwise the first two characters (\"Kitchen\" → \"Ki\").\n /\nexport function monogram(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()\n return name.trim().slice(0, 2)\n}\n\n/\n A glyph is either a component reference or an element, and the two render\n * differently — `Dynamic` for the first, the element itself for the second. The\n * union is discriminated so the branch is checked rather than cast.\n */\ntype Glyph = { kind: 'component'; value: Component } \| { kind: 'element'; value: JSX.Element }\n\nfunction Glyph(props: { glyph: Glyph }) {\n return props.glyph.kind === 'component' ? (\n <Dynamic component={props.glyph.value} />\n ) : (\n props.glyph.value\n )\n}\n\nfunction EntityIconImage(props: { src: string }) {\n const [failed, setFailed] = createSignal(false)\n\n return (\n <Show when={!failed()}>\n <img\n data-slot=\"entity-icon-image\"\n src={props.src}\n alt=\"\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute inset-0 size-full object-contain\"\n onError={() => setFailed(true)}\n />\n </Show>\n )\n}\n\nexport function EntityIcon(props: EntityIconProps) {\n const [local, rest] = splitProps(props, [\n 'name',\n 'src',\n 'icon',\n 'fallback',\n 'badge',\n 'ring',\n 'shape',\n 'size',\n 'tone',\n 'class',\n ])\n\n const glyph = (): Glyph \| undefined => {\n const icon = local.icon\n if (!icon) return undefined\n return typeof icon === 'function'\n ? { kind: 'component', value: icon as Component }\n : { kind: 'element', value: icon as JSX.Element }\n }\n\n return (\n <span\n class={cn(\n entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),\n local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',\n local.class\n )}\n role=\"img\"\n aria-label={local.name}\n {...rest}\n >\n <Show\n when={glyph()}\n fallback={local.fallback ? local.fallback(local.name) : monogram(local.name)}\n >\n {(value) => <Glyph glyph={value()} />}\n </Show>\n <Show when={local.src} keyed>\n {(src) => <EntityIconImage src={src} />}\n </Show>\n <Show when={local.badge}>\n <span class=\"absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4\">{local.badge}</span>\n </Show>\n </span>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"entity-icon.js","names":["createSignal","Show","splitProps","Component","ComponentProps","JSX","Dynamic","cva","VariantProps","cn","entityIconVariants","variants","shape","rounded","circle","square","size","xs","sm","md","lg","xl","tone","neutral","primary","bare","success","warning","danger","info","defaultVariants","EntityIconVariantProps","EntityIconProps","Omit","name","src","icon","Element","fallback","badge","ring","monochrome","monogram","words","trim","split","filter","Boolean","length","toUpperCase","slice","Glyph","kind","value","props","glyph","_$createComponent","component","EntityIconImage","failed","setFailed","when","children","_el$","_tmpl$","addEventListener","_$effect","_$setAttribute","EntityIcon","local","rest","undefined","_el$2","_tmpl$3","_$spread","_$mergeProps","class","aria-label","_$insert","_$memo","keyed","_el$3","_tmpl$2","_$createComponent","_$setAttribute","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/entity-icon/entity-icon.tsx"],"sourcesContent":["import {\n createSignal,\n Show,\n splitProps,\n type Component,\n type ComponentProps,\n type JSX,\n} from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/*\n EntityIcon.\n \n A tile that stands for a thing: a room, a project, an agent, an installed\n * plugin, a workspace. Its job is to be identifiable in a column of its\n * siblings, which is a different job from `Avatar`'s (identifying a person) and\n * the reason the two are separate components rather than one with a `round` prop.\n \n Three decisions are baked in because getting them wrong is what makes icon\n * grids look messy:\n \n 1. A glyph is always present. A brand with no logo gets a monogram, not an\n * empty box. `fallback` takes the name and returns the glyph, so a caller can\n * choose initials, a domain letter, or a kind icon. When `src` is supplied,\n * its contained image overlays that glyph and failure reveals the glyph below.\n * 2. The tile owns its own contrast. `tone` tints the background while\n * monogram text keeps the body foreground; vector glyphs retain the status\n * colour. A caller never picks a colour pair or ships a glyph that disappears.\n * 3. Size is on the control ladder, not arbitrary. A tile in a rail and a\n * tile in a detail header are the same two or three sizes every other\n * interactive element uses.\n \n `shape=\"rounded\"` is the default because a rounded square reads as an object\n * and a circle reads as a person; use `circle` only when the tile really does\n * hold a face.\n \n `monochrome` is for a third-party brand mark — a vendor logo drawn with its\n * own `fill`. A brand's hex is chosen for a white page: GitHub's near-black and\n * Slack's aubergine all but vanish on a dark tile, and no tone can be picked\n * that suits every brand in both themes. `monochrome` repaints any explicitly\n * filled shape in the tile's glyph colour (the tone's), so the mark stays\n * recognisable by its shape and legible in every theme. Stroke-drawn icons\n * (Lucide, `fill=\"none\"`) are left alone.\n /\nexport const entityIconVariants = cva(\n 'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n shape: {\n rounded: 'rounded-lg',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n size: {\n xs: 'size-5 text-2xs [&_svg]:size-3',\n sm: 'size-6 text-2xs [&_svg]:size-3.5',\n md: 'size-8 text-xs [&_svg]:size-4',\n lg: 'size-10 text-sm [&_svg]:size-5',\n xl: 'size-12 text-base [&_svg]:size-6',\n },\n tone: {\n /* Neutral: an inset tile with a hairline edge — the default. /\n neutral: 'border-border bg-muted text-muted-foreground',\n /* On the brand: for a thing the application itself owns. /\n primary: 'border-transparent bg-primary-subtle text-primary',\n /* Bare: no fill and no edge, for a tile that already sits on a surface. /\n bare: 'border-transparent bg-transparent text-foreground',\n success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',\n warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',\n danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',\n info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',\n },\n },\n defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },\n }\n)\n\ntype EntityIconVariantProps = VariantProps<typeof entityIconVariants>\n\nexport type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &\n EntityIconVariantProps & {\n /* The entity's name. Used for the accessible label and, via `fallback`, the monogram. /\n name: string\n /* Optional image URL. The image is decorative; `name` remains the accessible label. /\n src?: string\n /\n A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element\n * (`icon={<Wrench />}`). Both are accepted because both are what a caller\n * naturally writes, and the difference is an implementation detail they should\n * not have to know.\n /\n icon?: Component \| JSX.Element\n /* Glyph for an entity with no icon. Defaults to the name's first two letters. /\n fallback?: (name: string) => JSX.Element\n /* A corner badge: a status dot, an unread count, an installed tick. /\n badge?: JSX.Element\n /* A second edge, drawn outside the tile — an active or selected ring. /\n ring?: boolean\n /* Repaint a brand mark's own fills in the tile's glyph colour. /\n monochrome?: boolean\n }\n\n/\n Two letters from a name, chosen so the result is stable and readable: the\n * first letter of the first two words when there are two (\"Agent HQ\" → \"AH\"),\n * otherwise the first two characters (\"Kitchen\" → \"Ki\").\n /\nexport function monogram(name: string): string {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()\n return name.trim().slice(0, 2)\n}\n\n/\n A glyph is either a component reference or an element, and the two render\n * differently — `Dynamic` for the first, the element itself for the second. The\n * union is discriminated so the branch is checked rather than cast.\n */\ntype Glyph = { kind: 'component'; value: Component } \| { kind: 'element'; value: JSX.Element }\n\nfunction Glyph(props: { glyph: Glyph }) {\n return props.glyph.kind === 'component' ? (\n <Dynamic component={props.glyph.value} />\n ) : (\n props.glyph.value\n )\n}\n\nfunction EntityIconImage(props: { src: string }) {\n const [failed, setFailed] = createSignal(false)\n\n return (\n <Show when={!failed()}>\n <img\n data-slot=\"entity-icon-image\"\n src={props.src}\n alt=\"\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute inset-0 size-full object-contain\"\n onError={() => setFailed(true)}\n />\n </Show>\n )\n}\n\nexport function EntityIcon(props: EntityIconProps) {\n const [local, rest] = splitProps(props, [\n 'name',\n 'src',\n 'icon',\n 'fallback',\n 'badge',\n 'ring',\n 'monochrome',\n 'shape',\n 'size',\n 'tone',\n 'class',\n ])\n\n const glyph = (): Glyph \| undefined => {\n const icon = local.icon\n if (!icon) return undefined\n return typeof icon === 'function'\n ? { kind: 'component', value: icon as Component }\n : { kind: 'element', value: icon as JSX.Element }\n }\n\n return (\n <span\n data-slot=\"entity-icon\"\n class={cn(\n entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),\n local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',\n // A presentation attribute (`fill=\"#4A154B\"`) loses to any CSS rule, so\n // this overrides the brand's hex without touching the caller's SVG.\n local.monochrome && \"[&_[fill]:not([fill='none'])]:fill-current\",\n local.class\n )}\n role=\"img\"\n aria-label={local.name}\n {...rest}\n >\n <Show\n when={glyph()}\n fallback={local.fallback ? local.fallback(local.name) : monogram(local.name)}\n >\n {(value) => <Glyph glyph={value()} />}\n </Show>\n <Show when={local.src} keyed>\n {(src) => <EntityIconImage src={src} />}\n </Show>\n <Show when={local.badge}>\n <span class=\"absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4\">{local.badge}</span>\n </Show>\n </span>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAaU,qBAAqBH,IAChC,2JACA;CACEI,UAAU;EACRC,OAAO;GACLC,SAAS;GACTC,QAAQ;GACRC,QAAQ;EACV;EACAC,MAAM;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;EACN;EACAC,MAAM;;GAEJC,SAAS;;GAETC,SAAS;;GAETC,MAAM;GACNC,SAAS;GACTC,SAAS;GACTC,QAAQ;GACRC,MAAM;EACR;CACF;CACAC,iBAAiB;EAAElB,OAAO;EAAWI,MAAM;EAAMM,MAAM;CAAU;AACnE,CACF;;;;;;AAgCA,SAAgBoB,SAASR,MAAsB;CAC7C,MAAMS,QAAQT,KAAKU,KAAK,CAAC,CAACC,MAAM,KAAK,CAAC,CAACC,OAAOC,OAAO;CACrD,IAAIJ,MAAMK,UAAU,GAAG,QAAQL,MAAM,EAAE,CAAE,KAAMA,MAAM,EAAE,CAAE,GAAA,CAAKM,YAAY;CAC1E,OAAOf,KAAKU,KAAK,CAAC,CAACM,MAAM,GAAG,CAAC;AAC/B;AASA,SAASC,MAAMG,OAAyB;CACtC,OAAOA,MAAMC,MAAMH,SAAS,cAAWI,gBACpClD,SAAO,EAAA,IAACmD,YAAS;EAAA,OAAEH,MAAMC,MAAMF;CAAK,EAAA,CAAA,IAErCC,MAAMC,MAAMF;AAEhB;AAEA,SAASK,gBAAgBJ,OAAwB;CAC/C,MAAM,CAACK,QAAQC,aAAa5D,aAAa,KAAK;CAE9C,OAAAwD,gBACGvD,MAAI;EAAA,IAAC4D,OAAI;GAAA,OAAE,CAACF,OAAO;EAAC;EAAA,IAAAG,WAAA;GAAA,IAAAC,OAAAC,OAAA;GAAAD,KAAAE,iBAAA,eAOFL,UAAU,IAAI,CAAC;GAAAM,aAAAC,aAAAJ,MAAA,OAJzBT,MAAMnB,GAAG,CAAA;GAAA,OAAA4B;EAAA;CAAA,CAAA;AAQtB;AAEA,SAAgBK,WAAWd,OAAwB;CACjD,MAAM,CAACe,OAAOC,QAAQpE,WAAWoD,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMC,cAAiC;EACrC,MAAMnB,OAAOiC,MAAMjC;EACnB,IAAI,CAACA,MAAM,OAAOmC,KAAAA;EAClB,OAAO,OAAOnC,SAAS,aACnB;GAAEgB,MAAM;GAAaC,OAAOjB;EAAkB,IAC9C;GAAEgB,MAAM;GAAWC,OAAOjB;EAAoB;CACpD;CAEA,cAAA;EAAA,IAAAoC,QAAAC,QAAA;EAAAC,OAAAF,OAAAG,WAAA;GAAA,KAAA,WAAA;IAAA,OAGWlE,GACLC,mBAAmB;KAAEE,OAAOyD,MAAMzD;KAAOI,MAAMqD,MAAMrD;KAAMM,MAAM+C,MAAM/C;IAAK,CAAC,GAC7E+C,MAAM7B,QAAQ,yDAGd6B,MAAM5B,cAAc,8CACpB4B,MAAMO,KACR;GAAC;GAAA,KAAA,gBAAA;IAAA,OAEWP,MAAMnC;GAAI;EAAA,GAClBoC,IAAI,GAAA,OAAA,IAAA;EAAAQ,OAAAN,OAAAhB,gBAEPvD,MAAI;GAAA,IACH4D,OAAI;IAAA,OAAEN,MAAM;GAAC;GAAA,IACbjB,WAAQ;IAAA,OAAEyC,WAAA,CAAA,CAAAV,MAAM/B,QAAQ,CAAA,CAAA,IAAG+B,MAAM/B,SAAS+B,MAAMnC,IAAI,IAAIQ,SAAS2B,MAAMnC,IAAI;GAAC;GAAA4B,WAE1ET,UAAKG,gBAAML,OAAK,EAAA,IAACI,QAAK;IAAA,OAAEF,MAAM;GAAC,EAAA,CAAA;EAAI,CAAA,GAAA,IAAA;EAAAyB,OAAAN,OAAAhB,gBAEtCvD,MAAI;GAAA,IAAC4D,OAAI;IAAA,OAAEQ,MAAMlC;GAAG;GAAE6C,OAAK;GAAAlB,WACxB3B,QAAGqB,gBAAME,iBAAe,EAAMvB,IAAG,CAAA;EAAI,CAAA,GAAA,IAAA;EAAA2C,OAAAN,OAAAhB,gBAExCvD,MAAI;GAAA,IAAC4D,OAAI;IAAA,OAAEQ,MAAM9B;GAAK;GAAA,IAAAuB,WAAA;IAAA,IAAAmB,QAAAC,QAAA;IAAAJ,OAAAG,aACoDZ,MAAM9B,KAAK;IAAA,OAAA0C;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAT;CAAA,EAAA,CAAA;AAI5F"}

package/dist/components/ui/field/field.d.ts CHANGED Viewed

@@ -49,8 +49,18 @@ export declare function FieldTextArea(props: ComponentProps<typeof KobalteTextFi
  * before reading the four fields inside it.
  */
 export declare function FieldSet(props: ComponentProps<'fieldset'>): JSX.Element;
+export type FieldGroupProps = ComponentProps<'div'> & {
+    /**
+     * `2` lays the fields out in two columns from the `sm` breakpoint up — a
+     * short form of paired values (host and port, a name and a model). A field
+     * that needs the full width says `class="col-span-full"`. Below `sm` it is
+     * one column again, because two inputs side by side on a phone are each too
+     * narrow to read.
+     */
+    columns?: 1 | 2;
+};
 /** A visual stack for related controls that does not imply fieldset semantics. */
-export declare function FieldGroup(props: ComponentProps<'div'>): JSX.Element;
+export declare function FieldGroup(props: FieldGroupProps): JSX.Element;
 export declare function FieldLegend(props: ComponentProps<'legend'> & {
     variant?: 'legend' | 'label';
 }): JSX.Element;

package/dist/components/ui/field/field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAOnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,eAGnE;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkE9C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAK9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,WAAW,CAAC,eAQ1F;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,eAKrF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAiB9E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAiBpF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,eAGzD;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,KAAK,EAAE,~~cAAc~~,~~CAAC,KAAK,CAAC,eAGtD~~;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,eAY7F;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;CAC9C,eAYA"}
1	+ {"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAOnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,eAGnE;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkE9C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAK9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,WAAW,CAAC,eAQ1F;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,YAAY,CAAC,eAKrF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,eAiB9E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAiBpF;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,eAGzD;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAChB,CAAA;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAYhD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,eAY7F;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAA;CAC9C,eAYA"}

package/dist/components/ui/field/field.js CHANGED Viewed

@@ -188,11 +188,11 @@ function FieldSet(props) {
 }
 /** A visual stack for related controls that does not imply fieldset semantics. */
 function FieldGroup(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "columns"]);
 	return (() => {
 		var _el$5 = _tmpl$5();
 		spread(_el$5, mergeProps({ get ["class"]() {
-			return cn("flex flex-col gap-4", local.class);
+			return cn(local.columns === 2 ? "grid gap-4 sm:grid-cols-2" : "flex flex-col gap-4", local.class);
 		} }, rest), false, false);
 		return _el$5;
 	})();

package/dist/components/ui/field/field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.js","names":["TextField","KobalteTextField","ComponentProps","JSX","createUniqueId","Show","splitProps","Label","createFormFieldContext","FormFieldContext","cn","headingVariants","Field","props","local","rest","_$createComponent","_$mergeProps","class","FormFieldProps","Omit","label","hint","error","controlId","group","children","Element","FormField","fieldId","labelId","descriptionId","errorId","field","defaultControlId","help","when","_el$","_tmpl$","_$setAttribute","_$insert","_el$2","_tmpl$2","Provider","value","_el$3","_tmpl$3","_$spread","_c$","_$memo","FieldSet","aria-describedby","describedBy","aria-invalid","invalid","undefined","FieldLegend","id","variant","for","FieldLabel","FieldDescription","Description","FieldError","ErrorMessage","FieldInput","Input","FieldTextArea","TextArea","_el$4","_tmpl$4","FieldGroup","_el$5","_tmpl$5","_el$6","_tmpl$6","size","FieldSeparator","_el$7","_tmpl$8","_el$8","firstChild","_el$0","nextSibling","_el$9","_tmpl$7","_$createComponent","KobalteTextField","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["import { TextField as KobalteTextField } from '@kobalte/core/text-field'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { Label } from '../label/label'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { headingVariants } from '../typography'\n\n/*\n Field.\n \n The wrapper that makes a form control describable and validatable: a label,\n * a description, an error message, and the ARIA relationships between them.\n \n This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`\n * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared\n * controls, including checkboxes, switches and comboboxes.\n \n It is built on Kobalte's TextField specifically so `aria-describedby`,\n * `aria-invalid` and `aria-errormessage` are wired by construction. Those three\n * attributes are the difference between \"this field is required and empty\" and\n * a red border that only a sighted user can perceive — and they are also the\n * first thing a hand-rolled form drops.\n \n `Field` owns the description and the error slot, so its controls line up and\n * its messages land in the same place regardless of which TextField part is used.\n /\nexport function Field(props: ComponentProps<typeof KobalteTextField>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />\n}\n\nexport type FormFieldProps = Omit<ComponentProps<'div'>, 'children' \| 'ref'> & {\n label: string\n hint?: string\n error?: string\n controlId?: string\n group?: boolean\n children: JSX.Element\n}\n\n/\n FormField.\n \n A shared label, help and validation wrapper for any one shared control. Its\n * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,\n * RadioGroup and ComboboxInput, so the actual focusable element receives the\n * generated ID and description relationships. Set `group` when the label names\n * a set of controls; the wrapper then uses fieldset and legend semantics.\n /\nexport function FormField(props: FormFieldProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'label',\n 'hint',\n 'error',\n 'controlId',\n 'group',\n 'children',\n ])\n const fieldId = createUniqueId()\n const labelId = `${fieldId}-label`\n const descriptionId = `${fieldId}-description`\n const errorId = `${fieldId}-error`\n const field = createFormFieldContext({\n controlId: local.controlId,\n defaultControlId: fieldId,\n labelId,\n descriptionId,\n errorId,\n hint: () => local.hint,\n error: () => local.error,\n group: () => local.group ?? false,\n })\n const help = () => (\n <>\n <Show when={local.hint}>\n <p id={descriptionId} class=\"text-muted-foreground text-sm\">\n {local.hint}\n </p>\n </Show>\n <Show when={local.error}>\n <p id={errorId} role=\"alert\" class=\"text-foreground text-sm\">\n {local.error}\n </p>\n </Show>\n </>\n )\n\n return (\n <FormFieldContext.Provider value={field}>\n <div class={cn('flex flex-col gap-1.5', local.class)} {...rest}>\n {local.group ? (\n <FieldSet\n class=\"flex flex-col gap-1.5\"\n aria-describedby={field.describedBy()}\n aria-invalid={field.invalid() \|\| undefined}\n >\n <FieldLegend id={labelId} variant=\"label\">\n {local.label}\n </FieldLegend>\n {local.children}\n {help()}\n </FieldSet>\n ) : (\n <>\n <Label id={labelId} for={field.controlId()}>\n {local.label}\n </Label>\n {local.children}\n {help()}\n </>\n )}\n </div>\n </FormFieldContext.Provider>\n )\n}\n\nexport function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n )\n}\n\nexport function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.Description\n class={cn('text-muted-foreground text-sm', local.class)}\n {...rest}\n />\n )\n}\n\nexport function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />\n )\n}\n\nexport function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteTextField.Input\n class={cn(\n 'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n 'transition-[color,box-shadow,border-color] ease-out outline-none',\n 'placeholder:text-muted-foreground 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 local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteTextField.TextArea\n class={cn(\n 'flex field-sizing-content min-h-16 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 resize-y',\n 'placeholder:text-muted-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 local.class\n )}\n {...rest}\n />\n )\n}\n\n/\n A labelled group of fields with a single legend, for a real `<fieldset>`.\n * Grouping is what lets a screen reader announce \"Shipping address, group\"\n * before reading the four fields inside it.\n /\nexport function FieldSet(props: ComponentProps<'fieldset'>) {\n const [local, rest] = splitProps(props, ['class'])\n return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\n/* A visual stack for related controls that does not imply fieldset semantics. /\nexport function FieldGroup(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return <div data-slot=\"field-group\" class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\nexport function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' \| 'label' }) {\n const [local, rest] = splitProps(props, ['class', 'variant'])\n return (\n <legend\n class={cn(\n 'mb-1',\n local.variant === 'label' ? 'text-sm font-medium' : headingVariants({ size: 'card' }),\n local.class\n )}\n {...rest}\n />\n )\n}\n\n/* A horizontal rule with a word in it, for \"or continue with\" separators. */\nexport function FieldSeparator(props: {\n class?: string\n children?: ComponentProps<'span'>['children']\n}) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>\n <span class=\"bg-border h-px flex-1\" />\n <Show when={local.children}>\n <span class=\"text-muted-foreground text-2xs tracking-wide uppercase\">{local.children}</span>\n </Show>\n <span class=\"bg-border h-px flex-1\" />\n </div>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"field.js","names":["TextField","KobalteTextField","ComponentProps","JSX","createUniqueId","Show","splitProps","Label","createFormFieldContext","FormFieldContext","cn","headingVariants","Field","props","local","rest","_$createComponent","_$mergeProps","class","FormFieldProps","Omit","label","hint","error","controlId","group","children","Element","FormField","fieldId","labelId","descriptionId","errorId","field","defaultControlId","help","when","_el$","_tmpl$","_$setAttribute","_$insert","_el$2","_tmpl$2","Provider","value","_el$3","_tmpl$3","_$spread","_c$","_$memo","FieldSet","aria-describedby","describedBy","aria-invalid","invalid","undefined","FieldLegend","id","variant","for","FieldLabel","FieldDescription","Description","FieldError","ErrorMessage","FieldInput","Input","FieldTextArea","TextArea","_el$4","_tmpl$4","FieldGroupProps","columns","FieldGroup","_el$5","_tmpl$5","_el$6","_tmpl$6","size","FieldSeparator","_el$7","_tmpl$8","_el$8","firstChild","_el$0","nextSibling","_el$9","_tmpl$7","_$createComponent","KobalteTextField","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/field/field.tsx"],"sourcesContent":["import { TextField as KobalteTextField } from '@kobalte/core/text-field'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { Label } from '../label/label'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { headingVariants } from '../typography'\n\n/*\n Field.\n \n The wrapper that makes a form control describable and validatable: a label,\n * a description, an error message, and the ARIA relationships between them.\n \n This Kobalte TextField composition is for its own `FieldLabel`, `FieldInput`\n * and `FieldTextArea` parts. Use `FormField` to wire the standalone shared\n * controls, including checkboxes, switches and comboboxes.\n \n It is built on Kobalte's TextField specifically so `aria-describedby`,\n * `aria-invalid` and `aria-errormessage` are wired by construction. Those three\n * attributes are the difference between \"this field is required and empty\" and\n * a red border that only a sighted user can perceive — and they are also the\n * first thing a hand-rolled form drops.\n \n `Field` owns the description and the error slot, so its controls line up and\n * its messages land in the same place regardless of which TextField part is used.\n /\nexport function Field(props: ComponentProps<typeof KobalteTextField>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />\n}\n\nexport type FormFieldProps = Omit<ComponentProps<'div'>, 'children' \| 'ref'> & {\n label: string\n hint?: string\n error?: string\n controlId?: string\n group?: boolean\n children: JSX.Element\n}\n\n/\n FormField.\n \n A shared label, help and validation wrapper for any one shared control. Its\n * context is consumed by Input, Textarea, NativeSelect, Checkbox, Switch,\n * RadioGroup and ComboboxInput, so the actual focusable element receives the\n * generated ID and description relationships. Set `group` when the label names\n * a set of controls; the wrapper then uses fieldset and legend semantics.\n /\nexport function FormField(props: FormFieldProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'label',\n 'hint',\n 'error',\n 'controlId',\n 'group',\n 'children',\n ])\n const fieldId = createUniqueId()\n const labelId = `${fieldId}-label`\n const descriptionId = `${fieldId}-description`\n const errorId = `${fieldId}-error`\n const field = createFormFieldContext({\n controlId: local.controlId,\n defaultControlId: fieldId,\n labelId,\n descriptionId,\n errorId,\n hint: () => local.hint,\n error: () => local.error,\n group: () => local.group ?? false,\n })\n const help = () => (\n <>\n <Show when={local.hint}>\n <p id={descriptionId} class=\"text-muted-foreground text-sm\">\n {local.hint}\n </p>\n </Show>\n <Show when={local.error}>\n <p id={errorId} role=\"alert\" class=\"text-foreground text-sm\">\n {local.error}\n </p>\n </Show>\n </>\n )\n\n return (\n <FormFieldContext.Provider value={field}>\n <div class={cn('flex flex-col gap-1.5', local.class)} {...rest}>\n {local.group ? (\n <FieldSet\n class=\"flex flex-col gap-1.5\"\n aria-describedby={field.describedBy()}\n aria-invalid={field.invalid() \|\| undefined}\n >\n <FieldLegend id={labelId} variant=\"label\">\n {local.label}\n </FieldLegend>\n {local.children}\n {help()}\n </FieldSet>\n ) : (\n <>\n <Label id={labelId} for={field.controlId()}>\n {local.label}\n </Label>\n {local.children}\n {help()}\n </>\n )}\n </div>\n </FormFieldContext.Provider>\n )\n}\n\nexport function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n )\n}\n\nexport function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.Description\n class={cn('text-muted-foreground text-sm', local.class)}\n {...rest}\n />\n )\n}\n\nexport function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />\n )\n}\n\nexport function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteTextField.Input\n class={cn(\n 'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',\n 'transition-[color,box-shadow,border-color] ease-out outline-none',\n 'placeholder:text-muted-foreground 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 local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteTextField.TextArea\n class={cn(\n 'flex field-sizing-content min-h-16 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 resize-y',\n 'placeholder:text-muted-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 local.class\n )}\n {...rest}\n />\n )\n}\n\n/\n A labelled group of fields with a single legend, for a real `<fieldset>`.\n * Grouping is what lets a screen reader announce \"Shipping address, group\"\n * before reading the four fields inside it.\n /\nexport function FieldSet(props: ComponentProps<'fieldset'>) {\n const [local, rest] = splitProps(props, ['class'])\n return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />\n}\n\nexport type FieldGroupProps = ComponentProps<'div'> & {\n /\n `2` lays the fields out in two columns from the `sm` breakpoint up — a\n * short form of paired values (host and port, a name and a model). A field\n * that needs the full width says `class=\"col-span-full\"`. Below `sm` it is\n * one column again, because two inputs side by side on a phone are each too\n * narrow to read.\n /\n columns?: 1 \| 2\n}\n\n/* A visual stack for related controls that does not imply fieldset semantics. /\nexport function FieldGroup(props: FieldGroupProps) {\n const [local, rest] = splitProps(props, ['class', 'columns'])\n return (\n <div\n data-slot=\"field-group\"\n class={cn(\n local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' \| 'label' }) {\n const [local, rest] = splitProps(props, ['class', 'variant'])\n return (\n <legend\n class={cn(\n 'mb-1',\n local.variant === 'label' ? 'text-sm font-medium' : headingVariants({ size: 'card' }),\n local.class\n )}\n {...rest}\n />\n )\n}\n\n/* A horizontal rule with a word in it, for \"or continue with\" separators. */\nexport function FieldSeparator(props: {\n class?: string\n children?: ComponentProps<'span'>['children']\n}) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>\n <span class=\"bg-border h-px flex-1\" />\n <Show when={local.children}>\n <span class=\"text-muted-foreground text-2xs tracking-wide uppercase\">{local.children}</span>\n </Show>\n <span class=\"bg-border h-px flex-1\" />\n </div>\n )\n}\n"],"mappings":"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"}

package/dist/components/ui/field/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Field, FormField, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, type FormFieldProps, } from './field';
+export { Field, FormField, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, type FieldGroupProps, type FormFieldProps, } from './field';
 export { NumberField } from './number-field';
 export type { NumberFieldProps } from './number-field';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/field/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,EACb,KAAK,cAAc,GACpB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/ui/input-group/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, type InputGroupAddonProps, } from './input-group';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, type InputGroupAddonProps, type InputGroupProps, } from './input-group';
 export { SecretInputGroup, type SecretInputGroupProps } from './secret-input-group';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/input-group/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,oBAAoB,~~GAC1B~~,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/components/ui/input-group/input-group.d.ts CHANGED Viewed

@@ -11,8 +11,15 @@ import type { ComponentProps, JSX } from 'solid-js';
  * The focus ring therefore lives on the group and follows `focus-within`. A
  * group containing several focusable things still reads as focused once, which
  * is the correct affordance: the user is somewhere inside it.
+ *
+ * `size` is the control rung, matching `Input`: `sm` for a toolbar search beside
+ * `icon-sm` actions, `md` (the default) everywhere else. The group's input and
+ * text follow it.
  */
-export declare function InputGroup(props: ComponentProps<'div'>): JSX.Element;
+export type InputGroupProps = ComponentProps<'div'> & {
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare function InputGroup(props: InputGroupProps): JSX.Element;
 export declare function InputGroupInput(props: ComponentProps<'input'>): JSX.Element;
 export type InputGroupAddonProps = ComponentProps<'span'> & {
     /** Which edge the adornment sits on; also sets the pointer-events rule. */

package/dist/components/ui/input-group/input-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD~~;;;;;;;;;;;;GAYG~~;AACH,~~wBAAgB~~,~~UAAU~~,CAAC,KAAK,EAAE,~~cAAc~~,CAAC,KAAK,~~CAAC~~,~~eAiBtD~~;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,eAqC7D;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC1D,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,~~eAiB1D~~;AAED,gEAAgE;AAChE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAoB/D;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,~~eAGxF~~"}
1	+ {"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuBhD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,eAqC7D;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC1D,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACxB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAkB1D;AAED,gEAAgE;AAChE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAoB/D;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAWxF"}

package/dist/components/ui/input-group/input-group.js CHANGED Viewed

@@ -8,26 +8,22 @@ var _tmpl$2 = /*#__PURE__*/ template(`<input data-slot=input-group-input>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<span data-slot=input-group-addon>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<button type=button data-slot=input-group-button>`);
 var _tmpl$5 = /*#__PURE__*/ template(`<span>`);
-/**
-* InputGroup.
-*
-* A field with attached chrome: a leading icon, a unit, a trailing button, a
-* clear affordance. The point of the component is that the adornments and the
-* input share *one* border and *one* focus ring, so the group reads as a single
-* control. Two separate elements side by side always drift — the ring appears
-* on the wrong box, or the border doubles where they meet.
-*
-* The focus ring therefore lives on the group and follows `focus-within`. A
-* group containing several focusable things still reads as focused once, which
-* is the correct affordance: the user is somewhere inside it.
-*/
 function InputGroup(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "size"]);
 	return (() => {
 		var _el$ = _tmpl$();
-		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm", "transition-[color,box-shadow,border-color] ease-out", "focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle", "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", local.class);
-		} }, rest), false, false);
+		spread(_el$, mergeProps({
+			get ["data-size"]() {
+				return local.size;
+			},
+			get ["class"]() {
+				return cn("group/input-group border-input flex w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent", {
+					"h-control-sm px-control-xs": local.size === "sm",
+					"h-control-md px-control-sm": local.size === "md" || local.size === void 0,
+					"h-control-lg px-control-md": local.size === "lg"
+				}, "transition-[color,box-shadow,border-color] ease-out", "focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle", "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", local.class);
+			}
+		}, rest), false, false);
 		return _el$;
 	})();
 }
@@ -71,7 +67,7 @@ function InputGroupInput(props) {
 				return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 			},
 			get ["class"]() {
-				return cn("h-full min-w-0 flex-1 bg-transparent text-sm outline-none", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
+				return cn("h-full min-w-0 flex-1 bg-transparent text-sm outline-none group-data-[size=sm]/input-group:text-xs", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed", local.class);
 			}
 		}, rest), false, false);
 		return _el$2;
@@ -92,7 +88,7 @@ function InputGroupAddon(props) {
 	return (() => {
 		var _el$3 = _tmpl$3();
 		spread(_el$3, mergeProps({ get ["class"]() {
-			return cn("text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none", "[&_svg]:pointer-events-none [&_svg]:size-4", {
+			return cn("text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none", "[&_svg]:pointer-events-none [&_svg]:size-4", "group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg]:size-3.5", {
 				"order-first": local.align !== "end",
 				"order-last": local.align === "end"
 			}, local.class);
@@ -119,7 +115,7 @@ function InputGroupText(props) {
 	return (() => {
 		var _el$5 = _tmpl$5();
 		spread(_el$5, mergeProps({ get ["class"]() {
-			return cn("text-muted-foreground text-sm", local.class);
+			return cn("text-muted-foreground text-sm group-data-[size=sm]/input-group:text-xs", local.class);
 		} }, rest), false, false);
 		return _el$5;
 	})();

package/dist/components/ui/input-group/input-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.js","names":["ComponentProps","JSX","splitProps","useFormFieldControl","cn","InputGroup","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","InputGroupInput","field","id","_el$2","_tmpl$2","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","InputGroupAddonProps","align","InputGroupAddon","_el$3","_tmpl$3","_$insert","children","InputGroupButton","_el$4","_tmpl$4","InputGroupText","Element","_el$5","_tmpl$5","_$mergeProps"],"sources":["../../../../src/components/ui/input-group/input-group.tsx"],"sourcesContent":["import 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 InputGroup.\n \n A field with attached chrome: a leading icon, a unit, a trailing button, a\n * clear affordance. The point of the component is that the adornments and the\n * input share one border and one focus ring, so the group reads as a single\n * control. Two separate elements side by side always drift — the ring appears\n * on the wrong box, or the border doubles where they meet.\n \n The focus ring therefore lives on the group and follows `focus-within`. A\n * group containing several focusable things still reads as focused once, which\n * is the correct affordance: the user is somewhere inside it.\n /\nexport ~~function~~ ~~InputGroup(props:~~ ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <div\n data-slot=\"input-group\"\n class={cn(\n 'border-input flex ~~h-control-md~~ w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',\n 'transition-[color,box-shadow,border-color] ease-out',\n 'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',\n 'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function InputGroupInput(props: ComponentProps<'input'>) {\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('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 <input\n data-slot=\"input-group-input\"\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(\n 'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',\n 'placeholder:text-muted-foreground',\n 'disabled:cursor-not-allowed',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport type InputGroupAddonProps = ComponentProps<'span'> & {\n /* Which edge the adornment sits on; also sets the pointer-events rule. /\n align?: 'start' \| 'end'\n}\n\n/\n A non-interactive adornment. `pointer-events-none` by default, because an\n * adornment that swallows a click makes the whole control feel dead just to\n * the left of the caret — the most annoying possible bug. Pass `align=\"end\"`\n * and a real element when the adornment must be clickable.\n /\nexport function InputGroupAddon(props: InputGroupAddonProps) {\n const [local, rest] = splitProps(props, ['class', 'align', 'children'])\n\n return (\n <span\n data-slot=\"input-group-addon\"\n class={cn(\n 'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',\n '[&_svg]:pointer-events-none [&_svg]:size-4',\n { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },\n local.class\n )}\n {...rest}\n >\n {local.children}\n </span>\n )\n}\n\n/* A clickable trailing button, sized to the group's height. /\nexport function InputGroupButton(props: ComponentProps<'button'>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <button\n type=\"button\"\n data-slot=\"input-group-button\"\n class={cn(\n 'text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n 'transition-colors ease-out outline-none hover:bg-surface-hover 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 '[&_svg]:size-3.5',\n local.class\n )}\n {...rest}\n >\n {local.children}\n </button>\n )\n}\n\n/* Text that reads as a value but is not an input, e.g. a unit or a suffix. */\nexport function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {\n const [local, rest] = splitProps(props, ['class'])\n return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AAkBA~~,~~SAAgBK~~,WAAWC,~~OAA8B~~;~~CACvD~~,MAAM,CAACC,OAAOC,~~QAAQN~~,~~WAAWI~~,OAAO,CAAC,~~OAAO~~,CAAC;~~CAEjD~~,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,~~EAAA~~,KAAA,WAAA;~~GAAA~~,~~OAGWR~~,GACL,~~qHACA~~,uDACA,iFACA,mIACA,2EACAG,~~MAAMM~~,KACR;~~EAAC,~~EAAA,~~GACGL~~,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,~~SAAgBK~~,~~gBAAgBR~~,OAAgC;CAC9D,MAAM,CAACC,OAAOC,~~QAAQN~~,~~WAAWI~~,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,~~MAAMS~~,~~QAAQZ~~,oBAAoB,WAAW;~~EAC3Ca~~,~~IAAIT~~,~~MAAMS~~;EACV,~~cAAcT~~,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CAED,cAAA;EAAA,~~IAAAU~~,QAAAC,QAAA;~~EAAAP~~,~~OAAAM~~,~~OAAAL~~,WAAA;GAAA,~~IAGII~~,KAAE;IAAA,OAAED,OAAOC,~~MAAMT~~,~~MAAMS~~;GAAE;GAAA,KAAA,gBAAA;IAAA,~~OACbT~~,MAAM;GAAa;GAAA,KAAA,qBAAA;IAAA,~~OACdQ~~,QAAQ,~~sBAAsBR~~,MAAM;GAAkB;GAAA,KAAA,sBAAA;IAAA,~~OACrDQ~~,QAAQ,~~uBAAuBR~~,MAAM;GAAmB;GAAA,KAAA,kBAAA;IAAA,~~OAC5DQ~~,QAAQ,~~mBAAmBR~~,MAAM;GAAe;GAAA,KAAA,uBAAA;IAAA,~~OAC3CQ~~,QAAQ,~~wBAAwBR~~,MAAM;GAAoB;GAAA,KAAA,WAAA;IAAA,~~OACtEH~~,GACL,~~6DACA~~,qCACA,+~~BACAG~~,~~MAAMM~~,KACR;GAAC;EAAA,~~GACGL~~,IAAI,GAAA,OAAA,KAAA;EAAA,~~OAAAS~~;CAAA,EAAA,CAAA;AAGd;;;;;;;AAaA,SAAgBS,~~gBAAgBpB~~,OAA6B;CAC3D,MAAM,CAACC,OAAOC,~~QAAQN~~,~~WAAWI~~,OAAO;EAAC;EAAS;EAAS;CAAU,CAAC;CAEtE,cAAA;EAAA,~~IAAAqB~~,QAAAC,QAAA;~~EAAAjB~~,~~OAAAgB~~,~~OAAAf~~,WAAA,EAAA,KAAA,WAAA;GAAA,~~OAGWR~~,GACL,gFACA,8CACA;IAAE,~~eAAeG~~,~~MAAMkB~~,UAAU;IAAO,~~cAAclB~~,~~MAAMkB~~,UAAU;GAAM,~~GAC5ElB~~,~~MAAMM~~,KACR;EAAC,EAAA,~~GACGL~~,IAAI,GAAA,OAAA,IAAA;~~EAAAqB~~,OAAAF,~~aAEPpB~~,~~MAAMuB~~,QAAQ;EAAA,OAAAH;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBI,~~iBAAiBzB~~,OAAiC;CAChE,MAAM,CAACC,OAAOC,~~QAAQN~~,~~WAAWI~~,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,cAAA;EAAA,~~IAAA0B~~,QAAAC,QAAA;~~EAAAtB~~,~~OAAAqB~~,~~OAAApB~~,WAAA,EAAA,KAAA,WAAA;GAAA,~~OAIWR~~,GACL,2FACA,wFACA,oFACA,oDACA,~~oBACAG~~,~~MAAMM~~,KACR;EAAC,EAAA,~~GACGL~~,IAAI,GAAA,OAAA,IAAA;~~EAAAqB~~,OAAAG,~~aAEPzB~~,~~MAAMuB~~,QAAQ;EAAA,OAAAE;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBE,~~eAAe5B~~,OAA4D;CACzF,MAAM,CAACC,OAAOC,~~QAAQN~~,~~WAAWI~~,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,~~IAAA8B~~,QAAAC,QAAA;~~EAAA1B~~,~~OAAAyB~~,~~OAAAxB~~,WAAA,EAAA,KAAA,WAAA;GAAA,~~OAAoBR~~,~~GAAG~~,~~iCAAiCG~~,~~MAAMM~~,~~KAAK~~;EAAC,EAAA,~~GAAML~~,IAAI,GAAA,OAAA,KAAA;EAAA,~~OAAA4B~~;CAAA,EAAA,CAAA;~~AAChF~~"}
1	+ {"version":3,"file":"input-group.js","names":["ComponentProps","JSX","splitProps","useFormFieldControl","cn","InputGroupProps","size","InputGroup","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","data-size","class","undefined","InputGroupInput","field","id","_el$2","_tmpl$2","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","InputGroupAddonProps","align","InputGroupAddon","_el$3","_tmpl$3","_$insert","children","InputGroupButton","_el$4","_tmpl$4","InputGroupText","Element","_el$5","_tmpl$5","_$mergeProps"],"sources":["../../../../src/components/ui/input-group/input-group.tsx"],"sourcesContent":["import 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 InputGroup.\n \n A field with attached chrome: a leading icon, a unit, a trailing button, a\n * clear affordance. The point of the component is that the adornments and the\n * input share one border and one focus ring, so the group reads as a single\n * control. Two separate elements side by side always drift — the ring appears\n * on the wrong box, or the border doubles where they meet.\n \n The focus ring therefore lives on the group and follows `focus-within`. A\n * group containing several focusable things still reads as focused once, which\n * is the correct affordance: the user is somewhere inside it.\n \n `size` is the control rung, matching `Input`: `sm` for a toolbar search beside\n * `icon-sm` actions, `md` (the default) everywhere else. The group's input and\n * text follow it.\n /\nexport type InputGroupProps = ComponentProps<'div'> & {\n size?: 'sm' \| 'md' \| 'lg'\n}\n\nexport function InputGroup(props: InputGroupProps) {\n const [local, rest] = splitProps(props, ['class', 'size'])\n\n return (\n <div\n data-slot=\"input-group\"\n data-size={local.size}\n class={cn(\n 'group/input-group border-input flex w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent',\n {\n 'h-control-sm px-control-xs': local.size === 'sm',\n 'h-control-md px-control-sm': local.size === 'md' \|\| local.size === undefined,\n 'h-control-lg px-control-md': local.size === 'lg',\n },\n 'transition-[color,box-shadow,border-color] ease-out',\n 'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',\n 'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function InputGroupInput(props: ComponentProps<'input'>) {\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('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 <input\n data-slot=\"input-group-input\"\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(\n 'h-full min-w-0 flex-1 bg-transparent text-sm outline-none group-data-[size=sm]/input-group:text-xs',\n 'placeholder:text-muted-foreground',\n 'disabled:cursor-not-allowed',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport type InputGroupAddonProps = ComponentProps<'span'> & {\n /* Which edge the adornment sits on; also sets the pointer-events rule. /\n align?: 'start' \| 'end'\n}\n\n/\n A non-interactive adornment. `pointer-events-none` by default, because an\n * adornment that swallows a click makes the whole control feel dead just to\n * the left of the caret — the most annoying possible bug. Pass `align=\"end\"`\n * and a real element when the adornment must be clickable.\n /\nexport function InputGroupAddon(props: InputGroupAddonProps) {\n const [local, rest] = splitProps(props, ['class', 'align', 'children'])\n\n return (\n <span\n data-slot=\"input-group-addon\"\n class={cn(\n 'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',\n '[&_svg]:pointer-events-none [&_svg]:size-4',\n 'group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg]:size-3.5',\n { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },\n local.class\n )}\n {...rest}\n >\n {local.children}\n </span>\n )\n}\n\n/* A clickable trailing button, sized to the group's height. /\nexport function InputGroupButton(props: ComponentProps<'button'>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <button\n type=\"button\"\n data-slot=\"input-group-button\"\n class={cn(\n 'text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n 'transition-colors ease-out outline-none hover:bg-surface-hover 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 '[&_svg]:size-3.5',\n local.class\n )}\n {...rest}\n >\n {local.children}\n </button>\n )\n}\n\n/* Text that reads as a value but is not an input, e.g. a unit or a suffix. */\nexport function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <span\n class={cn(\n 'text-muted-foreground text-sm group-data-[size=sm]/input-group:text-xs',\n local.class\n )}\n {...rest}\n />\n )\n}\n"],"mappings":"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"}

package/dist/components/ui/native-select/native-select.d.ts CHANGED Viewed

@@ -1,5 +1,12 @@
 import type { ComponentProps } from 'solid-js';
-export type NativeSelectProps = ComponentProps<'select'> & {
+export type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {
+    /**
+     * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense
+     * toolbar or pane filter, `md` (the default) everywhere else. This replaces the
+     * native `size` attribute, which turns a select into a list box — a different
+     * control that this styled single-line select is not.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /** Render the choices from data instead of raw option children. */
     options?: readonly NativeSelectOption[];
     /** Initialize an uncontrolled selection after its native options mount. */

package/dist/components/ui/native-select/native-select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;~~IACzD~~,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,~~kCA6EpD~~"}
1	+ {"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACvE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAuFpD"}

package/dist/components/ui/native-select/native-select.js CHANGED Viewed

@@ -24,6 +24,7 @@ function initializeDefaultSelection(select, value, multiple) {
 function NativeSelect(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
+		"size",
 		"children",
 		"defaultValue",
 		"options",
@@ -75,7 +76,11 @@ function NativeSelect(props) {
 				return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 			},
 			get ["class"]() {
-				return cn("h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm", "transition-[color,box-shadow,border-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", local.class);
+				return cn("min-w-0 appearance-none rounded-md border border-input bg-transparent", {
+					"h-control-sm px-control-sm pr-8 text-xs": local.size === "sm",
+					"h-control-md px-control-md pr-9 text-sm": local.size === "md" || local.size === void 0,
+					"h-control-lg px-control-lg pr-9 text-sm": local.size === "lg"
+				}, "transition-[color,box-shadow,border-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30", local.class);
 			}
 		}, rest), false, true);
 		insert(_el$2, createComponent(Show, {
@@ -101,7 +106,9 @@ function NativeSelect(props) {
 		insert(_el$, createComponent(ChevronDownIcon, {
 			"data-slot": "native-select-icon",
 			"aria-hidden": "true",
-			"class": "pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+			get ["class"]() {
+				return cn("pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground", local.size === "sm" ? "size-3.5" : "size-4");
+			}
 		}), null);
 		return _el$;
 	})();

package/dist/components/ui/native-select/native-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = ComponentProps<'select'> & {\n /** Render the choices from data instead of raw option children. /\n options?: readonly NativeSelectOption[]\n /* Initialize an uncontrolled selection after its native options mount. /\n defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n if (multiple && Array.isArray(value)) {\n const selected = new Set(value.map(String))\n for (const option of select.options) option.selected = selected.has(option.value)\n return\n }\n\n select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n const defaultValues =\n multiple && Array.isArray(value)\n ? new Set(value.map(String))\n : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n setSelectedValue(select, value, multiple)\n}\n\n/\n NativeSelect.\n \n A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n \n Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n value: string\n label: string\n disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'children',\n 'defaultValue',\n 'options',\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 let select: HTMLSelectElement \| undefined\n\n // Set selection after native options exist; setting select.value before its\n // children are mounted makes browsers fall back to the first option.\n createEffect(() => {\n if (!select) return\n setSelectedValue(select, rest.value, Boolean(rest.multiple))\n })\n onMount(() => {\n if (select && rest.value === undefined) {\n initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n }\n })\n\n return (\n <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n <select\n ref={(element) => {\n select = element\n }}\n data-slot=\"native-select\"\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(\n '~~h-control-md~~ min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',\n 'transition-[color,box-shadow,border-color] ease-out outline-none',\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 dark:bg-input/30',\n local.class\n )}\n {...rest}\n >\n <Show when={local.options} fallback={local.children}>\n {(options) => (\n <For each={options()}>\n {(option) => (\n <option value={option.value} disabled={option.disabled}>\n {option.label}\n </option>\n )}\n </For>\n )}\n </Show>\n </select>\n <ChevronDownIcon\n data-slot=\"native-select-icon\"\n aria-hidden=\"true\"\n class~~=\"~~pointer-events-none absolute end-2 top-1/2 ~~size~~-~~4 -~~translate-y-1/2 text-muted-foreground\"\n />\n </span>\n )\n}\n"],"mappings":";;;;;;;;~~AAaA~~,~~SAASa~~,iBACPC,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,IAAID,YAAYE,MAAMC,QAAQJ,KAAK,GAAG;EACpC,MAAMK,WAAW,IAAIC,IAAIN,MAAMO,IAAIC,MAAM,CAAC;EAC1C,KAAK,MAAMC,UAAUX,OAAOJ,SAASe,OAAOJ,WAAWA,SAASK,IAAID,OAAOT,KAAK;EAChF;CACF;CAEAF,OAAOE,QAAQQ,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK;AACvE;AAEA,SAASW,2BACPb,QACAE,OACAC,UACA;CACA,IAAID,UAAUE,KAAAA,GAAW;CAEzB,MAAMU,gBACJX,YAAYE,MAAMC,QAAQJ,KAAK,IAC3B,IAAIM,IAAIN,MAAMO,IAAIC,MAAM,CAAC,oBACzB,IAAIF,IAAI,CAACE,OAAOL,MAAMC,QAAQJ,KAAK,IAAKA,MAAM,MAAM,KAAMA,KAAK,CAAC,CAAC;CAEvE,KAAK,MAAMS,UAAUX,OAAOJ,SAASe,OAAOI,kBAAkBD,cAAcF,IAAID,OAAOT,KAAK;CAC5FH,iBAAiBC,QAAQE,OAAOC,QAAQ;AAC1C;AAkBA,SAAgBgB,aAAaC,OAA0B;CACrD,MAAM,CAACC,OAAOC,~~QAAQ9B~~,~~WAAW4B~~,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAmB,CACpB;CACD,MAAMG,~~QAAQ9B~~,oBAAoB,WAAW;~~EAC3C+B~~,IAAIH,MAAMG;EACV,cAAcH,MAAM;EACpB,mBAAmBA,MAAM;EACzB,oBAAoBA,MAAM;EAC1B,gBAAgBA,MAAM;EACtB,qBAAqBA,MAAM;CAC7B,CAAC;CACD,IAAIrB;~~CAIJZ~~,mBAAmB;EACjB,IAAI,~~CAACY~~,QAAQ;EACbD,iBAAiBC,QAAQsB,KAAKpB,OAAOuB,QAAQH,KAAKnB,QAAQ,CAAC;CAC7D,CAAC;~~CACDb~~,cAAc;EACZ,~~IAAIU~~,UAAUsB,KAAKpB,UAAUE,KAAAA,GAC3BS,2BAA2Bb,QAAQqB,MAAMvB,cAAc2B,QAAQH,KAAKnB,QAAQ,CAAC;CAEjF,CAAC;CAED,cAAA;EAAA,IAAAuB,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,KAGYC,YAAY;GAChB/B,SAAS+B;EACX,GAACH,KAAA;EAAAI,OAAAJ,OAAAK,WAAA;GAAA,IAEDT,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,~~OACtE3B~~,GACL,~~iHACA~~,oEACA,oFACA,4FACA,~~iGACA2B~~,MAAMkB,KACR;GAAC;EAAA,GACGjB,IAAI,GAAA,OAAA,IAAA;EAAAkB,OAAAZ,OAAAa,~~gBAEPlD~~,MAAI;GAAA,~~IAACmD~~,OAAI;IAAA,OAAErB,MAAMzB;GAAO;GAAA,IAAE+C,WAAQ;IAAA,OAAEtB,MAAMuB;GAAQ;GAAAA,WAC/ChD,YAAO6C,~~gBACNpD~~,KAAG;IAAA,~~IAACwD~~,OAAI;KAAA,OAAEjD,QAAQ;IAAC;IAAAgD,WAChBjC,kBAAM;KAAA,IAAAmC,QAAAC,QAAA;KAAAP,OAAAM,aAEHnC,OAAOM,KAAK;KAAA+B,aAAAF,MAAA5B,WADwBP,OAAOO,QAAQ;KAAA8B,aAAAF,MAAA5C,QAAvCS,OAAOT,KAAK;KAAA,OAAA4C;IAAA,EAAA,CAAA;GAG5B,CAAA;EAEJ,CAAA,CAAA;EAAAN,OAAAd,MAAAe,~~gBAGJvD~~,iBAAe;GAAA,aAAA;GAAA,eAAA;GAAA,~~SAAA~~;EAAA,CAAA,GAAA,IAAA;EAAA,~~OAAAwC~~;CAAA,EAAA,CAAA;~~AAOtB~~"}
1	+ {"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","Omit","size","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {\n /*\n The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense\n * toolbar or pane filter, `md` (the default) everywhere else. This replaces the\n * native `size` attribute, which turns a select into a list box — a different\n * control that this styled single-line select is not.\n /\n size?: 'sm' \| 'md' \| 'lg'\n /* Render the choices from data instead of raw option children. /\n options?: readonly NativeSelectOption[]\n /* Initialize an uncontrolled selection after its native options mount. /\n defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n if (multiple && Array.isArray(value)) {\n const selected = new Set(value.map(String))\n for (const option of select.options) option.selected = selected.has(option.value)\n return\n }\n\n select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n select: HTMLSelectElement,\n value: ComponentProps<'select'>['value'],\n multiple: boolean\n) {\n if (value === undefined) return\n\n const defaultValues =\n multiple && Array.isArray(value)\n ? new Set(value.map(String))\n : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n setSelectedValue(select, value, multiple)\n}\n\n/\n NativeSelect.\n \n A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n \n Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n value: string\n label: string\n disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'size',\n 'children',\n 'defaultValue',\n 'options',\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 let select: HTMLSelectElement \| undefined\n\n // Set selection after native options exist; setting select.value before its\n // children are mounted makes browsers fall back to the first option.\n createEffect(() => {\n if (!select) return\n setSelectedValue(select, rest.value, Boolean(rest.multiple))\n })\n onMount(() => {\n if (select && rest.value === undefined) {\n initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n }\n })\n\n return (\n <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n <select\n ref={(element) => {\n select = element\n }}\n data-slot=\"native-select\"\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(\n 'min-w-0 appearance-none rounded-md border border-input bg-transparent',\n {\n 'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',\n 'h-control-md px-control-md pr-9 text-sm':\n local.size === 'md' \|\| local.size === undefined,\n 'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',\n },\n 'transition-[color,box-shadow,border-color] ease-out outline-none',\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 dark:bg-input/30',\n local.class\n )}\n {...rest}\n >\n <Show when={local.options} fallback={local.children}>\n {(options) => (\n <For each={options()}>\n {(option) => (\n <option value={option.value} disabled={option.disabled}>\n {option.label}\n </option>\n )}\n </For>\n )}\n </Show>\n </select>\n <ChevronDownIcon\n data-slot=\"native-select-icon\"\n aria-hidden=\"true\"\n class={cn(\n 'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',\n local.size === 'sm' ? 'size-3.5' : 'size-4'\n )}\n />\n </span>\n )\n}\n"],"mappings":"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"}

package/dist/components/ui/progress/progress.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,~~kCAuC5C~~"}
1	+ {"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACnE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCA2C5C"}

package/dist/components/ui/progress/progress.js CHANGED Viewed

@@ -12,9 +12,12 @@ function Progress$1(props) {
 		"hideValue",
 		"label"
 	]);
-	return createComponent(Progress, mergeProps({ get ["class"]() {
-		return cn("flex w-full flex-col gap-1.5", local.class);
-	} }, rest, { get children() {
+	return createComponent(Progress, mergeProps({
+		"data-slot": "progress",
+		get ["class"]() {
+			return cn("flex w-full flex-col gap-1.5", local.class);
+		}
+	}, rest, { get children() {
 		return [createComponent(Show, {
 			get when() {
 				return local.label || !local.hideValue;

package/dist/components/ui/progress/progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","when","_el$","_tmpl$","_$insert","Label","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/*\n Progress.\n \n A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n \n `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n /\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n /\n The visible label, which is also the bar's accessible name.\n \n Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n * with neither announces \"progress bar, 64%\" and no subject — the reader\n * cannot tell whether it is a build, an upload or a download.\n /\n label?: string\n trackClass?: string\n indicatorClass?: string\n /* Hide the numeric readout that otherwise sits beside the track. */\n hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'trackClass',\n 'indicatorClass',\n 'hideValue',\n 'label',\n ])\n\n return (\n <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>\n <Show when={local.label \|\| !local.hideValue}>\n <div class=\"flex items-center justify-between gap-3\">\n <Show when={local.label}>\n <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n {local.label}\n </KobalteProgress.Label>\n </Show>\n <Show when={!local.hideValue}>\n <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n </Show>\n </div>\n </Show>\n <KobalteProgress.Track\n class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n >\n <KobalteProgress.Fill\n class={cn(\n 'bg-primary h-full rounded-full',\n {\n 'animate-indeterminate w-1/4': props.indeterminate,\n 'w-(--kb-progress-fill-width)': !props.indeterminate,\n },\n local.indicatorClass\n )}\n />\n </KobalteProgress.Track>\n </KobalteProgress>\n )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA,EAAA,KAAA,WAAA;~~EAAA~~,~~OAAQV~~,GAAG,gCAAgCO,MAAMI,KAAK;~~CAAC~~,~~EAAA~~,~~GAAMH,~~MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,CAAAH,~~gBAC9EX~~,MAAI;GAAA,IAACe,OAAI;IAAA,OAAEN,MAAML,SAAS,CAACK,MAAMF;GAAS;GAAA,IAAAO,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,MAAAL,gBAEtCX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAEN,MAAML;KAAK;KAAA,IAAAU,WAAA;MAAA,OAAAH,gBACpBb,SAAgBqB,OAAK;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACnBL,MAAML;OAAK;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAc,OAAAF,MAAAL,gBAGfX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAE,CAACN,MAAMF;KAAS;KAAA,IAAAO,WAAA;MAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA;EAAA,CAAA,GAAAL,gBAIhCb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}
1	+ {"version":3,"file":"progress.js","names":["Progress","KobalteProgress","ComponentProps","Show","splitProps","cn","ProgressProps","label","trackClass","indicatorClass","hideValue","props","local","rest","_$createComponent","_$mergeProps","class","children","when","_el$","_tmpl$","_$insert","Label","ValueLabel","Track","Fill","indeterminate","Progress","_$createComponent","KobalteProgress","_$mergeProps"],"sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["import { Progress as KobalteProgress } from '@kobalte/core/progress'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/*\n Progress.\n \n A determinate bar. Kobalte publishes the value as `aria-valuenow`, so a\n * screen reader reports the percentage instead of just \"progress bar\" — which\n * is why a caller must pass a real `value`, or use Spinner when there is none.\n \n `indeterminate` renders the sweeping bar for an operation that reports no\n * progress at all. It is a visibly different treatment so the two states are\n * never confused by someone glancing at the screen.\n /\nexport type ProgressProps = ComponentProps<typeof KobalteProgress> & {\n /\n The visible label, which is also the bar's accessible name.\n \n Pass this, or `aria-label` when the label is drawn elsewhere. A progressbar\n * with neither announces \"progress bar, 64%\" and no subject — the reader\n * cannot tell whether it is a build, an upload or a download.\n /\n label?: string\n trackClass?: string\n indicatorClass?: string\n /* Hide the numeric readout that otherwise sits beside the track. */\n hideValue?: boolean\n}\n\nexport function Progress(props: ProgressProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'trackClass',\n 'indicatorClass',\n 'hideValue',\n 'label',\n ])\n\n return (\n <KobalteProgress\n data-slot=\"progress\"\n class={cn('flex w-full flex-col gap-1.5', local.class)}\n {...rest}\n >\n <Show when={local.label \|\| !local.hideValue}>\n <div class=\"flex items-center justify-between gap-3\">\n <Show when={local.label}>\n <KobalteProgress.Label class=\"text-muted-foreground text-sm\">\n {local.label}\n </KobalteProgress.Label>\n </Show>\n <Show when={!local.hideValue}>\n <KobalteProgress.ValueLabel class=\"text-muted-foreground text-sm tabular-nums\" />\n </Show>\n </div>\n </Show>\n <KobalteProgress.Track\n class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}\n >\n <KobalteProgress.Fill\n class={cn(\n 'bg-primary h-full rounded-full',\n {\n 'animate-indeterminate w-1/4': props.indeterminate,\n 'w-(--kb-progress-fill-width)': !props.indeterminate,\n },\n local.indicatorClass\n )}\n />\n </KobalteProgress.Track>\n </KobalteProgress>\n )\n}\n"],"mappings":";;;;;;AA+BA,SAAgBA,WAASW,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGb,UAAec,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEPV,GAAG,gCAAgCO,MAAMI,KAAK;EAAC;CAAA,GAClDH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA,CAAAH,gBAEPX,MAAI;GAAA,IAACe,OAAI;IAAA,OAAEN,MAAML,SAAS,CAACK,MAAMF;GAAS;GAAA,IAAAO,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,MAAAL,gBAEtCX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAEN,MAAML;KAAK;KAAA,IAAAU,WAAA;MAAA,OAAAH,gBACpBb,SAAgBqB,OAAK;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACnBL,MAAML;OAAK;MAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAc,OAAAF,MAAAL,gBAGfX,MAAI;KAAA,IAACe,OAAI;MAAA,OAAE,CAACN,MAAMF;KAAS;KAAA,IAAAO,WAAA;MAAA,OAAAH,gBACzBb,SAAgBsB,YAAU,EAAA,SAAA,6CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA;EAAA,CAAA,GAAAL,gBAIhCb,SAAgBuB,OAAK;GAAA,KAAA,WAAA;IAAA,OACbnB,GAAG,+DAA+DO,MAAMJ,UAAU;GAAC;GAAA,IAAAS,WAAA;IAAA,OAAAH,gBAEzFb,SAAgBwB,MAAI,EAAA,KAAA,WAAA;KAAA,OACZpB,GACL,kCACA;MACE,+BAA+BM,MAAMe;MACrC,gCAAgC,CAACf,MAAMe;KACzC,GACAd,MAAMH,cACR;IAAC,EAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAKX"}