@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/switch.d.ts

@@ -1,10 +1,10 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.d.ts
 declare const switchVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
+type SwitchSize = ComponentSizeValue;
 type SwitchProps = Omit<Switch$1.Root.Props, "children"> & {
   loading?: boolean;
   size?: SwitchSize;

package/dist/switch.js

@@ -1,15 +1,16 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:scale-100 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
+const switchSizeVariants = {
 	sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
 	md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
 	lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"
-} } });
+};
+const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:scale-100", { variants: { size: switchSizeVariants } });
 /**
 * Compose with the shared field primitives for label and helper text.
 *
@@ -24,17 +25,17 @@ const switchVariants = cva("peer group/switch relative inline-flex shrink-0 item
 * ```
 */
 function Switch({ className, disabled = false, loading = false, readOnly = false, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveSwitchSizes);
 	const isDisabled = disabled;
 	const isReadOnly = readOnly || loading;
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		"aria-busy": loading || void 0,
 		"data-slot": "switch",
 		"data-loading": loading,
-		"data-size": resolvedSize,
+		"data-size": resolvedSize.base,
 		disabled: isDisabled,
 		readOnly: isReadOnly,
-		className: cn(switchVariants({ size: resolvedSize }), className),
+		className: cn(switchVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
@@ -47,5 +48,18 @@ function Switch({ className, disabled = false, loading = false, readOnly = false
 		})
 	});
 }
+const responsiveSwitchSizes = {
+	base: switchSizeVariants,
+	md: {
+		sm: "md:h-5 md:w-8 md:[--switch-spinner-size:0.625rem] md:[--switch-thumb-size:14px] md:[--switch-track-width:2rem]",
+		md: "md:h-6 md:w-10 md:[--switch-spinner-size:0.75rem] md:[--switch-thumb-size:18px] md:[--switch-track-width:2.5rem]",
+		lg: "md:h-7 md:w-12 md:[--switch-spinner-size:0.875rem] md:[--switch-thumb-size:22px] md:[--switch-track-width:3rem]"
+	},
+	lg: {
+		sm: "lg:h-5 lg:w-8 lg:[--switch-spinner-size:0.625rem] lg:[--switch-thumb-size:14px] lg:[--switch-track-width:2rem]",
+		md: "lg:h-6 lg:w-10 lg:[--switch-spinner-size:0.75rem] lg:[--switch-thumb-size:18px] lg:[--switch-track-width:2.5rem]",
+		lg: "lg:h-7 lg:w-12 lg:[--switch-spinner-size:0.875rem] lg:[--switch-thumb-size:22px] lg:[--switch-track-width:3rem]"
+	}
+};
 //#endregion
 export { Switch, switchVariants };

package/dist/tabs.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 { ComponentPropsWithoutRef } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.d.ts

package/dist/tag.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 { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
 //#region src/tag.d.ts
 declare const tagVariants: (props?: ({

package/dist/textarea.d.ts

@@ -1,2 +1,18 @@
-import { n as TextareaSize, r as textareaVariants, t as Textarea } from "./textarea-IS_D8pXf.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
+import * as React from "react";
+//#region src/textarea.d.ts
+declare const textareaSizeVariants: {
+  readonly sm: "min-h-22 px-3 py-2 text-gdt-xs";
+  readonly md: "min-h-26 px-3.5 py-2.5 text-gdt-sm";
+  readonly lg: "min-h-31 px-4 py-3 text-gdt-md";
+};
+declare const textareaVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
+  size?: ComponentSizeValue;
+};
+type TextareaSize = keyof typeof textareaSizeVariants;
+declare function Textarea({ className, size, ...props }: TextareaProps): React.JSX.Element;
+//#endregion
 export { Textarea, type TextareaSize, textareaVariants };

package/dist/textarea.js

@@ -1,25 +1,39 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
+const textareaSizeVariants = {
+	sm: "min-h-22 px-3 py-2 text-gdt-xs",
+	md: "min-h-26 px-3.5 py-2.5 text-gdt-sm",
+	lg: "min-h-31 px-4 py-3 text-gdt-md"
+};
 const textareaVariants = cva("flex field-sizing-content w-full min-w-0 resize-y rounded-xl border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
-	variants: { size: {
-		sm: "min-h-22 px-3 py-2 text-gdt-xs",
-		md: "min-h-26 px-3.5 py-2.5 text-gdt-sm",
-		lg: "min-h-31 px-4 py-3 text-gdt-md"
-	} },
+	variants: { size: textareaSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Textarea({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveTextareaSizes);
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		"data-size": resolvedSize,
-		className: cn(textareaVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(textareaVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
+const responsiveTextareaSizes = {
+	base: textareaSizeVariants,
+	md: {
+		sm: "md:min-h-22 md:px-3 md:py-2 md:text-gdt-xs",
+		md: "md:min-h-26 md:px-3.5 md:py-2.5 md:text-gdt-sm",
+		lg: "md:min-h-31 md:px-4 md:py-3 md:text-gdt-md"
+	},
+	lg: {
+		sm: "lg:min-h-22 lg:px-3 lg:py-2 lg:text-gdt-xs",
+		md: "lg:min-h-26 lg:px-3.5 lg:py-2.5 lg:text-gdt-sm",
+		lg: "lg:min-h-31 lg:px-4 lg:py-3 lg:text-gdt-md"
+	}
+};
 //#endregion
 export { Textarea, textareaVariants };

package/dist/time-picker.d.ts

@@ -1,5 +1,5 @@
-import { n as InputSize } from "./input-CfoEJ8A6.js";
-import { t as PickerPlacementProps } from "./picker-CsnHtbe4.js";
+import { InputSizeValue } from "./input.js";
+import { t as PickerPlacementProps } from "./picker-j3txxA5t.js";
 import * as React from "react";
 //#region src/time-picker.d.ts
 interface TimePickerProps extends PickerPlacementProps {
@@ -8,7 +8,7 @@ interface TimePickerProps extends PickerPlacementProps {
   format?: "12h" | "24h";
   disabled?: boolean;
   /** Controls the trigger size. The time selection panel is not resized. */
-  size?: InputSize;
+  size?: InputSizeValue;
   placeholder?: string;
   className?: string;
 }

package/dist/time-picker.js

@@ -3,7 +3,7 @@ import { Clock } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { useReducedMotion } from "./utils/use-reduced-motion.js";
 import { Popover, PopoverContent } from "./popover.js";
-import { n as PickerTrigger, t as PickerFooter } from "./picker-DmIiQKLJ.js";
+import { n as PickerTrigger, t as PickerFooter } from "./picker-BTXBrsl4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/lib/time-picker-paint.ts

package/dist/tree-map.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 { ChartCard, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/tree-map.d.ts

package/dist/video-player-dialog.js

@@ -57,13 +57,14 @@ function VideoPlayerDialogContent({ size = "md", theme = "light", showCloseButto
 		"data-size": size,
 		"data-slot": "video-player-dialog-content",
 		"data-theme": theme,
-		className: cn("inset-0 m-auto h-fit max-h-none translate-x-0 translate-y-0 gap-0 overflow-visible border-0 bg-transparent p-0 shadow-none sm:w-full [--dialog-padding:0px]", WIDTHS[size], className),
+		popupClassName: cn("inset-0 m-auto h-fit max-h-none w-[calc(100%-2rem)] translate-x-0 translate-y-0 gap-0 overflow-visible border-0 bg-transparent p-0 shadow-none sm:w-full [--dialog-padding:0px]", WIDTHS[size]),
+		className: cn("max-h-none gap-0 border-0 bg-transparent p-0 shadow-none", className),
 		...props,
 		children: /* @__PURE__ */ jsx(VideoPlayerDialogContext.Provider, {
 			value: context,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "video-player-dialog-surface",
-				className: cn("max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain", videoPlayerDialogSurfaceVariants({
+				className: cn("max-h-[calc(100dvh-6rem)] overflow-y-auto overscroll-contain", videoPlayerDialogSurfaceVariants({
 					size,
 					theme
 				}), surfaceClassName),

package/dist/waterfall-chart.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 { ChartCard, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/waterfall-chart.d.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -329,6 +329,10 @@
       "types": "./dist/scroll-spy.d.ts",
       "import": "./dist/scroll-spy.js"
     },
+    "./section-jumper": {
+      "types": "./dist/section-jumper.d.ts",
+      "import": "./dist/section-jumper.js"
+    },
     "./search-input": {
       "types": "./dist/search-input.d.ts",
       "import": "./dist/search-input.js"

package/dist/button-DW5OijoR.d.ts

@@ -1,17 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-import { VariantProps } from "class-variance-authority";
-import { Button } from "@base-ui/react/button";
-//#region src/button.d.ts
-declare const buttonVariants: (props?: ({
-  variant?: "back" | "danger" | "ghost" | "glass-overlay" | "link-brand" | "link-neutral" | "primary" | "primary-outline" | "secondary" | "secondary-outline" | "tertiary" | "tertiary-outline" | "whatsapp" | null | undefined;
-  size?: "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button$1({ className, variant, size, isLoading, children, disabled, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {
-  isLoading?: boolean;
-}): import("react").JSX.Element;
-type ButtonLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof buttonVariants> & {
-  disabled?: boolean;
-};
-declare function ButtonLink({ className, render, variant, size, disabled, onClick, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
-export { ButtonLink as n, buttonVariants as r, Button$1 as t };

package/dist/input-CfoEJ8A6.d.ts

@@ -1,12 +0,0 @@
-import { t as InputComponentSize } from "./input-size-context-C-SFx9sx.js";
-import { VariantProps } from "class-variance-authority";
-import * as React from "react";
-//#region src/input.d.ts
-declare const inputVariants: (props?: ({
-  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type InputProps = Omit<React.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>;
-type InputSize = InputComponentSize;
-declare function Input({ className, size, type, ...props }: InputProps): React.JSX.Element;
-//#endregion
-export { InputSize as n, inputVariants as r, Input as t };

package/dist/input-size-context-C-SFx9sx.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-//#region src/input-size-context.d.ts
-type InputComponentSize = "sm" | "md" | "lg" | "xl";
-declare function InputSizeProvider({ children, size }: {
-  children: ReactNode;
-  size?: InputComponentSize | null;
-}): import("react").JSX.Element;
-declare function useInputComponentSize(size?: InputComponentSize | null, fallback?: InputComponentSize): InputComponentSize;
-//#endregion
-export { InputSizeProvider as n, useInputComponentSize as r, InputComponentSize as t };

package/dist/picker-DmIiQKLJ.js

@@ -1,45 +0,0 @@
-import { cn } from "./utils/cn.js";
-import { Button } from "./button.js";
-import { useInputComponentSize } from "./input-size-context.js";
-import { PopoverTrigger } from "./popover.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-//#region src/lib/picker.tsx
-const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
-	variants: { size: {
-		sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
-		md: "h-10 px-3.5 text-gdt-sm [&_svg]:size-4",
-		lg: "h-12 px-4 text-gdt-md [&_svg]:size-4.5",
-		xl: "h-14 px-4.5 text-gdt-lg [&_svg]:size-5"
-	} },
-	defaultVariants: { size: "md" }
-});
-function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, size, className }) {
-	const resolvedSize = useInputComponentSize(size);
-	return /* @__PURE__ */ jsxs(PopoverTrigger, {
-		disabled,
-		"data-size": resolvedSize,
-		className: cn(pickerTriggerVariants({ size: resolvedSize }), disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
-			children: displayValue || placeholder
-		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
-	});
-}
-function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
-		children: [/* @__PURE__ */ jsx(Button, {
-			variant: "tertiary-outline",
-			size: "sm",
-			onClick: onSecondary,
-			children: secondaryLabel
-		}), /* @__PURE__ */ jsx(Button, {
-			size: "sm",
-			onClick: onApply,
-			children: "Apply"
-		})]
-	});
-}
-//#endregion
-export { PickerTrigger as n, PickerFooter as t };

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

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-//#region src/size-context.d.ts
-type ComponentSize = "sm" | "md" | "lg";
-declare function useInheritedComponentSize(): ComponentSize | undefined;
-declare function SizeProvider({ children, size }: {
-  children: ReactNode;
-  size?: ComponentSize | null;
-}): import("react").JSX.Element;
-declare function useComponentSize(size?: ComponentSize | null, fallback?: ComponentSize): ComponentSize;
-//#endregion
-export { useInheritedComponentSize as i, SizeProvider as n, useComponentSize as r, ComponentSize as t };

package/dist/textarea-IS_D8pXf.d.ts

@@ -1,11 +0,0 @@
-import { VariantProps } from "class-variance-authority";
-import * as React from "react";
-//#region src/textarea.d.ts
-declare const textareaVariants: (props?: ({
-  size?: "lg" | "md" | "sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & VariantProps<typeof textareaVariants>;
-type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
-declare function Textarea({ className, size, ...props }: TextareaProps): React.JSX.Element;
-//#endregion
-export { TextareaSize as n, textareaVariants as r, Textarea as t };