@giddaa-housing/ui 3.2.0 → 3.4.0

package/dist/styles.css

@@ -164,6 +164,7 @@
     --animate-accordion-up: accordion-up 0.2s ease-out;
     --animate-sonar-glow: sonar-glow 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-round-sonar-glow: round-sonar-glow 1.5s ease-out infinite;
+    --animate-sonar-wave: sonar-wave 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-spin-slow: spin 3s linear infinite;
   }
 }
@@ -578,9 +579,6 @@
   .row-start-2 {
     grid-row-start: 2;
   }
-  .row-start-3 {
-    grid-row-start: 3;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -724,6 +722,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -1414,6 +1415,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1555,6 +1559,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-sonar-wave {
+    animation: var(--animate-sonar-wave);
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -2207,10 +2214,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 +2891,9 @@
   .wrap-break-word {
     overflow-wrap: break-word;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3173,6 +3183,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));
@@ -3685,6 +3699,15 @@
   .\[--slider-track-size\:0\.375rem\] {
     --slider-track-size: 0.375rem;
   }
+  .\[--sonar-spread\:0\.375rem\] {
+    --sonar-spread: 0.375rem;
+  }
+  .\[--sonar-spread\:0\.625rem\] {
+    --sonar-spread: 0.625rem;
+  }
+  .\[--sonar-spread\:0\.875rem\] {
+    --sonar-spread: 0.875rem;
+  }
   .\[--switch-spinner-size\:0\.75rem\] {
     --switch-spinner-size: 0.75rem;
   }
@@ -3985,6 +4008,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 +6463,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 +6962,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 +9622,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 +9644,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));
@@ -9600,6 +9663,11 @@
       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,);
     }
   }
+  .motion-reduce\:hidden {
+    @media (prefers-reduced-motion: reduce) {
+      display: none;
+    }
+  }
   .motion-reduce\:scale-100 {
     @media (prefers-reduced-motion: reduce) {
       --tw-scale-x: 100%;
@@ -9613,6 +9681,17 @@
       animation: none;
     }
   }
+  .motion-reduce\:opacity-40 {
+    @media (prefers-reduced-motion: reduce) {
+      opacity: 40%;
+    }
+  }
+  .motion-reduce\:shadow-\[0_0_0_2px_currentColor\] {
+    @media (prefers-reduced-motion: reduce) {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, currentColor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .motion-reduce\:transition-colors {
     @media (prefers-reduced-motion: reduce) {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -10034,6 +10113,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);
@@ -12397,6 +12483,7 @@
     --animate-bouncing-loader: none;
     --animate-sonar-glow: none;
     --animate-round-sonar-glow: none;
+    --animate-sonar-wave: none;
     --animate-spin-slow: none;
   }
 }
@@ -12479,6 +12566,16 @@
     opacity: 0;
   }
 }
+@keyframes sonar-wave {
+  from {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.55;
+  }
+  to {
+    box-shadow: 0 0 0 var(--sonar-spread, 0.625rem) currentColor;
+    opacity: 0;
+  }
+}
 @layer base {
   body {
     display: flex;

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.4.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"
@@ -349,6 +353,10 @@
       "types": "./dist/skeleton.d.ts",
       "import": "./dist/skeleton.js"
     },
+    "./sonar": {
+      "types": "./dist/sonar.d.ts",
+      "import": "./dist/sonar.js"
+    },
     "./sparkline": {
       "types": "./dist/sparkline.d.ts",
       "import": "./dist/sparkline.js"