@storm-ds/ui 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -3800,6 +3800,184 @@ function SonnerToastItem({ toast, onDismiss }) {
 }
 SonnerProvider.displayName = "SonnerProvider";
 SonnerToaster.displayName = "SonnerToaster";
+
+// src/components/MetricCard.tsx
+import { forwardRef as forwardRef59 } from "react";
+import { jsx as jsx59, jsxs as jsxs23 } from "react/jsx-runtime";
+var MetricCard = forwardRef59(
+  ({ className, label, value, change, changeLabel, ...props }, ref) => {
+    const isPositive = change?.startsWith("+");
+    const isNegative = change?.startsWith("-");
+    return /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-storm-lg border border-storm-border bg-storm-background p-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx59("p", { className: "text-[10px] font-medium text-storm-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx59("p", { className: "text-lg font-bold text-storm-foreground mt-0.5", children: value }),
+          change && /* @__PURE__ */ jsxs23("p", { className: "text-[10px] text-storm-muted-foreground mt-0.5", children: [
+            /* @__PURE__ */ jsx59("span", { className: cn(isPositive && "text-green-500", isNegative && "text-red-500"), children: change }),
+            changeLabel && /* @__PURE__ */ jsxs23("span", { children: [
+              " ",
+              changeLabel
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+MetricCard.displayName = "MetricCard";
+
+// src/components/PasswordInput.tsx
+import { forwardRef as forwardRef60, useState as useState16 } from "react";
+import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
+var sizeStyles17 = {
+  sm: "h-8 px-3 py-1.5 text-sm",
+  md: "h-10 px-4 py-2 text-base",
+  lg: "h-12 px-6 py-3 text-lg"
+};
+var toggleSizeStyles = {
+  sm: "right-1 h-6 w-6",
+  md: "right-1.5 h-7 w-7",
+  lg: "right-2 h-8 w-8"
+};
+var iconSizeStyles = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var PasswordInput = forwardRef60(
+  ({ className, size = "md", error, ...props }, ref) => {
+    const [visible, setVisible] = useState16(false);
+    return /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx60(
+        "input",
+        {
+          ref,
+          type: visible ? "text" : "password",
+          "aria-invalid": error || void 0,
+          className: cn(
+            "w-full rounded-storm-md border bg-storm-background text-storm-foreground transition-colors pr-10",
+            "placeholder:text-storm-muted-foreground",
+            error ? "border-storm-destructive focus-visible:ring-storm-destructive" : "border-storm-border focus-visible:border-storm-primary",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-storm-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+            sizeStyles17[size],
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx60(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          onClick: () => setVisible((v) => !v),
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-storm-sm",
+            "text-storm-muted-foreground hover:text-storm-foreground transition-colors",
+            toggleSizeStyles[size]
+          ),
+          children: visible ? /* @__PURE__ */ jsxs24("svg", { className: iconSizeStyles[size], viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx60("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+            /* @__PURE__ */ jsx60("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+            /* @__PURE__ */ jsx60("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+          ] }) : /* @__PURE__ */ jsxs24("svg", { className: iconSizeStyles[size], viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx60("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+            /* @__PURE__ */ jsx60("circle", { cx: "12", cy: "12", r: "3" })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/components/ListItem.tsx
+import { forwardRef as forwardRef61 } from "react";
+import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
+var ListItem = forwardRef61(
+  ({ className, leading, title, subtitle, trailing, truncate = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center gap-3", className),
+        ...props,
+        children: [
+          leading && /* @__PURE__ */ jsx61("div", { className: "shrink-0", children: leading }),
+          /* @__PURE__ */ jsxs25("div", { className: cn("flex-1", truncate && "min-w-0"), children: [
+            /* @__PURE__ */ jsx61("p", { className: cn("text-sm font-medium text-storm-foreground", truncate && "truncate"), children: title }),
+            subtitle && /* @__PURE__ */ jsx61("p", { className: cn("text-xs text-storm-muted-foreground", truncate && "truncate"), children: subtitle })
+          ] }),
+          trailing && /* @__PURE__ */ jsx61("div", { className: "shrink-0", children: trailing })
+        ]
+      }
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+
+// src/components/NavItem.tsx
+import { forwardRef as forwardRef62 } from "react";
+import { jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
+var NavItem = forwardRef62(
+  ({ className, active, icon, badge, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs26(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "w-full flex items-center gap-3 rounded-storm-sm px-2 py-1.5 text-sm font-medium transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-storm-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          active ? "bg-storm-muted text-storm-foreground" : "text-storm-muted-foreground hover:text-storm-foreground hover:bg-storm-accent/10",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx62("span", { className: "shrink-0", children: icon }),
+          /* @__PURE__ */ jsx62("span", { className: "flex-1 text-left", children }),
+          badge && /* @__PURE__ */ jsx62("span", { className: "shrink-0", children: badge })
+        ]
+      }
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+
+// src/components/PageHeader.tsx
+import { forwardRef as forwardRef63 } from "react";
+import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
+var PageHeader = forwardRef63(
+  ({ className, title, description, badge, actions, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs27(
+      "div",
+      {
+        ref,
+        className: cn("flex items-start justify-between gap-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs27("div", { children: [
+            badge && /* @__PURE__ */ jsx63("div", { className: "mb-1", children: badge }),
+            /* @__PURE__ */ jsx63("h2", { className: "text-xl font-bold text-storm-foreground", children: title }),
+            description && /* @__PURE__ */ jsx63("p", { className: "text-sm text-storm-muted-foreground mt-1", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx63("div", { className: "shrink-0 flex items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
 export {
   Accordion,
   AccordionContent,
@@ -3894,6 +4072,7 @@ export {
   Item,
   Kbd,
   Label,
+  ListItem,
   Menubar,
   MenubarContent,
   MenubarItem,
@@ -3901,15 +4080,19 @@ export {
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
+  MetricCard,
   NativeSelect,
+  NavItem,
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
+  PageHeader,
   Pagination,
   PaginationEllipsis,
   PaginationItem,
   PaginationNext,
   PaginationPrevious,
+  PasswordInput,
   Popover,
   PopoverContent,
   PopoverTrigger,