@giddaa-housing/ui 3.7.0 → 3.9.0

package/css/giddaa.css

@@ -154,6 +154,12 @@
 	--color-status-danger: var(--color-clay-500);
 	--color-status-info: var(--color-moss-500);
 
+	/* Standalone colors that can be used across utility categories. */
+	--color-orphan-green: #1f7a5a;
+	--color-orphan-blue: #1d4e89;
+	--color-orphan-yellow: #9a5b13;
+	--color-orphan-purple: #6b2d6b;
+
 	/*
 	 * Categorical chart palette — series colours assigned in fixed slot order,
 	 * never cycled. Each theme's steps were validated (lightness band, chroma
@@ -337,6 +343,11 @@
 	--color-status-danger: var(--color-clay-500);
 	--color-status-info: var(--color-moss-500);
 
+	--color-orphan-green: #1f7a5a;
+	--color-orphan-blue: #1d4e89;
+	--color-orphan-yellow: #9a5b13;
+	--color-orphan-purple: #6b2d6b;
+
 	--color-chart-1: var(--color-forest-dark-600);
 	--color-chart-2: var(--color-brass-400);
 	--color-chart-3: var(--color-clay-400);
@@ -495,6 +506,11 @@
 	--color-status-danger: var(--color-clay-300);
 	--color-status-info: var(--color-moss-200);
 
+	--color-orphan-green: #4cb393;
+	--color-orphan-blue: #5a8ed1;
+	--color-orphan-yellow: #d4a253;
+	--color-orphan-purple: #b075b0;
+
 	--color-chart-1: var(--color-forest-dark-400);
 	--color-chart-2: var(--color-brass-400);
 	--color-chart-3: var(--color-clay-400);

package/dist/button.js

@@ -19,7 +19,7 @@ const buttonSizeVariants = {
 	"icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
 	"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
 };
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,scale,translate] duration-(--duration-motion-press) ease-gdt-out outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px motion-reduce:active:not-aria-[haspopup]:translate-y-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 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)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,scale] duration-(--duration-motion-press) ease-gdt-out outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:scale-[0.97] motion-reduce:active:not-aria-[haspopup]:scale-100 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 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)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			back: "border border-line bg-canvas text-fg-primary hover:border-line-strong hover:bg-surface active:border-line-strong active:bg-surface-raised data-focused:border-line-strong data-focused:bg-surface data-pressed:border-line-strong data-pressed:bg-surface-raised disabled:border-line-subtle disabled:text-fg-caption-placeholder disabled:opacity-100 aria-disabled:border-line-subtle aria-disabled:text-fg-caption-placeholder aria-disabled:opacity-100",
@@ -40,7 +40,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 	},
 	compoundVariants: [{
 		variant: ["link-brand", "link-neutral"],
-		class: "h-auto min-h-0 w-auto min-w-0 shrink justify-start rounded-none px-0 py-0 text-left whitespace-normal underline-offset-4 active:not-aria-[haspopup]:translate-y-0"
+		class: "h-auto min-h-0 w-auto min-w-0 shrink justify-start rounded-none px-0 py-0 text-left whitespace-normal underline-offset-4 active:not-aria-[haspopup]:scale-100"
 	}],
 	defaultVariants: {
 		variant: "primary",
@@ -76,15 +76,17 @@ function useResolvedButtonSize(size) {
 	const inherited = useComponentSizeValue();
 	return responsiveValueClasses(size ?? inherited, responsiveButtonSizeClasses);
 }
+const responsiveLinkReset = "h-auto min-h-0 w-auto min-w-0 shrink justify-start rounded-none px-0 py-0 text-left whitespace-normal underline-offset-4 active:not-aria-[haspopup]:scale-100 md:h-auto md:min-h-0 md:w-auto md:min-w-0 md:px-0 md:py-0 lg:h-auto lg:min-h-0 lg:w-auto lg:min-w-0 lg:px-0 lg:py-0";
 function Button({ className, variant = "primary", size, isLoading = false, children, disabled = false, ...props }) {
 	const resolvedSize = useResolvedButtonSize(size);
 	const _disabled = disabled || isLoading;
+	const isLinkVariant = variant === "link-brand" || variant === "link-neutral";
 	return /* @__PURE__ */ jsxs(Button$1, {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
 			size: null
-		}), resolvedSize.className, className),
+		}), resolvedSize.className, isLinkVariant && responsiveLinkReset, className),
 		disabled: _disabled,
 		...props,
 		children: [
@@ -103,7 +105,7 @@ function ButtonLink({ className, render, variant = "primary", size, disabled = f
 			className: cn(buttonVariants({
 				variant,
 				size: null
-			}), resolvedSize.className, isLinkVariant && "md:h-auto md:min-h-0 md:w-auto md:min-w-0 md:px-0 md:py-0 lg:h-auto lg:min-h-0 lg:w-auto lg:min-w-0 lg:px-0 lg:py-0", className),
+			}), resolvedSize.className, isLinkVariant && responsiveLinkReset, className),
 			children
 		}, {
 			...props,

package/dist/calendar.js

@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
-import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-D70DFHoM.js";
+import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-Jfz8hryr.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";

package/dist/{combobox-D70DFHoM.js → combobox-Jfz8hryr.js}

@@ -1,6 +1,6 @@
 import { Check, ChevronDown, X } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, responsiveValueClasses, useComponentSize, useComponentSizeValue } from "./size-context.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -90,6 +90,57 @@ const comboboxInputVariants = cva("w-auto data-[grown=true]:rounded-2xl has-data
 	} },
 	defaultVariants: { size: "md" }
 });
+const responsiveComboboxTriggerSizes = {
+	base: {
+		sm: "h-8 min-h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		md: "h-10 min-h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "h-12 min-h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+	},
+	md: {
+		sm: "md:h-8 md:min-h-8 md:gap-2 md:px-3 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "md:h-10 md:min-h-10 md:gap-2 md:px-3.5 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-4",
+		lg: "md:h-12 md:min-h-12 md:gap-2.5 md:px-4 md:pr-5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-4.5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:min-h-8 lg:gap-2 lg:px-3 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "lg:h-10 lg:min-h-10 lg:gap-2 lg:px-3.5 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-4",
+		lg: "lg:h-12 lg:min-h-12 lg:gap-2.5 lg:px-4 lg:pr-5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-4.5"
+	}
+};
+const responsiveComboboxInputSizes = {
+	base: {
+		sm: "min-h-8",
+		md: "min-h-10",
+		lg: "min-h-12"
+	},
+	md: {
+		sm: "md:min-h-8",
+		md: "md:min-h-10",
+		lg: "md:min-h-12"
+	},
+	lg: {
+		sm: "lg:min-h-8",
+		md: "lg:min-h-10",
+		lg: "lg:min-h-12"
+	}
+};
+const responsiveComboboxPopupInputSizes = {
+	base: {
+		sm: "rounded-md",
+		md: "rounded-lg",
+		lg: "rounded-lg"
+	},
+	md: {
+		sm: "md:rounded-md",
+		md: "md:rounded-lg",
+		lg: "md:rounded-lg"
+	},
+	lg: {
+		sm: "lg:rounded-md",
+		md: "lg:rounded-lg",
+		lg: "lg:rounded-lg"
+	}
+};
 /**
 * The same field, standing in the popup as its search box. It is inside the
 * open popup rather than being the thing that opened it, so none of the
@@ -155,6 +206,40 @@ const comboboxChipVariants = cva("flex w-fit items-center justify-center gap-1 r
 	} },
 	defaultVariants: { size: "md" }
 });
+const responsiveComboboxChipsSizes = {
+	base: {
+		sm: "min-h-8 px-2.5 py-1 text-gdt-xs has-data-[slot=combobox-chip]:px-1.5",
+		md: "min-h-10 px-3 py-1.5 text-gdt-sm has-data-[slot=combobox-chip]:px-2",
+		lg: "min-h-12 px-4 py-2 text-gdt-md has-data-[slot=combobox-chip]:px-2.5"
+	},
+	md: {
+		sm: "md:min-h-8 md:px-2.5 md:py-1 md:text-gdt-xs md:has-data-[slot=combobox-chip]:px-1.5",
+		md: "md:min-h-10 md:px-3 md:py-1.5 md:text-gdt-sm md:has-data-[slot=combobox-chip]:px-2",
+		lg: "md:min-h-12 md:px-4 md:py-2 md:text-gdt-md md:has-data-[slot=combobox-chip]:px-2.5"
+	},
+	lg: {
+		sm: "lg:min-h-8 lg:px-2.5 lg:py-1 lg:text-gdt-xs lg:has-data-[slot=combobox-chip]:px-1.5",
+		md: "lg:min-h-10 lg:px-3 lg:py-1.5 lg:text-gdt-sm lg:has-data-[slot=combobox-chip]:px-2",
+		lg: "lg:min-h-12 lg:px-4 lg:py-2 lg:text-gdt-md lg:has-data-[slot=combobox-chip]:px-2.5"
+	}
+};
+const responsiveComboboxChipSizes = {
+	base: {
+		sm: "h-5 px-1.5 text-gdt-xs",
+		md: "h-[calc(--spacing(5.25))] px-1.5 text-gdt-xs",
+		lg: "h-6 px-2 text-gdt-sm"
+	},
+	md: {
+		sm: "md:h-5 md:px-1.5 md:text-gdt-xs",
+		md: "md:h-[calc(--spacing(5.25))] md:px-1.5 md:text-gdt-xs",
+		lg: "md:h-6 md:px-2 md:text-gdt-sm"
+	},
+	lg: {
+		sm: "lg:h-5 lg:px-1.5 lg:text-gdt-xs",
+		md: "lg:h-[calc(--spacing(5.25))] lg:px-1.5 lg:text-gdt-xs",
+		lg: "lg:h-6 lg:px-2 lg:text-gdt-sm"
+	}
+};
 function ComboboxValue({ ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Value, {
 		"data-slot": "combobox-value",
@@ -162,14 +247,14 @@ function ComboboxValue({ ...props }) {
 	});
 }
 function ComboboxTrigger({ className, children, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveComboboxTriggerSizes);
 	const { ref, grown } = useGrown();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		ref,
 		"data-slot": "combobox-trigger",
-		"data-size": resolvedSize,
+		"data-size": resolvedSize.base,
 		"data-grown": grown ? "true" : void 0,
-		className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
+		className: cn(comboboxTriggerVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
 	});
@@ -187,7 +272,9 @@ function ComboboxClear({ className, ...props }) {
 	});
 }
 function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-	const resolvedSize = useComponentSize();
+	const sizeValue = useComponentSizeValue();
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveComboboxInputSizes);
+	const popupSize = responsiveValueClasses(sizeValue, responsiveComboboxPopupInputSizes);
 	const insidePopup = React.useContext(ComboboxPopupContext);
 	const { ref, grown } = useGrown();
 	const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -209,13 +296,13 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 		children
 	] });
 	if (insidePopup) return /* @__PURE__ */ jsx(InputGroup, {
-		className: cn(comboboxPopupInputVariants({ size: resolvedSize }), className),
+		className: cn(comboboxPopupInputVariants({ size: null }), popupSize.className, className),
 		children: contents
 	});
 	return /* @__PURE__ */ jsx(Combobox.InputGroup, {
 		ref,
 		"data-grown": grown ? "true" : void 0,
-		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(comboboxInputVariants({ size: resolvedSize }), className) }),
+		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(comboboxInputVariants({ size: null }), resolvedSize.className, className) }),
 		children: contents
 	});
 }
@@ -326,7 +413,7 @@ function ComboboxSeparator({ className, ...props }) {
 	});
 }
 function ComboboxChips({ className, ref: refProp, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveComboboxChipsSizes);
 	const { ref, grown } = useGrown();
 	return /* @__PURE__ */ jsx(Combobox.Chips, {
 		ref: (element) => {
@@ -336,15 +423,15 @@ function ComboboxChips({ className, ref: refProp, ...props }) {
 		},
 		"data-slot": "combobox-chips",
 		"data-grown": grown ? "true" : void 0,
-		className: cn(comboboxChipsVariants({ size: resolvedSize }), className),
+		className: cn(comboboxChipsVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveComboboxChipSizes);
 	return /* @__PURE__ */ jsxs(Combobox.Chip, {
 		"data-slot": "combobox-chip",
-		className: cn(comboboxChipVariants({ size: resolvedSize }), className),
+		className: cn(comboboxChipVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			className: "-ml-1 opacity-50 hover:opacity-100",

package/dist/combobox.d.ts

@@ -1,9 +1,9 @@
-import { t as ComponentSize } from "./size-context-BVhHduLi.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Virtualizer } from "@tanstack/react-virtual";
 //#region src/combobox.d.ts
-type ComboboxSize = ComponentSize;
+type ComboboxSize = ComponentSizeValue;
 declare function Combobox<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Combobox$1.Root.Props<Value, Multiple> & {
   size?: ComboboxSize;
 }): React.JSX.Element;

package/dist/combobox.js

@@ -1,3 +1,3 @@
 "use client";
-import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-D70DFHoM.js";
+import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-Jfz8hryr.js";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/data-table.d.ts

@@ -2,7 +2,7 @@ import { t as Button } from "./button-BS5KCibF.js";
 import { Empty } from "./empty-state.js";
 import { FilterApplyButtonProps, FilterContentProps, FilterProps, FilterResetButtonProps } from "./filter.js";
 import { Pagination } from "./pagination.js";
-import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-CNymD33m.js";
+import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-BMTZp3AQ.js";
 import { Table as Table$1 } from "./table.js";
 import * as React from "react";
 import { ColumnDef, Row, Table, TableOptions } from "@tanstack/react-table";

package/dist/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { InputSizeValue } from "./input.js";
-import { t as PickerPlacementProps } from "./picker-j3txxA5t.js";
+import { t as PickerPlacementProps } from "./picker-qxWi9wZ1.js";
 import * as React from "react";
 import { DateRange, Matcher } from "react-day-picker";
 //#region src/date-picker.d.ts

package/dist/field.d.ts

@@ -1,5 +1,5 @@
 import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
-import { Label } from "./label.js";
+import { Label, LabelSupplement } from "./label.js";
 import { VariantProps } from "class-variance-authority";
 //#region src/field.d.ts
 declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
@@ -16,6 +16,7 @@ declare function Field({ className, orientation, size, ...props }: React.Compone
 }): import("react").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldLabelSupplement({ className, ...props }: React.ComponentProps<typeof LabelSupplement>): import("react").JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
@@ -27,4 +28,4 @@ declare function FieldError({ className, children, errors, ...props }: React.Com
   } | undefined>;
 }): import("react").JSX.Element | null;
 //#endregion
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelSupplement, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/field.js

@@ -2,7 +2,7 @@
 import { cn } from "./utils/cn.js";
 import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { Separator } from "./separator.js";
-import { Label } from "./label.js";
+import { Label, LabelSupplement } from "./label.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useMemo } from "react";
@@ -95,6 +95,13 @@ function FieldLabel({ className, ...props }) {
 		...props
 	});
 }
+function FieldLabelSupplement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LabelSupplement, {
+		"data-slot": "field-label-supplement",
+		className: cn("shrink font-normal", className),
+		...props
+	});
+}
 function FieldTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-label",
@@ -143,4 +150,4 @@ function FieldError({ className, children, errors, ...props }) {
 	});
 }
 //#endregion
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelSupplement, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/label.d.ts

@@ -4,5 +4,6 @@ declare function Label({ className, children, withAsterisk, showOptionalText, ..
   withAsterisk?: boolean;
   showOptionalText?: boolean;
 }): React.JSX.Element;
+declare function LabelSupplement({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 //#endregion
-export { Label };
+export { Label, LabelSupplement };

package/dist/label.js

@@ -3,39 +3,27 @@ import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/label.tsx
 function Label({ className, children, withAsterisk = false, showOptionalText = false, ...props }) {
-	const labelClassName = cn("flex w-fit max-w-full items-center gap-1 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className);
-	if (withAsterisk) return /* @__PURE__ */ jsxs("label", {
+	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "label",
-		className: labelClassName,
+		className: cn("flex w-fit max-w-full flex-wrap items-baseline gap-x-1 gap-y-0.5 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "inline-flex",
-				children
-			}),
+			children,
+			showOptionalText && /* @__PURE__ */ jsx(LabelSupplement, { children: "(optional)" }),
 			withAsterisk && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
 				className: "inline-flex shrink-0 text-fg-danger",
 				children: "*"
-			}),
-			showOptionalText && /* @__PURE__ */ jsx("span", {
-				className: "text-gdt-xs font-normal italic",
-				children: "(optional)"
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx("label", {
-		"data-slot": "label",
-		className: labelClassName,
-		...props,
-		children: /* @__PURE__ */ jsxs("div", { children: [
-			children,
-			" ",
-			showOptionalText && /* @__PURE__ */ jsx("span", {
-				className: "text-gdt-xs font-normal italic",
-				children: "(optional)"
-			})
-		] })
+}
+function LabelSupplement({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "label-supplement",
+		className: cn("font-normal italic text-fg-secondary", className),
+		...props
 	});
 }
 //#endregion
-export { Label };
+export { Label, LabelSupplement };

package/dist/photo-gallery.js

@@ -14,7 +14,7 @@ import { Dialog } from "@base-ui/react/dialog";
 * helpers. Both surfaces share this so the inline carousel and the fullscreen
 * viewer can stand alone — or stay in sync by sharing `index`/`onIndexChange`.
 */
-function useGalleryCarousel(index, onIndexChange) {
+function useGalleryCarousel(index, onIndexChange, enabled = true) {
 	const [api, setApi] = React.useState();
 	const [selectedIndex, setSelectedIndex] = React.useState(index ?? 0);
 	const initialIndexRef = React.useRef(index ?? 0);
@@ -23,7 +23,7 @@ function useGalleryCarousel(index, onIndexChange) {
 		onIndexChangeRef.current = onIndexChange;
 	});
 	React.useEffect(() => {
-		if (!api) return;
+		if (!api || !enabled) return;
 		const onSelect = () => {
 			const next = api.selectedScrollSnap();
 			setSelectedIndex(next);
@@ -34,10 +34,21 @@ function useGalleryCarousel(index, onIndexChange) {
 		return () => {
 			api.off("select", onSelect).off("reInit", onSelect);
 		};
-	}, [api]);
+	}, [api, enabled]);
 	React.useEffect(() => {
-		if (api && index !== void 0 && index !== api.selectedScrollSnap()) api.scrollTo(index, false);
-	}, [api, index]);
+		if (!enabled) {
+			setApi(void 0);
+			return;
+		}
+		setSelectedIndex(index ?? initialIndexRef.current);
+	}, [enabled, index]);
+	React.useEffect(() => {
+		if (enabled && api && index !== void 0 && index !== api.selectedScrollSnap()) api.scrollTo(index, false);
+	}, [
+		api,
+		enabled,
+		index
+	]);
 	const scrollTo = React.useCallback((i) => api?.scrollTo(i, false), [api]);
 	const scrollPrev = React.useCallback(() => api?.scrollPrev(false), [api]);
 	const scrollNext = React.useCallback(() => api?.scrollNext(false), [api]);
@@ -238,7 +249,7 @@ function PhotoGallery({ images, index, onIndexChange, onImageClick, className, .
 * `onOpenChange` and usable without the inline gallery.
 */
 function PhotoGalleryFullscreen({ images, open, onOpenChange, index, onIndexChange }) {
-	const { setApi, selectedIndex, initialIndex, scrollTo, scrollPrev, scrollNext } = useGalleryCarousel(index, onIndexChange);
+	const { setApi, selectedIndex, initialIndex, scrollTo, scrollPrev, scrollNext } = useGalleryCarousel(index, onIndexChange, open);
 	const hasMany = images.length > 1;
 	const handleKeyDown = (event) => {
 		if (event.defaultPrevented) return;
@@ -278,12 +289,12 @@ function PhotoGalleryFullscreen({ images, open, onOpenChange, index, onIndexChan
 						children: /* @__PURE__ */ jsx(X, { className: "size-4 sm:size-5" })
 					})]
 				}),
-				/* @__PURE__ */ jsxs(Carousel, {
+				open && /* @__PURE__ */ jsxs(Carousel, {
 					imageSize: "full",
 					setApi,
 					opts: {
 						loop: true,
-						startIndex: initialIndex,
+						startIndex: index ?? initialIndex,
 						watchDrag: hasMany
 					},
 					className: "min-h-0 flex-1 w-full rounded-xl bg-transparent",

package/dist/{picker-j3txxA5t.d.ts → picker-qxWi9wZ1.d.ts}

@@ -1,5 +1,5 @@
 import "./input-size-context-BMhves-J.js";
-import { r as PopoverContent } from "./popover-CNymD33m.js";
+import { r as PopoverContent } from "./popover-BMTZp3AQ.js";
 import "./icons-C9JXR5Xv.js";
 import * as React from "react";
 //#region src/lib/picker.d.ts

package/dist/{popover-CNymD33m.d.ts → popover-BMTZp3AQ.d.ts}

@@ -4,11 +4,11 @@ import { Popover } from "@base-ui/react/popover";
 //#region src/popover.d.ts
 declare function Popover$1({ ...props }: Popover.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover.Trigger.Props): React.JSX.Element;
-type PopoverContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
+type PopoverContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "positionMethod" | "side" | "sideOffset"> & {
   showArrow?: boolean;
   size?: ComponentSize;
 };
-declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, positionMethod, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
   border?: boolean;
 }): React.JSX.Element;

package/dist/popover.d.ts

@@ -1,2 +1,2 @@
-import { a as PopoverFooter, c as PopoverTrigger, i as PopoverDescription, n as PopoverBody, o as PopoverHeader, r as PopoverContent, s as PopoverTitle, t as Popover } from "./popover-CNymD33m.js";
+import { a as PopoverFooter, c as PopoverTrigger, i as PopoverDescription, n as PopoverBody, o as PopoverHeader, r as PopoverContent, s as PopoverTitle, t as Popover } from "./popover-BMTZp3AQ.js";
 export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/popover.js

@@ -16,11 +16,12 @@ function PopoverTrigger({ ...props }) {
 		...props
 	});
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
+function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, positionMethod = "fixed", side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
 		alignOffset,
 		collisionAvoidance,
+		positionMethod,
 		side,
 		sideOffset,
 		className: "isolate z-50",

package/dist/sheet.js

@@ -45,7 +45,7 @@ const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed
 		sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
 		md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
 		lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
-		fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
+		fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100dvh-3.5rem)] rounded:xl sm:rounded-2xl"
 	} },
 	defaultVariants: { size: "md" }
 });

package/dist/skeleton.d.ts

@@ -1,4 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
 //#region src/skeleton.d.ts
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function Skeleton({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { Skeleton };

package/dist/skeleton.js

@@ -1,11 +1,17 @@
+"use client";
 import { cn } from "./utils/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/skeleton.tsx
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-line motion-reduce:animate-none", className),
-		...props
+function Skeleton({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			className: cn("animate-pulse rounded-md bg-line motion-reduce:animate-none", className),
+			"data-slot": "skeleton"
+		}, props),
+		render,
+		state: { slot: "skeleton" }
 	});
 }
 //#endregion