@giddaa-housing/ui 3.2.0 → 3.3.0

package/dist/styles.css

@@ -578,9 +578,6 @@
   .row-start-2 {
     grid-row-start: 2;
   }
-  .row-start-3 {
-    grid-row-start: 3;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -1414,6 +1411,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -2207,10 +2207,10 @@
       background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
     }
   }
-  .bg-black\/80 {
-    background-color: color-mix(in srgb, #000 80%, transparent);
+  .bg-black\/70 {
+    background-color: color-mix(in srgb, #000 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
     }
   }
   .bg-black\/90 {
@@ -2884,6 +2884,9 @@
   .wrap-break-word {
     overflow-wrap: break-word;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3173,6 +3176,10 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3985,6 +3992,11 @@
       background-color: var(--color-line-danger);
     }
   }
+  .group-has-\[\[data-slot\=alert-title\]\]\/alert\:row-start-2 {
+    &:is(:where(.group\/alert):has(*:is([data-slot=alert-title])) *) {
+      grid-row-start: 2;
+    }
+  }
   .group-has-\[\>input\]\/input-group\:pt-2 {
     &:is(:where(.group\/input-group):has(>input) *) {
       padding-top: calc(var(--spacing) * 2);
@@ -6435,12 +6447,12 @@
       }
     }
   }
-  .hover\:bg-black\/90 {
+  .hover\:bg-black\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #000 90%, transparent);
+        background-color: color-mix(in srgb, #000 80%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
+          background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
         }
       }
     }
@@ -6934,6 +6946,14 @@
       }
     }
   }
+  .active\:not-aria-\[haspopup\]\:translate-y-0 {
+    &:active {
+      &:not(*[aria-haspopup]) {
+        --tw-translate-y: 0;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .active\:not-aria-\[haspopup\]\:translate-y-px {
     &:active {
       &:not(*[aria-haspopup]) {
@@ -9586,6 +9606,21 @@
       margin-top: calc(var(--spacing) * -1);
     }
   }
+  .supports-backdrop-filter\:bg-black\/40 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: color-mix(in srgb, #000 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+      }
+    }
+  }
+  .supports-backdrop-filter\:backdrop-blur-\[15px\] {
+    @supports (backdrop-filter: var(--tw)) {
+      --tw-backdrop-blur: blur(15px);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    }
+  }
   .supports-backdrop-filter\:backdrop-blur-xl {
     @supports (backdrop-filter: var(--tw)) {
       --tw-backdrop-blur: blur(var(--blur-xl));
@@ -9593,6 +9628,18 @@
       backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     }
   }
+  .supports-backdrop-filter\:hover\:bg-black\/55 {
+    @supports (backdrop-filter: var(--tw)) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #000 55%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
+          }
+        }
+      }
+    }
+  }
   .supports-\[backdrop-filter\]\:backdrop-blur-xl {
     @supports (backdrop-filter: var(--tw)) {
       --tw-backdrop-blur: blur(var(--blur-xl));
@@ -10034,6 +10081,13 @@
       flex-direction: column;
     }
   }
+  .max-sm\:group-has-\[\[data-slot\=alert-title\]\]\/alert\:row-start-3 {
+    @media (width < 40rem) {
+      &:is(:where(.group\/alert):has(*:is([data-slot=alert-title])) *) {
+        grid-row-start: 3;
+      }
+    }
+  }
   .sm\:top-4 {
     @media (width >= 40rem) {
       top: calc(var(--spacing) * 4);

package/dist/tabs.d.ts

@@ -3,6 +3,11 @@ import { ComponentPropsWithoutRef } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.d.ts
 type TabsListVariant = "default" | "line" | "secondary" | "underline";
+/**
+ * Keep friendly aliases in the public API, but collapse to the two concrete
+ * looks the design system ships: `underline` (Primary) and `secondary` (Pill).
+ */
+declare function resolveTabsListVariant(variant: TabsListVariant): "secondary" | "underline";
 declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
   /**
    * @deprecated Pass `size` to `TabsList` instead — the root is
@@ -18,6 +23,13 @@ declare function TabsList({ className, variant, size, children, ...props }: Tabs
   variant?: TabsListVariant;
   size?: ComponentSize;
 }): import("react").JSX.Element;
+/**
+ * Indicator styling, exported alongside `tabsTriggerClassName` so recipes that
+ * drive their own active state (e.g. `ScrollSpy`) can render the same sliding
+ * bar. Positions itself off the `--active-tab-*` custom properties, which Base
+ * UI sets on the list — anything reusing this has to set them too.
+ */
+declare const tabsIndicatorClassName: string;
 /**
  * Trigger styling, exported so recipes (e.g. an overflow "More" button that
  * isn't a real tab) can render the same look. Reads both `variant` and `size`
@@ -39,4 +51,4 @@ type TabsCountProps = ComponentPropsWithoutRef<"span"> & {
 declare function TabsCount({ className, count, abbreviate, max, loading, children, ...props }: TabsCountProps): import("react").JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): import("react").JSX.Element;
 //#endregion
-export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };
+export { Tabs, TabsContent, TabsCount, TabsList, type TabsListVariant, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName };

package/dist/tabs.js

@@ -40,10 +40,17 @@ function TabsList({ className, variant = "underline", size, children, ...props }
 		"data-size": resolvedSize,
 		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[translate,width,height] duration-200 ease-in-out motion-reduce:transition-none", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
+		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: tabsIndicatorClassName })]
 	});
 }
 /**
+* Indicator styling, exported alongside `tabsTriggerClassName` so recipes that
+* drive their own active state (e.g. `ScrollSpy`) can render the same sliding
+* bar. Positions itself off the `--active-tab-*` custom properties, which Base
+* UI sets on the list — anything reusing this has to set them too.
+*/
+const tabsIndicatorClassName = cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[translate,width,height] duration-200 ease-in-out motion-reduce:transition-none", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0");
+/**
 * Trigger styling, exported so recipes (e.g. an overflow "More" button that
 * isn't a real tab) can render the same look. Reads both `variant` and `size`
 * off the parent `group/tabs-list`, so it stays in sync wherever it lives
@@ -112,4 +119,4 @@ function TabsContent({ className, ...props }) {
 	});
 }
 //#endregion
-export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName };

package/dist/toast.js

@@ -1,3 +1,4 @@
+"use client";
 import { Check, Info, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -317,6 +317,10 @@
       "types": "./dist/scatter-chart.d.ts",
       "import": "./dist/scatter-chart.js"
     },
+    "./scroll-spy": {
+      "types": "./dist/scroll-spy.d.ts",
+      "import": "./dist/scroll-spy.js"
+    },
     "./search-input": {
       "types": "./dist/search-input.d.ts",
       "import": "./dist/search-input.js"