@adea-ai/ui 0.104.1 → 0.104.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/components/composites/catalog-browser/catalog-detail.d.ts.map +1 -1
- package/dist/components/composites/catalog-browser/catalog-detail.js +4 -4
- package/dist/components/composites/catalog-browser/catalog-detail.js.map +1 -1
- package/dist/r/src/components/composites/catalog-browser/catalog-detail.tsx +11 -5
- package/package.json +1 -1
- package/src/components/composites/catalog-browser/catalog-detail.tsx +11 -5
package/README.md
CHANGED
|
@@ -825,3 +825,7 @@ own their preference provider and storage. Pass `mode` and `onModeChange`; the
|
|
|
825
825
|
control owns roving keyboard focus, pressed state and explanatory tooltips. It
|
|
826
826
|
does not require or mount the shared `ThemeProvider`. `ThemeToggle` retains its
|
|
827
827
|
existing provider-bound API.
|
|
828
|
+
|
|
829
|
+
Catalog detail summaries place actions and feedback beneath identity on narrow
|
|
830
|
+
screens, preserving readable title/description flow. Grouped field sections keep
|
|
831
|
+
their content at the top while sharing the outline and dividers.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"catalog-detail.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/catalog-browser/catalog-detail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAIpF,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAA;AAqB3C,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,
|
|
1
|
+
{"version":3,"file":"catalog-detail.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/catalog-browser/catalog-detail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAIpF,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAA;AAqB3C,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAC/C,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,eA2CA;AAED,4EAA4E;AAC5E,wBAAgB,oBAAoB,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAcpF"}
|
|
@@ -4,16 +4,16 @@ import { Show, createContext, createUniqueId, useContext } from "solid-js";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
//#region src/components/composites/catalog-browser/catalog-detail.tsx
|
|
6
6
|
var _tmpl$ = /*#__PURE__*/ template(`<span class=shrink-0>`);
|
|
7
|
-
var _tmpl$2 = /*#__PURE__*/ template(`<div class="flex
|
|
7
|
+
var _tmpl$2 = /*#__PURE__*/ template(`<div data-catalog-detail-actions class="flex min-w-0 basis-full flex-col items-start gap-2 wrap-anywhere sm:max-w-xs sm:basis-auto sm:items-end">`);
|
|
8
8
|
var _tmpl$3 = /*#__PURE__*/ template(`<div data-catalog-detail-sections>`);
|
|
9
|
-
var _tmpl$4 = /*#__PURE__*/ template(`<article class="grid min-w-0 gap-2"data-catalog-detail><div class="flex min-w-0 items-start gap-3 rounded-xl border border-border p-3"><div class="grid min-w-0 flex-1 gap-1"><div class="flex min-w-0 flex-wrap items-center gap-1.5"></div><h2 class="text-base leading-tight font-semibold tracking-tight"></h2><p class="text-muted-foreground text-sm"></p><p class="text-muted-foreground text-xs">`);
|
|
10
|
-
var _tmpl$5 = /*#__PURE__*/ template(`<section><h3 class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase"></h3><div class="grid min-w-0 gap-1.5">`);
|
|
9
|
+
var _tmpl$4 = /*#__PURE__*/ template(`<article class="grid min-w-0 gap-2"data-catalog-detail><div data-catalog-detail-header class="flex min-w-0 flex-wrap items-start gap-3 rounded-xl border border-border p-3 sm:flex-nowrap"><div data-catalog-detail-identity class="grid min-w-0 flex-1 gap-1 wrap-anywhere"><div class="flex min-w-0 flex-wrap items-center gap-1.5"></div><h2 class="text-base leading-tight font-semibold tracking-tight"></h2><p class="text-muted-foreground text-sm"></p><p class="text-muted-foreground text-xs">`);
|
|
10
|
+
var _tmpl$5 = /*#__PURE__*/ template(`<section><h3 class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase"></h3><div class="grid min-w-0 content-start gap-1.5">`);
|
|
11
11
|
var SectionsLayoutContext = createContext(() => "stacked");
|
|
12
12
|
var sectionsVariants = cva("grid min-w-0", { variants: { layout: {
|
|
13
13
|
stacked: "gap-2",
|
|
14
14
|
columns: "gap-4 rounded-xl border border-border p-3 md:auto-cols-fr md:grid-flow-col md:gap-0"
|
|
15
15
|
} } });
|
|
16
|
-
var sectionVariants = cva("grid min-w-0 gap-1.5 wrap-anywhere", { variants: { layout: {
|
|
16
|
+
var sectionVariants = cva("grid min-w-0 content-start gap-1.5 wrap-anywhere", { variants: { layout: {
|
|
17
17
|
stacked: "rounded-xl border border-border p-3",
|
|
18
18
|
columns: "md:border-s md:border-border md:px-3 md:first:border-s-0 md:first:ps-0 md:last:pe-0"
|
|
19
19
|
} } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"catalog-detail.js","names":["createContext","createUniqueId","Show","useContext","JSX","Badge","cva","SectionsLayout","SectionsLayoutContext","sectionsVariants","variants","layout","stacked","columns","sectionVariants","CatalogDetail","props","title","description","category","publisher","publishedByLabel","leading","Element","eyebrow","badges","action","status","sectionsLayout","children","_el$","_tmpl$4","_el$2","firstChild","_el$4","_el$5","_el$6","nextSibling","_el$7","_el$8","_$insert","_$createComponent","when","_el$3","_tmpl$","variant","_el$9","_tmpl$2","Provider","value","_el$0","_tmpl$3","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","undefined","CatalogDetailSection","headingId","_el$1","_tmpl$5","_el$10","_el$11","_$createComponent","_$setAttribute","_$className"],"sources":["../../../../src/components/composites/catalog-browser/catalog-detail.tsx"],"sourcesContent":["import { createContext, createUniqueId, Show, useContext, type JSX } from 'solid-js'\nimport { Badge } from '../../ui/badge'\nimport { cva } from 'class-variance-authority'\n\ntype SectionsLayout = 'stacked' | 'columns'\nconst SectionsLayoutContext = createContext<() => SectionsLayout>((): SectionsLayout => 'stacked')\nconst sectionsVariants = cva('grid min-w-0', {\n variants: {\n layout: {\n stacked: 'gap-2',\n columns:\n 'gap-4 rounded-xl border border-border p-3 md:auto-cols-fr md:grid-flow-col md:gap-0',\n },\n },\n})\nconst sectionVariants = cva('grid min-w-0 gap-1.5 wrap-anywhere', {\n variants: {\n layout: {\n stacked: 'rounded-xl border border-border p-3',\n columns:\n 'md:border-s md:border-border md:px-3 md:first:border-s-0 md:first:ps-0 md:last:pe-0',\n },\n },\n})\n\n/** Shared item summary and action frame for catalog-owned detail content. */\nexport function CatalogDetail(props: {\n title: string\n description: string\n category: string\n publisher: string\n publishedByLabel: (publisher: string) => string\n leading?: JSX.Element\n eyebrow?: string\n badges?: JSX.Element\n action?: JSX.Element\n status?: JSX.Element\n /** Groups related fields in one padded card; stacks them on narrow screens. */\n sectionsLayout?: SectionsLayout\n children?: JSX.Element\n}) {\n return (\n <article class=\"grid min-w-0 gap-2\" data-catalog-detail>\n <div
|
|
1
|
+
{"version":3,"file":"catalog-detail.js","names":["createContext","createUniqueId","Show","useContext","JSX","Badge","cva","SectionsLayout","SectionsLayoutContext","sectionsVariants","variants","layout","stacked","columns","sectionVariants","CatalogDetail","props","title","description","category","publisher","publishedByLabel","leading","Element","eyebrow","badges","action","status","sectionsLayout","children","_el$","_tmpl$4","_el$2","firstChild","_el$4","_el$5","_el$6","nextSibling","_el$7","_el$8","_$insert","_$createComponent","when","_el$3","_tmpl$","variant","_el$9","_tmpl$2","Provider","value","_el$0","_tmpl$3","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","undefined","CatalogDetailSection","headingId","_el$1","_tmpl$5","_el$10","_el$11","_$createComponent","_$setAttribute","_$className"],"sources":["../../../../src/components/composites/catalog-browser/catalog-detail.tsx"],"sourcesContent":["import { createContext, createUniqueId, Show, useContext, type JSX } from 'solid-js'\nimport { Badge } from '../../ui/badge'\nimport { cva } from 'class-variance-authority'\n\ntype SectionsLayout = 'stacked' | 'columns'\nconst SectionsLayoutContext = createContext<() => SectionsLayout>((): SectionsLayout => 'stacked')\nconst sectionsVariants = cva('grid min-w-0', {\n variants: {\n layout: {\n stacked: 'gap-2',\n columns:\n 'gap-4 rounded-xl border border-border p-3 md:auto-cols-fr md:grid-flow-col md:gap-0',\n },\n },\n})\nconst sectionVariants = cva('grid min-w-0 content-start gap-1.5 wrap-anywhere', {\n variants: {\n layout: {\n stacked: 'rounded-xl border border-border p-3',\n columns:\n 'md:border-s md:border-border md:px-3 md:first:border-s-0 md:first:ps-0 md:last:pe-0',\n },\n },\n})\n\n/** Shared item summary and action frame for catalog-owned detail content. */\nexport function CatalogDetail(props: {\n title: string\n description: string\n category: string\n publisher: string\n publishedByLabel: (publisher: string) => string\n leading?: JSX.Element\n eyebrow?: string\n badges?: JSX.Element\n action?: JSX.Element\n status?: JSX.Element\n /** Groups related fields in one padded card; stacks them on narrow screens. */\n sectionsLayout?: SectionsLayout\n children?: JSX.Element\n}) {\n return (\n <article class=\"grid min-w-0 gap-2\" data-catalog-detail>\n <div\n data-catalog-detail-header\n class=\"flex min-w-0 flex-wrap items-start gap-3 rounded-xl border border-border p-3 sm:flex-nowrap\"\n >\n <Show when={props.leading}>\n <span class=\"shrink-0\">{props.leading}</span>\n </Show>\n <div data-catalog-detail-identity class=\"grid min-w-0 flex-1 gap-1 wrap-anywhere\">\n <div class=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n <Show when={props.eyebrow}>\n <Badge variant=\"outline\">{props.eyebrow}</Badge>\n </Show>\n <Badge variant=\"secondary\">{props.category}</Badge>\n {props.badges}\n </div>\n <h2 class=\"text-base leading-tight font-semibold tracking-tight\">{props.title}</h2>\n <p class=\"text-muted-foreground text-sm\">{props.description}</p>\n <p class=\"text-muted-foreground text-xs\">{props.publishedByLabel(props.publisher)}</p>\n </div>\n <Show when={props.action || props.status}>\n <div\n data-catalog-detail-actions\n class=\"flex min-w-0 basis-full flex-col items-start gap-2 wrap-anywhere sm:max-w-xs sm:basis-auto sm:items-end\"\n >\n {props.action}\n {props.status}\n </div>\n </Show>\n </div>\n <SectionsLayoutContext.Provider value={() => props.sectionsLayout ?? 'stacked'}>\n <div\n data-catalog-detail-sections\n data-layout={props.sectionsLayout ?? 'stacked'}\n class={sectionsVariants({ layout: props.sectionsLayout ?? 'stacked' })}\n >\n {props.children}\n </div>\n </SectionsLayoutContext.Provider>\n </article>\n )\n}\n\n/** A shared compact row for host-specific fields, permissions, and copy. */\nexport function CatalogDetailSection(props: { title: string; children?: JSX.Element }) {\n const layout = useContext(SectionsLayoutContext)\n const headingId = `catalog-detail-section-${createUniqueId()}`\n return (\n <section class={sectionVariants({ layout: layout() })} aria-labelledby={headingId}>\n <h3\n id={headingId}\n class=\"text-2xs font-semibold tracking-wider text-muted-foreground uppercase\"\n >\n {props.title}\n </h3>\n <div class=\"grid min-w-0 content-start gap-1.5\">{props.children}</div>\n </section>\n )\n}\n"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ const sectionsVariants = cva('grid min-w-0', {
|
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
})
|
|
16
|
-
const sectionVariants = cva('grid min-w-0 gap-1.5 wrap-anywhere', {
|
|
16
|
+
const sectionVariants = cva('grid min-w-0 content-start gap-1.5 wrap-anywhere', {
|
|
17
17
|
variants: {
|
|
18
18
|
layout: {
|
|
19
19
|
stacked: 'rounded-xl border border-border p-3',
|
|
@@ -41,11 +41,14 @@ export function CatalogDetail(props: {
|
|
|
41
41
|
}) {
|
|
42
42
|
return (
|
|
43
43
|
<article class="grid min-w-0 gap-2" data-catalog-detail>
|
|
44
|
-
<div
|
|
44
|
+
<div
|
|
45
|
+
data-catalog-detail-header
|
|
46
|
+
class="flex min-w-0 flex-wrap items-start gap-3 rounded-xl border border-border p-3 sm:flex-nowrap"
|
|
47
|
+
>
|
|
45
48
|
<Show when={props.leading}>
|
|
46
49
|
<span class="shrink-0">{props.leading}</span>
|
|
47
50
|
</Show>
|
|
48
|
-
<div class="grid min-w-0 flex-1 gap-1">
|
|
51
|
+
<div data-catalog-detail-identity class="grid min-w-0 flex-1 gap-1 wrap-anywhere">
|
|
49
52
|
<div class="flex min-w-0 flex-wrap items-center gap-1.5">
|
|
50
53
|
<Show when={props.eyebrow}>
|
|
51
54
|
<Badge variant="outline">{props.eyebrow}</Badge>
|
|
@@ -58,7 +61,10 @@ export function CatalogDetail(props: {
|
|
|
58
61
|
<p class="text-muted-foreground text-xs">{props.publishedByLabel(props.publisher)}</p>
|
|
59
62
|
</div>
|
|
60
63
|
<Show when={props.action || props.status}>
|
|
61
|
-
<div
|
|
64
|
+
<div
|
|
65
|
+
data-catalog-detail-actions
|
|
66
|
+
class="flex min-w-0 basis-full flex-col items-start gap-2 wrap-anywhere sm:max-w-xs sm:basis-auto sm:items-end"
|
|
67
|
+
>
|
|
62
68
|
{props.action}
|
|
63
69
|
{props.status}
|
|
64
70
|
</div>
|
|
@@ -89,7 +95,7 @@ export function CatalogDetailSection(props: { title: string; children?: JSX.Elem
|
|
|
89
95
|
>
|
|
90
96
|
{props.title}
|
|
91
97
|
</h3>
|
|
92
|
-
<div class="grid min-w-0 gap-1.5">{props.children}</div>
|
|
98
|
+
<div class="grid min-w-0 content-start gap-1.5">{props.children}</div>
|
|
93
99
|
</section>
|
|
94
100
|
)
|
|
95
101
|
}
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ const sectionsVariants = cva('grid min-w-0', {
|
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
})
|
|
16
|
-
const sectionVariants = cva('grid min-w-0 gap-1.5 wrap-anywhere', {
|
|
16
|
+
const sectionVariants = cva('grid min-w-0 content-start gap-1.5 wrap-anywhere', {
|
|
17
17
|
variants: {
|
|
18
18
|
layout: {
|
|
19
19
|
stacked: 'rounded-xl border border-border p-3',
|
|
@@ -41,11 +41,14 @@ export function CatalogDetail(props: {
|
|
|
41
41
|
}) {
|
|
42
42
|
return (
|
|
43
43
|
<article class="grid min-w-0 gap-2" data-catalog-detail>
|
|
44
|
-
<div
|
|
44
|
+
<div
|
|
45
|
+
data-catalog-detail-header
|
|
46
|
+
class="flex min-w-0 flex-wrap items-start gap-3 rounded-xl border border-border p-3 sm:flex-nowrap"
|
|
47
|
+
>
|
|
45
48
|
<Show when={props.leading}>
|
|
46
49
|
<span class="shrink-0">{props.leading}</span>
|
|
47
50
|
</Show>
|
|
48
|
-
<div class="grid min-w-0 flex-1 gap-1">
|
|
51
|
+
<div data-catalog-detail-identity class="grid min-w-0 flex-1 gap-1 wrap-anywhere">
|
|
49
52
|
<div class="flex min-w-0 flex-wrap items-center gap-1.5">
|
|
50
53
|
<Show when={props.eyebrow}>
|
|
51
54
|
<Badge variant="outline">{props.eyebrow}</Badge>
|
|
@@ -58,7 +61,10 @@ export function CatalogDetail(props: {
|
|
|
58
61
|
<p class="text-muted-foreground text-xs">{props.publishedByLabel(props.publisher)}</p>
|
|
59
62
|
</div>
|
|
60
63
|
<Show when={props.action || props.status}>
|
|
61
|
-
<div
|
|
64
|
+
<div
|
|
65
|
+
data-catalog-detail-actions
|
|
66
|
+
class="flex min-w-0 basis-full flex-col items-start gap-2 wrap-anywhere sm:max-w-xs sm:basis-auto sm:items-end"
|
|
67
|
+
>
|
|
62
68
|
{props.action}
|
|
63
69
|
{props.status}
|
|
64
70
|
</div>
|
|
@@ -89,7 +95,7 @@ export function CatalogDetailSection(props: { title: string; children?: JSX.Elem
|
|
|
89
95
|
>
|
|
90
96
|
{props.title}
|
|
91
97
|
</h3>
|
|
92
|
-
<div class="grid min-w-0 gap-1.5">{props.children}</div>
|
|
98
|
+
<div class="grid min-w-0 content-start gap-1.5">{props.children}</div>
|
|
93
99
|
</section>
|
|
94
100
|
)
|
|
95
101
|
}
|