@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/sidebar.js

@@ -1,32 +1,19 @@
 "use client";
 import { Menu } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Separator } from "./separator.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { useIsMobile } from "./utils/use-is-mobile.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-//#region src/lib/use-mobile.ts
-const DEFAULT_MOBILE_BREAKPOINT = 1024;
-function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
-	const [isMobile, setIsMobile] = React.useState(false);
-	React.useEffect(() => {
-		const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-		const update = () => setIsMobile(window.innerWidth < breakpoint);
-		update();
-		mediaQuery.addEventListener("change", update);
-		return () => mediaQuery.removeEventListener("change", update);
-	}, [breakpoint]);
-	return isMobile;
-}
-//#endregion
 //#region src/sidebar.tsx
 const SIDEBAR_LS_KEY = "sidebar_state";
 const SIDEBAR_WIDTH = "17.5rem";
@@ -121,6 +108,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
 			"data-mobile": "true",
+			popupClassName: "min-w-10/12 w-(--layout-nav-width) max-w-screen",
 			className: "min-w-10/12 w-(--layout-nav-width) max-w-screen border-none bg-surface p-0 text-fg-secondary [&>button]:hidden",
 			style: { "--layout-nav-width": SIDEBAR_WIDTH_MOBILE },
 			side: "right",

package/dist/size-context-BVhHduLi.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/size-context.d.ts
+type ComponentSize = "sm" | "md" | "lg";
+type ResponsiveValue<T extends string> = {
+  base: T;
+  md?: T;
+  lg?: T;
+};
+type ResolvedResponsiveValue<T extends string> = Required<ResponsiveValue<T>>;
+type ResponsiveComponentSize = ResponsiveValue<ComponentSize>;
+type ComponentSizeValue = ComponentSize | ResponsiveComponentSize;
+declare function useInheritedComponentSize(): ComponentSizeValue | undefined;
+declare function SizeProvider({ children, size }: {
+  children: ReactNode;
+  size?: ComponentSizeValue | null;
+}): import("react").JSX.Element;
+declare function useComponentSize(size?: ComponentSize | null, fallback?: ComponentSize): ComponentSize;
+declare function useComponentSizeValue(size?: ComponentSizeValue | null, fallback?: ComponentSize): "lg" | "md" | "sm" | ResponsiveComponentSize;
+declare function resolveResponsiveValue<T extends string>(value: T | ResponsiveValue<T>): ResolvedResponsiveValue<T>;
+declare function resolveResponsiveComponentSize(size: ComponentSizeValue): Required<ResponsiveValue<ComponentSize>>;
+declare function responsiveValueClasses<T extends string>(value: T | ResponsiveValue<T>, classes: {
+  base: Record<T, string>;
+  md: Record<T, string>;
+  lg: Record<T, string>;
+}): {
+  base: T;
+  md: T;
+  lg: T;
+  responsive: boolean;
+  className: string;
+};
+//#endregion
+export { ResponsiveValue as a, resolveResponsiveValue as c, useComponentSizeValue as d, useInheritedComponentSize as f, ResponsiveComponentSize as i, responsiveValueClasses as l, ComponentSizeValue as n, SizeProvider as o, ResolvedResponsiveValue as r, resolveResponsiveComponentSize as s, ComponentSize as t, useComponentSize as u };

package/dist/size-context.d.ts

@@ -1,2 +1,2 @@
-import { i as useInheritedComponentSize, n as SizeProvider, r as useComponentSize, t as ComponentSize } from "./size-context-BX6kAdVj.js";
-export { type ComponentSize, SizeProvider, useComponentSize, useInheritedComponentSize };
+import { a as ResponsiveValue, c as resolveResponsiveValue, d as useComponentSizeValue, f as useInheritedComponentSize, i as ResponsiveComponentSize, l as responsiveValueClasses, n as ComponentSizeValue, o as SizeProvider, r as ResolvedResponsiveValue, s as resolveResponsiveComponentSize, t as ComponentSize, u as useComponentSize } from "./size-context-BVhHduLi.js";
+export { type ComponentSize, type ComponentSizeValue, type ResolvedResponsiveValue, type ResponsiveComponentSize, type ResponsiveValue, SizeProvider, resolveResponsiveComponentSize, resolveResponsiveValue, responsiveValueClasses, useComponentSize, useComponentSizeValue, useInheritedComponentSize };

package/dist/size-context.js

@@ -14,8 +14,37 @@ function SizeProvider({ children, size }) {
 	});
 }
 function useComponentSize(size, fallback = "md") {
+	const inheritedSize = useInheritedComponentSize();
+	const resolved = size ?? inheritedSize ?? fallback;
+	return typeof resolved === "string" ? resolved : resolved.base;
+}
+function useComponentSizeValue(size, fallback = "md") {
 	const inheritedSize = useInheritedComponentSize();
 	return size ?? inheritedSize ?? fallback;
 }
+function resolveResponsiveValue(value) {
+	if (typeof value === "string") return {
+		base: value,
+		md: value,
+		lg: value
+	};
+	const md = value.md ?? value.base;
+	return {
+		base: value.base,
+		md,
+		lg: value.lg ?? md
+	};
+}
+function resolveResponsiveComponentSize(size) {
+	return resolveResponsiveValue(size);
+}
+function responsiveValueClasses(value, classes) {
+	const resolved = resolveResponsiveValue(value);
+	return {
+		...resolved,
+		responsive: typeof value !== "string",
+		className: typeof value === "string" ? classes.base[resolved.base] : `${classes.base[resolved.base]} ${classes.md[resolved.md]} ${classes.lg[resolved.lg]}`
+	};
+}
 //#endregion
-export { SizeProvider, useComponentSize, useInheritedComponentSize };
+export { SizeProvider, resolveResponsiveComponentSize, resolveResponsiveValue, responsiveValueClasses, useComponentSize, useComponentSizeValue, useInheritedComponentSize };

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/skeleton.tsx
 function Skeleton({ className, ...props }) {

package/dist/slider.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 //#region src/slider.d.ts
@@ -6,8 +6,10 @@ declare const sliderVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SliderRootValue = number | readonly number[];
-type SliderSize = NonNullable<VariantProps<typeof sliderVariants>["size"]>;
-type SliderProps<Value extends SliderRootValue = SliderRootValue> = Slider$1.Root.Props<Value> & VariantProps<typeof sliderVariants>;
+type SliderSize = ComponentSizeValue;
+type SliderProps<Value extends SliderRootValue = SliderRootValue> = Slider$1.Root.Props<Value> & {
+  size?: SliderSize;
+};
 type SliderControlProps = Slider$1.Control.Props;
 type SliderTrackProps = Slider$1.Track.Props;
 type SliderIndicatorProps = Slider$1.Indicator.Props;

package/dist/slider.js

@@ -1,34 +1,49 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 //#region src/slider.tsx
+const sliderSizeVariants = {
+	sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
+	md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
+	lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
+};
 const sliderVariants = cva("group/slider grid w-full gap-2 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", {
-	variants: { size: {
-		sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
-		md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
-		lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
-	} },
+	variants: { size: sliderSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Slider({ className, children, size, disabled = false, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveSliderSizes);
 	return /* @__PURE__ */ jsx(SizeProvider, {
-		size: resolvedSize,
+		size: sizeValue,
 		children: /* @__PURE__ */ jsx(Slider$1.Root, {
 			thumbAlignment: "edge",
 			disabled,
 			"data-disabled": disabled,
-			"data-size": resolvedSize,
+			"data-size": resolvedSize.base,
 			"data-slot": "slider",
-			className: cn(sliderVariants({ size: resolvedSize }), className),
+			className: cn(sliderVariants({ size: null }), resolvedSize.className, className),
 			...props,
 			children
 		})
 	});
 }
+const responsiveSliderSizes = {
+	base: sliderSizeVariants,
+	md: {
+		sm: "md:[--slider-thumb-size:1rem] md:[--slider-track-size:0.25rem]",
+		md: "md:[--slider-thumb-size:1.25rem] md:[--slider-track-size:0.375rem]",
+		lg: "md:[--slider-thumb-size:1.5rem] md:[--slider-track-size:0.5rem]"
+	},
+	lg: {
+		sm: "lg:[--slider-thumb-size:1rem] lg:[--slider-track-size:0.25rem]",
+		md: "lg:[--slider-thumb-size:1.25rem] lg:[--slider-track-size:0.375rem]",
+		lg: "lg:[--slider-thumb-size:1.5rem] lg:[--slider-track-size:0.5rem]"
+	}
+};
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		"data-slot": "slider-control",

package/dist/sonar.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/sonar.d.ts

package/dist/sonar.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -24,7 +24,7 @@ function sameCorners(a, b) {
 * Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
 * of keyframes, one class per tone.
 */
-const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
+const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave will-change-[box-shadow,opacity] [backface-visibility:hidden] [transform:translateZ(0)]", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
 	variants: { tone: {
 		brand: "text-fg-brand",
 		info: "text-status-info",

package/dist/sparkline.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartContainer, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/sparkline.d.ts

package/dist/sparkline.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/stepper.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";