@ramme-io/ui 4.1.0 → 4.1.1

package/README.md

@@ -225,7 +225,7 @@ Props, variants and live examples are in Storybook (`pnpm run storybook`) and at
 | `MenuDivider` | `@atom/primitive/menu-divider` | A visual separator for grouping MenuItems within a Menu. |
 | `MenuItem` | `@atom/primitive/menu-item` | An individual selectable item within a Menu component. |
 | `Message` | `@molecule/ai/message` | Displays a single message in a conversation, including an avatar, author, content, and optional suggestions. |
-| `MobileNav` | `@molecule/nav/mobile-nav` | A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a "More" drawer for secondary links. |
+| `MobileNav` | `@molecule/nav/mobile-nav` | Mobile navigation, in two shapes. |
 | `MultiSelect` | `@molecule/form/multi-select` | A searchable dropdown for picking several options at once, rendering selections as removable chips. |
 | `NewsSummaryCard` | `@molecule/ai/news-summary-card` | AI-generated news summary card with recent headlines |
 | `PageHeader` | `@atom/templates-patterns/page-header` | Displays the main header section of a page, including a title, optional description, and a slot for action buttons. |
@@ -253,7 +253,7 @@ Props, variants and live examples are in Storybook (`pnpm run storybook`) and at
 | `Tabs` | `@molecule/nav/tabs` | A navigation component that allows users to switch between different content panels within the same area. |
 | `TelemetryGraph` | `@molecule/ai/telemetry-graph` | AI-generated telemetry visualization component |
 | `TelemetryLog` | `@molecule/iot/telemetry-log` | A scrolling, newest-first table of raw sensor readings with a bounded row count. |
-| `Textarea` | `@atom/form/textarea` | A theme-aware textarea component for multi-line text input. |
+| `Textarea` | `@atom/form/textarea` | A theme-aware multi-line text input with label, helper text, and validation state support. |
 | `TippyTooltip` | `@molecule/feedback/tippy-tooltip` | A flexible and theme-aware tooltip component that displays additional information on hover. |
 | `Toast` | `@molecule/feedback/toast` | A single, transient notification message that appears briefly to provide feedback. |
 | `ToastProvider` | `@molecule/feedback/toast-provider` | Provides a context for displaying transient notifications (toasts). |
@@ -262,7 +262,7 @@ Props, variants and live examples are in Storybook (`pnpm run storybook`) and at
 | `WatchlistEngine` | `@molecule/block/watchlist-engine` | A self-contained financial watchlist showing tickers with live price, day change, market cap, and a risk grade. |
 | `WaterPumpControl` | `@molecule/iot/water-pump-control` | An irrigation control block: choose automatic or manual operation and set the soil-moisture target the controller should hold. |
 
-### Layouts (32)
+### Layouts (33)
 
 | Name | SKU | What it is |
 | --- | --- | --- |
@@ -294,6 +294,7 @@ Props, variants and live examples are in Storybook (`pnpm run storybook`) and at
 | `Modal` | `@chassis/layout/modal` | A centered dialog that blocks interaction with the page until dismissed. |
 | `PageContainer` | `@chassis/layout/page-container` | Standard responsive padding wrapper for the content inside a page. |
 | `SettingsContainer` | `@chassis/layout/settings-container` | The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. |
+| `Sheet` | `@chassis/layout/sheet` | A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. |
 | `Sidebar` | `@chassis/layout/sidebar` | A collapsible, theme-aware application navigation rail. |
 | `Statusbar` | `@chassis/layout/statusbar` | The persistent strip pinned to the bottom of the app shell. |
 | `Toolbar` | `@chassis/layout/toolbar` | The secondary action strip that sits beneath the header. |

package/dist/component-registry.js

@@ -22,8 +22,8 @@ import { AuthLayout as g } from "./components/auth/AuthLayout.js";
 import { LoginPage as b } from "./components/auth/LoginPage.js";
 import { SignupPage as C } from "./components/auth/SignupPage.js";
 import { ActivityFeed as y } from "./components/data-display/ActivityFeed.js";
-import { AreaChart as v } from "./components/data-display/AreaChart.js";
-import { BarChart as S } from "./components/data-display/BarChart.js";
+import { AreaChart as S } from "./components/data-display/AreaChart.js";
+import { BarChart as v } from "./components/data-display/BarChart.js";
 import { ChartWithTable as T } from "./components/data-display/ChartWithTable.js";
 import { CodeBlock as D } from "./components/data-display/CodeBlock.js";
 import { DataTable as A } from "./components/data-display/DataTable.js";
@@ -77,25 +77,26 @@ import { PageContainer as dr } from "./components/layout/PageContainer.js";
 import { PageHeader as lr } from "./components/layout/PageHeader.js";
 import { SectionHeader as fr } from "./components/layout/SectionHeader.js";
 import { SettingsContainer as sr } from "./components/layout/SettingsContainer.js";
-import { Sidebar as zr } from "./components/layout/Sidebar.js";
-import { Statusbar as Jr } from "./components/layout/Statusbar.js";
-import { Toolbar as Vr } from "./components/layout/Toolbar.js";
+import { Sheet as zr } from "./components/layout/Sheet.js";
+import { Sidebar as Jr } from "./components/layout/Sidebar.js";
+import { Statusbar as Vr } from "./components/layout/Statusbar.js";
+import { Toolbar as Xr } from "./components/layout/Toolbar.js";
 import { ButtonItem as ur, UserNav as hr } from "./components/layout/UserNav.js";
 import { ConnectorOverlay as gr } from "./components/molecular/ConnectorOverlay.js";
 import { DataCard as br } from "./components/molecular/DataCard.js";
 import { StateMatrix as Cr } from "./components/molecular/StateMatrix.js";
-import { Breadcrumbs as Xr, BreadcrumbItem as yr } from "./components/navigation/Breadcrumbs.js";
-import { Menu as Zr, MenuItem as vr, MenuDivider as Sr } from "./components/navigation/Menu.js";
+import { Breadcrumbs as Zr, BreadcrumbItem as yr } from "./components/navigation/Breadcrumbs.js";
+import { Menu as $r, MenuItem as Sr, MenuDivider as vr } from "./components/navigation/Menu.js";
 import { MobileNav as Tr } from "./components/navigation/MobileNav.js";
-import { Pagination as $r } from "./components/navigation/Pagination.js";
-import { Stepper as rt } from "./components/navigation/Stepper.js";
-import { Tabs as tt, TabPanel as Dr } from "./components/navigation/Tabs.js";
-import { Avatar as et } from "./components/ui/Avatar.js";
-import { Badge as ot } from "./components/ui/Badge.js";
+import { Pagination as rt } from "./components/navigation/Pagination.js";
+import { Stepper as tt } from "./components/navigation/Stepper.js";
+import { Tabs as et, TabPanel as Dr } from "./components/navigation/Tabs.js";
+import { Avatar as ot } from "./components/ui/Avatar.js";
+import { Badge as at } from "./components/ui/Badge.js";
 import { BrandLogo as Ar } from "./components/ui/BrandLogo.js";
-import { Button as at } from "./components/ui/Button.js";
-import { Icon as it } from "./components/ui/Icon.js";
-const Je = {
+import { Button as it } from "./components/ui/Button.js";
+import { Icon as mt } from "./components/ui/Icon.js";
+const Xe = {
   Suggestion: Pr,
   suggestion: Pr,
   Actions: Br,
@@ -166,12 +167,12 @@ const Je = {
   ActivityFeed: y,
   "activity-feed": y,
   activityfeed: y,
-  AreaChart: v,
-  "area-chart": v,
-  areachart: v,
-  BarChart: S,
-  "bar-chart": S,
-  barchart: S,
+  AreaChart: S,
+  "area-chart": S,
+  areachart: S,
+  BarChart: v,
+  "bar-chart": v,
+  barchart: v,
   ChartWithTable: T,
   "chart-with-table": T,
   chartwithtable: T,
@@ -346,12 +347,14 @@ const Je = {
   SettingsContainer: sr,
   "settings-container": sr,
   settingscontainer: sr,
-  Sidebar: zr,
-  sidebar: zr,
-  Statusbar: Jr,
-  statusbar: Jr,
-  Toolbar: Vr,
-  toolbar: Vr,
+  Sheet: zr,
+  sheet: zr,
+  Sidebar: Jr,
+  sidebar: Jr,
+  Statusbar: Vr,
+  statusbar: Vr,
+  Toolbar: Xr,
+  toolbar: Xr,
   UserNav: hr,
   "user-nav": hr,
   usernav: hr,
@@ -370,40 +373,40 @@ const Je = {
   BreadcrumbItem: yr,
   "breadcrumb-item": yr,
   breadcrumbitem: yr,
-  Breadcrumbs: Xr,
-  breadcrumbs: Xr,
-  MenuDivider: Sr,
-  "menu-divider": Sr,
-  menudivider: Sr,
-  MenuItem: vr,
-  "menu-item": vr,
-  menuitem: vr,
-  Menu: Zr,
-  menu: Zr,
+  Breadcrumbs: Zr,
+  breadcrumbs: Zr,
+  MenuDivider: vr,
+  "menu-divider": vr,
+  menudivider: vr,
+  MenuItem: Sr,
+  "menu-item": Sr,
+  menuitem: Sr,
+  Menu: $r,
+  menu: $r,
   MobileNav: Tr,
   "mobile-nav": Tr,
   mobilenav: Tr,
-  Pagination: $r,
-  pagination: $r,
-  Stepper: rt,
-  stepper: rt,
+  Pagination: rt,
+  pagination: rt,
+  Stepper: tt,
+  stepper: tt,
   TabPanel: Dr,
   "tab-panel": Dr,
   tabpanel: Dr,
-  Tabs: tt,
-  tabs: tt,
-  Avatar: et,
-  avatar: et,
-  Badge: ot,
-  badge: ot,
+  Tabs: et,
+  tabs: et,
+  Avatar: ot,
+  avatar: ot,
+  Badge: at,
+  badge: at,
   BrandLogo: Ar,
   "brand-logo": Ar,
   brandlogo: Ar,
-  Button: at,
-  button: at,
-  Icon: it,
-  icon: it
+  Button: it,
+  button: it,
+  Icon: mt,
+  icon: mt
 };
 export {
-  Je as AUTO_REGISTRY
+  Xe as AUTO_REGISTRY
 };

package/dist/components/ai/AIChatThread/AIChatThread.js

@@ -1,5 +1,5 @@
 import { jsxs as c, jsx as t, Fragment as w } from "react/jsx-runtime";
-import { useState as R, useRef as B, useEffect as D, useCallback as N } from "react";
+import { useState as B, useRef as R, useEffect as D, useCallback as N } from "react";
 import { CodeBlock as G } from "../../data-display/CodeBlock.js";
 import { Icon as C } from "../../ui/Icon.js";
 import { PromptInput as $ } from "../../../blocks/ai/PromptInput.js";
@@ -91,12 +91,12 @@ const W = () => /* @__PURE__ */ t("div", { className: "flex items-center gap-1 p
   activeModel: i,
   connectionStatus: d,
   renderMessage: u,
-  placeholder: f = "Ask Ramme AI...",
+  placeholder: f = "Ask AI…",
   className: h,
   suggestions: s,
   onSuggestionClick: k
 }) => {
-  const _ = d ?? (a ? "error" : l ? "streaming" : "idle"), [b, y] = R(""), v = B(null);
+  const _ = d ?? (a ? "error" : l ? "streaming" : "idle"), [b, y] = B(""), v = R(null);
   D(() => {
     var r;
     (r = v.current) == null || r.scrollIntoView({ behavior: "smooth", block: "end" });

package/dist/components/ai/NewsSummaryCard/NewsSummaryCard.js

@@ -1,41 +1,41 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { useState as i, useEffect as g } from "react";
 import { Card as N, CardHeader as b, CardTitle as w, CardContent as y } from "../../layout/Card.js";
-import { Icon as a } from "../../ui/Icon.js";
+import { Icon as s } from "../../ui/Icon.js";
 const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k = ({ params: u }) => {
-  const { ticker: n } = u, [c, x] = i([]), [l, m] = i(!0), [o, p] = i(null);
+  const { ticker: a } = u, [c, x] = i([]), [l, m] = i(!0), [n, p] = i(null);
   return g(() => {
     (async () => {
       try {
         m(!0), p(null);
-        const s = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", f = await fetch(`${s}/companies/${n.toUpperCase()}/news?limit=5`);
+        const o = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", f = await fetch(`${o}/companies/${a.toUpperCase()}/news?limit=5`);
         if (!f.ok)
-          throw new Error(`No news available for ${n.toUpperCase()}`);
+          throw new Error(`No news available for ${a.toUpperCase()}`);
         const h = await f.json();
         x(h);
-      } catch (s) {
-        p(s instanceof Error ? s.message : "Failed to fetch news");
+      } catch (o) {
+        p(o instanceof Error ? o.message : "Failed to fetch news");
       } finally {
         m(!1);
       }
     })();
-  }, [n]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
+  }, [a]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
     /* @__PURE__ */ e(b, { className: "pb-3", children: /* @__PURE__ */ t(w, { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
-      /* @__PURE__ */ e(a, { name: "newspaper", size: 14 }),
+      /* @__PURE__ */ e(s, { name: "newspaper", size: 14 }),
       "Recent News · ",
-      n.toUpperCase()
+      a.toUpperCase()
     ] }) }),
     /* @__PURE__ */ t(y, { className: "pt-0", children: [
-      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(a, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
-      o && /* @__PURE__ */ t("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
-        /* @__PURE__ */ e(a, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
-        /* @__PURE__ */ e("span", { children: o })
+      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(s, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
+      n && /* @__PURE__ */ t("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
+        /* @__PURE__ */ e(s, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
+        /* @__PURE__ */ e("span", { children: n })
       ] }),
-      c.length === 0 && !l && !o && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-        /* @__PURE__ */ e(a, { name: "inbox", size: 24, opacity: 0.5 }),
+      c.length === 0 && !l && !n && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+        /* @__PURE__ */ e(s, { name: "inbox", size: 24, opacity: 0.5 }),
         /* @__PURE__ */ e("p", { className: "text-sm", children: "No recent news available" })
       ] }),
-      c.length > 0 && !l && !o && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r, s) => /* @__PURE__ */ e(
+      c.length > 0 && !l && !n && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r) => /* @__PURE__ */ e(
         "div",
         {
           className: "border-b border-border/50 pb-3 last:border-0 last:pb-0",
@@ -64,7 +64,7 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k =
                 ] })
               ] })
             ] }),
-            r.url && /* @__PURE__ */ e(a, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
+            r.url && /* @__PURE__ */ e(s, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
           ] })
         },
         r.id

package/dist/components/ai/StockChart/StockChart.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import F from "react";
-import { ResponsiveContainer as W, ComposedChart as _, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
+import _ from "react";
+import { ResponsiveContainer as F, ComposedChart as W, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
 import { Card as E, CardHeader as H, CardTitle as L, CardContent as V } from "../../layout/Card.js";
 import { useChartTheme as Y } from "../../../lib/hooks/useChartTheme.js";
 function G(s, p, C) {
@@ -59,7 +59,7 @@ const b = {
   data: C
 }) => {
   var y, k;
-  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = F.useMemo(
+  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
     () => {
       const t = C || G(r, o);
       return console.log("[StockChart] Data generated:", {
@@ -98,7 +98,7 @@ const b = {
       ] })
     ] }) }),
     /* @__PURE__ */ a(V, { className: "pt-0", children: [
-      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(W, { width: "100%", height: 256, children: /* @__PURE__ */ a(_, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ a(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
         /* @__PURE__ */ e(K, { strokeDasharray: "3 3", stroke: l, opacity: 0.3 }),
         /* @__PURE__ */ e(
           U,

package/dist/components/auth/LoginPage.d.ts

@@ -10,6 +10,9 @@ import React from 'react';
  * @param {string} error - Message shown above the form when sign-in fails.
  * @param {boolean} loading - Disables the form and shows progress while authenticating.
  * @param {QuickProfile[]} quickProfiles - Optional one-click demo identities, each `{ name, email, role }`.
+ * @param {string} signupHref - Where "Create one" points. Pass `null` to hide that line entirely, which is what an invite-only product wants. Defaults to `/auth/signup`.
+ * @param {string} signupLabel - Text for that link. Defaults to "Create one".
+ * @param {string} forgotHref - Where "Forgot?" points. Pass `null` to hide it — a product with no reset email has nothing to link to. Defaults to `#`.
  */
 export interface QuickProfile {
     name: string;
@@ -21,5 +24,24 @@ export interface LoginPageProps {
     error?: string | null;
     loading?: boolean;
     quickProfiles?: QuickProfile[];
+    /**
+     * Where "Create one" goes, or `null` to hide the line.
+     *
+     * Defaults to `/auth/signup` so every product that already renders this keeps
+     * exactly what it has. Invite-only products pass `null`: ramme.io deleted its
+     * signup route when accounts became invite-only, and this link kept pointing at
+     * it — a dead end offered to everyone who could not get in.
+     */
+    signupHref?: string | null;
+    signupLabel?: string;
+    /**
+     * Where "Forgot?" goes, or `null` to hide it.
+     *
+     * Defaults to `#`, which is what it has always been — a link that does nothing.
+     * Worth being able to remove: on a product with no reset email, offering a
+     * recovery link that goes nowhere is worse than saying so in plain words
+     * underneath the form.
+     */
+    forgotHref?: string | null;
 }
 export declare const LoginPage: React.FC<LoginPageProps>;

package/dist/components/auth/LoginPage.js

@@ -1,98 +1,106 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { Link as p } from "react-router-dom";
-import { Button as g } from "../ui/Button.js";
-import { Input as h } from "../forms/Input.js";
-import { Alert as b } from "../feedback/Alert.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Link as x } from "react-router-dom";
+import { Button as v } from "../ui/Button.js";
+import { Input as f } from "../forms/Input.js";
+import { Alert as y } from "../feedback/Alert.js";
 import { Icon as s } from "../ui/Icon.js";
-const S = ({ onLogin: f, error: l, loading: i, quickProfiles: r }) => {
-  const [n, o] = u(""), [c, d] = u(""), x = (a) => {
-    a.preventDefault(), f(n, c);
-  }, m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
-  return /* @__PURE__ */ t("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
+const A = ({
+  onLogin: g,
+  error: l,
+  loading: i,
+  quickProfiles: r,
+  signupHref: n = "/auth/signup",
+  signupLabel: b = "Create one",
+  forgotHref: o = "#"
+}) => {
+  const [c, d] = h(""), [m, u] = h(""), N = (t) => {
+    t.preventDefault(), g(c, m);
+  }, p = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
+  return /* @__PURE__ */ a("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
       /* @__PURE__ */ e("div", { className: "h-10 w-10 bg-primary/10 rounded-xl flex items-center justify-center mb-2 border border-primary/20", children: /* @__PURE__ */ e(s, { name: "hexagon", className: "text-primary fill-primary/20", size: 24, strokeWidth: 2.5 }) }),
       /* @__PURE__ */ e("h1", { className: "text-2xl font-bold tracking-tight", children: "Welcome back" }),
       /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "Enter your credentials to access your workspace" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
-      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ t("form", { onSubmit: x, className: "space-y-4", children: [
-        l && /* @__PURE__ */ e(b, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ e("label", { htmlFor: "email", className: m, children: "Email" }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+    /* @__PURE__ */ a("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ a("form", { onSubmit: N, className: "space-y-4", children: [
+        l && /* @__PURE__ */ e(y, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "email", className: p, children: "Email" }),
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "mail", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "email",
                 type: "email",
                 placeholder: "name@example.com",
                 className: "pl-9 h-10 bg-background/50",
-                value: n,
-                onChange: (a) => o(a.target.value),
+                value: c,
+                onChange: (t) => d(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ e("label", { htmlFor: "password", className: m, children: "Password" }),
-            /* @__PURE__ */ e(p, { to: "#", className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e("label", { htmlFor: "password", className: p, children: "Password" }),
+            o !== null && /* @__PURE__ */ e(x, { to: o, className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
           ] }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "lock", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "password",
                 type: "password",
                 className: "pl-9 h-10 bg-background/50",
-                value: c,
-                onChange: (a) => d(a.target.value),
+                value: m,
+                onChange: (t) => u(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ e(g, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
+        /* @__PURE__ */ e(v, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
       ] }) }),
-      r && r.length > 0 && /* @__PURE__ */ t("div", { className: "px-6 pb-6 space-y-3", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      r && r.length > 0 && /* @__PURE__ */ a("div", { className: "px-6 pb-6 space-y-3", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t border-border/50" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Quick Select Profiles" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((a) => /* @__PURE__ */ t(
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((t) => /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: () => {
-              o(a.email), d("demo");
+              d(t.email), u("demo");
             },
             className: "flex flex-col items-start p-3 text-left border rounded-lg hover:border-primary hover:bg-primary/5 transition-all w-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-card",
             children: [
-              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: a.name }),
-              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: a.role })
+              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: t.name }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: t.role })
             ]
           },
-          a.email
+          t.email
         )) })
       ] }),
-      /* @__PURE__ */ t("div", { className: "p-6 pt-0 text-center", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      n !== null && /* @__PURE__ */ a("div", { className: "p-6 pt-0 text-center", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Or continue with" }) })
         ] }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ a("p", { className: "text-sm text-muted-foreground", children: [
           "Don't have an account?",
           " ",
-          /* @__PURE__ */ e(p, { to: "/auth/signup", className: "font-semibold text-primary hover:underline transition-all", children: "Create one" })
+          /* @__PURE__ */ e(x, { to: n, className: "font-semibold text-primary hover:underline transition-all", children: b })
         ] })
       ] })
     ] })
   ] });
 };
 export {
-  S as LoginPage
+  A as LoginPage
 };

package/dist/components/forms/ComboBox.js

@@ -2,7 +2,7 @@ import { jsxs as D, jsx as i } from "react/jsx-runtime";
 import { useState as l, useRef as g, useEffect as f, useCallback as K } from "react";
 import { Input as q } from "./Input.js";
 import { cn as p } from "../../utils/cn.js";
-const $ = ({
+const _ = ({
   options: t,
   label: v,
   value: a,
@@ -73,5 +73,5 @@ const $ = ({
   ] });
 };
 export {
-  $ as ComboBox
+  _ as ComboBox
 };

package/dist/components/forms/DatePicker.js

@@ -1,9 +1,10 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import n from "react-datepicker";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import s from "react";
+import b from "react-datepicker";
 import { cn as e } from "../../utils/cn.js";
-import { Icon as s } from "../ui/Icon.js";
+import { Icon as u } from "../ui/Icon.js";
 import "react-datepicker/dist/react-datepicker.css";
-const m = `
+const f = `
   .react-datepicker {
     font-family: inherit !important;
     background-color: rgb(var(--app-card-bg-color)) !important;
@@ -28,36 +29,40 @@ const m = `
   .react-datepicker__navigation-icon::before {
     border-color: rgb(var(--app-text-color)) !important;
   }
-`, x = ({
+`, y = ({
   label: o,
-  selected: i,
-  onChange: d,
-  className: l,
+  selected: l,
+  onChange: n,
+  className: p,
   error: t,
   helperText: a,
-  ...p
-}) => /* @__PURE__ */ c("div", { className: e("w-full flex flex-col", l), children: [
-  /* @__PURE__ */ r("style", { children: m }),
-  o && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
-  /* @__PURE__ */ c("div", { className: "relative", children: [
-    /* @__PURE__ */ r(
-      n,
-      {
-        selected: i,
-        onChange: d,
-        className: e(
-          "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          t ? "border-destructive" : "border-input"
-        ),
-        wrapperClassName: "w-full",
-        showPopperArrow: !1,
-        ...p
-      }
-    ),
-    /* @__PURE__ */ r("div", { className: "absolute right-3 top-2.5 pointer-events-none text-muted-foreground", children: /* @__PURE__ */ r(s, { name: "calendar", className: "h-4 w-4" }) })
-  ] }),
-  a && /* @__PURE__ */ r("p", { className: e("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: a })
-] });
+  ...c
+}) => {
+  const m = s.useId(), i = c.id || m;
+  return /* @__PURE__ */ d("div", { className: e("w-full flex flex-col", p), children: [
+    /* @__PURE__ */ r("style", { children: f }),
+    o && /* @__PURE__ */ r("label", { htmlFor: i, className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        b,
+        {
+          id: i,
+          selected: l,
+          onChange: n,
+          className: e(
+            "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            t ? "border-destructive" : "border-input"
+          ),
+          wrapperClassName: "w-full",
+          showPopperArrow: !1,
+          ...c
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "absolute right-3 top-2.5 pointer-events-none text-muted-foreground", children: /* @__PURE__ */ r(u, { name: "calendar", className: "h-4 w-4" }) })
+    ] }),
+    a && /* @__PURE__ */ r("p", { className: e("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: a })
+  ] });
+};
 export {
-  x as DatePicker
+  y as DatePicker
 };