@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/time-picker.js

@@ -1,472 +1,255 @@
-// src/components/ui/time-picker.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Popover, PopoverContent } from "./popover.js";
+import { n as PickerTrigger, t as PickerFooter } from "./picker-lzgmsNfG.js";
 import { ClockIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var 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,transform] 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 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-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "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"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs2(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx3(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx3(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-// src/components/ui/time-picker.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var ITEM_HEIGHT = 40;
-var VISIBLE_COUNT = 5;
-var SCROLL_PADDING = Math.floor(VISIBLE_COUNT / 2) * ITEM_HEIGHT;
-var CURVE_CLAMP = 3;
-var HOURS_12 = Array.from(
-  { length: 12 },
-  (_, i) => String(i + 1).padStart(2, "0")
-);
-var HOURS_24 = Array.from(
-  { length: 24 },
-  (_, i) => String(i).padStart(2, "0")
-);
-var MINUTES = Array.from(
-  { length: 60 },
-  (_, i) => String(i).padStart(2, "0")
-);
-var PERIODS = ["AM", "PM"];
+//#region src/time-picker.tsx
+const ITEM_HEIGHT = 40;
+const VISIBLE_COUNT = 5;
+const SCROLL_PADDING = Math.floor(VISIBLE_COUNT / 2) * ITEM_HEIGHT;
+const CURVE_CLAMP = 3;
+const HOURS_12 = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
+const HOURS_24 = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
+const PERIODS = ["AM", "PM"];
 function parseTimeString(value, format) {
-  if (value) {
-    if (format === "12h") {
-      const m = value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-      if (m) {
-        return {
-          hour: m[1].padStart(2, "0"),
-          minute: m[2],
-          period: m[3].toUpperCase()
-        };
-      }
-    } else {
-      const m = value.match(/^(\d{1,2}):(\d{2})$/);
-      if (m) {
-        return { hour: m[1].padStart(2, "0"), minute: m[2], period: "" };
-      }
-    }
-  }
-  const now = /* @__PURE__ */ new Date();
-  if (format === "12h") {
-    const h = now.getHours();
-    return {
-      hour: String(h % 12 || 12).padStart(2, "0"),
-      minute: String(now.getMinutes()).padStart(2, "0"),
-      period: h >= 12 ? "PM" : "AM"
-    };
-  }
-  return {
-    hour: String(now.getHours()).padStart(2, "0"),
-    minute: String(now.getMinutes()).padStart(2, "0"),
-    period: ""
-  };
+	if (value) if (format === "12h") {
+		const m = value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+		if (m) return {
+			hour: m[1].padStart(2, "0"),
+			minute: m[2],
+			period: m[3].toUpperCase()
+		};
+	} else {
+		const m = value.match(/^(\d{1,2}):(\d{2})$/);
+		if (m) return {
+			hour: m[1].padStart(2, "0"),
+			minute: m[2],
+			period: ""
+		};
+	}
+	const now = /* @__PURE__ */ new Date();
+	if (format === "12h") {
+		const h = now.getHours();
+		return {
+			hour: String(h % 12 || 12).padStart(2, "0"),
+			minute: String(now.getMinutes()).padStart(2, "0"),
+			period: h >= 12 ? "PM" : "AM"
+		};
+	}
+	return {
+		hour: String(now.getHours()).padStart(2, "0"),
+		minute: String(now.getMinutes()).padStart(2, "0"),
+		period: ""
+	};
 }
 function formatTimeValue(tv, format) {
-  if (format === "12h") return `${tv.hour}:${tv.minute} ${tv.period}`;
-  return `${tv.hour}:${tv.minute}`;
+	if (format === "12h") return `${tv.hour}:${tv.minute} ${tv.period}`;
+	return `${tv.hour}:${tv.minute}`;
 }
-function TimeColumn({ items, value, onChange }) {
-  const scrollRef = React.useRef(null);
-  const itemRefs = React.useRef([]);
-  const [centerIndex, setCenterIndex] = React.useState(
-    () => Math.max(0, items.indexOf(value))
-  );
-  const isProgrammatic = React.useRef(false);
-  const settleRef = React.useRef(null);
-  const onChangeRef = React.useRef(onChange);
-  onChangeRef.current = onChange;
-  const paintCurve = React.useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const offset = el.scrollTop / ITEM_HEIGHT;
-    itemRefs.current.forEach((node, index) => {
-      if (!node) return;
-      const distance = index - offset;
-      const abs = Math.min(Math.abs(distance), CURVE_CLAMP);
-      const tilt = Math.max(Math.min(distance, CURVE_CLAMP), -CURVE_CLAMP);
-      node.style.opacity = String(Math.max(1 - abs * 0.28, 0.2));
-      node.style.transform = `perspective(280px) rotateX(${tilt * -20}deg) scale(${1 - abs * 0.04})`;
-    });
-  }, []);
-  React.useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    isProgrammatic.current = true;
-    el.scrollTop = centerIndex * ITEM_HEIGHT;
-    paintCurve();
-    requestAnimationFrame(() => {
-      isProgrammatic.current = false;
-    });
-  }, []);
-  React.useEffect(() => {
-    const idx = items.indexOf(value);
-    if (idx === -1 || idx === centerIndex) return;
-    setCenterIndex(idx);
-    const el = scrollRef.current;
-    if (!el) return;
-    isProgrammatic.current = true;
-    el.scrollTo({ top: idx * ITEM_HEIGHT, behavior: "smooth" });
-    setTimeout(() => {
-      isProgrammatic.current = false;
-      paintCurve();
-    }, 320);
-  }, [value]);
-  function handleScroll() {
-    paintCurve();
-    if (isProgrammatic.current) return;
-    const el = scrollRef.current;
-    if (!el) return;
-    const idx = Math.max(
-      0,
-      Math.min(Math.round(el.scrollTop / ITEM_HEIGHT), items.length - 1)
-    );
-    if (idx !== centerIndex) setCenterIndex(idx);
-    if (settleRef.current) clearTimeout(settleRef.current);
-    settleRef.current = setTimeout(() => onChangeRef.current(items[idx]), 120);
-  }
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll: handleScroll,
-      style: { height: `${VISIBLE_COUNT * ITEM_HEIGHT}px` },
-      className: "overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-      children: /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            paddingTop: `${SCROLL_PADDING}px`,
-            paddingBottom: `${SCROLL_PADDING}px`
-          },
-          children: items.map((item, index) => {
-            const dist = Math.abs(index - centerIndex);
-            return /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                ref: (node) => {
-                  itemRefs.current[index] = node;
-                },
-                onClick: () => scrollRef.current?.scrollTo({
-                  top: index * ITEM_HEIGHT,
-                  behavior: "smooth"
-                }),
-                style: { height: `${ITEM_HEIGHT}px` },
-                className: "flex w-full cursor-pointer items-center justify-center select-none will-change-transform",
-                children: /* @__PURE__ */ jsx4(
-                  "span",
-                  {
-                    className: cn(
-                      "rounded-full px-4 py-1.5 text-gdt-sm font-medium transition-colors",
-                      dist === 0 ? "bg-action-primary text-fg-on-brand" : dist === 1 ? "text-fg-secondary" : "text-fg-caption-placeholder"
-                    ),
-                    children: item
-                  }
-                )
-              },
-              item
-            );
-          })
-        }
-      )
-    }
-  );
+function TimeColumn({ label, items, value, onChange }) {
+	const scrollRef = React.useRef(null);
+	const itemRefs = React.useRef([]);
+	const [centerIndex, setCenterIndex] = React.useState(() => Math.max(0, items.indexOf(value)));
+	const isProgrammatic = React.useRef(false);
+	const onChangeRef = React.useRef(onChange);
+	onChangeRef.current = onChange;
+	const paintCurve = React.useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const offset = el.scrollTop / ITEM_HEIGHT;
+		itemRefs.current.forEach((node, index) => {
+			if (!node) return;
+			const distance = index - offset;
+			const abs = Math.min(Math.abs(distance), CURVE_CLAMP);
+			const tilt = Math.max(Math.min(distance, CURVE_CLAMP), -3);
+			node.style.opacity = String(Math.max(1 - abs * .28, .2));
+			node.style.transform = `perspective(280px) rotateX(${tilt * -20}deg) scale(${1 - abs * .04})`;
+		});
+	}, []);
+	React.useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		isProgrammatic.current = true;
+		el.scrollTop = centerIndex * ITEM_HEIGHT;
+		paintCurve();
+		requestAnimationFrame(() => {
+			isProgrammatic.current = false;
+		});
+	}, []);
+	React.useEffect(() => {
+		const idx = items.indexOf(value);
+		if (idx === -1 || idx === centerIndex) return;
+		setCenterIndex(idx);
+		const el = scrollRef.current;
+		if (!el) return;
+		isProgrammatic.current = true;
+		el.scrollTo({
+			top: idx * ITEM_HEIGHT,
+			behavior: "smooth"
+		});
+		setTimeout(() => {
+			isProgrammatic.current = false;
+			paintCurve();
+		}, 320);
+	}, [value]);
+	function selectIndex(index) {
+		const el = scrollRef.current;
+		if (!el) return;
+		isProgrammatic.current = true;
+		setCenterIndex(index);
+		onChangeRef.current(items[index]);
+		el.scrollTo({
+			top: index * ITEM_HEIGHT,
+			behavior: "smooth"
+		});
+		setTimeout(() => {
+			isProgrammatic.current = false;
+		}, 350);
+	}
+	function handleScroll() {
+		paintCurve();
+		if (isProgrammatic.current) return;
+		const el = scrollRef.current;
+		if (!el) return;
+		const idx = Math.max(0, Math.min(Math.round(el.scrollTop / ITEM_HEIGHT), items.length - 1));
+		if (idx !== centerIndex) {
+			setCenterIndex(idx);
+			onChangeRef.current(items[idx]);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			style: { height: `${ITEM_HEIGHT - 4}px` },
+			className: "pointer-events-none absolute inset-x-0.5 top-1/2 -translate-y-1/2 rounded-full bg-action-primary"
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			onScroll: handleScroll,
+			role: "listbox",
+			"aria-label": label,
+			style: { height: `${VISIBLE_COUNT * ITEM_HEIGHT}px` },
+			className: "relative snap-y snap-mandatory overflow-y-scroll overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					paddingTop: `${SCROLL_PADDING}px`,
+					paddingBottom: `${SCROLL_PADDING}px`
+				},
+				children: items.map((item, index) => {
+					const dist = Math.abs(index - centerIndex);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": index === centerIndex,
+						tabIndex: index === centerIndex ? 0 : -1,
+						ref: (node) => {
+							itemRefs.current[index] = node;
+						},
+						onClick: () => selectIndex(index),
+						style: { height: `${ITEM_HEIGHT}px` },
+						className: "flex w-full cursor-pointer snap-center items-center justify-center select-none will-change-transform",
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("text-gdt-sm font-medium transition-colors", dist === 0 ? "text-fg-on-brand" : dist === 1 ? "text-fg-secondary" : "text-fg-caption-placeholder"),
+							children: item
+						})
+					}, item);
+				})
+			})
+		})]
+	});
 }
-function TimePicker({
-  value,
-  onChange,
-  format = "12h",
-  disabled = false,
-  placeholder = "Select time",
-  className
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [pending, setPending] = React.useState(
-    () => parseTimeString(value, format)
-  );
-  function handleOpenChange(next) {
-    if (next) setPending(parseTimeString(value, format));
-    setOpen(next);
-  }
-  const columns = [
-    { key: "Hour", show: true },
-    { key: "Minute", show: true },
-    { key: "Period", show: format === "12h" }
-  ].filter((c) => c.show);
-  return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxs3(
-      PopoverTrigger,
-      {
-        disabled,
-        className: cn(
-          "flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none",
-          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__ */ jsx4(
-            "span",
-            {
-              className: cn(
-                "min-w-0 truncate",
-                !value && "text-fg-caption-placeholder"
-              ),
-              children: value || placeholder
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            ClockIcon,
-            {
-              className: cn(
-                "ml-2 size-4 shrink-0",
-                disabled ? "text-fg-caption-placeholder" : "text-fg-secondary"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      PopoverContent,
-      {
-        showArrow: false,
-        align: "start",
-        className: "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl p-0",
-        children: [
-          /* @__PURE__ */ jsx4("div", { className: "w-full flex gap-2 items-center justify-center border-b border-line-subtle", children: columns.map((column) => /* @__PURE__ */ jsx4(
-            "p",
-            {
-              className: cn(
-                "py-3 text-center text-gdt-xs text-fg-caption-placeholder",
-                format === "12h" ? "w-20.5" : "w-31"
-              ),
-              children: column.key
-            },
-            column.key
-          )) }),
-          /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: cn(
-                "flex gap-2 justify-center px-3 pt-2",
-                format === "12h" ? "*:w-20.5" : "*:w-31"
-              ),
-              children: [
-                /* @__PURE__ */ jsx4(
-                  TimeColumn,
-                  {
-                    items: format === "12h" ? HOURS_12 : HOURS_24,
-                    value: pending.hour,
-                    onChange: (hour) => setPending((prev) => ({ ...prev, hour }))
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  TimeColumn,
-                  {
-                    items: MINUTES,
-                    value: pending.minute,
-                    onChange: (minute) => setPending((prev) => ({ ...prev, minute }))
-                  }
-                ),
-                format === "12h" && /* @__PURE__ */ jsx4(
-                  TimeColumn,
-                  {
-                    items: PERIODS,
-                    value: pending.period,
-                    onChange: (period) => setPending((prev) => ({ ...prev, period }))
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs3("div", { className: "mt-2 flex items-center justify-between border-t border-line-subtle px-4 py-3", children: [
-            /* @__PURE__ */ jsx4(
-              Button,
-              {
-                variant: "tertiary-outline",
-                size: "sm",
-                onClick: () => setOpen(false),
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              Button,
-              {
-                size: "sm",
-                onClick: () => {
-                  onChange?.(formatTimeValue(pending, format));
-                  setOpen(false);
-                },
-                children: "Apply"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+function TimePicker({ value, onChange, format = "12h", disabled = false, placeholder = "Select time", className }) {
+	const [open, setOpen] = React.useState(false);
+	const [pending, setPending] = React.useState(() => parseTimeString(value, format));
+	function handleOpenChange(next) {
+		if (next) setPending(parseTimeString(value, format));
+		setOpen(next);
+	}
+	const columns = [
+		{
+			key: "Hour",
+			show: true
+		},
+		{
+			key: "Minute",
+			show: true
+		},
+		{
+			key: "Period",
+			show: format === "12h"
+		}
+	].filter((c) => c.show);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PickerTrigger, {
+			icon: ClockIcon,
+			displayValue: value ?? "",
+			placeholder,
+			disabled,
+			open,
+			className
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			className: "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl p-0",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex w-full items-center justify-center gap-2 border-b border-line-subtle",
+					children: columns.map((column) => /* @__PURE__ */ jsx("p", {
+						className: cn("py-3 text-center text-gdt-xs text-fg-caption-placeholder", format === "12h" ? "w-20.5" : "w-31"),
+						children: column.key
+					}, column.key))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex justify-center gap-2 px-3 pt-2", format === "12h" ? "*:w-20.5" : "*:w-31"),
+					children: [
+						/* @__PURE__ */ jsx(TimeColumn, {
+							label: "Hour",
+							items: format === "12h" ? HOURS_12 : HOURS_24,
+							value: pending.hour,
+							onChange: (hour) => setPending((prev) => ({
+								...prev,
+								hour
+							}))
+						}),
+						/* @__PURE__ */ jsx(TimeColumn, {
+							label: "Minute",
+							items: MINUTES,
+							value: pending.minute,
+							onChange: (minute) => setPending((prev) => ({
+								...prev,
+								minute
+							}))
+						}),
+						format === "12h" && /* @__PURE__ */ jsx(TimeColumn, {
+							label: "Period",
+							items: PERIODS,
+							value: pending.period,
+							onChange: (period) => setPending((prev) => ({
+								...prev,
+								period
+							}))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-2 w-full",
+					children: /* @__PURE__ */ jsx(PickerFooter, {
+						secondaryLabel: "Cancel",
+						onSecondary: () => setOpen(false),
+						onApply: () => {
+							onChange?.(formatTimeValue(pending, format));
+							setOpen(false);
+						}
+					})
+				})
+			]
+		})]
+	});
 }
-export {
-  TimePicker
-};
-//# sourceMappingURL=time-picker.js.map
+//#endregion
+export { TimePicker };