@giddaa-housing/ui 3.9.1 → 3.10.0

package/dist/styles.css

@@ -19,6 +19,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --container-md: 28rem;
     --container-3xl: 48rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -167,6 +168,7 @@
     --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;
+    --animate-kanban-card-flash: kanban-card-flash 0.7s ease-out;
   }
 }
 @layer base {
@@ -385,6 +387,9 @@
   .inset-y-0 {
     inset-block: 0;
   }
+  .-top-1\.5 {
+    top: calc(var(--spacing) * -1.5);
+  }
   .-top-2 {
     top: calc(var(--spacing) * -2);
   }
@@ -463,6 +468,9 @@
   .right-gdt-sm {
     right: var(--spacing-gdt-sm);
   }
+  .-bottom-1\.5 {
+    bottom: calc(var(--spacing) * -1.5);
+  }
   .-bottom-6 {
     bottom: calc(var(--spacing) * -6);
   }
@@ -817,6 +825,10 @@
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
   }
+  .size-1 {
+    width: var(--spacing);
+    height: var(--spacing);
+  }
   .size-1\.5 {
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
@@ -1126,6 +1138,9 @@
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
+  .min-h-44 {
+    min-height: calc(var(--spacing) * 44);
+  }
   .min-h-48 {
     min-height: calc(var(--spacing) * 48);
   }
@@ -1243,12 +1258,12 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
-  .w-60 {
-    width: calc(var(--spacing) * 60);
-  }
   .w-65 {
     width: calc(var(--spacing) * 65);
   }
+  .w-70 {
+    width: calc(var(--spacing) * 70);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -1306,6 +1321,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1321,9 +1339,6 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-32 {
-    max-width: calc(var(--spacing) * 32);
-  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
@@ -1378,9 +1393,18 @@
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
+  .max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] {
+    max-width: min(20rem, calc(100vw - 2rem));
+  }
+  .max-w-\[min\(22rem\,calc\(100vw-2rem\)\)\] {
+    max-width: min(22rem, calc(100vw - 2rem));
+  }
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-none {
     max-width: none;
   }
@@ -1453,6 +1477,9 @@
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-60 {
+    min-width: calc(var(--spacing) * 60);
+  }
   .min-w-\[calc\(var\(--anchor-width\)\)\] {
     min-width: calc(var(--anchor-width));
   }
@@ -1621,6 +1648,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -4597,10 +4627,10 @@
       justify-content: flex-start;
     }
   }
-  .group-data-\[orientation\=vertical\]\/tabs\:border-l {
+  .group-data-\[orientation\=vertical\]\/tabs\:border-r {
     &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
     }
   }
   .group-data-\[orientation\=vertical\]\/tabs\:border-line-subtle {
@@ -5869,11 +5899,6 @@
       background-color: var(--color-surface);
     }
   }
-  .group-data-\[variant\=underline\]\/tabs-list\:-mb-px {
-    &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
-      margin-bottom: -1px;
-    }
-  }
   .group-data-\[variant\=underline\]\/tabs-list\:rounded-none {
     &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
       border-radius: 0;
@@ -5928,6 +5953,13 @@
       }
     }
   }
+  .group-data-\[orientation\=horizontal\]\/tabs\:group-data-\[variant\=underline\]\/tabs-list\:-mb-px {
+    &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
+      &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
+        margin-bottom: -1px;
+      }
+    }
+  }
   .group-data-\[orientation\=horizontal\]\/tabs\:group-data-\[variant\=underline\]\/tabs-list\:h-0\.5\! {
     &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
       &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
@@ -5957,6 +5989,13 @@
       }
     }
   }
+  .group-data-\[orientation\=vertical\]\/tabs\:group-data-\[variant\=underline\]\/tabs-list\:-mr-px {
+    &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
+      &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
+        margin-right: -1px;
+      }
+    }
+  }
   .group-data-\[orientation\=vertical\]\/tabs\:group-data-\[variant\=underline\]\/tabs-list\:w-0\.5\! {
     &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
       &:is(:where(.group\/tabs-list)[data-variant="underline"] *) {
@@ -6965,6 +7004,11 @@
       scale: 0.99;
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
   .active\:border-line-strong {
     &:active {
       border-color: var(--color-line-strong);
@@ -7221,21 +7265,6 @@
       cursor: not-allowed;
     }
   }
-  .has-disabled\:border-line-subtle {
-    &:has(*:disabled) {
-      border-color: var(--color-line-subtle);
-    }
-  }
-  .has-disabled\:bg-surface {
-    &:has(*:disabled) {
-      background-color: var(--color-surface);
-    }
-  }
-  .has-disabled\:text-fg-caption-placeholder {
-    &:has(*:disabled) {
-      color: var(--color-fg-caption-placeholder);
-    }
-  }
   .has-disabled\:opacity-50 {
     &:has(*:disabled) {
       opacity: 50%;
@@ -7444,6 +7473,51 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .has-\[\[data-slot\=input-group-control\]\:disabled\]\:border-line-subtle {
+    &:has(*:is([data-slot=input-group-control]:disabled)) {
+      border-color: var(--color-line-subtle);
+    }
+  }
+  .has-\[\[data-slot\=input-group-control\]\:disabled\]\:bg-surface {
+    &:has(*:is([data-slot=input-group-control]:disabled)) {
+      background-color: var(--color-surface);
+    }
+  }
+  .has-\[\[data-slot\=input-group-control\]\:disabled\]\:text-fg-caption-placeholder {
+    &:has(*:is([data-slot=input-group-control]:disabled)) {
+      color: var(--color-fg-caption-placeholder);
+    }
+  }
+  .group-data-\[orientation\=horizontal\]\/tabs\:has-\[\[data-slot\=scroll-spy-list\]\[data-variant\=underline\]\]\:border-b {
+    &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
+      &:has(*:is([data-slot=scroll-spy-list][data-variant=underline])) {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+  .group-data-\[orientation\=horizontal\]\/tabs\:has-\[\[data-slot\=scroll-spy-list\]\[data-variant\=underline\]\]\:border-line-subtle {
+    &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
+      &:has(*:is([data-slot=scroll-spy-list][data-variant=underline])) {
+        border-color: var(--color-line-subtle);
+      }
+    }
+  }
+  .group-data-\[orientation\=vertical\]\/tabs\:has-\[\[data-slot\=scroll-spy-list\]\[data-variant\=underline\]\]\:border-r {
+    &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
+      &:has(*:is([data-slot=scroll-spy-list][data-variant=underline])) {
+        border-right-style: var(--tw-border-style);
+        border-right-width: 1px;
+      }
+    }
+  }
+  .group-data-\[orientation\=vertical\]\/tabs\:has-\[\[data-slot\=scroll-spy-list\]\[data-variant\=underline\]\]\:border-line-subtle {
+    &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
+      &:has(*:is([data-slot=scroll-spy-list][data-variant=underline])) {
+        border-color: var(--color-line-subtle);
+      }
+    }
+  }
   .has-\[\[data-slot\=table-card-action\]\]\:cursor-pointer {
     &:has(*:is([data-slot=table-card-action])) {
       cursor: pointer;
@@ -7465,6 +7539,42 @@
       --tw-inset-ring-color: var(--color-line-focus);
     }
   }
+  .has-\[\[data-slot\=tabs-list\]\[data-variant\=underline\]\]\:border-b {
+    &:has(*:is([data-slot=tabs-list][data-variant=underline])) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .group-data-\[orientation\=horizontal\]\/tabs\:has-\[\[data-slot\=tabs-list\]\[data-variant\=underline\]\]\:border-b {
+    &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
+      &:has(*:is([data-slot=tabs-list][data-variant=underline])) {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+  .group-data-\[orientation\=horizontal\]\/tabs\:has-\[\[data-slot\=tabs-list\]\[data-variant\=underline\]\]\:border-line-subtle {
+    &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {
+      &:has(*:is([data-slot=tabs-list][data-variant=underline])) {
+        border-color: var(--color-line-subtle);
+      }
+    }
+  }
+  .group-data-\[orientation\=vertical\]\/tabs\:has-\[\[data-slot\=tabs-list\]\[data-variant\=underline\]\]\:border-r {
+    &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
+      &:has(*:is([data-slot=tabs-list][data-variant=underline])) {
+        border-right-style: var(--tw-border-style);
+        border-right-width: 1px;
+      }
+    }
+  }
+  .group-data-\[orientation\=vertical\]\/tabs\:has-\[\[data-slot\=tabs-list\]\[data-variant\=underline\]\]\:border-line-subtle {
+    &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {
+      &:has(*:is([data-slot=tabs-list][data-variant=underline])) {
+        border-color: var(--color-line-subtle);
+      }
+    }
+  }
   .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-line-danger {
     &:has(*:is([data-slot][aria-invalid=true])) {
       border-color: var(--color-line-danger);
@@ -7929,6 +8039,16 @@
       }
     }
   }
+  .data-dragging\:opacity-40 {
+    &[data-dragging] {
+      opacity: 40%;
+    }
+  }
+  .data-drop-target\:border-line-strong {
+    &[data-drop-target] {
+      border-color: var(--color-line-strong);
+    }
+  }
   .data-empty\:p-0 {
     &[data-empty] {
       padding: 0;
@@ -8106,6 +8226,11 @@
       }
     }
   }
+  .data-just-moved\:animate-kanban-card-flash {
+    &[data-just-moved] {
+      animation: var(--animate-kanban-card-flash);
+    }
+  }
   .data-loading\:animate-pulse {
     &[data-loading] {
       animation: var(--animate-pulse);
@@ -9828,6 +9953,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-safe\:scroll-smooth {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
   .motion-reduce\:hidden {
     @media (prefers-reduced-motion: reduce) {
       display: none;
@@ -14165,6 +14295,14 @@
     opacity: 0;
   }
 }
+@keyframes kanban-card-flash {
+  0%,	40% {
+    box-shadow: 0 0 0 2px var(--color-line-focus);
+  }
+  100% {
+    box-shadow: 0 0 0 2px transparent;
+  }
+}
 @layer base {
   body {
     display: flex;

package/dist/tabs.d.ts

@@ -8,6 +8,36 @@ type TabsListVariant = "default" | "line" | "secondary" | "underline";
  * looks the design system ships: `underline` (Primary) and `secondary` (Pill).
  */
 declare function resolveTabsListVariant(variant: TabsListVariant): "secondary" | "underline";
+/**
+ * Marks that a `TabsListContainer` (or `ScrollSpyListContainer`) is above us,
+ * so the list knows to hand the baseline rule over instead of drawing it
+ * itself. Exported for `scroll-spy.tsx`, which shares the whole bar.
+ */
+declare const TabsListContainerContext: import("react").Context<boolean>;
+declare function useInTabsListContainer(): boolean;
+/**
+ * Layout shared by `TabsListContainer` and `ScrollSpyListContainer`. Kept
+ * separate from the rule below because the two match their own list's slot.
+ */
+declare const tabsListContainerBaseClassName: string;
+/**
+ * Container styling. Owns the baseline rule the list used to draw for itself,
+ * so padding put on the container insets the tabs while the line still runs
+ * the container's full width — and so overflow controls can sit beside the
+ * list without the rule stopping short of them.
+ *
+ * The rule keys off the list's own `data-variant` rather than a prop of its
+ * own, so `variant` stays in one place (`TabsList`) and a pill list can never
+ * leave a stray line behind it.
+ */
+declare const tabsListContainerClassName: string;
+/**
+ * Optional wrapper around `TabsList`. Use it when the bar needs padding the
+ * tabs shouldn't inherit — a full-bleed rule under an inset row of tabs — or
+ * when something other than a tab has to sit in the bar. Without it `TabsList`
+ * keeps drawing its own rule, so existing markup is unaffected.
+ */
+declare function TabsListContainer({ className, children, ...props }: ComponentPropsWithoutRef<"div">): import("react").JSX.Element;
 declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
   /**
    * @deprecated Pass `size` to `TabsList` instead — the root is
@@ -18,6 +48,7 @@ declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Pr
 }): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
   variant?: "secondary" | "underline" | null | undefined;
+  standalone?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, size, children, ...props }: Tabs$1.List.Props & {
   variant?: TabsListVariant;
@@ -47,8 +78,13 @@ type TabsCountProps = ComponentPropsWithoutRef<"span"> & {
   max?: number;
   /** Render a pulsing placeholder while the count is being fetched. */
   loading?: boolean;
+  /**
+   * Slot name, so `ScrollSpyCount` can keep the spy's own naming while sharing
+   * this implementation. Not something consuming apps need to set.
+   */
+  "data-slot"?: string;
 };
-declare function TabsCount({ className, count, abbreviate, max, loading, children, ...props }: TabsCountProps): import("react").JSX.Element;
+declare function TabsCount({ className, count, abbreviate, max, loading, children, "data-slot": dataSlot, ...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, type TabsListVariant, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName };
+export { Tabs, TabsContent, TabsCount, type TabsCountProps, TabsList, TabsListContainer, TabsListContainerContext, type TabsListVariant, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListContainerBaseClassName, tabsListContainerClassName, tabsListVariants, tabsTriggerClassName, useInTabsListContainer };

package/dist/tabs.js

@@ -3,6 +3,7 @@ import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { createContext, useContext } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.tsx
 /**
@@ -12,6 +13,48 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 function resolveTabsListVariant(variant) {
 	return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
 }
+/**
+* Marks that a `TabsListContainer` (or `ScrollSpyListContainer`) is above us,
+* so the list knows to hand the baseline rule over instead of drawing it
+* itself. Exported for `scroll-spy.tsx`, which shares the whole bar.
+*/
+const TabsListContainerContext = createContext(false);
+function useInTabsListContainer() {
+	return useContext(TabsListContainerContext);
+}
+/**
+* Layout shared by `TabsListContainer` and `ScrollSpyListContainer`. Kept
+* separate from the rule below because the two match their own list's slot.
+*/
+const tabsListContainerBaseClassName = cn("group/tabs-list-container relative flex min-w-0 items-stretch", "group-data-[orientation=vertical]/tabs:flex-col");
+/**
+* Container styling. Owns the baseline rule the list used to draw for itself,
+* so padding put on the container insets the tabs while the line still runs
+* the container's full width — and so overflow controls can sit beside the
+* list without the rule stopping short of them.
+*
+* The rule keys off the list's own `data-variant` rather than a prop of its
+* own, so `variant` stays in one place (`TabsList`) and a pill list can never
+* leave a stray line behind it.
+*/
+const tabsListContainerClassName = cn(tabsListContainerBaseClassName, "group-data-[orientation=horizontal]/tabs:has-[[data-slot=tabs-list][data-variant=underline]]:border-b group-data-[orientation=horizontal]/tabs:has-[[data-slot=tabs-list][data-variant=underline]]:border-line-subtle", "group-data-[orientation=vertical]/tabs:has-[[data-slot=tabs-list][data-variant=underline]]:border-r group-data-[orientation=vertical]/tabs:has-[[data-slot=tabs-list][data-variant=underline]]:border-line-subtle");
+/**
+* Optional wrapper around `TabsList`. Use it when the bar needs padding the
+* tabs shouldn't inherit — a full-bleed rule under an inset row of tabs — or
+* when something other than a tab has to sit in the bar. Without it `TabsList`
+* keeps drawing its own rule, so existing markup is unaffected.
+*/
+function TabsListContainer({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(TabsListContainerContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "tabs-list-container",
+			className: cn(tabsListContainerClassName, className),
+			...props,
+			children
+		})
+	});
+}
 function Tabs({ className, orientation = "horizontal", size, ...props }) {
 	const root = /* @__PURE__ */ jsx(Tabs$1.Root, {
 		"data-slot": "tabs",
@@ -25,20 +68,43 @@ function Tabs({ className, orientation = "horizontal", size, ...props }) {
 	}) : root;
 }
 const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=vertical]/tabs:flex-col"), {
-	variants: { variant: {
-		underline: cn("rounded-none bg-transparent p-0", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"),
-		secondary: "rounded-4xl bg-transparent p-0"
-	} },
-	defaultVariants: { variant: "underline" }
+	variants: {
+		variant: {
+			underline: "rounded-none bg-transparent p-0",
+			secondary: "rounded-4xl bg-transparent p-0"
+		},
+		/**
+		* The baseline rule belongs to `TabsListContainer` when there is one,
+		* so it can span padding the tabs don't sit in. A list on its own is
+		* still the bar, and draws the rule itself.
+		*/
+		standalone: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		variant: "underline",
+		standalone: true,
+		class: cn("group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:border-r group-data-[orientation=vertical]/tabs:border-line-subtle")
+	}],
+	defaultVariants: {
+		variant: "underline",
+		standalone: true
+	}
 });
 function TabsList({ className, variant = "underline", size, children, ...props }) {
 	const resolvedVariant = resolveTabsListVariant(variant);
 	const resolvedSize = useComponentSize(size);
+	const inContainer = useInTabsListContainer();
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
 		"data-slot": "tabs-list",
 		"data-variant": resolvedVariant,
 		"data-size": resolvedSize,
-		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		className: cn(tabsListVariants({
+			variant: resolvedVariant,
+			standalone: !inContainer
+		}), className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: tabsIndicatorClassName })]
 	});
@@ -56,7 +122,7 @@ const tabsIndicatorClassName = cn("pointer-events-none absolute left-0 top-0 z-0
 * off the parent `group/tabs-list`, so it stays in sync wherever it lives
 * inside a `Tabs` tree.
 */
-const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs-list:text-gdt-xs group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs-list:text-gdt-sm group-data-[size=md]/tabs-list:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs-list:text-gdt-md group-data-[size=lg]/tabs-list:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:py-2", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
+const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs-list:text-gdt-xs group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs-list:text-gdt-sm group-data-[size=md]/tabs-list:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs-list:text-gdt-md group-data-[size=lg]/tabs-list:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:py-2", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:-mb-px group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:-mr-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
 function TabsTrigger({ className, nativeButton = true, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
@@ -93,7 +159,7 @@ function formatTabsCount(value, { abbreviate, max }) {
 	if (max !== void 0 && value > max) return `${abbreviate ? abbreviateCount(max) : max}+`;
 	return abbreviate ? abbreviateCount(value) : String(value);
 }
-function TabsCount({ className, count, abbreviate, max, loading, children, ...props }) {
+function TabsCount({ className, count, abbreviate, max, loading, children, "data-slot": dataSlot = "tabs-count", ...props }) {
 	const content = loading ? /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: "invisible",
@@ -103,7 +169,7 @@ function TabsCount({ className, count, abbreviate, max, loading, children, ...pr
 		max
 	}) : children;
 	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "tabs-count",
+		"data-slot": dataSlot,
 		"data-loading": loading || void 0,
 		"aria-busy": loading || void 0,
 		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs-list:h-4 group-data-[size=sm]/tabs-list:min-w-4 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-[10px]", "group-data-[size=md]/tabs-list:h-5 group-data-[size=md]/tabs-list:min-w-5 group-data-[size=md]/tabs-list:px-1 group-data-[size=md]/tabs-list:text-[11px]", "group-data-[size=lg]/tabs-list:h-5 group-data-[size=lg]/tabs-list:min-w-5 group-data-[size=lg]/tabs-list:px-1.5 group-data-[size=lg]/tabs-list:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse motion-reduce:data-loading:animate-none", className),
@@ -119,4 +185,4 @@ function TabsContent({ className, ...props }) {
 	});
 }
 //#endregion
-export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName };
+export { Tabs, TabsContent, TabsCount, TabsList, TabsListContainer, TabsListContainerContext, TabsTrigger, resolveTabsListVariant, tabsIndicatorClassName, tabsListContainerBaseClassName, tabsListContainerClassName, tabsListVariants, tabsTriggerClassName, useInTabsListContainer };

package/dist/time-picker.d.ts

@@ -1,5 +1,5 @@
 import { InputSizeValue } from "./input.js";
-import { t as PickerPlacementProps } from "./picker-qxWi9wZ1.js";
+import { t as PickerPlacementProps } from "./picker-QtFHPRqg.js";
 import * as React from "react";
 //#region src/time-picker.d.ts
 interface TimePickerProps extends PickerPlacementProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -205,6 +205,10 @@
       "types": "./dist/item.d.ts",
       "import": "./dist/item.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban.d.ts",
+      "import": "./dist/kanban.js"
+    },
     "./kpi-card": {
       "types": "./dist/kpi-card.d.ts",
       "import": "./dist/kpi-card.js"
@@ -446,6 +450,9 @@
     "react-dom": ">=18.3.0 || >=19.0.0"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.0",
     "@base-ui/react": "^1.5.0",
     "@tanstack/react-virtual": "^3.14.7",
     "@tiptap/extension-color": "^3.22.5",