@giddaa-housing/ui 3.1.0 → 3.2.0

package/dist/styles.css

@@ -143,7 +143,8 @@
     --color-action-danger: #ef4444;
     --color-action-danger-hover: #dc2626;
     --color-action-danger-pressed: #b91c1c;
-    --color-whatsapp-button: #00d158;
+    --color-whatsapp-green: #00d158;
+    --color-whatsapp-button: var(--color-whatsapp-green);
     --color-status-success: #16a34a;
     --color-status-warning: #d97706;
     --color-status-danger: #ef4444;
@@ -879,6 +880,10 @@
     width: calc(var(--spacing) * 24);
     height: calc(var(--spacing) * 24);
   }
+  .size-\[14px\] {
+    width: 14px;
+    height: 14px;
+  }
   .size-\[34px\] {
     width: 34px;
     height: 34px;
@@ -995,6 +1000,9 @@
   .h-dvh {
     height: 100dvh;
   }
+  .h-fit {
+    height: fit-content;
+  }
   .h-full {
     height: 100%;
   }
@@ -1019,12 +1027,18 @@
   .max-h-\[68vh\] {
     max-height: 68vh;
   }
+  .max-h-\[calc\(100dvh-4rem\)\] {
+    max-height: calc(100dvh - 4rem);
+  }
   .max-h-\[calc\(100dvh-5rem\)\] {
     max-height: calc(100dvh - 5rem);
   }
   .max-h-full {
     max-height: 100%;
   }
+  .max-h-none {
+    max-height: none;
+  }
   .min-h-0 {
     min-height: 0;
   }
@@ -1301,6 +1315,15 @@
   .max-w-\[520px\] {
     max-width: 520px;
   }
+  .max-w-\[584px\] {
+    max-width: 584px;
+  }
+  .max-w-\[752px\] {
+    max-width: 752px;
+  }
+  .max-w-\[920px\] {
+    max-width: 920px;
+  }
   .max-w-\[calc\(100vw-2\.5rem\)\] {
     max-width: calc(100vw - 2.5rem);
   }
@@ -1492,6 +1515,10 @@
     --tw-translate-y: var(--active-tab-top);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-0 {
+    --tw-translate-y: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-\[-2\.5rem\] {
     --tw-translate-y: -2.5rem;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1751,6 +1778,13 @@
       margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1963,6 +1997,10 @@
     border-top-left-radius: var(--radius-4xl);
     border-top-right-radius: var(--radius-4xl);
   }
+  .rounded-t-\[inherit\] {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
   .rounded-l-full {
     border-top-left-radius: calc(infinity * 1px);
     border-bottom-left-radius: calc(infinity * 1px);
@@ -2118,6 +2156,12 @@
   .border-r-transparent {
     border-right-color: transparent;
   }
+  .bg-\[\#2c3329\] {
+    background-color: #2c3329;
+  }
+  .bg-\[\#11160f\] {
+    background-color: #11160f;
+  }
   .bg-action-danger {
     background-color: var(--color-action-danger);
   }
@@ -2277,6 +2321,9 @@
   .bg-whatsapp-button {
     background-color: var(--color-whatsapp-button);
   }
+  .bg-whatsapp-green {
+    background-color: var(--color-whatsapp-green);
+  }
   .\[background-image\:radial-gradient\(circle\,color-mix\(in_srgb\,var\(--color-line\)_55\%\,transparent\)_0\.75px\,transparent_0\.75px\)\] {
     background-image: radial-gradient(circle,color-mix(in srgb,#cbd5e1 55%,transparent) 0.75px,transparent 0.75px);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2292,9 +2339,6 @@
   .\[background-size\:24px_24px\] {
     background-size: 24px 24px;
   }
-  .bg-cover {
-    background-size: cover;
-  }
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -2559,6 +2603,9 @@
   .pt-14 {
     padding-top: calc(var(--spacing) * 14);
   }
+  .pt-\[18px\] {
+    padding-top: 18px;
+  }
   .pt-gdt-5xl {
     padding-top: var(--spacing-gdt-5xl);
   }
@@ -2840,6 +2887,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[\#ecf2ea\] {
+    color: #ecf2ea;
+  }
   .text-action-primary {
     color: var(--color-action-primary);
   }
@@ -2986,12 +3036,20 @@
     --tw-shadow: var(--shadow-3);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_4px_rgb\(0_0_0\/0\.1\)\] {
+    --tw-shadow: 0 0 4px var(--tw-shadow-color, rgb(0 0 0/0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_0_8px_2px_rgb\(23_48_22\/0\.06\)\] {
+    --tw-shadow: 0 0 8px 2px var(--tw-shadow-color, rgb(23 48 22/0.06));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0px_0px_4px_0px_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: 0px 0px 4px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_rgb\(0_0_0\/0\.04\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(0 0 0/0.04));
+  .shadow-\[inset_0_0_0_1px_rgb\(0_0_0\/0\.08\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(0 0 0/0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-\[inset_0_0_0_1px_var\(--color-line-subtle\)\] {
@@ -3073,9 +3131,6 @@
       --tw-ring-color: color-mix(in oklab, var(--color-line-focus) 40%, transparent);
     }
   }
-  .ring-surface-brand {
-    --tw-ring-color: var(--color-surface-brand);
-  }
   .inset-ring-line-focus {
     --tw-inset-ring-color: var(--color-line-focus);
   }
@@ -3173,6 +3228,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,box-shadow\,scale\] {
+    transition-property: background-color,box-shadow,scale;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[background-color\,box-shadow\,transform\] {
     transition-property: background-color,box-shadow,transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3228,6 +3288,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,transform\] {
+    transition-property: background-color,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[background-color\,translate\] {
     transition-property: background-color,translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3278,6 +3343,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[inset-inline-start\] {
+    transition-property: inset-inline-start;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[left\,right\,width\] {
     transition-property: left,right,width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3376,6 +3446,10 @@
   .transition-none {
     transition-property: none;
   }
+  .duration-\(--duration-motion-popup\) {
+    --tw-duration: var(--duration-motion-popup);
+    transition-duration: var(--duration-motion-popup);
+  }
   .duration-\(--duration-motion-press\) {
     --tw-duration: var(--duration-motion-press);
     transition-duration: var(--duration-motion-press);
@@ -3509,6 +3583,9 @@
   .\[--collapsed-y\:calc\(var\(--anchor-y\)\+var\(--toast-swipe-movement-y\)-\(var\(--toast-placement-index\)\*var\(--peek\)\)-\(var\(--shrink\)\*var\(--height\)\)\)\] {
     --collapsed-y: calc(var(--anchor-y) + var(--toast-swipe-movement-y) - (var(--toast-placement-index) * var(--peek)) - (var(--shrink) * var(--height)));
   }
+  .\[--dialog-padding\:0px\] {
+    --dialog-padding: 0px;
+  }
   .\[--dialog-padding\:1\.25rem\] {
     --dialog-padding: 1.25rem;
   }
@@ -3641,6 +3718,9 @@
   .\[transition\:transform_var\(--duration-motion-surface\)_var\(--ease-gdt-out\)\,opacity_var\(--duration-motion-surface\)_var\(--ease-gdt-out\)\] {
     transition: transform var(--duration-motion-surface) var(--ease-gdt-out),opacity var(--duration-motion-surface) var(--ease-gdt-out);
   }
+  .duration-\(--duration-motion-popup\) {
+    animation-duration: var(--duration-motion-popup);
+  }
   .duration-\(--duration-motion-press\) {
     animation-duration: var(--duration-motion-press);
   }
@@ -3895,6 +3975,11 @@
       display: none;
     }
   }
+  .group-has-\[\:focus-visible\]\/seek-thumb\:\[filter\:drop-shadow\(0_0_0\.25rem_var\(--color-line-focus\)\)\] {
+    &:is(:where(.group\/seek-thumb):has(*:is(:focus-visible)) *) {
+      filter: drop-shadow(0 0 0.25rem var(--color-line-focus));
+    }
+  }
   .group-has-\[\[aria-invalid\=true\]\]\/input-group\:bg-line-danger {
     &:is(:where(.group\/input-group):has(*:is([aria-invalid=true])) *) {
       background-color: var(--color-line-danger);
@@ -4210,6 +4295,14 @@
       color: var(--color-fg-caption-placeholder);
     }
   }
+  .group-data-\[dragging\]\/seek-thumb\:scale-125 {
+    &:is(:where(.group\/seek-thumb)[data-dragging] *) {
+      --tw-scale-x: 125%;
+      --tw-scale-y: 125%;
+      --tw-scale-z: 125%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .group-data-\[focused\=true\]\/day\:border-line-focus {
     &:is(:where(.group\/day)[data-focused="true"] *) {
       border-color: var(--color-line-focus);
@@ -4333,6 +4426,11 @@
       rotate: 180deg;
     }
   }
+  .group-data-\[popup-open\]\/theme-switcher\:rotate-180 {
+    &:is(:where(.group\/theme-switcher)[data-popup-open] *) {
+      rotate: 180deg;
+    }
+  }
   .group-data-\[selected\=true\]\/list-item\:text-fg-brand {
     &:is(:where(.group\/list-item)[data-selected="true"] *) {
       color: var(--color-fg-brand);
@@ -6751,6 +6849,11 @@
       scale: 0.97;
     }
   }
+  .active\:scale-\[0\.99\] {
+    &:active {
+      scale: 0.99;
+    }
+  }
   .active\:border-line-strong {
     &:active {
       border-color: var(--color-line-strong);
@@ -7306,6 +7409,11 @@
       height: auto;
     }
   }
+  .aria-current\:bg-surface-brand-subtle {
+    &[aria-current="true"] {
+      background-color: var(--color-surface-brand-subtle);
+    }
+  }
   .aria-disabled\:pointer-events-none {
     &[aria-disabled="true"] {
       pointer-events: none;
@@ -7869,6 +7977,11 @@
       background-color: var(--color-action-tertiary-hover);
     }
   }
+  .data-popup-open\:bg-action-tertiary-pressed {
+    &[data-popup-open] {
+      background-color: var(--color-action-tertiary-pressed);
+    }
+  }
   .data-popup-open\:bg-surface {
     &[data-popup-open] {
       background-color: var(--color-surface);
@@ -8138,14 +8251,6 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .data-\[dragging\]\:scale-125 {
-    &[data-dragging] {
-      --tw-scale-x: 125%;
-      --tw-scale-y: 125%;
-      --tw-scale-z: 125%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
   .data-\[dragging\]\:transition-none {
     &[data-dragging] {
       transition-property: none;
@@ -9525,6 +9630,16 @@
       transition: opacity var(--duration-motion-surface) var(--ease-gdt-out);
     }
   }
+  .motion-reduce\:group-data-\[dragging\]\/seek-thumb\:scale-100 {
+    @media (prefers-reduced-motion: reduce) {
+      &:is(:where(.group\/seek-thumb)[data-dragging] *) {
+        --tw-scale-x: 100%;
+        --tw-scale-y: 100%;
+        --tw-scale-z: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .motion-reduce\:active\:translate-y-0 {
     @media (prefers-reduced-motion: reduce) {
       &:active {
@@ -10013,6 +10128,11 @@
       width: calc(var(--spacing) * 120);
     }
   }
+  .sm\:w-full {
+    @media (width >= 40rem) {
+      width: 100%;
+    }
+  }
   .sm\:max-w-\[26\.5rem\] {
     @media (width >= 40rem) {
       max-width: 26.5rem;
@@ -11435,6 +11555,12 @@
       }
     }
   }
+  .\[\&_svg\:not\(\[data-slot\=currency-flag\]\)\]\:size-3\.5 {
+    & svg:not([data-slot=currency-flag]) {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&_tr\:last-child\]\:border-0 {
     & tr:last-child {
       border-style: var(--tw-border-style);
@@ -11770,6 +11896,23 @@
       margin-left: -1px;
     }
   }
+  .\[\&\>\[data-slot\=media-player\]\]\:size-full {
+    &>[data-slot=media-player] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .\[\&\>\[data-slot\=media-player\]\]\:rounded-none {
+    &>[data-slot=media-player] {
+      border-radius: 0;
+    }
+  }
+  .\[\&\>\[data-slot\=media-player\]\]\:shadow-none {
+    &>[data-slot=media-player] {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-lg {
     &:has(*:is(select[aria-hidden=true]:last-child)) {
       &>[data-slot=select-trigger]:last-of-type {
@@ -12075,6 +12218,14 @@
       color: var(--color-fg-caption-placeholder);
     }
   }
+  .group-data-\[size\=lg\]\/editorial-card\:\[\&\>svg\]\:size-5 {
+    &:is(:where(.group\/editorial-card)[data-size="lg"] *) {
+      &>svg {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
+    }
+  }
   .group-data-\[size\=lg\]\/editorial-card\:\[\&\>svg\]\:size-8 {
     &:is(:where(.group\/editorial-card)[data-size="lg"] *) {
       &>svg {
@@ -12099,6 +12250,14 @@
       }
     }
   }
+  .group-data-\[size\=md\]\/editorial-card\:\[\&\>svg\]\:size-4\.5 {
+    &:is(:where(.group\/editorial-card)[data-size="md"] *) {
+      &>svg {
+        width: calc(var(--spacing) * 4.5);
+        height: calc(var(--spacing) * 4.5);
+      }
+    }
+  }
   .group-data-\[size\=md\]\/editorial-card\:\[\&\>svg\]\:size-7 {
     &:is(:where(.group\/editorial-card)[data-size="md"] *) {
       &>svg {

package/dist/tag.js

@@ -1,7 +1,7 @@
 "use client";
+import { X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
-import { X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/tag.tsx

package/dist/testimonial-block.js

@@ -1,8 +1,8 @@
 "use client";
+import { ArrowUpRight, Play, Star } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { buttonVariants } from "./button.js";
-import { ArrowUpRight, Play, Star } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/theme-switcher.d.ts

@@ -0,0 +1,31 @@
+import { DropdownMenuTrigger } from "./dropdown-menu.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/theme-switcher.d.ts
+type ThemeSwitcherValue = "light" | "dark" | "system";
+type ThemeSwitcherOption = {
+  value: ThemeSwitcherValue;
+  label: string;
+  icon?: React.ReactNode;
+};
+declare const themeSwitcherVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const defaultThemeSwitcherOptions: readonly ThemeSwitcherOption[];
+type ThemeSwitcherProps = Omit<React.ComponentProps<typeof DropdownMenuTrigger>, "children"> & VariantProps<typeof themeSwitcherVariants> & {
+  /** The selected theme. Pass this with `onValueChange` for controlled use. */
+  value?: ThemeSwitcherValue;
+  /** The initial theme when the switcher is uncontrolled. */
+  defaultValue?: ThemeSwitcherValue;
+  /** Called when a theme is selected. Applying the theme remains app-owned. */
+  onValueChange?: (value: ThemeSwitcherValue) => void;
+  /** Available modes, in menu order. Defaults to Light, Dark, and System. */
+  options?: readonly ThemeSwitcherOption[];
+  showIcon?: boolean;
+  showLabel?: boolean;
+  /** Accessible label used when the visible theme label is hidden. */
+  "aria-label"?: string;
+};
+declare function ThemeSwitcher({ className, size, value, defaultValue, onValueChange, options, showIcon, showLabel, "aria-label": ariaLabel, ...props }: ThemeSwitcherProps): React.JSX.Element;
+//#endregion
+export { ThemeSwitcher, type ThemeSwitcherOption, type ThemeSwitcherProps, type ThemeSwitcherValue, defaultThemeSwitcherOptions, themeSwitcherVariants };

package/dist/theme-switcher.js

@@ -0,0 +1,78 @@
+"use client";
+import { ChevronDown, Monitor, Moon, Sun } from "./icons.js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/theme-switcher.tsx
+const themeSwitcherVariants = cva("group/theme-switcher inline-flex shrink-0 items-center justify-center rounded-full bg-action-tertiary font-bold text-fg-primary outline-none transition-[background-color,box-shadow,scale] duration-(--duration-motion-press) ease-gdt-out hover:bg-action-tertiary-hover active:scale-[0.97] active:bg-action-tertiary-pressed focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] data-popup-open:bg-action-tertiary-pressed motion-reduce:active:scale-100 [&_svg]:shrink-0", {
+	variants: { size: {
+		sm: "h-8 gap-1.5 px-3 text-gdt-xs [&_svg]:size-3.5",
+		md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg]:size-4",
+		lg: "h-12 gap-2.5 px-4.5 text-gdt-md [&_svg]:size-4.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const defaultThemeSwitcherOptions = [
+	{
+		value: "light",
+		label: "Light",
+		icon: /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" })
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" })
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true" })
+	}
+];
+function ThemeSwitcher({ className, size, value, defaultValue = "system", onValueChange, options = defaultThemeSwitcherOptions, showIcon = true, showLabel = true, "aria-label": ariaLabel, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const resolvedOptions = options.length ? options : defaultThemeSwitcherOptions;
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const requestedValue = value ?? uncontrolledValue;
+	const selectedTheme = resolvedOptions.find((option) => option.value === requestedValue) ?? resolvedOptions[0];
+	const selectedValue = selectedTheme.value;
+	function handleValueChange(nextValue) {
+		const nextTheme = nextValue;
+		if (value === void 0) setUncontrolledValue(nextTheme);
+		onValueChange?.(nextTheme);
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		size: resolvedSize,
+		children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			"data-slot": "theme-switcher",
+			className: cn(themeSwitcherVariants({ size: resolvedSize }), className),
+			"aria-label": ariaLabel ?? (!showLabel ? `Theme: ${selectedTheme.label}` : void 0),
+			...props,
+			children: [
+				showIcon && selectedTheme.icon,
+				showLabel && /* @__PURE__ */ jsx("span", { children: selectedTheme.label }),
+				/* @__PURE__ */ jsx(ChevronDown, {
+					"aria-hidden": "true",
+					className: "text-fg-secondary transition-transform duration-(--duration-motion-popup) group-data-[popup-open]/theme-switcher:rotate-180 motion-reduce:transition-none"
+				})
+			]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			className: "w-auto min-w-36",
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: selectedValue,
+				onValueChange: handleValueChange,
+				children: resolvedOptions.map(({ value: optionValue, label, icon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: optionValue,
+					closeOnClick: true,
+					children: [icon, label]
+				}, optionValue))
+			})
+		})]
+	});
+}
+//#endregion
+export { ThemeSwitcher, defaultThemeSwitcherOptions, themeSwitcherVariants };

package/dist/time-picker.js

@@ -1,9 +1,9 @@
 "use client";
+import { Clock } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
 import { Popover, PopoverContent } from "./popover.js";
 import { n as PickerFooter, r as PickerTrigger, t as PICKER_COLLISION_AVOIDANCE } from "./picker-xSTzeYhc.js";
-import { ClockIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/lib/time-picker-paint.ts
@@ -264,7 +264,7 @@ function TimePicker({ value, onChange, format = "12h", disabled = false, size, p
 		open,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PickerTrigger, {
-			icon: ClockIcon,
+			icon: Clock,
 			displayValue: value ?? "",
 			placeholder,
 			disabled,

package/dist/toast.d.ts

@@ -1,21 +1,49 @@
-import { PropsWithChildren } from "react";
-import { ToastManagerAddOptions, ToastManagerUpdateOptions } from "@base-ui/react/toast";
+import { PropsWithChildren, ReactNode } from "react";
+import { ToastManagerAddOptions, ToastManagerUpdateOptions, ToastObject } from "@base-ui/react/toast";
 //#region src/toast.d.ts
 type ToastVariant = "success" | "info" | "warning" | "error" | "loading";
+type ToastRenderProps = {
+  /** The live toast object, including `id`, `title`, and `description`. */
+  toast: ToastObject<ToastData>;
+  /** Dismisses this toast, playing the usual exit transition. */
+  close: () => void;
+};
 type ToastData = {
-  type: ToastVariant;
+  type?: ToastVariant;
+  render?: (props: ToastRenderProps) => ReactNode;
+  className?: string;
+};
+/**
+ * Options for `toast.add`. `render` and `className` are lifted to the top level
+ * for convenience and stored on the toast's `data` under the hood.
+ */
+type ToastAddOptions = Omit<ToastManagerAddOptions<ToastData>, "data"> & {
+  /**
+   * Replaces the default icon/title/description layout with your own markup.
+   * The toast keeps its stacking, swipe, and timeout behavior.
+   */
+  render?: (props: ToastRenderProps) => ReactNode;
+  /** Merged into the toast surface classes — restyle padding, width, colors. */
+  className?: string;
+  data?: ToastData;
 };
 declare const toastManager: import("@base-ui/react").ToastManager<any>;
-declare const toast: ((options: ToastManagerAddOptions<ToastData>) => string) & {
-  success: (options: ToastManagerAddOptions<ToastData>) => string;
-  info: (options: ToastManagerAddOptions<ToastData>) => string;
-  warning: (options: ToastManagerAddOptions<ToastData>) => string;
-  error: (options: ToastManagerAddOptions<ToastData>) => string;
-  loading: (options: ToastManagerAddOptions<ToastData>) => string;
+declare function addToast({ render, className, data, ...options }: ToastAddOptions): string;
+declare const toast: ((options: ToastAddOptions) => string) & {
+  /**
+   * Adds a toast without a preset variant. Pass `render` to take over the
+   * toast body entirely, or just `title`/`description` for the stock layout.
+   */
+  add: typeof addToast;
+  success: ({ data, ...options }: ToastAddOptions) => string;
+  info: ({ data, ...options }: ToastAddOptions) => string;
+  warning: ({ data, ...options }: ToastAddOptions) => string;
+  error: ({ data, ...options }: ToastAddOptions) => string;
+  loading: ({ data, ...options }: ToastAddOptions) => string;
   dismiss: (toastId?: string | number) => void;
   update: (toastId: string | number, options: ToastManagerUpdateOptions<ToastData>) => void;
   promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: import("@base-ui/react").ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 };
 declare function ToastProvider({ children }: PropsWithChildren): import("react").JSX.Element;
 //#endregion
-export { ToastProvider, toast, toastManager };
+export { type ToastAddOptions, type ToastData, ToastProvider, type ToastRenderProps, type ToastVariant, toast, toastManager };