@schandlergarcia/sf-web-components 1.3.0 → 1.4.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/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/EmptyState.d.ts

@@ -1,10 +1,37 @@
+import * as React from "react";
+declare const SIZES: {
+    readonly sm: {
+        readonly icon: "h-8 w-8";
+        readonly heading: "text-sm";
+        readonly body: "text-xs";
+        readonly gap: "gap-2";
+        readonly pad: "py-6";
+    };
+    readonly md: {
+        readonly icon: "h-10 w-10";
+        readonly heading: "text-base";
+        readonly body: "text-sm";
+        readonly gap: "gap-3";
+        readonly pad: "py-10";
+    };
+    readonly lg: {
+        readonly icon: "h-14 w-14";
+        readonly heading: "text-lg";
+        readonly body: "text-sm";
+        readonly gap: "gap-4";
+        readonly pad: "py-16";
+    };
+};
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    heading?: string;
+    body?: string;
+    action?: React.ReactNode;
+    size?: keyof typeof SIZES;
+    className?: string;
+}
 /**
  * Empty state placeholder — shows when a list, table, or section has no content.
- *
- * @param {ReactNode}  icon      Optional icon element
- * @param {string}     heading   Primary message
- * @param {string}     body      Secondary description
- * @param {ReactNode}  action    Optional CTA (button, link, etc.)
- * @param {"sm"|"md"|"lg"} size  Visual density
  */
-export default function EmptyState({ icon, heading, body, action, size, className, }: ReactNode): import("react/jsx-runtime").JSX.Element;
+export default function EmptyState({ icon, heading, body, action, size, className, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,19 +1,18 @@
 import { jsxs as x, jsx as t } from "react/jsx-runtime";
-import "react";
-const i = {
+const c = {
   sm: { icon: "h-8 w-8", heading: "text-sm", body: "text-xs", gap: "gap-2", pad: "py-6" },
   md: { icon: "h-10 w-10", heading: "text-base", body: "text-sm", gap: "gap-3", pad: "py-10" },
   lg: { icon: "h-14 w-14", heading: "text-lg", body: "text-sm", gap: "gap-4", pad: "py-16" }
 };
-function r({
+function p({
   icon: a,
   heading: l = "Nothing here yet",
   body: s,
   action: d,
-  size: m = "md",
+  size: i = "md",
   className: n = ""
 }) {
-  const e = i[m] ?? i.md;
+  const e = c[i];
   return /* @__PURE__ */ x("div", { className: `flex flex-col items-center justify-center text-center ${e.pad} ${e.gap} ${n}`, children: [
     a && /* @__PURE__ */ t("div", { className: `${e.icon} text-slate-300 dark:text-slate-600`, children: a }),
     /* @__PURE__ */ t("div", { className: `${e.heading} font-semibold text-slate-700 dark:text-slate-200`, children: l }),
@@ -22,6 +21,6 @@ function r({
   ] });
 }
 export {
-  r as default
+  p as default
 };
 //# sourceMappingURL=EmptyState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/library/ui/EmptyState.jsx"],"sourcesContent":["import React from \"react\";\n\nconst SIZES = {\n  sm: { icon: \"h-8 w-8\", heading: \"text-sm\", body: \"text-xs\", gap: \"gap-2\", pad: \"py-6\" },\n  md: { icon: \"h-10 w-10\", heading: \"text-base\", body: \"text-sm\", gap: \"gap-3\", pad: \"py-10\" },\n  lg: { icon: \"h-14 w-14\", heading: \"text-lg\", body: \"text-sm\", gap: \"gap-4\", pad: \"py-16\" },\n};\n\n/**\n * Empty state placeholder — shows when a list, table, or section has no content.\n *\n * @param {ReactNode}  icon      Optional icon element\n * @param {string}     heading   Primary message\n * @param {string}     body      Secondary description\n * @param {ReactNode}  action    Optional CTA (button, link, etc.)\n * @param {\"sm\"|\"md\"|\"lg\"} size  Visual density\n */\nexport default function EmptyState({\n  icon,\n  heading = \"Nothing here yet\",\n  body,\n  action,\n  size = \"md\",\n  className = \"\",\n}) {\n  const s = SIZES[size] ?? SIZES.md;\n\n  return (\n    <div className={`flex flex-col items-center justify-center text-center ${s.pad} ${s.gap} ${className}`}>\n      {icon && (\n        <div className={`${s.icon} text-slate-300 dark:text-slate-600`}>\n          {icon}\n        </div>\n      )}\n      <div className={`${s.heading} font-semibold text-slate-700 dark:text-slate-200`}>\n        {heading}\n      </div>\n      {body && (\n        <div className={`${s.body} max-w-sm text-slate-500 dark:text-slate-400`}>\n          {body}\n        </div>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n}\n"],"names":["SIZES","EmptyState","icon","heading","body","action","size","className","s","jsxs","jsx"],"mappings":";;AAEA,MAAMA,IAAQ;AAAA,EACZ,IAAI,EAAE,MAAM,WAAW,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,OAAA;AAAA,EAC/E,IAAI,EAAE,MAAM,aAAa,SAAS,aAAa,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AAAA,EACnF,IAAI,EAAE,MAAM,aAAa,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AACnF;AAWA,SAAwBC,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AACd,GAAG;AACD,QAAMC,IAAIR,EAAMM,CAAI,KAAKN,EAAM;AAE/B,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAW,yDAAyDD,EAAE,GAAG,IAAIA,EAAE,GAAG,IAAID,CAAS,IACjG,UAAA;AAAA,IAAAL,uBACE,OAAA,EAAI,WAAW,GAAGM,EAAE,IAAI,uCACtB,UAAAN,EAAA,CACH;AAAA,sBAED,OAAA,EAAI,WAAW,GAAGM,EAAE,OAAO,qDACzB,UAAAL,GACH;AAAA,IACCC,uBACE,OAAA,EAAI,WAAW,GAAGI,EAAE,IAAI,gDACtB,UAAAJ,EAAA,CACH;AAAA,IAEDC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,EAAA,GAC3C;AAEJ;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/library/ui/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZES = {\n  sm: { icon: \"h-8 w-8\", heading: \"text-sm\", body: \"text-xs\", gap: \"gap-2\", pad: \"py-6\" },\n  md: { icon: \"h-10 w-10\", heading: \"text-base\", body: \"text-sm\", gap: \"gap-3\", pad: \"py-10\" },\n  lg: { icon: \"h-14 w-14\", heading: \"text-lg\", body: \"text-sm\", gap: \"gap-4\", pad: \"py-16\" },\n} as const;\n\nexport interface EmptyStateProps {\n  icon?: React.ReactNode;\n  heading?: string;\n  body?: string;\n  action?: React.ReactNode;\n  size?: keyof typeof SIZES;\n  className?: string;\n}\n\n/**\n * Empty state placeholder — shows when a list, table, or section has no content.\n */\nexport default function EmptyState({\n  icon,\n  heading = \"Nothing here yet\",\n  body,\n  action,\n  size = \"md\",\n  className = \"\",\n}: EmptyStateProps) {\n  const s = SIZES[size];\n\n  return (\n    <div className={`flex flex-col items-center justify-center text-center ${s.pad} ${s.gap} ${className}`}>\n      {icon && (\n        <div className={`${s.icon} text-slate-300 dark:text-slate-600`}>\n          {icon}\n        </div>\n      )}\n      <div className={`${s.heading} font-semibold text-slate-700 dark:text-slate-200`}>\n        {heading}\n      </div>\n      {body && (\n        <div className={`${s.body} max-w-sm text-slate-500 dark:text-slate-400`}>\n          {body}\n        </div>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n}\n"],"names":["SIZES","EmptyState","icon","heading","body","action","size","className","s","jsxs","jsx"],"mappings":";AAEA,MAAMA,IAAQ;AAAA,EACZ,IAAI,EAAE,MAAM,WAAW,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,OAAA;AAAA,EAC/E,IAAI,EAAE,MAAM,aAAa,SAAS,aAAa,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AAAA,EACnF,IAAI,EAAE,MAAM,aAAa,SAAS,WAAW,MAAM,WAAW,KAAK,SAAS,KAAK,QAAA;AACnF;AAcA,SAAwBC,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AACd,GAAoB;AAClB,QAAMC,IAAIR,EAAMM,CAAI;AAEpB,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAW,yDAAyDD,EAAE,GAAG,IAAIA,EAAE,GAAG,IAAID,CAAS,IACjG,UAAA;AAAA,IAAAL,uBACE,OAAA,EAAI,WAAW,GAAGM,EAAE,IAAI,uCACtB,UAAAN,EAAA,CACH;AAAA,sBAED,OAAA,EAAI,WAAW,GAAGM,EAAE,OAAO,qDACzB,UAAAL,GACH;AAAA,IACCC,uBACE,OAAA,EAAI,WAAW,GAAGI,EAAE,IAAI,gDACtB,UAAAJ,EAAA,CACH;AAAA,IAEDC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,EAAA,GAC3C;AAEJ;"}

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

@@ -1,8 +1,24 @@
+import * as React from "react";
+declare const SIZE_CLASSES: {
+    readonly xs: "h-3 w-3";
+    readonly sm: "h-4 w-4";
+    readonly md: "h-5 w-5";
+    readonly lg: "h-6 w-6";
+    readonly xl: "h-8 w-8";
+};
+declare const TONE_CLASSES: {
+    readonly brand: "text-brand-500";
+    readonly white: "text-white";
+    readonly muted: "text-slate-400 dark:text-slate-500";
+    readonly current: "text-current";
+};
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+    size?: keyof typeof SIZE_CLASSES;
+    tone?: keyof typeof TONE_CLASSES;
+    label?: string;
+}
 /**
  * Animated spinner.
- *
- * @param {"xs"|"sm"|"md"|"lg"|"xl"} size
- * @param {"brand"|"white"|"muted"|"current"} tone
- * @param {string} label — screen-reader label
  */
-export default function Spinner({ size, tone, label, className, ...rest }: "xs" | "sm" | "md" | "lg" | "xl"): import("react/jsx-runtime").JSX.Element;
+export default function Spinner({ size, tone, label, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,11 +1,22 @@
-export default function UIButton({ variant, size, fullWidth, disabled, onClick, children, style, className, ...rest }: {
-    [x: string]: any;
-    variant?: string | undefined;
-    size?: string | undefined;
-    fullWidth?: boolean | undefined;
-    disabled?: boolean | undefined;
-    onClick?: (() => void) | undefined;
-    children: any;
-    style?: undefined;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const VARIANT_CLASSES: {
+    readonly primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent";
+    readonly 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";
+    readonly destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent";
+    readonly 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";
+    readonly ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent";
+    readonly link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent";
+};
+declare const SIZE_CLASSES: {
+    readonly sm: "h-8 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-5 text-base";
+    readonly icon: "h-10 w-10 p-0";
+};
+export interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof VARIANT_CLASSES;
+    size?: keyof typeof SIZE_CLASSES;
+    fullWidth?: boolean;
+}
+export default function UIButton({ variant, size, fullWidth, disabled, className, children, ...rest }: UIButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,52 +1,47 @@
-import { jsx as h } from "react/jsx-runtime";
-import "react";
-const e = {
+import { jsx as b } from "react/jsx-runtime";
+const i = {
   primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
   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",
   destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
   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",
-  ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
-}, t = {
+  ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
+  link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
+}, g = {
   sm: "h-8 px-3 text-sm",
   md: "h-10 px-4 text-sm",
   lg: "h-12 px-5 text-base",
   icon: "h-10 w-10 p-0"
 };
-function c({
-  variant: r = "primary",
-  size: a = "md",
-  fullWidth: s = !1,
-  disabled: o = !1,
-  onClick: n = () => {
-  },
-  children: d,
-  style: i = void 0,
-  className: l = "",
-  ...b
+function u({
+  variant: e = "primary",
+  size: t = "md",
+  fullWidth: r = !1,
+  disabled: a = !1,
+  className: s = "",
+  children: n,
+  ...o
 }) {
-  const g = e[r] ?? e.primary, f = t[a] ?? t.md;
-  return /* @__PURE__ */ h(
+  const d = i[e], l = g[t];
+  return /* @__PURE__ */ b(
     "button",
     {
       type: "button",
-      onClick: n,
-      disabled: o,
-      style: i,
+      disabled: a,
       className: [
         "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
         "disabled:cursor-not-allowed disabled:opacity-60",
-        g,
-        f,
-        s ? "w-full" : "",
-        l
+        d,
+        l,
+        r ? "w-full" : "",
+        s
       ].filter(Boolean).join(" "),
-      ...b,
-      children: d
+      ...o,
+      children: n
     }
   );
 }
 export {
-  c as default
+  u as default
 };
 //# sourceMappingURL=UIButton.js.map

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

@@ -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  destructive:\n    \"bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 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  icon: \"h-10 w-10 p-0\"\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,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AACJ,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;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;"}
+{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.tsx"],"sourcesContent":["import * as 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  destructive:\n    \"bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 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  link: \"text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent\"\n} as const;\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  icon: \"h-10 w-10 p-0\"\n} as const;\n\nexport interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: keyof typeof VARIANT_CLASSES;\n  size?: keyof typeof SIZE_CLASSES;\n  fullWidth?: boolean;\n}\n\nexport default function UIButton({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  disabled = false,\n  className = \"\",\n  children,\n  ...rest\n}: UIButtonProps) {\n  const variantClass = VARIANT_CLASSES[variant];\n  const sizeClass = SIZE_CLASSES[size];\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\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"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","className","children","rest","variantClass","sizeClass","jsx"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AAAA,EACF,MAAM;AACR,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAQA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAeV,EAAgBG,CAAO,GACtCQ,IAAYV,EAAaG,CAAI;AAEnC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAAN;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAI;AAAA,QACAC;AAAA,QACAN,IAAY,WAAW;AAAA,QACvBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,5 +1,4 @@
-export default function UIInput({ style, className, ...rest }: {
-    [x: string]: any;
-    style?: undefined;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+export default function UIInput({ className, ...rest }: UIInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,21 @@
 import { jsx as o } from "react/jsx-runtime";
-import "react";
-function l({ style: e = void 0, className: t = "", ...r }) {
+function a({ className: e = "", ...t }) {
   return /* @__PURE__ */ o(
     "input",
     {
-      style: e,
       className: [
         "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm",
         "placeholder:text-slate-400",
         "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
         "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500",
-        t
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        e
       ].filter(Boolean).join(" "),
-      ...r
+      ...t
     }
   );
 }
 export {
-  l as default
+  a as default
 };
 //# sourceMappingURL=UIInput.js.map

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

@@ -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;"}
+{"version":3,"file":"UIInput.js","sources":["../../../../src/components/library/ui/UIInput.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport default function UIInput({ className = \"\", ...rest }: UIInputProps) {\n  return (\n    <input\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        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n}\n"],"names":["UIInput","className","rest","jsx"],"mappings":";AAIA,SAAwBA,EAAQ,EAAE,WAAAC,IAAY,IAAI,GAAGC,KAAsB;AACzE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -1,21 +1,23 @@
-export default function Alert({ variant, className, children, ...rest }: {
-    [x: string]: any;
-    variant?: string | undefined;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function AlertTitle({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function AlertDescription({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function AlertAction({ className, children, ...rest }: {
-    [x: string]: any;
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const VARIANT_CLASSES: {
+    readonly default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50";
+    readonly info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50";
+    readonly success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50";
+    readonly warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50";
+    readonly error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50";
+    readonly destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50";
+};
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: keyof typeof VARIANT_CLASSES;
+}
+export default function Alert({ variant, className, children, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+export declare function AlertTitle({ className, children, ...rest }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function AlertDescription({ className, children, ...rest }: AlertDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function AlertAction({ className, children, ...rest }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
+export { Alert };