@schandlergarcia/sf-web-components 1.0.16 → 1.0.18
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/dist/components/library/index.d.ts +3 -1
- package/dist/components/library/ui/UIButton.d.ts +11 -0
- package/dist/components/library/ui/UIButton.js +50 -0
- package/dist/components/library/ui/UIButton.js.map +1 -0
- package/dist/components/library/ui/UIInput.d.ts +5 -0
- package/dist/components/library/ui/UIInput.js +22 -0
- package/dist/components/library/ui/UIInput.js.map +1 -0
- package/dist/components/workspace/ComponentRegistry.js +4 -4
- package/dist/components/workspace/ComponentRegistry.js.map +1 -1
- package/dist/index.js +266 -264
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/templates/pages/Home.tsx.template +48 -9
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { default as UIButton } from "./ui/UIButton";
|
|
2
|
+
export { default as UIInput } from "./ui/UIInput";
|
|
1
3
|
export { default as UIText } from "./ui/Text";
|
|
2
4
|
export { default as UIContainer } from "./ui/Container";
|
|
3
5
|
export { default as UIChip } from "./ui/Chip";
|
|
@@ -47,7 +49,7 @@ export { default as HeroUIMeter } from "./heroui/Meter";
|
|
|
47
49
|
export { default as HeroUISkeleton } from "./heroui/Skeleton";
|
|
48
50
|
export { default as HeroUISelect } from "./heroui/Select";
|
|
49
51
|
export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
|
|
50
|
-
export {
|
|
52
|
+
export { Card as UICard, Spinner } from "./ui/shadcn-exports";
|
|
51
53
|
export { FormModal, FormRenderer, FormSection, FormField, useFormState } from "./forms";
|
|
52
54
|
export { FilterBar, SearchFilter, SelectFilter, ToggleFilter } from "./filters";
|
|
53
55
|
export { default as DataModeProvider, useDataMode } from "./data/DataModeProvider";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default function UIButton({ variant, size, fullWidth, disabled, onClick, children, style, className, ...rest }: {
|
|
2
|
+
[x: string]: any;
|
|
3
|
+
variant?: string | undefined;
|
|
4
|
+
size?: string | undefined;
|
|
5
|
+
fullWidth?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
onClick?: (() => void) | undefined;
|
|
8
|
+
children: any;
|
|
9
|
+
style?: undefined;
|
|
10
|
+
className?: string | undefined;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const t = {
|
|
4
|
+
primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
|
|
5
|
+
secondary: "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
|
|
6
|
+
outline: "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
|
|
7
|
+
ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
|
|
8
|
+
}, e = {
|
|
9
|
+
sm: "h-8 px-3 text-sm",
|
|
10
|
+
md: "h-10 px-4 text-sm",
|
|
11
|
+
lg: "h-12 px-5 text-base"
|
|
12
|
+
};
|
|
13
|
+
function c({
|
|
14
|
+
variant: r = "primary",
|
|
15
|
+
size: a = "md",
|
|
16
|
+
fullWidth: s = !1,
|
|
17
|
+
disabled: o = !1,
|
|
18
|
+
onClick: n = () => {
|
|
19
|
+
},
|
|
20
|
+
children: l,
|
|
21
|
+
style: d = void 0,
|
|
22
|
+
className: i = "",
|
|
23
|
+
...b
|
|
24
|
+
}) {
|
|
25
|
+
const g = t[r] ?? t.primary, f = e[a] ?? e.md;
|
|
26
|
+
return /* @__PURE__ */ u(
|
|
27
|
+
"button",
|
|
28
|
+
{
|
|
29
|
+
type: "button",
|
|
30
|
+
onClick: n,
|
|
31
|
+
disabled: o,
|
|
32
|
+
style: d,
|
|
33
|
+
className: [
|
|
34
|
+
"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
|
|
35
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
|
|
36
|
+
"disabled:cursor-not-allowed disabled:opacity-60",
|
|
37
|
+
g,
|
|
38
|
+
f,
|
|
39
|
+
s ? "w-full" : "",
|
|
40
|
+
i
|
|
41
|
+
].filter(Boolean).join(" "),
|
|
42
|
+
...b,
|
|
43
|
+
children: l
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
c as default
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=UIButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.jsx"],"sourcesContent":["import React from \"react\";\n\nconst VARIANT_CLASSES = {\n primary:\n \"bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent\",\n secondary:\n \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent\",\n outline:\n \"bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800\",\n ghost:\n \"bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent\"\n};\n\nconst SIZE_CLASSES = {\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-5 text-base\"\n};\n\nexport default function UIButton({\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n disabled = false,\n onClick = () => {},\n children,\n style = undefined,\n className = \"\",\n ...rest\n}) {\n const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;\n const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n style={style}\n className={[\n \"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition\",\n \"focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n variantClass,\n sizeClass,\n fullWidth ? \"w-full\" : \"\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n >\n {children}\n </button>\n );\n}\n\n\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","onClick","children","style","className","rest","variantClass","sizeClass","jsx"],"mappings":";;AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU,MAAM;AAAA,EAAC;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAG;AACD,QAAMC,IAAeZ,EAAgBG,CAAO,KAAKH,EAAgB,SAC3Da,IAAYZ,EAAaG,CAAI,KAAKH,EAAa;AAErD,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAAP;AAAA,MACA,UAAAD;AAAA,MACA,OAAAG;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,QACAC;AAAA,QACAR,IAAY,WAAW;AAAA,QACvBK;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
function l({ style: e = void 0, className: t = "", ...r }) {
|
|
4
|
+
return /* @__PURE__ */ o(
|
|
5
|
+
"input",
|
|
6
|
+
{
|
|
7
|
+
style: e,
|
|
8
|
+
className: [
|
|
9
|
+
"h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm",
|
|
10
|
+
"placeholder:text-slate-400",
|
|
11
|
+
"focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
|
|
12
|
+
"dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500",
|
|
13
|
+
t
|
|
14
|
+
].filter(Boolean).join(" "),
|
|
15
|
+
...r
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
l as default
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=UIInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UIInput.js","sources":["../../../../src/components/library/ui/UIInput.jsx"],"sourcesContent":["import React from \"react\";\n\nexport default function UIInput({ style = undefined, className = \"\", ...rest }) {\n return (\n <input\n style={style}\n className={[\n \"h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm\",\n \"placeholder:text-slate-400\",\n \"focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950\",\n \"dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500\",\n className\n ]\n .filter(Boolean)\n .join(\" \")}\n {...rest}\n />\n );\n}\n\n\n"],"names":["UIInput","style","className","rest","jsx"],"mappings":";;AAEA,SAAwBA,EAAQ,EAAE,OAAAC,IAAQ,QAAW,WAAAC,IAAY,IAAI,GAAGC,KAAQ;AAC9E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAAH;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAC;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import b from "react";
|
|
3
3
|
import "../library/theme/AppThemeProvider.js";
|
|
4
|
-
import u from "../library/ui/
|
|
4
|
+
import u from "../library/ui/UIButton.js";
|
|
5
|
+
import p from "../library/ui/Chip.js";
|
|
5
6
|
import "lucide-react";
|
|
6
|
-
import { Button as p } from "../library/ui/button.js";
|
|
7
7
|
import "../../node_modules/sonner/dist/index.js";
|
|
8
8
|
import h from "../library/cards/ChartCard.js";
|
|
9
9
|
import g from "../library/cards/MetricCard.js";
|
|
@@ -90,7 +90,7 @@ const y = {
|
|
|
90
90
|
children: /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
|
|
91
91
|
/* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-2", children: [
|
|
92
92
|
/* @__PURE__ */ e("div", { className: "text-sm font-medium text-slate-900 dark:text-slate-50", children: s.title ?? s.name ?? `Item ${n + 1}` }),
|
|
93
|
-
s.status && /* @__PURE__ */ e(
|
|
93
|
+
s.status && /* @__PURE__ */ e(p, { tone: s.status === "critical" ? "danger" : s.status === "warning" ? "warning" : "neutral", className: "shrink-0", children: s.status })
|
|
94
94
|
] }),
|
|
95
95
|
s.description && /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: s.description })
|
|
96
96
|
] })
|
|
@@ -184,7 +184,7 @@ const y = {
|
|
|
184
184
|
return /* @__PURE__ */ i("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900", children: [
|
|
185
185
|
a && /* @__PURE__ */ e("div", { className: "mb-3 text-sm font-medium text-slate-900 dark:text-slate-50", children: a }),
|
|
186
186
|
/* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: t.map((l, o) => /* @__PURE__ */ e(
|
|
187
|
-
|
|
187
|
+
u,
|
|
188
188
|
{
|
|
189
189
|
size: "sm",
|
|
190
190
|
variant: o === 0 ? "primary" : "outline",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentRegistry.js","sources":["../../../src/components/workspace/ComponentRegistry.jsx"],"sourcesContent":["import React from \"react\";\nimport {\n BaseCard,\n MetricCard,\n TableCard,\n ChartCard,\n D3Chart,\n D3ChartTemplates,\n StatusCard,\n ListCard,\n UIButton,\n UIChip,\n UIText\n} from \"@/components/library\";\n\nconst BUILTIN_COMPONENTS = {\n NarrativeSummary({ summary, title }) {\n return (\n <div className=\"text-sm text-slate-600 dark:text-slate-300\">\n {title && <div className=\"mb-1 font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n {summary}\n </div>\n );\n },\n\n MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }) {\n const [collapsed, setCollapsed] = React.useState(initialCollapsed);\n\n const items = metrics.length ? metrics : [\n { label: \"Metric A\", value: \"—\", trend: null },\n { label: \"Metric B\", value: \"—\", trend: null },\n { label: \"Metric C\", value: \"—\", trend: null }\n ];\n\n if (collapsible && collapsed) {\n return (\n <button\n type=\"button\"\n onClick={() => setCollapsed(false)}\n className=\"flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800\"\n >\n <span>{title ?? \"Metrics\"}: {items.map(m => `${m.label} ${m.value}`).join(\" · \")}</span>\n <span>▸</span>\n </button>\n );\n }\n\n return (\n <div className=\"rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900\">\n {(title || collapsible) && (\n <div className=\"mb-2 flex items-center justify-between\">\n <span className=\"text-xs font-medium text-slate-500 dark:text-slate-400\">{title ?? \"Metrics\"}</span>\n {collapsible && (\n <button\n type=\"button\"\n onClick={() => setCollapsed(true)}\n className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n >\n Collapse\n </button>\n )}\n </div>\n )}\n <div className=\"flex flex-wrap gap-4\">\n {items.map((m) => (\n <div key={m.label} className=\"min-w-[80px]\">\n <div className=\"text-xs text-slate-400 dark:text-slate-500\">{m.label}</div>\n <div className=\"flex items-baseline gap-1.5\">\n <span className=\"text-sm font-semibold text-slate-700 dark:text-slate-200\">{m.value}</span>\n {m.trend && (\n <span className={`text-xs ${String(m.trend).startsWith?.(\"+\") || m.trend > 0 ? \"text-red-500\" : \"text-emerald-500\"}`}>\n {typeof m.trend === \"number\" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}\n </span>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n },\n\n ItemList({ items = [], title, onItemClick }) {\n const [expanded, setExpanded] = React.useState(null);\n if (!items.length) {\n return <div className=\"text-sm text-slate-500 dark:text-slate-400\">No items.</div>;\n }\n return (\n <div className=\"space-y-2\">\n {title && (\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</span>\n <span className=\"text-xs text-slate-400 dark:text-slate-500\">{items.length} items</span>\n </div>\n )}\n <div className=\"space-y-1.5\">\n {items.map((item, idx) => (\n <div key={item.id ?? idx} className=\"rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900\">\n <button\n type=\"button\"\n onClick={() => {\n setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));\n onItemClick?.(item);\n }}\n className=\"flex w-full items-start justify-between gap-3 p-3 text-left\"\n >\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">\n {item.title ?? item.name ?? `Item ${idx + 1}`}\n </div>\n {item.status && (\n <UIChip tone={item.status === \"critical\" ? \"danger\" : item.status === \"warning\" ? \"warning\" : \"neutral\"} className=\"shrink-0\">\n {item.status}\n </UIChip>\n )}\n </div>\n {item.description && (\n <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">{item.description}</div>\n )}\n </div>\n </button>\n {expanded === (item.id ?? idx) && item.actions && (\n <div className=\"border-t border-slate-100 px-3 py-2 dark:border-slate-800\">\n <div className=\"flex flex-wrap gap-1.5\">\n {item.actions.map((action, i) => (\n <button\n key={typeof action === \"string\" ? action : action.label}\n type=\"button\"\n className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n i === 0\n ? \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200\"\n : \"bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700\"\n }`}\n >\n {typeof action === \"string\" ? action : action.label}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n },\n\n DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }) {\n const tableData = data.length ? data : (rows ?? []);\n const cols = columns.length ? columns : [\n { key: \"name\", label: \"Name\" },\n { key: \"status\", label: \"Status\" },\n { key: \"value\", label: \"Value\" }\n ];\n return (\n <TableCard\n title={title ?? \"Data\"}\n subtitle={subtitle}\n columns={cols}\n data={tableData}\n searchable={searchable}\n sortable={sortable}\n paginated={paginated}\n pageSize={pageSize}\n />\n );\n },\n\n DataChart({ title, subtitle, chartType = \"line\", data = [], height = 200 }) {\n const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));\n return (\n <ChartCard\n title={title ?? \"Trend\"}\n subtitle={subtitle ?? \"Data visualization\"}\n chartType={chartType}\n height={height}\n chart={\n <D3Chart\n data={series}\n responsive\n height={height}\n ariaLabel={title}\n renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d, dims, opts)}\n options={{ xKey: \"x\", yKey: \"y\", showGrid: true, showAxes: true }}\n />\n }\n />\n );\n },\n\n MetricCard({ title, label, value, trend, change, changeType, color, icon, description }) {\n return (\n <MetricCard\n title={title ?? label}\n value={value ?? \"—\"}\n trend={trend}\n change={change}\n changeType={changeType}\n color={color}\n icon={icon}\n description={description}\n />\n );\n },\n\n StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }) {\n return (\n <StatusCard\n title={title}\n subtitle={subtitle}\n status={status}\n items={items}\n layout={layout}\n showProgress={showProgress}\n showTimestamp={showTimestamp}\n />\n );\n },\n\n ActionList({ actions = [], title, onAction }) {\n return (\n <div className=\"rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900\">\n {title && <div className=\"mb-3 text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n <div className=\"flex flex-wrap gap-2\">\n {actions.map((action, i) => (\n <UIButton\n key={i}\n size=\"sm\"\n variant={i === 0 ? \"primary\" : \"outline\"}\n onClick={() => onAction?.(action)}\n >\n {typeof action === \"string\" ? action : action.label}\n </UIButton>\n ))}\n </div>\n </div>\n );\n },\n\n CalloutCard({ title, message, tone = \"neutral\" }) {\n const toneClasses = {\n neutral: \"border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200\",\n success: \"border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200\",\n warning: \"border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200\",\n danger: \"border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200\"\n };\n return (\n <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>\n {title && <div className=\"mb-1 text-sm font-semibold\">{title}</div>}\n <div className=\"text-sm\">{message}</div>\n </div>\n );\n },\n\n Divider() {\n return <div className=\"h-px bg-slate-200 dark:bg-slate-800\" />;\n },\n\n Spacer({ size = \"md\" }) {\n const heights = { sm: \"h-2\", md: \"h-4\", lg: \"h-6\" };\n return <div className={heights[size] ?? heights.md} />;\n }\n};\n\nlet _registry = { ...BUILTIN_COMPONENTS };\n\nexport function getComponentRegistry() {\n return _registry;\n}\n\nexport function registerComponent(type, Component) {\n _registry = { ..._registry, [type]: Component };\n}\n\nexport function registerComponents(map) {\n _registry = { ..._registry, ...map };\n}\n\nexport function renderSchemaComponent(component, index) {\n const registry = getComponentRegistry();\n const Component = registry[component.type];\n if (!Component) {\n return (\n <div key={index} className=\"rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700\">\n Unknown component: {component.type}\n </div>\n );\n }\n return <Component key={component.id ?? index} {...(component.props ?? {})} />;\n}\n\nexport function renderSchema(components = []) {\n return components.map((c, i) => renderSchemaComponent(c, i));\n}\n\nexport default BUILTIN_COMPONENTS;\n"],"names":["BUILTIN_COMPONENTS","summary","title","jsxs","jsx","metrics","collapsible","initialCollapsed","collapsed","setCollapsed","React","items","m","onItemClick","expanded","setExpanded","item","idx","UIChip","action","i","subtitle","columns","data","rows","searchable","sortable","paginated","pageSize","tableData","cols","TableCard","chartType","height","series","_","ChartCard","D3Chart","svg","d","dims","opts","D3ChartTemplates","label","value","trend","change","changeType","color","icon","description","MetricCard","status","layout","showProgress","showTimestamp","StatusCard","actions","onAction","UIButton","message","tone","toneClasses","size","heights","_registry","getComponentRegistry","renderSchemaComponent","component","index","Component"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComponentRegistry.js","sources":["../../../src/components/workspace/ComponentRegistry.jsx"],"sourcesContent":["import React from \"react\";\nimport {\n BaseCard,\n MetricCard,\n TableCard,\n ChartCard,\n D3Chart,\n D3ChartTemplates,\n StatusCard,\n ListCard,\n UIButton,\n UIChip,\n UIText\n} from \"@/components/library\";\n\nconst BUILTIN_COMPONENTS = {\n NarrativeSummary({ summary, title }) {\n return (\n <div className=\"text-sm text-slate-600 dark:text-slate-300\">\n {title && <div className=\"mb-1 font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n {summary}\n </div>\n );\n },\n\n MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }) {\n const [collapsed, setCollapsed] = React.useState(initialCollapsed);\n\n const items = metrics.length ? metrics : [\n { label: \"Metric A\", value: \"—\", trend: null },\n { label: \"Metric B\", value: \"—\", trend: null },\n { label: \"Metric C\", value: \"—\", trend: null }\n ];\n\n if (collapsible && collapsed) {\n return (\n <button\n type=\"button\"\n onClick={() => setCollapsed(false)}\n className=\"flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800\"\n >\n <span>{title ?? \"Metrics\"}: {items.map(m => `${m.label} ${m.value}`).join(\" · \")}</span>\n <span>▸</span>\n </button>\n );\n }\n\n return (\n <div className=\"rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900\">\n {(title || collapsible) && (\n <div className=\"mb-2 flex items-center justify-between\">\n <span className=\"text-xs font-medium text-slate-500 dark:text-slate-400\">{title ?? \"Metrics\"}</span>\n {collapsible && (\n <button\n type=\"button\"\n onClick={() => setCollapsed(true)}\n className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n >\n Collapse\n </button>\n )}\n </div>\n )}\n <div className=\"flex flex-wrap gap-4\">\n {items.map((m) => (\n <div key={m.label} className=\"min-w-[80px]\">\n <div className=\"text-xs text-slate-400 dark:text-slate-500\">{m.label}</div>\n <div className=\"flex items-baseline gap-1.5\">\n <span className=\"text-sm font-semibold text-slate-700 dark:text-slate-200\">{m.value}</span>\n {m.trend && (\n <span className={`text-xs ${String(m.trend).startsWith?.(\"+\") || m.trend > 0 ? \"text-red-500\" : \"text-emerald-500\"}`}>\n {typeof m.trend === \"number\" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}\n </span>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n },\n\n ItemList({ items = [], title, onItemClick }) {\n const [expanded, setExpanded] = React.useState(null);\n if (!items.length) {\n return <div className=\"text-sm text-slate-500 dark:text-slate-400\">No items.</div>;\n }\n return (\n <div className=\"space-y-2\">\n {title && (\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</span>\n <span className=\"text-xs text-slate-400 dark:text-slate-500\">{items.length} items</span>\n </div>\n )}\n <div className=\"space-y-1.5\">\n {items.map((item, idx) => (\n <div key={item.id ?? idx} className=\"rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900\">\n <button\n type=\"button\"\n onClick={() => {\n setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));\n onItemClick?.(item);\n }}\n className=\"flex w-full items-start justify-between gap-3 p-3 text-left\"\n >\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">\n {item.title ?? item.name ?? `Item ${idx + 1}`}\n </div>\n {item.status && (\n <UIChip tone={item.status === \"critical\" ? \"danger\" : item.status === \"warning\" ? \"warning\" : \"neutral\"} className=\"shrink-0\">\n {item.status}\n </UIChip>\n )}\n </div>\n {item.description && (\n <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">{item.description}</div>\n )}\n </div>\n </button>\n {expanded === (item.id ?? idx) && item.actions && (\n <div className=\"border-t border-slate-100 px-3 py-2 dark:border-slate-800\">\n <div className=\"flex flex-wrap gap-1.5\">\n {item.actions.map((action, i) => (\n <button\n key={typeof action === \"string\" ? action : action.label}\n type=\"button\"\n className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n i === 0\n ? \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200\"\n : \"bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700\"\n }`}\n >\n {typeof action === \"string\" ? action : action.label}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n },\n\n DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }) {\n const tableData = data.length ? data : (rows ?? []);\n const cols = columns.length ? columns : [\n { key: \"name\", label: \"Name\" },\n { key: \"status\", label: \"Status\" },\n { key: \"value\", label: \"Value\" }\n ];\n return (\n <TableCard\n title={title ?? \"Data\"}\n subtitle={subtitle}\n columns={cols}\n data={tableData}\n searchable={searchable}\n sortable={sortable}\n paginated={paginated}\n pageSize={pageSize}\n />\n );\n },\n\n DataChart({ title, subtitle, chartType = \"line\", data = [], height = 200 }) {\n const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));\n return (\n <ChartCard\n title={title ?? \"Trend\"}\n subtitle={subtitle ?? \"Data visualization\"}\n chartType={chartType}\n height={height}\n chart={\n <D3Chart\n data={series}\n responsive\n height={height}\n ariaLabel={title}\n renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d, dims, opts)}\n options={{ xKey: \"x\", yKey: \"y\", showGrid: true, showAxes: true }}\n />\n }\n />\n );\n },\n\n MetricCard({ title, label, value, trend, change, changeType, color, icon, description }) {\n return (\n <MetricCard\n title={title ?? label}\n value={value ?? \"—\"}\n trend={trend}\n change={change}\n changeType={changeType}\n color={color}\n icon={icon}\n description={description}\n />\n );\n },\n\n StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }) {\n return (\n <StatusCard\n title={title}\n subtitle={subtitle}\n status={status}\n items={items}\n layout={layout}\n showProgress={showProgress}\n showTimestamp={showTimestamp}\n />\n );\n },\n\n ActionList({ actions = [], title, onAction }) {\n return (\n <div className=\"rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900\">\n {title && <div className=\"mb-3 text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n <div className=\"flex flex-wrap gap-2\">\n {actions.map((action, i) => (\n <UIButton\n key={i}\n size=\"sm\"\n variant={i === 0 ? \"primary\" : \"outline\"}\n onClick={() => onAction?.(action)}\n >\n {typeof action === \"string\" ? action : action.label}\n </UIButton>\n ))}\n </div>\n </div>\n );\n },\n\n CalloutCard({ title, message, tone = \"neutral\" }) {\n const toneClasses = {\n neutral: \"border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200\",\n success: \"border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200\",\n warning: \"border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200\",\n danger: \"border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200\"\n };\n return (\n <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>\n {title && <div className=\"mb-1 text-sm font-semibold\">{title}</div>}\n <div className=\"text-sm\">{message}</div>\n </div>\n );\n },\n\n Divider() {\n return <div className=\"h-px bg-slate-200 dark:bg-slate-800\" />;\n },\n\n Spacer({ size = \"md\" }) {\n const heights = { sm: \"h-2\", md: \"h-4\", lg: \"h-6\" };\n return <div className={heights[size] ?? heights.md} />;\n }\n};\n\nlet _registry = { ...BUILTIN_COMPONENTS };\n\nexport function getComponentRegistry() {\n return _registry;\n}\n\nexport function registerComponent(type, Component) {\n _registry = { ..._registry, [type]: Component };\n}\n\nexport function registerComponents(map) {\n _registry = { ..._registry, ...map };\n}\n\nexport function renderSchemaComponent(component, index) {\n const registry = getComponentRegistry();\n const Component = registry[component.type];\n if (!Component) {\n return (\n <div key={index} className=\"rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700\">\n Unknown component: {component.type}\n </div>\n );\n }\n return <Component key={component.id ?? index} {...(component.props ?? {})} />;\n}\n\nexport function renderSchema(components = []) {\n return components.map((c, i) => renderSchemaComponent(c, i));\n}\n\nexport default BUILTIN_COMPONENTS;\n"],"names":["BUILTIN_COMPONENTS","summary","title","jsxs","jsx","metrics","collapsible","initialCollapsed","collapsed","setCollapsed","React","items","m","onItemClick","expanded","setExpanded","item","idx","UIChip","action","i","subtitle","columns","data","rows","searchable","sortable","paginated","pageSize","tableData","cols","TableCard","chartType","height","series","_","ChartCard","D3Chart","svg","d","dims","opts","D3ChartTemplates","label","value","trend","change","changeType","color","icon","description","MetricCard","status","layout","showProgress","showTimestamp","StatusCard","actions","onAction","UIButton","message","tone","toneClasses","size","heights","_registry","getComponentRegistry","renderSchemaComponent","component","index","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,IAAqB;AAAA,EACzB,iBAAiB,EAAE,SAAAC,GAAS,OAAAC,KAAS;AACnC,WACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,MAAAD,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,sDAAsD,UAAAF,GAAM;AAAA,MACpFD;AAAA,IAAA,GACH;AAAA,EAEJ;AAAA,EAEA,aAAa,EAAE,SAAAI,IAAU,CAAA,GAAI,OAAAH,GAAO,aAAAI,IAAc,IAAO,WAAWC,IAAmB,MAAS;AAC9F,UAAM,CAACC,GAAWC,CAAY,IAAIC,EAAM,SAASH,CAAgB,GAE3DI,IAAQN,EAAQ,SAASA,IAAU;AAAA,MACvC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,MACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,MACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,IAAK;AAG/C,WAAIC,KAAeE,IAEf,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAMM,EAAa,EAAK;AAAA,QACjC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAN,EAAC,QAAA,EAAM,UAAA;AAAA,YAAAD,KAAS;AAAA,YAAU;AAAA,YAAGS,EAAM,IAAI,CAAAC,MAAK,GAAGA,EAAE,KAAK,IAAIA,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK;AAAA,UAAA,GAAE;AAAA,UACjF,gBAAAR,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAMX,gBAAAD,EAAC,OAAA,EAAI,WAAU,2FACX,UAAA;AAAA,OAAAD,KAASI,MACT,gBAAAH,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,0DAA0D,UAAAF,KAAS,WAAU;AAAA,QAC5FI,KACC,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAMK,EAAa,EAAI;AAAA,YAChC,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GAEJ;AAAA,MAEF,gBAAAL,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAO,EAAM,IAAI,CAACC,MACV,gBAAAT,EAAC,OAAA,EAAkB,WAAU,gBAC3B,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,8CAA8C,UAAAQ,EAAE,OAAM;AAAA,QACrE,gBAAAT,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4DAA4D,UAAAQ,EAAE,OAAM;AAAA,UACnFA,EAAE,SACD,gBAAAR,EAAC,QAAA,EAAK,WAAW,WAAW,OAAOQ,EAAE,KAAK,EAAE,aAAa,GAAG,KAAKA,EAAE,QAAQ,IAAI,iBAAiB,kBAAkB,IAC/G,UAAA,OAAOA,EAAE,SAAU,YAAYA,EAAE,QAAQ,IAAI,IAAIA,EAAE,KAAK,KAAgBA,EAAE,MAAA,CAC7E;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,KATQA,EAAE,KAUZ,CACD,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAAA,EAEA,SAAS,EAAE,OAAAD,IAAQ,CAAA,GAAI,OAAAT,GAAO,aAAAW,KAAe;AAC3C,UAAM,CAACC,GAAUC,CAAW,IAAIL,EAAM,SAAS,IAAI;AACnD,WAAKC,EAAM,SAIT,gBAAAR,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,MAAAD,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,yDAAyD,UAAAF,GAAM;AAAA,QAC/E,gBAAAC,EAAC,QAAA,EAAK,WAAU,8CAA8C,UAAA;AAAA,UAAAQ,EAAM;AAAA,UAAO;AAAA,QAAA,EAAA,CAAM;AAAA,MAAA,GACnF;AAAA,MAEF,gBAAAP,EAAC,OAAA,EAAI,WAAU,eACZ,UAAAO,EAAM,IAAI,CAACK,GAAMC,MAChB,gBAAAd,EAAC,OAAA,EAAyB,WAAU,uFAClC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,cAAAW,EAAYD,OAAcE,EAAK,MAAMC,KAAO,OAAQD,EAAK,MAAMC,CAAI,GACnEJ,IAAcG,CAAI;AAAA,YACpB;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAb,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,gBAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,yDACZ,UAAAY,EAAK,SAASA,EAAK,QAAQ,QAAQC,IAAM,CAAC,GAAA,CAC7C;AAAA,gBACCD,EAAK,UACJ,gBAAAZ,EAACc,GAAA,EAAO,MAAMF,EAAK,WAAW,aAAa,WAAWA,EAAK,WAAW,YAAY,YAAY,WAAW,WAAU,YAChH,YAAK,OAAA,CACR;AAAA,cAAA,GAEJ;AAAA,cACCA,EAAK,eACJ,gBAAAZ,EAAC,SAAI,WAAU,mDAAmD,YAAK,YAAA,CAAY;AAAA,YAAA,EAAA,CAEvF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDU,OAAcE,EAAK,MAAMC,MAAQD,EAAK,6BACpC,OAAA,EAAI,WAAU,6DACb,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAAY,EAAK,QAAQ,IAAI,CAACG,GAAQC,MACzB,gBAAAhB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW,gEACTgB,MAAM,IACF,4GACA,8GACN;AAAA,YAEC,UAAA,OAAOD,KAAW,WAAWA,IAASA,EAAO;AAAA,UAAA;AAAA,UARzC,OAAOA,KAAW,WAAWA,IAASA,EAAO;AAAA,QAAA,CAUrD,GACH,EAAA,CACF;AAAA,MAAA,EAAA,GA1CMH,EAAK,MAAMC,CA4CrB,CACD,EAAA,CACH;AAAA,IAAA,GACF,IA3DO,gBAAAb,EAAC,OAAA,EAAI,WAAU,8CAA6C,UAAA,aAAS;AAAA,EA6DhF;AAAA,EAEA,UAAU,EAAE,OAAAF,GAAO,UAAAmB,GAAU,SAAAC,IAAU,CAAA,GAAI,MAAAC,IAAO,IAAI,MAAAC,GAAM,YAAAC,IAAa,IAAM,UAAAC,IAAW,IAAM,WAAAC,IAAY,IAAM,UAAAC,IAAW,KAAK;AAChI,UAAMC,IAAYN,EAAK,SAASA,IAAQC,KAAQ,CAAA,GAC1CM,IAAOR,EAAQ,SAASA,IAAU;AAAA,MACtC,EAAE,KAAK,QAAQ,OAAO,OAAA;AAAA,MACtB,EAAE,KAAK,UAAU,OAAO,SAAA;AAAA,MACxB,EAAE,KAAK,SAAS,OAAO,QAAA;AAAA,IAAQ;AAEjC,WACE,gBAAAlB;AAAA,MAAC2B;AAAA,MAAA;AAAA,QACC,OAAO7B,KAAS;AAAA,QAChB,UAAAmB;AAAA,QACA,SAASS;AAAA,QACT,MAAMD;AAAA,QACN,YAAAJ;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,UAAU,EAAE,OAAA1B,GAAO,UAAAmB,GAAU,WAAAW,IAAY,QAAQ,MAAAT,IAAO,CAAA,GAAI,QAAAU,IAAS,OAAO;AAC1E,UAAMC,IAASX,EAAK,SAASA,IAAO,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACY,GAAGf,OAAO,EAAE,GAAGA,GAAG,GAAG,KAAK,OAAA,IAAW,IAAA,EAAM;AAC3G,WACE,gBAAAhB;AAAA,MAACgC;AAAA,MAAA;AAAA,QACC,OAAOlC,KAAS;AAAA,QAChB,UAAUmB,KAAY;AAAA,QACtB,WAAAW;AAAA,QACA,QAAAC;AAAA,QACA,OACE,gBAAA7B;AAAA,UAACiC;AAAA,UAAA;AAAA,YACC,MAAMH;AAAA,YACN,YAAU;AAAA,YACV,QAAAD;AAAA,YACA,WAAW/B;AAAA,YACX,aAAa,CAACoC,GAAKC,GAAGC,GAAMC,MAASC,EAAiB,UAAUJ,GAAKC,GAAGC,GAAMC,CAAI;AAAA,YAClF,SAAS,EAAE,MAAM,KAAK,MAAM,KAAK,UAAU,IAAM,UAAU,GAAA;AAAA,UAAK;AAAA,QAAA;AAAA,MAClE;AAAA,IAAA;AAAA,EAIR;AAAA,EAEA,WAAW,EAAE,OAAAvC,GAAO,OAAAyC,GAAO,OAAAC,GAAO,OAAAC,GAAO,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,GAAO,MAAAC,GAAM,aAAAC,EAAA,GAAe;AACvF,WACE,gBAAA9C;AAAA,MAAC+C;AAAA,MAAA;AAAA,QACC,OAAOjD,KAASyC;AAAA,QAChB,OAAOC,KAAS;AAAA,QAChB,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,YAAAC;AAAA,QACA,OAAAC;AAAA,QACA,MAAAC;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,WAAW,EAAE,OAAAhD,GAAO,UAAAmB,GAAU,QAAA+B,GAAQ,OAAAzC,GAAO,QAAA0C,GAAQ,cAAAC,GAAc,eAAAC,KAAiB;AAClF,WACE,gBAAAnD;AAAA,MAACoD;AAAA,MAAA;AAAA,QACC,OAAAtD;AAAA,QACA,UAAAmB;AAAA,QACA,QAAA+B;AAAA,QACA,OAAAzC;AAAA,QACA,QAAA0C;AAAA,QACA,cAAAC;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,WAAW,EAAE,SAAAE,IAAU,CAAA,GAAI,OAAAvD,GAAO,UAAAwD,KAAY;AAC5C,WACE,gBAAAvD,EAAC,OAAA,EAAI,WAAU,4FACZ,UAAA;AAAA,MAAAD,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,8DAA8D,UAAAF,GAAM;AAAA,MAC7F,gBAAAE,EAAC,SAAI,WAAU,wBACZ,YAAQ,IAAI,CAACe,GAAQC,MACpB,gBAAAhB;AAAA,QAACuD;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAASvC,MAAM,IAAI,YAAY;AAAA,UAC/B,SAAS,MAAMsC,IAAWvC,CAAM;AAAA,UAE/B,UAAA,OAAOA,KAAW,WAAWA,IAASA,EAAO;AAAA,QAAA;AAAA,QALzCC;AAAA,MAAA,CAOR,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAAA,EAEA,YAAY,EAAE,OAAAlB,GAAO,SAAA0D,GAAS,MAAAC,IAAO,aAAa;AAChD,UAAMC,IAAc;AAAA,MAClB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAEV,WACE,gBAAA3D,EAAC,SAAI,WAAW,yBAAyB2D,EAAYD,CAAI,KAAKC,EAAY,OAAO,IAC9E,UAAA;AAAA,MAAA5D,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAF,GAAM;AAAA,MAC7D,gBAAAE,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAwD,EAAA,CAAQ;AAAA,IAAA,GACpC;AAAA,EAEJ;AAAA,EAEA,UAAU;AACR,WAAO,gBAAAxD,EAAC,OAAA,EAAI,WAAU,sCAAA,CAAsC;AAAA,EAC9D;AAAA,EAEA,OAAO,EAAE,MAAA2D,IAAO,QAAQ;AACtB,UAAMC,IAAU,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAA;AAC5C,6BAAQ,OAAA,EAAI,WAAWA,EAAQD,CAAI,KAAKC,EAAQ,IAAI;AAAA,EACtD;AACF;AAEA,IAAIC,IAAY,EAAE,GAAGjE,EAAA;AAEd,SAASkE,IAAuB;AACrC,SAAOD;AACT;AAUO,SAASE,EAAsBC,GAAWC,GAAO;AAEtD,QAAMC,IADWJ,EAAA,EACUE,EAAU,IAAI;AACzC,SAAKE,IAOE,gBAAAlE,EAACkE,KAAuC,GAAIF,EAAU,SAAS,CAAA,KAA/CA,EAAU,MAAMC,CAAoC,IALvE,gBAAAlE,EAAC,OAAA,EAAgB,WAAU,qGAAoG,UAAA;AAAA,IAAA;AAAA,IACzGiE,EAAU;AAAA,EAAA,EAAA,GADtBC,CAEV;AAIN;"}
|
package/dist/index.js
CHANGED
|
@@ -1,274 +1,276 @@
|
|
|
1
1
|
import { cn as o } from "./lib/utils.js";
|
|
2
2
|
import { default as a, useThemeMode as l } from "./components/library/theme/AppThemeProvider.js";
|
|
3
|
-
import { default as d } from "./components/library/ui/
|
|
4
|
-
import { default as s } from "./components/library/ui/
|
|
5
|
-
import { default as i } from "./components/library/ui/
|
|
6
|
-
import { default as x } from "./components/library/ui/
|
|
7
|
-
import { default as C } from "./components/library/ui/
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
3
|
+
import { default as d } from "./components/library/ui/UIButton.js";
|
|
4
|
+
import { default as s } from "./components/library/ui/UIInput.js";
|
|
5
|
+
import { default as i } from "./components/library/ui/Text.js";
|
|
6
|
+
import { default as x } from "./components/library/ui/Container.js";
|
|
7
|
+
import { default as C } from "./components/library/ui/Chip.js";
|
|
8
|
+
import { default as c } from "./components/library/ui/Avatar.js";
|
|
9
|
+
import { default as T } from "./components/library/ui/EmptyState.js";
|
|
10
|
+
import { Alert as b, AlertAction as D, AlertDescription as U, AlertTitle as H } from "./components/library/ui/alert.js";
|
|
11
|
+
import { Badge as B, badgeVariants as F } from "./components/library/ui/badge.js";
|
|
12
|
+
import { Breadcrumb as y, BreadcrumbEllipsis as M, BreadcrumbItem as k, BreadcrumbLink as A, BreadcrumbList as L, BreadcrumbPage as v, BreadcrumbSeparator as w } from "./components/library/ui/breadcrumb.js";
|
|
13
|
+
import { Button as R, buttonVariants as V } from "./components/library/ui/button.js";
|
|
14
|
+
import { Calendar as K, CalendarDayButton as W } from "./components/library/ui/calendar.js";
|
|
15
|
+
import { Card as O, CardContent as j, CardDescription as q, CardFooter as z, CardHeader as J, CardTitle as Q, Card as X } from "./components/library/ui/card.js";
|
|
16
|
+
import { Checkbox as Z } from "./components/library/ui/checkbox.js";
|
|
17
|
+
import { Collapsible as $, CollapsibleContent as ee, CollapsibleTrigger as re } from "./components/library/ui/collapsible.js";
|
|
18
|
+
import { DatePicker as te, DatePickerCalendar as ae, DatePickerContent as le, DatePickerRangeTrigger as fe, DatePickerTrigger as de } from "./components/library/ui/datePicker.js";
|
|
19
|
+
import { Dialog as se, DialogClose as me, DialogContent as ie, DialogDescription as ue, DialogFooter as xe, DialogHeader as ne, DialogOverlay as Ce, DialogPortal as ge, DialogTitle as ce, DialogTrigger as Se } from "./components/library/ui/dialog.js";
|
|
20
|
+
import { Field as Ie, FieldContent as be, FieldDescription as De, FieldError as Ue, FieldGroup as He, FieldLabel as Pe, FieldLegend as Be, FieldSeparator as Fe, FieldSet as he, FieldTitle as ye } from "./components/library/ui/field.js";
|
|
21
|
+
import { Input as ke } from "./components/library/ui/input.js";
|
|
22
|
+
import { Label as Le } from "./components/library/ui/label.js";
|
|
23
|
+
import { Pagination as we, PaginationContent as Ee, PaginationEllipsis as Re, PaginationItem as Ve, PaginationLink as Ge, PaginationNext as Ke, PaginationPrevious as We } from "./components/library/ui/pagination.js";
|
|
24
|
+
import { Popover as Oe, PopoverContent as je, PopoverTrigger as qe } from "./components/library/ui/popover.js";
|
|
25
|
+
import { Select as Je, SelectContent as Qe, SelectGroup as Xe, SelectItem as Ye, SelectLabel as Ze, SelectScrollDownButton as _e, SelectScrollUpButton as $e, SelectSeparator as er, SelectTrigger as rr, SelectValue as or } from "./components/library/ui/select.js";
|
|
26
|
+
import { Separator as ar } from "./components/library/ui/separator.js";
|
|
27
|
+
import { Skeleton as fr } from "./components/library/ui/skeleton.js";
|
|
28
|
+
import { Toaster as pr } from "./components/library/ui/sonner.js";
|
|
29
|
+
import { Spinner as mr } from "./components/library/ui/spinner.js";
|
|
30
|
+
import { Table as ur, TableBody as xr, TableCaption as nr, TableCell as Cr, TableFooter as gr, TableHead as cr, TableHeader as Sr, TableRow as Tr } from "./components/library/ui/table.js";
|
|
31
|
+
import { Tabs as br, TabsContent as Dr, TabsList as Ur, TabsTrigger as Hr } from "./components/library/ui/tabs.js";
|
|
30
32
|
import { default as Br } from "./components/library/cards/BaseCard.js";
|
|
31
|
-
import { default as
|
|
32
|
-
import { default as
|
|
33
|
-
import { default as
|
|
34
|
-
import { default as
|
|
35
|
-
import { default as
|
|
36
|
-
import { default as
|
|
37
|
-
import { default as
|
|
38
|
-
import { default as
|
|
39
|
-
import { default as
|
|
40
|
-
import { default as
|
|
41
|
-
import { default as
|
|
42
|
-
import { default as
|
|
43
|
-
import { default as
|
|
44
|
-
import { D3ChartTemplates as
|
|
45
|
-
import { default as
|
|
46
|
-
import { default as
|
|
47
|
-
import { default as
|
|
48
|
-
import { default as
|
|
49
|
-
import { default as
|
|
50
|
-
import { default as
|
|
51
|
-
import { default as
|
|
52
|
-
import { default as
|
|
53
|
-
import { default as
|
|
54
|
-
import { default as
|
|
55
|
-
import { default as
|
|
56
|
-
import { default as
|
|
57
|
-
import { default as
|
|
58
|
-
import { default as
|
|
59
|
-
import { default as
|
|
60
|
-
import { default as
|
|
61
|
-
import { applyFilters as
|
|
62
|
-
import { default as
|
|
63
|
-
import { default as
|
|
64
|
-
import { default as
|
|
65
|
-
import { default as
|
|
66
|
-
import { default as
|
|
67
|
-
import { default as
|
|
68
|
-
import { default as
|
|
69
|
-
import { default as
|
|
70
|
-
import { default as
|
|
71
|
-
import { default as
|
|
72
|
-
import { default as
|
|
73
|
-
import { default as
|
|
74
|
-
import { default as
|
|
75
|
-
import { default as
|
|
76
|
-
import { default as
|
|
77
|
-
import { default as
|
|
78
|
-
import { default as
|
|
79
|
-
import { default as
|
|
80
|
-
import { default as
|
|
81
|
-
import { default as
|
|
82
|
-
import { default as
|
|
83
|
-
import { default as
|
|
84
|
-
import { default as
|
|
85
|
-
import { default as
|
|
86
|
-
import { default as
|
|
87
|
-
import { default as
|
|
88
|
-
import { default as
|
|
89
|
-
import { default as
|
|
90
|
-
import { default as
|
|
91
|
-
import { default as
|
|
92
|
-
import { default as
|
|
93
|
-
import { default as
|
|
94
|
-
import { default as
|
|
95
|
-
import { Kbd as
|
|
96
|
-
import { toast as
|
|
33
|
+
import { default as hr } from "./components/library/cards/ChartCard.js";
|
|
34
|
+
import { default as Mr } from "./components/library/cards/ListCard.js";
|
|
35
|
+
import { default as Ar } from "./components/library/cards/MetricCard.js";
|
|
36
|
+
import { default as vr } from "./components/library/cards/SectionCard.js";
|
|
37
|
+
import { default as Er } from "./components/library/cards/StatusCard.js";
|
|
38
|
+
import { default as Vr } from "./components/library/cards/TableCard.js";
|
|
39
|
+
import { default as Kr } from "./components/library/cards/WidgetCard.js";
|
|
40
|
+
import { default as Nr } from "./components/library/cards/FeedPanel.js";
|
|
41
|
+
import { default as jr } from "./components/library/cards/ActivityCard.js";
|
|
42
|
+
import { default as zr } from "./components/library/cards/MetricsStrip.js";
|
|
43
|
+
import { default as Qr } from "./components/library/cards/CalloutCard.js";
|
|
44
|
+
import { default as Yr } from "./components/library/cards/ActionList.js";
|
|
45
|
+
import { default as _r } from "./components/library/charts/D3Chart.js";
|
|
46
|
+
import { D3ChartTemplates as eo } from "./components/library/charts/D3ChartTemplates.js";
|
|
47
|
+
import { default as oo } from "./components/library/charts/GeoMap.js";
|
|
48
|
+
import { default as ao } from "./components/library/layout/PageContainer.js";
|
|
49
|
+
import { default as fo } from "./components/library/skeletons/CardSkeleton.js";
|
|
50
|
+
import { default as so } from "./components/library/forms/FormModal.js";
|
|
51
|
+
import { default as io } from "./components/library/forms/FormRenderer.js";
|
|
52
|
+
import { default as xo } from "./components/library/forms/FormSection.js";
|
|
53
|
+
import { default as Co } from "./components/library/forms/FormField.js";
|
|
54
|
+
import { default as co } from "./components/library/forms/useFormState.js";
|
|
55
|
+
import { default as To } from "./components/library/filters/FilterBar.js";
|
|
56
|
+
import { default as bo } from "./components/library/filters/SearchFilter.js";
|
|
57
|
+
import { default as Uo } from "./components/library/filters/SelectFilter.js";
|
|
58
|
+
import { default as Po } from "./components/library/filters/ToggleFilter.js";
|
|
59
|
+
import { default as Fo, useDataMode as ho } from "./components/library/data/DataModeProvider.js";
|
|
60
|
+
import { default as Mo } from "./components/library/data/DataModeToggle.js";
|
|
61
|
+
import { default as Ao } from "./components/library/data/useDataSource.js";
|
|
62
|
+
import { default as vo } from "./components/library/data/usePageFilters.js";
|
|
63
|
+
import { applyFilters as Eo, filterByDateRange as Ro, filterBySearch as Vo, filterByToggle as Go, filterByValue as Ko, sortByKey as Wo } from "./components/library/data/filterUtils.js";
|
|
64
|
+
import { default as Oo } from "./components/library/chat/ChatPanel.js";
|
|
65
|
+
import { default as qo } from "./components/library/chat/ChatBar.js";
|
|
66
|
+
import { default as Jo } from "./components/library/chat/ChatMessageList.js";
|
|
67
|
+
import { default as Xo } from "./components/library/chat/ChatMessage.js";
|
|
68
|
+
import { default as Zo } from "./components/library/chat/ChatInput.js";
|
|
69
|
+
import { default as $o } from "./components/library/chat/ChatTypingIndicator.js";
|
|
70
|
+
import { default as rt } from "./components/library/chat/ChatSuggestions.js";
|
|
71
|
+
import { default as tt } from "./components/library/chat/ChatToolCall.js";
|
|
72
|
+
import { default as lt } from "./components/library/chat/ChatWelcome.js";
|
|
73
|
+
import { default as dt } from "./components/library/chat/useChatState.js";
|
|
74
|
+
import { default as st } from "./components/library/heroui/Button.js";
|
|
75
|
+
import { default as it } from "./components/library/heroui/Input.js";
|
|
76
|
+
import { default as xt } from "./components/library/heroui/Card.js";
|
|
77
|
+
import { default as Ct } from "./components/library/heroui/Toggle.js";
|
|
78
|
+
import { default as ct } from "./components/library/heroui/Tabs.js";
|
|
79
|
+
import { default as Tt } from "./components/library/heroui/Accordion.js";
|
|
80
|
+
import { default as bt } from "./components/library/heroui/Breadcrumbs.js";
|
|
81
|
+
import { default as Ut } from "./components/library/heroui/Separator.js";
|
|
82
|
+
import { default as Pt } from "./components/library/heroui/Pagination.js";
|
|
83
|
+
import { default as Ft } from "./components/library/heroui/Drawer.js";
|
|
84
|
+
import { default as yt } from "./components/library/heroui/Modal.js";
|
|
85
|
+
import { default as kt } from "./components/library/heroui/Dropdown.js";
|
|
86
|
+
import { default as Lt } from "./components/library/heroui/Tooltip.js";
|
|
87
|
+
import { default as wt } from "./components/library/heroui/Toast.js";
|
|
88
|
+
import { default as Rt } from "./components/library/heroui/Alert.js";
|
|
89
|
+
import { default as Gt } from "./components/library/heroui/Badge.js";
|
|
90
|
+
import { default as Wt } from "./components/library/heroui/ProgressBar.js";
|
|
91
|
+
import { default as Ot } from "./components/library/heroui/ProgressCircle.js";
|
|
92
|
+
import { default as qt } from "./components/library/heroui/Meter.js";
|
|
93
|
+
import { default as Jt } from "./components/library/heroui/Skeleton.js";
|
|
94
|
+
import { default as Xt } from "./components/library/heroui/Select.js";
|
|
95
|
+
import { default as Zt } from "./components/library/heroui/Kbd.js";
|
|
96
|
+
import { default as $t } from "./components/library/heroui/ScrollShadow.js";
|
|
97
|
+
import { Kbd as ra, ScrollShadow as oa } from "@heroui/react";
|
|
98
|
+
import { toast as aa } from "./node_modules/sonner/dist/index.js";
|
|
97
99
|
export {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
100
|
+
Yr as ActionList,
|
|
101
|
+
jr as ActivityCard,
|
|
102
|
+
b as Alert,
|
|
103
|
+
D as AlertAction,
|
|
104
|
+
U as AlertDescription,
|
|
105
|
+
H as AlertTitle,
|
|
104
106
|
a as AppThemeProvider,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
c as Avatar,
|
|
108
|
+
B as Badge,
|
|
107
109
|
Br as BaseCard,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
110
|
+
y as Breadcrumb,
|
|
111
|
+
M as BreadcrumbEllipsis,
|
|
112
|
+
k as BreadcrumbItem,
|
|
113
|
+
A as BreadcrumbLink,
|
|
114
|
+
L as BreadcrumbList,
|
|
115
|
+
v as BreadcrumbPage,
|
|
116
|
+
w as BreadcrumbSeparator,
|
|
117
|
+
R as Button,
|
|
118
|
+
K as Calendar,
|
|
119
|
+
W as CalendarDayButton,
|
|
120
|
+
Qr as CalloutCard,
|
|
121
|
+
O as Card,
|
|
122
|
+
j as CardContent,
|
|
123
|
+
q as CardDescription,
|
|
124
|
+
z as CardFooter,
|
|
125
|
+
J as CardHeader,
|
|
126
|
+
fo as CardSkeleton,
|
|
127
|
+
Q as CardTitle,
|
|
128
|
+
hr as ChartCard,
|
|
129
|
+
qo as ChatBar,
|
|
130
|
+
Zo as ChatInput,
|
|
131
|
+
Xo as ChatMessage,
|
|
132
|
+
Jo as ChatMessageList,
|
|
133
|
+
Oo as ChatPanel,
|
|
134
|
+
rt as ChatSuggestions,
|
|
135
|
+
tt as ChatToolCall,
|
|
136
|
+
$o as ChatTypingIndicator,
|
|
137
|
+
lt as ChatWelcome,
|
|
138
|
+
Z as Checkbox,
|
|
139
|
+
$ as Collapsible,
|
|
140
|
+
ee as CollapsibleContent,
|
|
141
|
+
re as CollapsibleTrigger,
|
|
142
|
+
_r as D3Chart,
|
|
143
|
+
eo as D3ChartTemplates,
|
|
144
|
+
Fo as DataModeProvider,
|
|
145
|
+
Mo as DataModeToggle,
|
|
146
|
+
te as DatePicker,
|
|
147
|
+
ae as DatePickerCalendar,
|
|
148
|
+
le as DatePickerContent,
|
|
149
|
+
fe as DatePickerRangeTrigger,
|
|
150
|
+
de as DatePickerTrigger,
|
|
151
|
+
se as Dialog,
|
|
152
|
+
me as DialogClose,
|
|
153
|
+
ie as DialogContent,
|
|
154
|
+
ue as DialogDescription,
|
|
155
|
+
xe as DialogFooter,
|
|
156
|
+
ne as DialogHeader,
|
|
157
|
+
Ce as DialogOverlay,
|
|
158
|
+
ge as DialogPortal,
|
|
159
|
+
ce as DialogTitle,
|
|
160
|
+
Se as DialogTrigger,
|
|
161
|
+
T as EmptyState,
|
|
162
|
+
Nr as FeedPanel,
|
|
163
|
+
Ie as Field,
|
|
164
|
+
be as FieldContent,
|
|
165
|
+
De as FieldDescription,
|
|
166
|
+
Ue as FieldError,
|
|
167
|
+
He as FieldGroup,
|
|
168
|
+
Pe as FieldLabel,
|
|
169
|
+
Be as FieldLegend,
|
|
170
|
+
Fe as FieldSeparator,
|
|
171
|
+
he as FieldSet,
|
|
172
|
+
ye as FieldTitle,
|
|
173
|
+
To as FilterBar,
|
|
174
|
+
Co as FormField,
|
|
175
|
+
so as FormModal,
|
|
176
|
+
io as FormRenderer,
|
|
177
|
+
xo as FormSection,
|
|
178
|
+
oo as GeoMap,
|
|
179
|
+
Tt as HeroUIAccordion,
|
|
180
|
+
Rt as HeroUIAlert,
|
|
181
|
+
Gt as HeroUIBadge,
|
|
182
|
+
bt as HeroUIBreadcrumbs,
|
|
183
|
+
st as HeroUIButton,
|
|
184
|
+
xt as HeroUICard,
|
|
185
|
+
Ft as HeroUIDrawer,
|
|
186
|
+
kt as HeroUIDropdown,
|
|
187
|
+
it as HeroUIInput,
|
|
188
|
+
Zt as HeroUIKbd,
|
|
189
|
+
qt as HeroUIMeter,
|
|
190
|
+
yt as HeroUIModal,
|
|
191
|
+
Pt as HeroUIPagination,
|
|
192
|
+
Wt as HeroUIProgressBar,
|
|
193
|
+
Ot as HeroUIProgressCircle,
|
|
194
|
+
$t as HeroUIScrollShadow,
|
|
195
|
+
Xt as HeroUISelect,
|
|
196
|
+
Ut as HeroUISeparator,
|
|
197
|
+
Jt as HeroUISkeleton,
|
|
198
|
+
ct as HeroUITabs,
|
|
199
|
+
wt as HeroUIToast,
|
|
200
|
+
Ct as HeroUIToggle,
|
|
201
|
+
Lt as HeroUITooltip,
|
|
202
|
+
ke as Input,
|
|
203
|
+
ra as Kbd,
|
|
204
|
+
Le as Label,
|
|
205
|
+
Mr as ListCard,
|
|
206
|
+
Ar as MetricCard,
|
|
207
|
+
zr as MetricsStrip,
|
|
208
|
+
ao as PageContainer,
|
|
209
|
+
we as Pagination,
|
|
210
|
+
Ee as PaginationContent,
|
|
211
|
+
Re as PaginationEllipsis,
|
|
212
|
+
Ve as PaginationItem,
|
|
213
|
+
Ge as PaginationLink,
|
|
214
|
+
Ke as PaginationNext,
|
|
215
|
+
We as PaginationPrevious,
|
|
216
|
+
Oe as Popover,
|
|
217
|
+
je as PopoverContent,
|
|
218
|
+
qe as PopoverTrigger,
|
|
219
|
+
oa as ScrollShadow,
|
|
220
|
+
bo as SearchFilter,
|
|
221
|
+
vr as SectionCard,
|
|
222
|
+
Je as Select,
|
|
223
|
+
Qe as SelectContent,
|
|
224
|
+
Uo as SelectFilter,
|
|
225
|
+
Xe as SelectGroup,
|
|
226
|
+
Ye as SelectItem,
|
|
227
|
+
Ze as SelectLabel,
|
|
228
|
+
_e as SelectScrollDownButton,
|
|
229
|
+
$e as SelectScrollUpButton,
|
|
230
|
+
er as SelectSeparator,
|
|
231
|
+
rr as SelectTrigger,
|
|
232
|
+
or as SelectValue,
|
|
233
|
+
ar as Separator,
|
|
234
|
+
fr as Skeleton,
|
|
235
|
+
mr as Spinner,
|
|
236
|
+
Er as StatusCard,
|
|
237
|
+
ur as Table,
|
|
238
|
+
xr as TableBody,
|
|
239
|
+
nr as TableCaption,
|
|
240
|
+
Vr as TableCard,
|
|
241
|
+
Cr as TableCell,
|
|
242
|
+
gr as TableFooter,
|
|
243
|
+
cr as TableHead,
|
|
244
|
+
Sr as TableHeader,
|
|
245
|
+
Tr as TableRow,
|
|
246
|
+
br as Tabs,
|
|
247
|
+
Dr as TabsContent,
|
|
248
|
+
Ur as TabsList,
|
|
249
|
+
Hr as TabsTrigger,
|
|
250
|
+
pr as Toaster,
|
|
251
|
+
Po as ToggleFilter,
|
|
252
|
+
d as UIButton,
|
|
253
|
+
X as UICard,
|
|
254
|
+
C as UIChip,
|
|
255
|
+
x as UIContainer,
|
|
256
|
+
s as UIInput,
|
|
257
|
+
i as UIText,
|
|
258
|
+
Kr as WidgetCard,
|
|
259
|
+
Eo as applyFilters,
|
|
260
|
+
F as badgeVariants,
|
|
261
|
+
V as buttonVariants,
|
|
260
262
|
o as cn,
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
263
|
+
Ro as filterByDateRange,
|
|
264
|
+
Vo as filterBySearch,
|
|
265
|
+
Go as filterByToggle,
|
|
266
|
+
Ko as filterByValue,
|
|
267
|
+
Wo as sortByKey,
|
|
268
|
+
aa as toast,
|
|
269
|
+
dt as useChatState,
|
|
270
|
+
ho as useDataMode,
|
|
271
|
+
Ao as useDataSource,
|
|
272
|
+
co as useFormState,
|
|
273
|
+
vo as usePageFilters,
|
|
272
274
|
l as useThemeMode
|
|
273
275
|
};
|
|
274
276
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,54 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import { UIInput, UIButton } from '@schandlergarcia/sf-web-components';
|
|
3
|
+
import { Search } from "lucide-react";
|
|
3
4
|
|
|
4
5
|
export default function HomePage() {
|
|
6
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
7
|
+
|
|
8
|
+
const handleSearch = () => {
|
|
9
|
+
const trimmed = searchQuery.trim();
|
|
10
|
+
if (trimmed) {
|
|
11
|
+
console.log("Search:", trimmed);
|
|
12
|
+
// Navigate to your search results page
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
17
|
+
if (e.key === "Enter") {
|
|
18
|
+
e.preventDefault();
|
|
19
|
+
handleSearch();
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
5
23
|
return (
|
|
6
|
-
<div className="flex min-h-
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
24
|
+
<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
|
|
25
|
+
<div className="w-full max-w-4xl">
|
|
26
|
+
<div className="text-center mb-8">
|
|
27
|
+
<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
|
|
28
|
+
<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div className="flex flex-col gap-4">
|
|
31
|
+
<div className="relative">
|
|
32
|
+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
|
33
|
+
<UIInput
|
|
34
|
+
type="text"
|
|
35
|
+
value={searchQuery}
|
|
36
|
+
onChange={(e) => setSearchQuery(e.target.value)}
|
|
37
|
+
onKeyDown={handleKeyDown}
|
|
38
|
+
placeholder="Search..."
|
|
39
|
+
className="pl-10 w-full"
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
<div className="flex gap-3 justify-center">
|
|
43
|
+
<UIButton onClick={handleSearch} variant="primary">
|
|
44
|
+
Search
|
|
45
|
+
</UIButton>
|
|
46
|
+
<UIButton onClick={() => console.log("Browse All")} variant="secondary">
|
|
47
|
+
Browse All
|
|
48
|
+
</UIButton>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
13
52
|
</div>
|
|
14
53
|
);
|
|
15
54
|
}
|