@schandlergarcia/sf-web-components 1.3.1 → 1.5.0

package/.a4drules/features/command-center-dashboard-rule.md

@@ -15,7 +15,7 @@ You MUST load the **command-center-builder** and **component-library** skills be
 
 ## Critical constraints
 
-1. **File extension must be `.jsx`** — not `.tsx`. Rename if needed.
+1. **File extension should be `.tsx`** — TypeScript is preferred for type safety. Use `.jsx` only if types are not available.
 
 2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
 

package/.a4drules/skills/command-center-project/SKILL.md

@@ -32,10 +32,10 @@ src/
 ├── features/                  # Feature modules (global-search)
 │   └── global-search/         # Search API, components, hooks
 ├── components/
-│   ├── library/               # Vendored command-center component library (.jsx files)
-│   ├── workspace/             # ComponentRegistry.jsx (schema renderer)
+│   ├── library/               # Component library (.tsx/.jsx - TypeScript migration in progress)
+│   ├── workspace/             # ComponentRegistry (schema renderer)
 │   ├── pages/                 # Dashboard pages (CommandCenter.tsx wraps active dashboard)
-│   ├── ui/                    # shadcn/ui components (button, card, dialog, etc.)
+│   ├── ui/                    # shadcn/ui components (button, card, dialog, etc.) - TypeScript
 │   ├── alerts/                # StatusAlert (CVA + Lucide)
 │   └── layouts/               # CardLayout (uses shadcn Card)
 └── stubs/                     # No-op stubs for standalone dev (sdk-data, webapp-experimental, agentforce)
@@ -81,7 +81,7 @@ Configured in both `vite.config.ts` and `tsconfig.json`:
 
 - **Dashboard pages** go in `src/components/pages/`. Wire into `CommandCenter.tsx` by importing and rendering.
 - **Outer app pages** go in `src/pages/` or `src/features/*/pages/`. Wire into `src/routes.tsx`.
-- **TypeScript** for outer app code (`.tsx`/`.ts`). **JSX** for command center library and dashboard pages (`.jsx`).
+- **TypeScript** preferred for all code (`.tsx`/`.ts`). Core UI components converted to TypeScript. Legacy `.jsx` files being migrated.
 - **Component library** is a vendored copy from command-center-starter — not an npm package. Changes sync manually.
 - Vite config has `loader: { '.js': 'jsx' }` in `optimizeDeps` to support the `.js`→JSX library files.
 - **Reset script:** `npm run reset:command-center` wipes custom dashboards and restores blank canvas.

package/.a4drules/skills/component-library/SKILL.md

@@ -14,13 +14,16 @@ Vendored from command-center-starter. Do not modify library files.
 
 ## Import Pattern
 
-```jsx
+```tsx
 // Named imports from the barrel (preferred)
 import { MetricCard, ChartCard, TableCard, ListCard } from "@/components/library";
 
 // Default exports that need direct import
 import useDataSource from "@/components/library/data/useDataSource";
 import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
+
+// Import types (TypeScript)
+import type { MetricCardProps } from "@/components/library";
 ```
 
 ---

package/README.md

@@ -2,6 +2,8 @@
 
 Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui components.
 
+**🎯 TypeScript Migration in Progress** (v1.4.0): Core UI components now have full TypeScript support with exported prop interfaces. See `docs/TYPESCRIPT_MIGRATION.md` for status and contribution guide.
+
 ## Installation
 
 ```bash

package/dist/components/library/heroui/Input.d.ts

@@ -1 +1,5 @@
-export default function HeroUIInput(props: any): import("react/jsx-runtime").JSX.Element;
+import type { InputProps } from "@heroui/react";
+export interface HeroUIInputProps extends InputProps {
+}
+export default function HeroUIInput(props: HeroUIInputProps): import("react/jsx-runtime").JSX.Element;
+export type { InputProps };

package/dist/components/library/heroui/Input.js

@@ -1,5 +1,4 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
 import { Input as o } from "@heroui/react";
 function u(r) {
   return /* @__PURE__ */ t(o, { ...r });

package/dist/components/library/heroui/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/library/heroui/Input.jsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"@heroui/react\";\n\nexport default function HeroUIInput(props) {\n  return <Input {...props} />;\n}\n"],"names":["HeroUIInput","props","jsx","Input"],"mappings":";;;AAGA,SAAwBA,EAAYC,GAAO;AACzC,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO;AAC3B;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/library/heroui/Input.tsx"],"sourcesContent":["import { Input } from \"@heroui/react\";\nimport type { InputProps } from \"@heroui/react\";\n\nexport interface HeroUIInputProps extends InputProps {}\n\nexport default function HeroUIInput(props: HeroUIInputProps) {\n  return <Input {...props} />;\n}\n\nexport type { InputProps };\n"],"names":["HeroUIInput","props","jsx","Input"],"mappings":";;AAKA,SAAwBA,EAAYC,GAAyB;AAC3D,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO;AAC3B;"}

package/dist/components/library/heroui/Kbd.d.ts

@@ -1,6 +1,7 @@
-export default function HeroUIKbd({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export { Kbd };
 import { Kbd } from "@heroui/react";
+import type { KbdProps } from "@heroui/react";
+export interface HeroUIKbdProps extends KbdProps {
+}
+export default function HeroUIKbd({ children, ...props }: HeroUIKbdProps): import("react/jsx-runtime").JSX.Element;
+export { Kbd };
+export type { KbdProps };

package/dist/components/library/heroui/Kbd.js

@@ -1,12 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
-import { Kbd as m } from "@heroui/react";
-import { Kbd as n } from "@heroui/react";
+import { Kbd as e } from "@heroui/react";
+import { Kbd as i } from "@heroui/react";
 function d({ children: r, ...o }) {
-  return /* @__PURE__ */ t(m, { ...o, children: r });
+  return /* @__PURE__ */ t(e, { ...o, children: r });
 }
 export {
-  n as Kbd,
+  i as Kbd,
   d as default
 };
 //# sourceMappingURL=Kbd.js.map

package/dist/components/library/heroui/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sources":["../../../../src/components/library/heroui/Kbd.jsx"],"sourcesContent":["import React from \"react\";\nimport { Kbd } from \"@heroui/react\";\n\nexport default function HeroUIKbd({ children, ...props }) {\n  return <Kbd {...props}>{children}</Kbd>;\n}\n\nexport { Kbd };\n"],"names":["HeroUIKbd","children","props","jsx","Kbd"],"mappings":";;;;AAGA,SAAwBA,EAAU,EAAE,UAAAC,GAAU,GAAGC,KAAS;AACxD,SAAO,gBAAAC,EAACC,GAAA,EAAK,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACnC;"}
+{"version":3,"file":"Kbd.js","sources":["../../../../src/components/library/heroui/Kbd.tsx"],"sourcesContent":["import { Kbd } from \"@heroui/react\";\nimport type { KbdProps } from \"@heroui/react\";\n\nexport interface HeroUIKbdProps extends KbdProps {}\n\nexport default function HeroUIKbd({ children, ...props }: HeroUIKbdProps) {\n  return <Kbd {...props}>{children}</Kbd>;\n}\n\nexport { Kbd };\nexport type { KbdProps };\n"],"names":["HeroUIKbd","children","props","jsx","Kbd"],"mappings":";;;AAKA,SAAwBA,EAAU,EAAE,UAAAC,GAAU,GAAGC,KAAyB;AACxE,SAAO,gBAAAC,EAACC,GAAA,EAAK,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACnC;"}

package/dist/components/library/heroui/Skeleton.d.ts

@@ -1,6 +1,9 @@
-export default function HeroUISkeleton({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+import type { ReactNode } from "react";
 import { Skeleton } from "@heroui/react";
+import type { SkeletonProps } from "@heroui/react";
+export interface HeroUISkeletonProps extends SkeletonProps {
+    children?: ReactNode;
+}
+export default function HeroUISkeleton({ children, ...props }: HeroUISkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };
+export type { SkeletonProps };

package/dist/components/library/heroui/Skeleton.js

@@ -1,12 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
 import { Skeleton as t } from "@heroui/react";
-import { Skeleton as k } from "@heroui/react";
-function p({ children: o, ...e }) {
+import { Skeleton as i } from "@heroui/react";
+function m({ children: o, ...e }) {
   return /* @__PURE__ */ r(t, { ...e, children: o });
 }
 export {
-  k as Skeleton,
-  p as default
+  i as Skeleton,
+  m as default
 };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/library/heroui/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/library/heroui/Skeleton.jsx"],"sourcesContent":["import React from \"react\";\nimport { Skeleton } from \"@heroui/react\";\n\nexport default function HeroUISkeleton({ children, ...props }) {\n  return <Skeleton {...props}>{children}</Skeleton>;\n}\n\nexport { Skeleton };\n"],"names":["HeroUISkeleton","children","props","jsx","Skeleton"],"mappings":";;;;AAGA,SAAwBA,EAAe,EAAE,UAAAC,GAAU,GAAGC,KAAS;AAC7D,SAAO,gBAAAC,EAACC,GAAA,EAAU,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACxC;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/library/heroui/Skeleton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Skeleton } from \"@heroui/react\";\nimport type { SkeletonProps } from \"@heroui/react\";\n\nexport interface HeroUISkeletonProps extends SkeletonProps {\n  children?: ReactNode;\n}\n\nexport default function HeroUISkeleton({ children, ...props }: HeroUISkeletonProps) {\n  return <Skeleton {...props}>{children}</Skeleton>;\n}\n\nexport { Skeleton };\nexport type { SkeletonProps };\n"],"names":["HeroUISkeleton","children","props","jsx","Skeleton"],"mappings":";;;AAQA,SAAwBA,EAAe,EAAE,UAAAC,GAAU,GAAGC,KAA8B;AAClF,SAAO,gBAAAC,EAACC,GAAA,EAAU,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACxC;"}

package/dist/components/library/heroui/Toast.d.ts

@@ -1,3 +1,5 @@
+import { Toast, toast } from "@heroui/react";
+import type { ToastProps } from "@heroui/react";
 /**
  * HeroUI v3 Toast — notification system.
  *
@@ -15,7 +17,8 @@
  *   Toast.Title, Toast.Description, Toast.ActionButton,
  *   Toast.CloseButton
  */
-export default function HeroUIToast(props: any): import("react/jsx-runtime").JSX.Element;
-import { Toast } from "@heroui/react";
-import { toast } from "@heroui/react";
+export interface HeroUIToastProps extends ToastProps {
+}
+export default function HeroUIToast(props: HeroUIToastProps): import("react/jsx-runtime").JSX.Element;
 export { Toast, toast };
+export type { ToastProps };

package/dist/components/library/heroui/Toast.js

@@ -1,13 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
 import { Toast as r } from "@heroui/react";
-import { Toast as i, toast as n } from "@heroui/react";
+import { Toast as p, toast as i } from "@heroui/react";
 function e(o) {
   return /* @__PURE__ */ t(r, { ...o });
 }
 export {
-  i as Toast,
+  p as Toast,
   e as default,
-  n as toast
+  i as toast
 };
 //# sourceMappingURL=Toast.js.map

package/dist/components/library/heroui/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/library/heroui/Toast.jsx"],"sourcesContent":["import React from \"react\";\nimport { Toast, toast } from \"@heroui/react\";\n\n/**\n * HeroUI v3 Toast — notification system.\n *\n * SETUP: Add <Toast.Provider /> to your app root (_app.js).\n *\n * Then call the `toast` function from anywhere:\n *   toast(\"Event created\");\n *   toast.success(\"Saved!\");\n *   toast.warning(\"Check settings\");\n *   toast.danger(\"Something failed\");\n *   toast.promise(asyncFn(), { loading: \"…\", success: \"Done\", error: \"Failed\" });\n *\n * Sub-components via dot notation on the named `Toast` export:\n *   Toast.Provider, Toast.Indicator, Toast.Content,\n *   Toast.Title, Toast.Description, Toast.ActionButton,\n *   Toast.CloseButton\n */\nexport default function HeroUIToast(props) {\n  return <Toast {...props} />;\n}\n\nexport { Toast, toast };\n"],"names":["HeroUIToast","props","jsx","Toast"],"mappings":";;;;AAoBA,SAAwBA,EAAYC,GAAO;AACzC,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO;AAC3B;"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/library/heroui/Toast.tsx"],"sourcesContent":["import { Toast, toast } from \"@heroui/react\";\nimport type { ToastProps } from \"@heroui/react\";\n\n/**\n * HeroUI v3 Toast — notification system.\n *\n * SETUP: Add <Toast.Provider /> to your app root (_app.js).\n *\n * Then call the `toast` function from anywhere:\n *   toast(\"Event created\");\n *   toast.success(\"Saved!\");\n *   toast.warning(\"Check settings\");\n *   toast.danger(\"Something failed\");\n *   toast.promise(asyncFn(), { loading: \"…\", success: \"Done\", error: \"Failed\" });\n *\n * Sub-components via dot notation on the named `Toast` export:\n *   Toast.Provider, Toast.Indicator, Toast.Content,\n *   Toast.Title, Toast.Description, Toast.ActionButton,\n *   Toast.CloseButton\n */\nexport interface HeroUIToastProps extends ToastProps {}\n\nexport default function HeroUIToast(props: HeroUIToastProps) {\n  return <Toast {...props} />;\n}\n\nexport { Toast, toast };\nexport type { ToastProps };\n"],"names":["HeroUIToast","props","jsx","Toast"],"mappings":";;;AAsBA,SAAwBA,EAAYC,GAAyB;AAC3D,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,EAAA,CAAO;AAC3B;"}

package/dist/components/library/ui/Avatar.d.ts

@@ -1,10 +1,22 @@
-export default function Avatar({ src, name, initials, icon, size, tone, className, ...rest }: {
-    [x: string]: any;
-    src: any;
-    name: any;
-    initials: any;
-    icon: any;
-    size?: string | undefined;
-    tone?: string | undefined;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const SIZE_MAP: {
+    readonly xs: "h-6 w-6 text-[9px]";
+    readonly sm: "h-8 w-8 text-[10px]";
+    readonly md: "h-9 w-9 text-xs";
+    readonly lg: "h-11 w-11 text-sm";
+};
+declare const TONE_MAP: {
+    readonly slate: "bg-slate-800 text-white";
+    readonly brand: "bg-brand-500 text-white";
+    readonly neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200";
+};
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {
+    src?: string;
+    name?: string;
+    initials?: string;
+    icon?: React.ReactNode;
+    size?: keyof typeof SIZE_MAP;
+    tone?: keyof typeof TONE_MAP;
+}
+export default function Avatar({ src, name, initials, icon, size, tone, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/library/ui/Avatar.js

@@ -1,33 +1,56 @@
-import { jsx as a } from "react/jsx-runtime";
-import m from "react";
-const o = {
+import { jsx as l } from "react/jsx-runtime";
+import * as u from "react";
+const b = {
   xs: "h-6 w-6 text-[9px]",
   sm: "h-8 w-8 text-[10px]",
   md: "h-9 w-9 text-xs",
   lg: "h-11 w-11 text-sm"
-}, t = {
+}, d = {
   slate: "bg-slate-800 text-white",
   brand: "bg-brand-500 text-white",
   neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200"
 };
-function p({ src: i, name: e, initials: x, icon: d, size: f = "sm", tone: n = "slate", className: s = "", ...l }) {
-  const r = o[f] ?? o.sm;
-  if (i)
-    return /* @__PURE__ */ a(
+function h({
+  src: a,
+  name: t,
+  initials: o,
+  icon: i,
+  size: x = "sm",
+  tone: n = "slate",
+  className: e = "",
+  ...r
+}) {
+  const s = b[x];
+  if (a)
+    return /* @__PURE__ */ l(
       "img",
       {
-        src: i,
-        alt: e ?? "",
-        className: `${r} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${s}`,
-        ...l
+        src: a,
+        alt: t ?? "",
+        className: `${s} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${e}`,
+        ...r
       }
     );
-  if (m.isValidElement(d))
-    return /* @__PURE__ */ a("div", { className: `${r} ${t[n] ?? t.slate} flex shrink-0 items-center justify-center rounded-full ${s}`, ...l, children: d });
-  const u = x ?? (e ? e.split(" ").map((c) => c[0]).join("").slice(0, 2).toUpperCase() : "?");
-  return /* @__PURE__ */ a("div", { className: `${r} ${t[n] ?? t.slate} flex shrink-0 items-center justify-center rounded-full font-bold ${s}`, ...l, children: u });
+  if (u.isValidElement(i))
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        className: `${s} ${d[n]} flex shrink-0 items-center justify-center rounded-full ${e}`,
+        ...r,
+        children: i
+      }
+    );
+  const c = o ?? (t ? t.split(" ").map((f) => f[0]).join("").slice(0, 2).toUpperCase() : "?");
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `${s} ${d[n]} flex shrink-0 items-center justify-center rounded-full font-bold ${e}`,
+      ...r,
+      children: c
+    }
+  );
 }
 export {
-  p as default
+  h as default
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/components/library/ui/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/library/ui/Avatar.jsx"],"sourcesContent":["import React from \"react\";\n\nconst SIZE_MAP = {\n  xs: \"h-6 w-6 text-[9px]\",\n  sm: \"h-8 w-8 text-[10px]\",\n  md: \"h-9 w-9 text-xs\",\n  lg: \"h-11 w-11 text-sm\",\n};\n\nconst TONE_MAP = {\n  slate:   \"bg-slate-800 text-white\",\n  brand:   \"bg-brand-500 text-white\",\n  neutral: \"bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200\",\n};\n\nexport default function Avatar({ src, name, initials, icon, size = \"sm\", tone = \"slate\", className = \"\", ...rest }) {\n  const sizeClass = SIZE_MAP[size] ?? SIZE_MAP.sm;\n\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={name ?? \"\"}\n        className={`${sizeClass} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${className}`}\n        {...rest}\n      />\n    );\n  }\n\n  if (React.isValidElement(icon)) {\n    return (\n      <div className={`${sizeClass} ${TONE_MAP[tone] ?? TONE_MAP.slate} flex shrink-0 items-center justify-center rounded-full ${className}`} {...rest}>\n        {icon}\n      </div>\n    );\n  }\n\n  const label = initials ?? (name ? name.split(\" \").map(w => w[0]).join(\"\").slice(0, 2).toUpperCase() : \"?\");\n  return (\n    <div className={`${sizeClass} ${TONE_MAP[tone] ?? TONE_MAP.slate} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`} {...rest}>\n      {label}\n    </div>\n  );\n}\n"],"names":["SIZE_MAP","TONE_MAP","Avatar","src","name","initials","icon","size","tone","className","rest","sizeClass","jsx","React","label","w"],"mappings":";;AAEA,MAAMA,IAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAW;AAAA,EACf,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAwBC,EAAO,EAAE,KAAAC,GAAK,MAAAC,GAAM,UAAAC,GAAU,MAAAC,GAAM,MAAAC,IAAO,MAAM,MAAAC,IAAO,SAAS,WAAAC,IAAY,IAAI,GAAGC,KAAQ;AAClH,QAAMC,IAAYX,EAASO,CAAI,KAAKP,EAAS;AAE7C,MAAIG;AACF,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,KAAKC,KAAQ;AAAA,QACb,WAAW,GAAGO,CAAS,qFAAqFF,CAAS;AAAA,QACpH,GAAGC;AAAA,MAAA;AAAA,IAAA;AAKV,MAAIG,EAAM,eAAeP,CAAI;AAC3B,6BACG,OAAA,EAAI,WAAW,GAAGK,CAAS,IAAIV,EAASO,CAAI,KAAKP,EAAS,KAAK,2DAA2DQ,CAAS,IAAK,GAAGC,GACzI,UAAAJ,GACH;AAIJ,QAAMQ,IAAQT,MAAaD,IAAOA,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAW,MAAKA,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,YAAA,IAAgB;AACtG,2BACG,OAAA,EAAI,WAAW,GAAGJ,CAAS,IAAIV,EAASO,CAAI,KAAKP,EAAS,KAAK,qEAAqEQ,CAAS,IAAK,GAAGC,GACnJ,UAAAI,GACH;AAEJ;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/library/ui/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZE_MAP = {\n  xs: \"h-6 w-6 text-[9px]\",\n  sm: \"h-8 w-8 text-[10px]\",\n  md: \"h-9 w-9 text-xs\",\n  lg: \"h-11 w-11 text-sm\",\n} as const;\n\nconst TONE_MAP = {\n  slate:   \"bg-slate-800 text-white\",\n  brand:   \"bg-brand-500 text-white\",\n  neutral: \"bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200\",\n} as const;\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {\n  src?: string;\n  name?: string;\n  initials?: string;\n  icon?: React.ReactNode;\n  size?: keyof typeof SIZE_MAP;\n  tone?: keyof typeof TONE_MAP;\n}\n\nexport default function Avatar({\n  src,\n  name,\n  initials,\n  icon,\n  size = \"sm\",\n  tone = \"slate\",\n  className = \"\",\n  ...rest\n}: AvatarProps) {\n  const sizeClass = SIZE_MAP[size];\n\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={name ?? \"\"}\n        className={`${sizeClass} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${className}`}\n        {...(rest as React.ImgHTMLAttributes<HTMLImageElement>)}\n      />\n    );\n  }\n\n  if (React.isValidElement(icon)) {\n    return (\n      <div\n        className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full ${className}`}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  const label = initials ?? (name ? name.split(\" \").map(w => w[0]).join(\"\").slice(0, 2).toUpperCase() : \"?\");\n  return (\n    <div\n      className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`}\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n    >\n      {label}\n    </div>\n  );\n}\n"],"names":["SIZE_MAP","TONE_MAP","Avatar","src","name","initials","icon","size","tone","className","rest","sizeClass","jsx","React","label","w"],"mappings":";;AAEA,MAAMA,IAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAW;AAAA,EACf,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAWA,SAAwBC,EAAO;AAAA,EAC7B,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAYX,EAASO,CAAI;AAE/B,MAAIJ;AACF,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,KAAKC,KAAQ;AAAA,QACb,WAAW,GAAGO,CAAS,qFAAqFF,CAAS;AAAA,QACpH,GAAIC;AAAA,MAAA;AAAA,IAAA;AAKX,MAAIG,EAAM,eAAeP,CAAI;AAC3B,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGD,CAAS,IAAIV,EAASO,CAAI,CAAC,2DAA2DC,CAAS;AAAA,QAC5G,GAAIC;AAAA,QAEJ,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAKP,QAAMQ,IAAQT,MAAaD,IAAOA,EAAK,MAAM,GAAG,EAAE,IAAI,CAAAW,MAAKA,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,YAAA,IAAgB;AACtG,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGD,CAAS,IAAIV,EAASO,CAAI,CAAC,qEAAqEC,CAAS;AAAA,MACtH,GAAIC;AAAA,MAEJ,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/library/ui/Card.d.ts

@@ -1,37 +1,23 @@
-export default function UICard({ children, padding, style, className, ...rest }: {
-    [x: string]: any;
-    children: any;
-    padding?: string | undefined;
-    style: any;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export function Card({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function CardHeader({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function CardTitle({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function CardDescription({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function CardContent({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function CardFooter({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export interface UICardProps extends React.HTMLAttributes<HTMLDivElement> {
+    padding?: string;
+}
+export default function UICard({ children, padding, className, ...rest }: UICardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function Card({ className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardHeader({ className, children, ...rest }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+export declare function CardTitle({ className, children, ...rest }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+export declare function CardDescription({ className, children, ...rest }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardContent({ className, children, ...rest }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function CardFooter({ className, children, ...rest }: CardFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/ui/Chip.d.ts

@@ -1,7 +1,18 @@
-export default function UIChip({ tone, size, className, children, ...rest }: {
-    [x: string]: any;
-    tone?: string | undefined;
-    size?: string | undefined;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const TONE_STYLES: {
+    readonly neutral: "border-slate-200/80 bg-white/60 text-slate-700 ring-black/5 hover:bg-white/80 dark:border-slate-800/80 dark:bg-slate-950/30 dark:text-slate-200 dark:ring-white/10 dark:hover:bg-slate-900/50";
+    readonly primary: "border-brand-200/80 bg-brand-50/70 text-brand-800 ring-brand-900/5 hover:bg-brand-50 dark:border-brand-900/40 dark:bg-brand-950/25 dark:text-brand-200 dark:ring-brand-300/10 dark:hover:bg-brand-950/35";
+    readonly success: "border-emerald-200/80 bg-emerald-50/70 text-emerald-800 ring-emerald-900/5 hover:bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200 dark:ring-emerald-300/10 dark:hover:bg-emerald-950/30";
+    readonly warning: "border-amber-200/80 bg-amber-50/70 text-amber-900 ring-amber-900/5 hover:bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200 dark:ring-amber-300/10 dark:hover:bg-amber-950/30";
+    readonly danger: "border-rose-200/80 bg-rose-50/70 text-rose-900 ring-rose-900/5 hover:bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200 dark:ring-rose-300/10 dark:hover:bg-rose-950/30";
+};
+declare const SIZE_STYLES: {
+    readonly xs: "px-2 py-0.5 text-[11px]";
+    readonly sm: "px-2.5 py-1 text-xs";
+};
+export interface UIChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tone?: keyof typeof TONE_STYLES;
+    size?: keyof typeof SIZE_STYLES;
+}
+export default function UIChip({ tone, size, className, children, ...rest }: UIChipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/library/ui/Chip.js

@@ -1,31 +1,30 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-const r = {
+import { jsx as t } from "react/jsx-runtime";
+const o = {
   neutral: "border-slate-200/80 bg-white/60 text-slate-700 ring-black/5 hover:bg-white/80 dark:border-slate-800/80 dark:bg-slate-950/30 dark:text-slate-200 dark:ring-white/10 dark:hover:bg-slate-900/50",
   primary: "border-brand-200/80 bg-brand-50/70 text-brand-800 ring-brand-900/5 hover:bg-brand-50 dark:border-brand-900/40 dark:bg-brand-950/25 dark:text-brand-200 dark:ring-brand-300/10 dark:hover:bg-brand-950/35",
   success: "border-emerald-200/80 bg-emerald-50/70 text-emerald-800 ring-emerald-900/5 hover:bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200 dark:ring-emerald-300/10 dark:hover:bg-emerald-950/30",
   warning: "border-amber-200/80 bg-amber-50/70 text-amber-900 ring-amber-900/5 hover:bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200 dark:ring-amber-300/10 dark:hover:bg-amber-950/30",
   danger: "border-rose-200/80 bg-rose-50/70 text-rose-900 ring-rose-900/5 hover:bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200 dark:ring-rose-300/10 dark:hover:bg-rose-950/30"
-}, e = {
+}, n = {
   xs: "px-2 py-0.5 text-[11px]",
   sm: "px-2.5 py-1 text-xs"
 };
-function l({ tone: a = "neutral", size: d = "xs", className: b = "", children: t, ...o }) {
-  return /* @__PURE__ */ n(
+function g({ tone: r = "neutral", size: e = "xs", className: a = "", children: d, ...b }) {
+  return /* @__PURE__ */ t(
     "span",
     {
       className: [
         "inline-flex items-center gap-1 rounded-full border font-semibold shadow-sm ring-1 transition",
-        e[d] ?? e.xs,
-        r[a] ?? r.neutral,
-        b
+        n[e],
+        o[r],
+        a
       ].filter(Boolean).join(" "),
-      ...o,
-      children: t
+      ...b,
+      children: d
     }
   );
 }
 export {
-  l as default
+  g as default
 };
 //# sourceMappingURL=Chip.js.map

package/dist/components/library/ui/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../src/components/library/ui/Chip.jsx"],"sourcesContent":["import React from \"react\";\n\nconst TONE_STYLES = {\n  neutral:\n    \"border-slate-200/80 bg-white/60 text-slate-700 ring-black/5 hover:bg-white/80 dark:border-slate-800/80 dark:bg-slate-950/30 dark:text-slate-200 dark:ring-white/10 dark:hover:bg-slate-900/50\",\n  primary:\n    \"border-brand-200/80 bg-brand-50/70 text-brand-800 ring-brand-900/5 hover:bg-brand-50 dark:border-brand-900/40 dark:bg-brand-950/25 dark:text-brand-200 dark:ring-brand-300/10 dark:hover:bg-brand-950/35\",\n  success:\n    \"border-emerald-200/80 bg-emerald-50/70 text-emerald-800 ring-emerald-900/5 hover:bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200 dark:ring-emerald-300/10 dark:hover:bg-emerald-950/30\",\n  warning:\n    \"border-amber-200/80 bg-amber-50/70 text-amber-900 ring-amber-900/5 hover:bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200 dark:ring-amber-300/10 dark:hover:bg-amber-950/30\",\n  danger:\n    \"border-rose-200/80 bg-rose-50/70 text-rose-900 ring-rose-900/5 hover:bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200 dark:ring-rose-300/10 dark:hover:bg-rose-950/30\"\n};\n\nconst SIZE_STYLES = {\n  xs: \"px-2 py-0.5 text-[11px]\",\n  sm: \"px-2.5 py-1 text-xs\"\n};\n\nexport default function UIChip({ tone = \"neutral\", size = \"xs\", className = \"\", children, ...rest }) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center gap-1 rounded-full border font-semibold shadow-sm ring-1 transition\",\n        SIZE_STYLES[size] ?? SIZE_STYLES.xs,\n        TONE_STYLES[tone] ?? TONE_STYLES.neutral,\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n\n"],"names":["TONE_STYLES","SIZE_STYLES","UIChip","tone","size","className","children","rest","jsx"],"mappings":";;AAEA,MAAMA,IAAc;AAAA,EAClB,SACE;AAAA,EACF,SACE;AAAA,EACF,SACE;AAAA,EACF,SACE;AAAA,EACF,QACE;AACJ,GAEMC,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAwBC,EAAO,EAAE,MAAAC,IAAO,WAAW,MAAAC,IAAO,MAAM,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAQ;AACnG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAP,EAAYG,CAAI,KAAKH,EAAY;AAAA,QACjCD,EAAYG,CAAI,KAAKH,EAAY;AAAA,QACjCK;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/library/ui/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst TONE_STYLES = {\n  neutral:\n    \"border-slate-200/80 bg-white/60 text-slate-700 ring-black/5 hover:bg-white/80 dark:border-slate-800/80 dark:bg-slate-950/30 dark:text-slate-200 dark:ring-white/10 dark:hover:bg-slate-900/50\",\n  primary:\n    \"border-brand-200/80 bg-brand-50/70 text-brand-800 ring-brand-900/5 hover:bg-brand-50 dark:border-brand-900/40 dark:bg-brand-950/25 dark:text-brand-200 dark:ring-brand-300/10 dark:hover:bg-brand-950/35\",\n  success:\n    \"border-emerald-200/80 bg-emerald-50/70 text-emerald-800 ring-emerald-900/5 hover:bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200 dark:ring-emerald-300/10 dark:hover:bg-emerald-950/30\",\n  warning:\n    \"border-amber-200/80 bg-amber-50/70 text-amber-900 ring-amber-900/5 hover:bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200 dark:ring-amber-300/10 dark:hover:bg-amber-950/30\",\n  danger:\n    \"border-rose-200/80 bg-rose-50/70 text-rose-900 ring-rose-900/5 hover:bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200 dark:ring-rose-300/10 dark:hover:bg-rose-950/30\"\n} as const;\n\nconst SIZE_STYLES = {\n  xs: \"px-2 py-0.5 text-[11px]\",\n  sm: \"px-2.5 py-1 text-xs\"\n} as const;\n\nexport interface UIChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  tone?: keyof typeof TONE_STYLES;\n  size?: keyof typeof SIZE_STYLES;\n}\n\nexport default function UIChip({ tone = \"neutral\", size = \"xs\", className = \"\", children, ...rest }: UIChipProps) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center gap-1 rounded-full border font-semibold shadow-sm ring-1 transition\",\n        SIZE_STYLES[size],\n        TONE_STYLES[tone],\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["TONE_STYLES","SIZE_STYLES","UIChip","tone","size","className","children","rest","jsx"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,SACE;AAAA,EACF,SACE;AAAA,EACF,SACE;AAAA,EACF,SACE;AAAA,EACF,QACE;AACJ,GAEMC,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,SAAwBC,EAAO,EAAE,MAAAC,IAAO,WAAW,MAAAC,IAAO,MAAM,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAqB;AAChH,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAP,EAAYG,CAAI;AAAA,QAChBJ,EAAYG,CAAI;AAAA,QAChBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/library/ui/Container.d.ts

@@ -1,13 +1,12 @@
-export default function UIContainer({ title, subtitle, description, actions, empty, emptyText, emptyIcon, emptyHeight, className, style, children }: {
-    title: any;
-    subtitle: any;
-    description: any;
-    actions: any;
-    empty?: boolean | undefined;
-    emptyText?: string | undefined;
-    emptyIcon: any;
-    emptyHeight?: number | undefined;
-    className?: string | undefined;
-    style: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export interface UIContainerProps extends React.HTMLAttributes<HTMLElement> {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    actions?: React.ReactNode;
+    empty?: boolean;
+    emptyText?: string;
+    emptyIcon?: React.ReactNode;
+    emptyHeight?: number;
+}
+export default function UIContainer({ title, subtitle, description, actions, empty, emptyText, emptyIcon, emptyHeight, className, style, children }: UIContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/ui/Container.js

@@ -1,42 +1,41 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import "react";
-import i from "./Text.js";
-function N({
+import d from "./Text.js";
+function g({
   title: r,
   subtitle: a,
-  description: m,
+  description: n,
   actions: l,
-  empty: n = !1,
+  empty: m = !1,
   emptyText: c = "Nothing here yet.",
-  emptyIcon: d,
-  emptyHeight: o = 160,
-  className: h = "",
+  emptyIcon: i,
+  emptyHeight: h = 160,
+  className: o = "",
   style: f,
   children: u
 }) {
-  const t = a ?? m;
-  return /* @__PURE__ */ s("section", { className: h, style: f, children: [
+  const t = a ?? n;
+  return /* @__PURE__ */ s("section", { className: o, style: f, children: [
     (r || t || l) && /* @__PURE__ */ s("div", { className: "mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between", children: [
       /* @__PURE__ */ s("div", { className: "min-w-0", children: [
-        r && /* @__PURE__ */ e(i, { as: "h2", size: "lg", weight: "bold", className: "truncate", children: r }),
-        t && /* @__PURE__ */ e(i, { as: "p", size: "sm", muted: !0, className: "mt-1", children: t })
+        r && /* @__PURE__ */ e(d, { as: "h2", size: "lg", weight: "bold", className: "truncate", children: r }),
+        t && /* @__PURE__ */ e(d, { as: "p", size: "sm", muted: !0, className: "mt-1", children: t })
       ] }),
       l && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: l })
     ] }),
-    n ? /* @__PURE__ */ s(
+    m ? /* @__PURE__ */ s(
       "div",
       {
         className: "flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 text-center dark:border-slate-700 dark:bg-slate-900/40",
-        style: { minHeight: o },
+        style: { minHeight: h },
         children: [
-          d ? /* @__PURE__ */ e("div", { className: "mb-2", children: d }) : null,
-          /* @__PURE__ */ e(i, { size: "sm", muted: !0, children: c })
+          i ? /* @__PURE__ */ e("div", { className: "mb-2", children: i }) : null,
+          /* @__PURE__ */ e(d, { size: "sm", muted: !0, children: c })
         ]
       }
     ) : u
   ] });
 }
 export {
-  N as default
+  g as default
 };
 //# sourceMappingURL=Container.js.map

package/dist/components/library/ui/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/library/ui/Container.jsx"],"sourcesContent":["import React from \"react\";\nimport UIText from \"./Text\";\n\nexport default function UIContainer({\n  title,\n  subtitle,\n  description,\n  actions,\n  empty = false,\n  emptyText = \"Nothing here yet.\",\n  emptyIcon,\n  emptyHeight = 160,\n  className = \"\",\n  style,\n  children\n}) {\n  const sub = subtitle ?? description;\n\n  return (\n    <section className={className} style={style}>\n      {(title || sub || actions) && (\n        <div className=\"mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between\">\n          <div className=\"min-w-0\">\n            {title && (\n              <UIText as=\"h2\" size=\"lg\" weight=\"bold\" className=\"truncate\">\n                {title}\n              </UIText>\n            )}\n            {sub && (\n              <UIText as=\"p\" size=\"sm\" muted className=\"mt-1\">\n                {sub}\n              </UIText>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n        </div>\n      )}\n\n      {empty ? (\n        <div\n          className=\"flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 text-center dark:border-slate-700 dark:bg-slate-900/40\"\n          style={{ minHeight: emptyHeight }}\n        >\n          {emptyIcon ? <div className=\"mb-2\">{emptyIcon}</div> : null}\n          <UIText size=\"sm\" muted>\n            {emptyText}\n          </UIText>\n        </div>\n      ) : (\n        children\n      )}\n    </section>\n  );\n}\n\n\n"],"names":["UIContainer","title","subtitle","description","actions","empty","emptyText","emptyIcon","emptyHeight","className","style","children","sub","jsxs","jsx","UIText"],"mappings":";;;AAGA,SAAwBA,EAAY;AAAA,EAClC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AACF,GAAG;AACD,QAAMC,IAAMV,KAAYC;AAExB,SACE,gBAAAU,EAAC,WAAA,EAAQ,WAAAJ,GAAsB,OAAAC,GAC3B,UAAA;AAAA,KAAAT,KAASW,KAAOR,MAChB,gBAAAS,EAAC,OAAA,EAAI,WAAU,wEACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,QAAAZ,KACC,gBAAAa,EAACC,GAAA,EAAO,IAAG,MAAK,MAAK,MAAK,QAAO,QAAO,WAAU,YAC/C,UAAAd,EAAA,CACH;AAAA,QAEDW,KACC,gBAAAE,EAACC,GAAA,EAAO,IAAG,KAAI,MAAK,MAAK,OAAK,IAAC,WAAU,QACtC,UAAAH,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCR,KAAW,gBAAAU,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAV,EAAA,CAAQ;AAAA,IAAA,GACzE;AAAA,IAGDC,IACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,WAAWL,EAAA;AAAA,QAEnB,UAAA;AAAA,UAAAD,IAAY,gBAAAO,EAAC,OAAA,EAAI,WAAU,QAAQ,aAAU,IAAS;AAAA,4BACtDC,GAAA,EAAO,MAAK,MAAK,OAAK,IACpB,UAAAT,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGFK;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/library/ui/Container.tsx"],"sourcesContent":["import * as React from \"react\";\nimport UIText from \"./Text\";\n\nexport interface UIContainerProps extends React.HTMLAttributes<HTMLElement> {\n  title?: string;\n  subtitle?: string;\n  description?: string;\n  actions?: React.ReactNode;\n  empty?: boolean;\n  emptyText?: string;\n  emptyIcon?: React.ReactNode;\n  emptyHeight?: number;\n}\n\nexport default function UIContainer({\n  title,\n  subtitle,\n  description,\n  actions,\n  empty = false,\n  emptyText = \"Nothing here yet.\",\n  emptyIcon,\n  emptyHeight = 160,\n  className = \"\",\n  style,\n  children\n}: UIContainerProps) {\n  const sub = subtitle ?? description;\n\n  return (\n    <section className={className} style={style}>\n      {(title || sub || actions) && (\n        <div className=\"mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between\">\n          <div className=\"min-w-0\">\n            {title && (\n              <UIText as=\"h2\" size=\"lg\" weight=\"bold\" className=\"truncate\">\n                {title}\n              </UIText>\n            )}\n            {sub && (\n              <UIText as=\"p\" size=\"sm\" muted className=\"mt-1\">\n                {sub}\n              </UIText>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n        </div>\n      )}\n\n      {empty ? (\n        <div\n          className=\"flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 text-center dark:border-slate-700 dark:bg-slate-900/40\"\n          style={{ minHeight: emptyHeight }}\n        >\n          {emptyIcon ? <div className=\"mb-2\">{emptyIcon}</div> : null}\n          <UIText size=\"sm\" muted>\n            {emptyText}\n          </UIText>\n        </div>\n      ) : (\n        children\n      )}\n    </section>\n  );\n}\n"],"names":["UIContainer","title","subtitle","description","actions","empty","emptyText","emptyIcon","emptyHeight","className","style","children","sub","jsxs","jsx","UIText"],"mappings":";;AAcA,SAAwBA,EAAY;AAAA,EAClC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMV,KAAYC;AAExB,SACE,gBAAAU,EAAC,WAAA,EAAQ,WAAAJ,GAAsB,OAAAC,GAC3B,UAAA;AAAA,KAAAT,KAASW,KAAOR,MAChB,gBAAAS,EAAC,OAAA,EAAI,WAAU,wEACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACZ,UAAA;AAAA,QAAAZ,KACC,gBAAAa,EAACC,GAAA,EAAO,IAAG,MAAK,MAAK,MAAK,QAAO,QAAO,WAAU,YAC/C,UAAAd,EAAA,CACH;AAAA,QAEDW,KACC,gBAAAE,EAACC,GAAA,EAAO,IAAG,KAAI,MAAK,MAAK,OAAK,IAAC,WAAU,QACtC,UAAAH,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCR,KAAW,gBAAAU,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAV,EAAA,CAAQ;AAAA,IAAA,GACzE;AAAA,IAGDC,IACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,WAAWL,EAAA;AAAA,QAEnB,UAAA;AAAA,UAAAD,IAAY,gBAAAO,EAAC,OAAA,EAAI,WAAU,QAAQ,aAAU,IAAS;AAAA,4BACtDC,GAAA,EAAO,MAAK,MAAK,OAAK,IACpB,UAAAT,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGFK;AAAA,EAAA,GAEJ;AAEJ;"}