@storm-ds/ui 1.0.3 → 1.0.5

package/dist/index.d.mts

@@ -448,10 +448,10 @@ interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElem
 declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const sideStyles$1: {
-    readonly left: "inset-y-0 left-0 border-r border-storm-border data-[open]:animate-in data-[open]:slide-in-from-left";
-    readonly right: "inset-y-0 right-0 border-l border-storm-border data-[open]:animate-in data-[open]:slide-in-from-right";
-    readonly top: "inset-x-0 top-0 border-b border-storm-border data-[open]:animate-in data-[open]:slide-in-from-top";
-    readonly bottom: "inset-x-0 bottom-0 border-t border-storm-border data-[open]:animate-in data-[open]:slide-in-from-bottom";
+    readonly left: "inset-y-0 left-0 h-full border-r border-storm-border open:animate-in open:slide-in-from-left";
+    readonly right: "inset-y-0 right-0 h-full border-l border-storm-border open:animate-in open:slide-in-from-right";
+    readonly top: "inset-x-0 top-0 w-full border-b border-storm-border open:animate-in open:slide-in-from-top";
+    readonly bottom: "inset-x-0 bottom-0 w-full border-t border-storm-border open:animate-in open:slide-in-from-bottom";
 };
 interface SheetProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
     side?: keyof typeof sideStyles$1;

package/dist/index.d.ts

@@ -448,10 +448,10 @@ interface ToggleGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElem
 declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
 
 declare const sideStyles$1: {
-    readonly left: "inset-y-0 left-0 border-r border-storm-border data-[open]:animate-in data-[open]:slide-in-from-left";
-    readonly right: "inset-y-0 right-0 border-l border-storm-border data-[open]:animate-in data-[open]:slide-in-from-right";
-    readonly top: "inset-x-0 top-0 border-b border-storm-border data-[open]:animate-in data-[open]:slide-in-from-top";
-    readonly bottom: "inset-x-0 bottom-0 border-t border-storm-border data-[open]:animate-in data-[open]:slide-in-from-bottom";
+    readonly left: "inset-y-0 left-0 h-full border-r border-storm-border open:animate-in open:slide-in-from-left";
+    readonly right: "inset-y-0 right-0 h-full border-l border-storm-border open:animate-in open:slide-in-from-right";
+    readonly top: "inset-x-0 top-0 w-full border-b border-storm-border open:animate-in open:slide-in-from-top";
+    readonly bottom: "inset-x-0 bottom-0 w-full border-t border-storm-border open:animate-in open:slide-in-from-bottom";
 };
 interface SheetProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
     side?: keyof typeof sideStyles$1;

package/dist/index.js

@@ -451,7 +451,9 @@ var InputGroup = _react.forwardRef.call(void 0,
           "[&>*:first-child]:rounded-l-storm-md [&>*:first-child]:rounded-r-none",
           "[&>*:last-child]:rounded-r-storm-md [&>*:last-child]:rounded-l-none",
           "[&>*:not(:first-child):not(:last-child)]:rounded-none",
-          "[&>*:not(:first-child)]:-ml-0.5",
+          "[&>*]:relative",
+          "[&>*:not(:first-child)]:-ml-px",
+          "[&>*:focus-within]:z-10 [&>*:focus]:z-10",
           className
         ),
         ...props
@@ -497,13 +499,13 @@ var Alert = _react.forwardRef.call(void 0,
         role: "alert",
         className: cn(
           "relative w-full rounded-storm-md p-4",
-          icon ? "flex gap-3" : "",
+          icon ? "flex items-start gap-3" : "",
           variantStyles3[variant],
           className
         ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 [&>svg]:h-5 [&>svg]:w-5", children: icon }),
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mt-0.5 shrink-0 [&>svg]:h-5 [&>svg]:w-5", children: icon }),
           icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1", children }) : children
         ]
       }
@@ -1773,10 +1775,10 @@ ToggleGroupItem.displayName = "ToggleGroupItem";
 
 
 var sideStyles2 = {
-  left: "inset-y-0 left-0 border-r border-storm-border data-[open]:animate-in data-[open]:slide-in-from-left",
-  right: "inset-y-0 right-0 border-l border-storm-border data-[open]:animate-in data-[open]:slide-in-from-right",
-  top: "inset-x-0 top-0 border-b border-storm-border data-[open]:animate-in data-[open]:slide-in-from-top",
-  bottom: "inset-x-0 bottom-0 border-t border-storm-border data-[open]:animate-in data-[open]:slide-in-from-bottom"
+  left: "inset-y-0 left-0 h-full border-r border-storm-border open:animate-in open:slide-in-from-left",
+  right: "inset-y-0 right-0 h-full border-l border-storm-border open:animate-in open:slide-in-from-right",
+  top: "inset-x-0 top-0 w-full border-b border-storm-border open:animate-in open:slide-in-from-top",
+  bottom: "inset-x-0 bottom-0 w-full border-t border-storm-border open:animate-in open:slide-in-from-bottom"
 };
 var sizeMap = {
   left: { sm: "w-64", md: "w-80", lg: "w-96", xl: "w-[480px]", full: "w-screen" },
@@ -1791,7 +1793,7 @@ var Sheet = _react.forwardRef.call(void 0,
       {
         ref,
         className: cn(
-          "fixed z-50 m-0 bg-storm-background p-0 text-storm-foreground backdrop:bg-black/50",
+          "fixed z-50 m-0 max-h-none max-w-none bg-storm-background p-0 text-storm-foreground backdrop:bg-black/50",
           sideStyles2[side],
           sizeMap[side][size],
           className
@@ -3526,7 +3528,7 @@ function DataTableInner({ className, columns, data, pageSize = 10, searchable =
           setPage(0);
         },
         placeholder: searchPlaceholder,
-        className: "h-9 w-full max-w-sm rounded-storm-md border border-storm-border bg-storm-background px-3 text-sm text-storm-foreground placeholder:text-storm-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-storm-ring"
+        className: "h-9 w-full rounded-storm-md border border-storm-border bg-storm-background px-3 text-sm text-storm-foreground placeholder:text-storm-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-storm-ring"
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-storm-md border border-storm-border overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "w-full caption-bottom text-sm", children: [
@@ -3616,9 +3618,9 @@ var StormSidebar = _react.forwardRef.call(void 0,
         "data-side": side,
         "data-collapsed": collapsed ? "" : void 0,
         className: cn(
-          "flex flex-col border-storm-border bg-storm-background transition-[width] duration-200",
+          "flex shrink-0 flex-col border-storm-border bg-storm-background overflow-hidden transition-[width] duration-200",
           side === "left" ? "border-r" : "border-l order-last",
-          collapsed ? "w-16" : "w-64",
+          collapsed ? "w-14" : "w-64",
           className
         ),
         ...props,
@@ -3628,19 +3630,65 @@ var StormSidebar = _react.forwardRef.call(void 0,
   }
 );
 var SidebarHeader = _react.forwardRef.call(void 0, 
-  ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: cn("flex items-center h-14 px-4 border-b border-storm-border shrink-0", className), ...props })
+  ({ className, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center h-14 border-b border-storm-border shrink-0",
+          collapsed ? "justify-center px-0" : "gap-3 px-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 var SidebarContent = _react.forwardRef.call(void 0, 
-  ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: cn("flex-1 overflow-y-auto px-3 py-4 space-y-4", className), ...props })
+  ({ className, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex-1 overflow-y-auto py-4 space-y-4",
+          collapsed ? "px-2" : "px-3",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 var SidebarFooter = _react.forwardRef.call(void 0, 
-  ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: cn("flex items-center px-4 py-3 border-t border-storm-border shrink-0", className), ...props })
+  ({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center py-3 border-t border-storm-border shrink-0",
+          collapsed ? "justify-center px-2" : "px-4",
+          className
+        ),
+        ...props,
+        children: !collapsed && children
+      }
+    );
+  }
 );
 var SidebarGroup = _react.forwardRef.call(void 0, 
-  ({ className, label, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: cn("space-y-1", className), ...props, children: [
-    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-storm-muted-foreground", children: label }),
-    children
-  ] })
+  ({ className, label, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: cn("space-y-1", className), ...props, children: [
+      label && !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-storm-muted-foreground", children: label }),
+      children
+    ] });
+  }
 );
 var SidebarItem = _react.forwardRef.call(void 0, 
   ({ className, active, icon, children, ...props }, ref) => {
@@ -3651,9 +3699,9 @@ var SidebarItem = _react.forwardRef.call(void 0,
         ref,
         "data-active": active ? "" : void 0,
         className: cn(
-          "flex items-center gap-3 rounded-storm-sm px-3 py-2 text-sm cursor-pointer transition-colors",
+          "flex items-center rounded-storm-sm py-2 text-sm cursor-pointer transition-colors",
           active ? "bg-storm-muted text-storm-foreground font-medium" : "text-storm-muted-foreground hover:text-storm-foreground hover:bg-storm-muted/50",
-          collapsed && "justify-center px-0",
+          collapsed ? "justify-center px-2" : "gap-3 px-3",
           className
         ),
         ...props,