@zentauri-ui/zentauri-components 1.9.1 → 2.0.0

package/src/ui/combobox/combobox.test.tsx

@@ -0,0 +1,292 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "./combobox-base";
+
+function BasicCombobox({
+  multiple = false,
+  defaultValue = [],
+  onChange,
+}: {
+  multiple?: boolean;
+  defaultValue?: string[];
+  onChange?: (v: string[]) => void;
+}) {
+  return (
+    <Combobox
+      multiple={multiple}
+      defaultValue={defaultValue}
+      onChange={onChange}
+    >
+      <ComboboxTrigger>
+        <ComboboxValue placeholder="Pick a fruit" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search fruits..." />
+        <ComboboxList>
+          <ComboboxItem value="apple">Apple</ComboboxItem>
+          <ComboboxItem value="banana">Banana</ComboboxItem>
+          <ComboboxItem value="cherry">Cherry</ComboboxItem>
+          <ComboboxItem value="disabled-grape" disabled>
+            Grape
+          </ComboboxItem>
+          <ComboboxEmpty>No fruit found.</ComboboxEmpty>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+describe("Combobox", () => {
+  it("renders the trigger as a button", () => {
+    render(<BasicCombobox />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "button");
+  });
+
+  it("shows placeholder when nothing is selected", () => {
+    render(<BasicCombobox />);
+    expect(
+      screen.getByRole("button", { name: /pick a fruit/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows selected label in trigger after selection", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("button")).toHaveTextContent("Apple");
+  });
+
+  it("opens the panel and lists options on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /cherry/i })).toBeInTheDocument();
+  });
+
+  it("closes the panel on second trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    await screen.findByRole("option", { name: /apple/i });
+    await user.click(trigger);
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes after picking one value in single mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple={false} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /banana/i }));
+    expect(
+      screen.queryByRole("option", { name: /banana/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveTextContent("Banana");
+  });
+
+  it("keeps panel open after picking in multiple mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+
+  it("marks selected option with aria-selected=true", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox defaultValue={["apple"]} />);
+    await user.click(screen.getByRole("button"));
+    const apple = await screen.findByRole("option", { name: /apple/i });
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(apple).toHaveAttribute("aria-selected", "true");
+    expect(banana).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("calls onChange when a value is toggled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /cherry/i }));
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("deselects a value in multiple mode on second click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicCombobox multiple defaultValue={["apple"]} onChange={onChange} />,
+    );
+    await user.click(screen.getByRole("button"));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("marks a disabled option with aria-disabled and ignores clicks", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const grape = await screen.findByRole("option", { name: /grape/i });
+    expect(grape).toHaveAttribute("aria-disabled", "true");
+    await user.click(grape);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("Combobox — search and filtering", () => {
+  it("renders a search input inside the panel", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    expect(search).toBeInTheDocument();
+  });
+
+  it("auto-focuses the search input when panel opens", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+  });
+
+  it("filters options as the user types", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "ban");
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /cherry/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the empty state when no options match", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "xyz");
+    expect(screen.getByText(/no fruit found/i)).toBeInTheDocument();
+  });
+
+  it("clears the filter and restores all options after closing and reopening", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await user.type(await screen.findByRole("combobox"), "ban");
+    await user.click(trigger);
+    await user.click(trigger);
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+});
+
+describe("Combobox — keyboard navigation", () => {
+  it("closes the panel on Escape", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await screen.findByRole("combobox");
+    await user.keyboard("{Escape}");
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("moves highlight through options with ArrowDown/ArrowUp", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    const apple = screen.getByRole("option", { name: /apple/i });
+    expect(apple).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowDown}");
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(banana).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowUp}");
+    expect(apple).toHaveAttribute("data-active", "true");
+  });
+
+  it("selects the highlighted option on Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["apple"]);
+  });
+
+  it("skips disabled options during keyboard navigation", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowUp}");
+    expect(screen.getByRole("option", { name: /cherry/i })).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    expect(screen.getByRole("option", { name: /grape/i })).not.toHaveAttribute(
+      "data-active",
+    );
+
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("wires trigger aria attributes to the listbox", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    const listbox = screen.getByRole("listbox");
+    const controls = trigger.getAttribute("aria-controls");
+    expect(listbox).toHaveAttribute("id", controls);
+  });
+});

package/src/ui/combobox/combobox.tsx

@@ -0,0 +1,8 @@
+import { Combobox as ComboboxBase } from "./combobox-base";
+import type { ComboboxProps } from "./types";
+
+export const Combobox = (props: ComboboxProps) => {
+  return <ComboboxBase {...props} />;
+};
+
+Combobox.displayName = "Combobox";

package/src/ui/combobox/index.ts

@@ -0,0 +1,33 @@
+"use client";
+
+export {
+  Combobox,
+  ComboboxContext,
+  useCombobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxContent,
+  ComboboxSearch,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from "./combobox-base";
+export type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+  ComboboxContentProps,
+  ComboboxSearchProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+  ComboboxOption,
+  ComboboxContextType,
+  ComboboxAppearance,
+} from "./types";
+export {
+  comboboxTriggerVariants,
+  comboboxItemVariants,
+  comboboxListVariants,
+  comboboxContentVariants,
+} from "./variants";

package/src/ui/combobox/types.ts

@@ -0,0 +1,91 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  RefObject,
+} from "react";
+
+import type { zuiComboboxContentAppearances } from "../../design-system/combobox";
+import type { comboboxTriggerVariants } from "./variants";
+
+export type ComboboxOption = {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+};
+
+export type ComboboxAppearance = keyof typeof zuiComboboxContentAppearances;
+
+export type ComboboxContextType = {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  query: string;
+  setQuery: (q: string) => void;
+  selected: string[];
+  toggleValue: (v: string) => void;
+  isSelected: (v: string) => boolean;
+  multiple: boolean;
+  options: ComboboxOption[];
+  registerOption: (opt: ComboboxOption) => void;
+  visibleValues: string[];
+  isVisible: (v: string) => boolean;
+  activeValue: string | null;
+  setActiveValue: (v: string | null) => void;
+  triggerId: string;
+  listboxId: string;
+  searchRef: RefObject<HTMLInputElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+
+export type ComboboxProps = {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  multiple?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+type ComboboxTriggerVariantProps = VariantProps<typeof comboboxTriggerVariants>;
+
+export type ComboboxTriggerProps = ComboboxTriggerVariantProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
+    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+  };
+
+export type ComboboxValueProps = HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: ReactNode;
+};
+
+export type ComboboxContentProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  appearance?: ComboboxAppearance;
+  size?: "sm" | "md" | "lg";
+  spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl";
+};
+
+export type ComboboxSearchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type"
+> & {
+  className?: string;
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+export type ComboboxListProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
+
+export type ComboboxItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+  appearance?: ComboboxAppearance;
+};
+
+export type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};

package/src/ui/combobox/variants.ts

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiComboboxContentAppearances,
+  zuiComboboxContentBase,
+  zuiComboboxDisabled,
+  zuiComboboxItemAppearances,
+  zuiComboboxItemBase,
+  zuiComboboxListAppearances,
+  zuiComboboxListBase,
+  zuiComboboxSizes,
+  zuiComboboxSpacing,
+  zuiComboboxTriggerBase,
+  zuiComboboxTriggerVariants,
+} from "../../design-system/combobox";
+
+export const comboboxTriggerVariants = cva(zuiComboboxTriggerBase, {
+  variants: {
+    variant: zuiComboboxTriggerVariants,
+    size: zuiComboboxSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+export const comboboxItemVariants = cva(zuiComboboxItemBase, {
+  variants: {
+    appearance: zuiComboboxItemAppearances,
+    disabled: zuiComboboxDisabled,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxListVariants = cva(zuiComboboxListBase, {
+  variants: {
+    appearance: zuiComboboxListAppearances,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxContentVariants = cva(zuiComboboxContentBase, {
+  variants: {
+    appearance: zuiComboboxContentAppearances,
+    size: zuiComboboxSizes,
+    spacing: zuiComboboxSpacing,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default",
+  },
+});

package/dist/chunk-2RBUROXJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/timeline.ts","../src/ui/timeline/variants.ts","../src/ui/timeline/timeline-base.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn","jsxs"],"mappings":"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","file":"chunk-2RBUROXJ.js","sourcesContent":["export const zuiTimelineBase = \"flex w-full flex-col\";\n\nexport const zuiTimelineItemBase = \"relative flex gap-4\";\n\nexport const zuiTimelineIndicatorBase =\n  \"relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors\";\n\nexport const zuiTimelineIndicatorAppearances = {\n  default:\n    \"border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]\",\n  sky: \"border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]\",\n  rose: \"border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]\",\n  purple:\n    \"border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]\",\n  pink: \"border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]\",\n  orange:\n    \"border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]\",\n  yellow:\n    \"border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]\",\n  teal: \"border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]\",\n  indigo:\n    \"border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]\",\n  emerald:\n    \"border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]\",\n  gray: \"border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]\",\n  violet:\n    \"border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]\",\n  \"gradient-blue\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] dark:from-[var(--zui-timeline-indicator-gradient-blue-from-dark,oklch(42.4%_0.199_265.638))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] dark:to-[var(--zui-timeline-indicator-gradient-blue-to-dark,oklch(37.9%_0.146_265.522))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-blue-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-blue-ring-dark,oklch(42.4%_0.199_265.638_/_0.3))]\",\n  \"gradient-green\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] dark:from-[var(--zui-timeline-indicator-gradient-green-from-dark,oklch(44.8%_0.119_151.328))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] dark:to-[var(--zui-timeline-indicator-gradient-green-to-dark,oklch(39.3%_0.095_152.535))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-green-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-green-ring-dark,oklch(44.8%_0.119_151.328_/_0.3))]\",\n  \"gradient-red\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] dark:from-[var(--zui-timeline-indicator-gradient-red-from-dark,oklch(44.4%_0.177_26.899))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] dark:to-[var(--zui-timeline-indicator-gradient-red-to-dark,oklch(39.6%_0.141_25.723))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-red-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-red-ring-dark,oklch(44.4%_0.177_26.899_/_0.3))]\",\n  \"gradient-yellow\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] dark:from-[var(--zui-timeline-indicator-gradient-yellow-from-dark,oklch(47.6%_0.114_61.907))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] dark:to-[var(--zui-timeline-indicator-gradient-yellow-to-dark,oklch(42.1%_0.095_57.708))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-gradient-yellow-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-yellow-ring-dark,oklch(47.6%_0.114_61.907_/_0.3))]\",\n  \"gradient-purple\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] dark:from-[var(--zui-timeline-indicator-gradient-purple-from-dark,oklch(43.8%_0.218_303.724))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-timeline-indicator-gradient-purple-to-dark,oklch(38.1%_0.176_304.987))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-purple-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-purple-ring-dark,oklch(43.8%_0.218_303.724_/_0.3))]\",\n  \"gradient-teal\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] dark:from-[var(--zui-timeline-indicator-gradient-teal-from-dark,oklch(43.7%_0.078_188.216))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] dark:to-[var(--zui-timeline-indicator-gradient-teal-to-dark,oklch(38.6%_0.063_188.416))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-teal-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-teal-ring-dark,oklch(43.7%_0.078_188.216_/_0.3))]\",\n  \"gradient-indigo\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] dark:from-[var(--zui-timeline-indicator-gradient-indigo-from-dark,oklch(39.8%_0.195_277.366))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] dark:to-[var(--zui-timeline-indicator-gradient-indigo-to-dark,oklch(35.9%_0.144_278.697))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-indigo-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-indigo-ring-dark,oklch(39.8%_0.195_277.366_/_0.3))]\",\n  \"gradient-pink\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] dark:from-[var(--zui-timeline-indicator-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-timeline-indicator-gradient-pink-to-dark,oklch(40.8%_0.153_2.432))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-pink-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-pink-ring-dark,oklch(45.9%_0.187_3.815_/_0.3))]\",\n  \"gradient-orange\":\n    \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] dark:from-[var(--zui-timeline-indicator-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] dark:to-[var(--zui-timeline-indicator-gradient-orange-to-dark,oklch(40.8%_0.123_38.172))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-orange-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-orange-ring-dark,oklch(47%_0.157_37.304_/_0.3))]\",\n  blue: \"border-[color:var(--zui-timeline-indicator-blue-border,#2563eb)] dark:border-[color:var(--zui-timeline-indicator-blue-border-dark,#3b82f6)] bg-[var(--zui-timeline-indicator-blue-bg,#2563eb14)] dark:bg-[var(--zui-timeline-indicator-blue-bg-dark,#3b82f624)] text-[color:var(--zui-timeline-indicator-blue-fg,#2563eb)] dark:text-[color:var(--zui-timeline-indicator-blue-fg-dark,#3b82f6)] ring-2 ring-[var(--zui-timeline-indicator-blue-ring,#2563eb33)] dark:ring-[var(--zui-timeline-indicator-blue-ring-dark,#3b82f640)]\",\n  cyan: \"border-[color:var(--zui-timeline-indicator-cyan-border,#0891b2)] dark:border-[color:var(--zui-timeline-indicator-cyan-border-dark,#22d3ee)] bg-[var(--zui-timeline-indicator-cyan-bg,#0891b214)] dark:bg-[var(--zui-timeline-indicator-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-timeline-indicator-cyan-fg,#0891b2)] dark:text-[color:var(--zui-timeline-indicator-cyan-fg-dark,#22d3ee)] ring-2 ring-[var(--zui-timeline-indicator-cyan-ring,#0891b233)] dark:ring-[var(--zui-timeline-indicator-cyan-ring-dark,#22d3ee40)]\",\n  green:\n    \"border-[color:var(--zui-timeline-indicator-green-border,#16a34a)] dark:border-[color:var(--zui-timeline-indicator-green-border-dark,#22c55e)] bg-[var(--zui-timeline-indicator-green-bg,#16a34a14)] dark:bg-[var(--zui-timeline-indicator-green-bg-dark,#22c55e24)] text-[color:var(--zui-timeline-indicator-green-fg,#16a34a)] dark:text-[color:var(--zui-timeline-indicator-green-fg-dark,#22c55e)] ring-2 ring-[var(--zui-timeline-indicator-green-ring,#16a34a33)] dark:ring-[var(--zui-timeline-indicator-green-ring-dark,#22c55e40)]\",\n  lime: \"border-[color:var(--zui-timeline-indicator-lime-border,#65a30d)] dark:border-[color:var(--zui-timeline-indicator-lime-border-dark,#a3e635)] bg-[var(--zui-timeline-indicator-lime-bg,#65a30d14)] dark:bg-[var(--zui-timeline-indicator-lime-bg-dark,#a3e63524)] text-[color:var(--zui-timeline-indicator-lime-fg,#65a30d)] dark:text-[color:var(--zui-timeline-indicator-lime-fg-dark,#a3e635)] ring-2 ring-[var(--zui-timeline-indicator-lime-ring,#65a30d33)] dark:ring-[var(--zui-timeline-indicator-lime-ring-dark,#a3e63540)]\",\n  mint: \"border-[color:var(--zui-timeline-indicator-mint-border,#10b981)] dark:border-[color:var(--zui-timeline-indicator-mint-border-dark,#6ee7b7)] bg-[var(--zui-timeline-indicator-mint-bg,#10b98114)] dark:bg-[var(--zui-timeline-indicator-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-timeline-indicator-mint-fg,#10b981)] dark:text-[color:var(--zui-timeline-indicator-mint-fg-dark,#6ee7b7)] ring-2 ring-[var(--zui-timeline-indicator-mint-ring,#10b98133)] dark:ring-[var(--zui-timeline-indicator-mint-ring-dark,#6ee7b740)]\",\n  ocean:\n    \"border-[color:var(--zui-timeline-indicator-ocean-border,#0284c7)] dark:border-[color:var(--zui-timeline-indicator-ocean-border-dark,#38bdf8)] bg-[var(--zui-timeline-indicator-ocean-bg,#0284c714)] dark:bg-[var(--zui-timeline-indicator-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-timeline-indicator-ocean-fg,#0284c7)] dark:text-[color:var(--zui-timeline-indicator-ocean-fg-dark,#38bdf8)] ring-2 ring-[var(--zui-timeline-indicator-ocean-ring,#0284c733)] dark:ring-[var(--zui-timeline-indicator-ocean-ring-dark,#38bdf840)]\",\n  sapphire:\n    \"border-[color:var(--zui-timeline-indicator-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-timeline-indicator-sapphire-border-dark,#60a5fa)] bg-[var(--zui-timeline-indicator-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-timeline-indicator-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-timeline-indicator-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-timeline-indicator-sapphire-fg-dark,#60a5fa)] ring-2 ring-[var(--zui-timeline-indicator-sapphire-ring,#1d4ed833)] dark:ring-[var(--zui-timeline-indicator-sapphire-ring-dark,#60a5fa40)]\",\n  lavender:\n    \"border-[color:var(--zui-timeline-indicator-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-timeline-indicator-lavender-border-dark,#a78bfa)] bg-[var(--zui-timeline-indicator-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-timeline-indicator-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-timeline-indicator-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-timeline-indicator-lavender-fg-dark,#a78bfa)] ring-2 ring-[var(--zui-timeline-indicator-lavender-ring,#8b5cf633)] dark:ring-[var(--zui-timeline-indicator-lavender-ring-dark,#a78bfa40)]\",\n  ruby: \"border-[color:var(--zui-timeline-indicator-ruby-border,#be123c)] dark:border-[color:var(--zui-timeline-indicator-ruby-border-dark,#fb7185)] bg-[var(--zui-timeline-indicator-ruby-bg,#be123c14)] dark:bg-[var(--zui-timeline-indicator-ruby-bg-dark,#fb718524)] text-[color:var(--zui-timeline-indicator-ruby-fg,#be123c)] dark:text-[color:var(--zui-timeline-indicator-ruby-fg-dark,#fb7185)] ring-2 ring-[var(--zui-timeline-indicator-ruby-ring,#be123c33)] dark:ring-[var(--zui-timeline-indicator-ruby-ring-dark,#fb718540)]\",\n  red: \"border-[color:var(--zui-timeline-indicator-red-border,#dc2626)] dark:border-[color:var(--zui-timeline-indicator-red-border-dark,#ef4444)] bg-[var(--zui-timeline-indicator-red-bg,#dc262614)] dark:bg-[var(--zui-timeline-indicator-red-bg-dark,#ef444424)] text-[color:var(--zui-timeline-indicator-red-fg,#dc2626)] dark:text-[color:var(--zui-timeline-indicator-red-fg-dark,#ef4444)] ring-2 ring-[var(--zui-timeline-indicator-red-ring,#dc262633)] dark:ring-[var(--zui-timeline-indicator-red-ring-dark,#ef444440)]\",\n  slate:\n    \"border-[color:var(--zui-timeline-indicator-slate-border,#475569)] dark:border-[color:var(--zui-timeline-indicator-slate-border-dark,#64748b)] bg-[var(--zui-timeline-indicator-slate-bg,#47556914)] dark:bg-[var(--zui-timeline-indicator-slate-bg-dark,#64748b24)] text-[color:var(--zui-timeline-indicator-slate-fg,#475569)] dark:text-[color:var(--zui-timeline-indicator-slate-fg-dark,#64748b)] ring-2 ring-[var(--zui-timeline-indicator-slate-ring,#47556933)] dark:ring-[var(--zui-timeline-indicator-slate-ring-dark,#64748b40)]\",\n  zinc: \"border-[color:var(--zui-timeline-indicator-zinc-border,#52525b)] dark:border-[color:var(--zui-timeline-indicator-zinc-border-dark,#71717a)] bg-[var(--zui-timeline-indicator-zinc-bg,#52525b14)] dark:bg-[var(--zui-timeline-indicator-zinc-bg-dark,#71717a24)] text-[color:var(--zui-timeline-indicator-zinc-fg,#52525b)] dark:text-[color:var(--zui-timeline-indicator-zinc-fg-dark,#71717a)] ring-2 ring-[var(--zui-timeline-indicator-zinc-ring,#52525b33)] dark:ring-[var(--zui-timeline-indicator-zinc-ring-dark,#71717a40)]\",\n  stone:\n    \"border-[color:var(--zui-timeline-indicator-stone-border,#57534e)] dark:border-[color:var(--zui-timeline-indicator-stone-border-dark,#78716c)] bg-[var(--zui-timeline-indicator-stone-bg,#57534e14)] dark:bg-[var(--zui-timeline-indicator-stone-bg-dark,#78716c24)] text-[color:var(--zui-timeline-indicator-stone-fg,#57534e)] dark:text-[color:var(--zui-timeline-indicator-stone-fg-dark,#78716c)] ring-2 ring-[var(--zui-timeline-indicator-stone-ring,#57534e33)] dark:ring-[var(--zui-timeline-indicator-stone-ring-dark,#78716c40)]\",\n  royal:\n    \"border-[color:var(--zui-timeline-indicator-royal-border,#4338ca)] dark:border-[color:var(--zui-timeline-indicator-royal-border-dark,#818cf8)] bg-[var(--zui-timeline-indicator-royal-bg,#4338ca14)] dark:bg-[var(--zui-timeline-indicator-royal-bg-dark,#818cf824)] text-[color:var(--zui-timeline-indicator-royal-fg,#4338ca)] dark:text-[color:var(--zui-timeline-indicator-royal-fg-dark,#818cf8)] ring-2 ring-[var(--zui-timeline-indicator-royal-ring,#4338ca33)] dark:ring-[var(--zui-timeline-indicator-royal-ring-dark,#818cf840)]\",\n  electric:\n    \"border-[color:var(--zui-timeline-indicator-electric-border,#0ea5e9)] dark:border-[color:var(--zui-timeline-indicator-electric-border-dark,#38bdf8)] bg-[var(--zui-timeline-indicator-electric-bg,#0ea5e914)] dark:bg-[var(--zui-timeline-indicator-electric-bg-dark,#38bdf824)] text-[color:var(--zui-timeline-indicator-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-timeline-indicator-electric-fg-dark,#38bdf8)] ring-2 ring-[var(--zui-timeline-indicator-electric-ring,#0ea5e933)] dark:ring-[var(--zui-timeline-indicator-electric-ring-dark,#38bdf840)]\",\n  forest:\n    \"border-[color:var(--zui-timeline-indicator-forest-border,#166534)] dark:border-[color:var(--zui-timeline-indicator-forest-border-dark,#4ade80)] bg-[var(--zui-timeline-indicator-forest-bg,#16653414)] dark:bg-[var(--zui-timeline-indicator-forest-bg-dark,#4ade8024)] text-[color:var(--zui-timeline-indicator-forest-fg,#166534)] dark:text-[color:var(--zui-timeline-indicator-forest-fg-dark,#4ade80)] ring-2 ring-[var(--zui-timeline-indicator-forest-ring,#16653433)] dark:ring-[var(--zui-timeline-indicator-forest-ring-dark,#4ade8040)]\",\n  sunset:\n    \"border-[color:var(--zui-timeline-indicator-sunset-border,#ea580c)] dark:border-[color:var(--zui-timeline-indicator-sunset-border-dark,#fb923c)] bg-[var(--zui-timeline-indicator-sunset-bg,#ea580c14)] dark:bg-[var(--zui-timeline-indicator-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-timeline-indicator-sunset-fg,#ea580c)] dark:text-[color:var(--zui-timeline-indicator-sunset-fg-dark,#fb923c)] ring-2 ring-[var(--zui-timeline-indicator-sunset-ring,#ea580c33)] dark:ring-[var(--zui-timeline-indicator-sunset-ring-dark,#fb923c40)]\",\n  magenta:\n    \"border-[color:var(--zui-timeline-indicator-magenta-border,#c026d3)] dark:border-[color:var(--zui-timeline-indicator-magenta-border-dark,#e879f9)] bg-[var(--zui-timeline-indicator-magenta-bg,#c026d314)] dark:bg-[var(--zui-timeline-indicator-magenta-bg-dark,#e879f924)] text-[color:var(--zui-timeline-indicator-magenta-fg,#c026d3)] dark:text-[color:var(--zui-timeline-indicator-magenta-fg-dark,#e879f9)] ring-2 ring-[var(--zui-timeline-indicator-magenta-ring,#c026d333)] dark:ring-[var(--zui-timeline-indicator-magenta-ring-dark,#e879f940)]\",\n  crimson:\n    \"border-[color:var(--zui-timeline-indicator-crimson-border,#b91c1c)] dark:border-[color:var(--zui-timeline-indicator-crimson-border-dark,#f87171)] bg-[var(--zui-timeline-indicator-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-timeline-indicator-crimson-bg-dark,#f8717124)] text-[color:var(--zui-timeline-indicator-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-timeline-indicator-crimson-fg-dark,#f87171)] ring-2 ring-[var(--zui-timeline-indicator-crimson-ring,#b91c1c33)] dark:ring-[var(--zui-timeline-indicator-crimson-ring-dark,#f8717140)]\",\n  aqua: \"border-[color:var(--zui-timeline-indicator-aqua-border,#0f766e)] dark:border-[color:var(--zui-timeline-indicator-aqua-border-dark,#2dd4bf)] bg-[var(--zui-timeline-indicator-aqua-bg,#0f766e14)] dark:bg-[var(--zui-timeline-indicator-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-timeline-indicator-aqua-fg,#0f766e)] dark:text-[color:var(--zui-timeline-indicator-aqua-fg-dark,#2dd4bf)] ring-2 ring-[var(--zui-timeline-indicator-aqua-ring,#0f766e33)] dark:ring-[var(--zui-timeline-indicator-aqua-ring-dark,#2dd4bf40)]\",\n  plum: \"border-[color:var(--zui-timeline-indicator-plum-border,#7e22ce)] dark:border-[color:var(--zui-timeline-indicator-plum-border-dark,#c084fc)] bg-[var(--zui-timeline-indicator-plum-bg,#7e22ce14)] dark:bg-[var(--zui-timeline-indicator-plum-bg-dark,#c084fc24)] text-[color:var(--zui-timeline-indicator-plum-fg,#7e22ce)] dark:text-[color:var(--zui-timeline-indicator-plum-fg-dark,#c084fc)] ring-2 ring-[var(--zui-timeline-indicator-plum-ring,#7e22ce33)] dark:ring-[var(--zui-timeline-indicator-plum-ring-dark,#c084fc40)]\",\n} as const;\n\nexport const zuiTimelineIndicatorSizes = {\n  sm: \"size-5 text-[0.625rem]\",\n  md: \"size-6 text-xs\",\n  lg: \"size-7 text-sm\",\n} as const;\n\nexport const zuiTimelineConnectorBase =\n  \"pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]\";\n\nexport const zuiTimelineConnectorSizes = {\n  sm: \"left-2.5 top-6\",\n  md: \"left-3 top-7\",\n  lg: \"left-3.5 top-8\",\n} as const;\n\nexport const zuiTimelineContentBase = \"min-w-0 flex-1\";\n\nexport const zuiTimelineContentSizes = {\n  sm: \"pb-5\",\n  md: \"pb-6\",\n  lg: \"pb-8\",\n} as const;\n\nexport const zuiTimelineTitleBase =\n  \"font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]\";\n\nexport const zuiTimelineTitleSizes = {\n  sm: \"text-sm\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const zuiTimelineDescriptionBase =\n  \"text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiTimelineDescriptionSizes = {\n  sm: \"text-xs\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiTimelineBase,\n  zuiTimelineConnectorBase,\n  zuiTimelineConnectorSizes,\n  zuiTimelineContentBase,\n  zuiTimelineContentSizes,\n  zuiTimelineDescriptionBase,\n  zuiTimelineDescriptionSizes,\n  zuiTimelineIndicatorAppearances,\n  zuiTimelineIndicatorBase,\n  zuiTimelineIndicatorSizes,\n  zuiTimelineItemBase,\n  zuiTimelineTitleBase,\n  zuiTimelineTitleSizes,\n} from \"../../design-system/timeline\";\n\nexport const timelineVariants = cva(zuiTimelineBase);\n\nexport const timelineItemVariants = cva(zuiTimelineItemBase);\n\nexport const timelineConnectorVariants = cva(zuiTimelineConnectorBase, {\n  variants: {\n    size: zuiTimelineConnectorSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const timelineIndicatorVariants = cva(zuiTimelineIndicatorBase, {\n  variants: {\n    appearance: zuiTimelineIndicatorAppearances,\n    size: zuiTimelineIndicatorSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const timelineContentVariants = cva(zuiTimelineContentBase, {\n  variants: {\n    size: zuiTimelineContentSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const timelineTitleVariants = cva(zuiTimelineTitleBase, {\n  variants: {\n    size: zuiTimelineTitleSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const timelineDescriptionVariants = cva(zuiTimelineDescriptionBase, {\n  variants: {\n    size: zuiTimelineDescriptionSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  TimelineContentProps,\n  TimelineCtx,\n  TimelineDescriptionProps,\n  TimelineIndicatorProps,\n  TimelineItemCtx,\n  TimelineItemProps,\n  TimelineProps,\n  TimelineSize,\n  TimelineTitleProps,\n} from \"./types\";\nimport {\n  timelineConnectorVariants,\n  timelineContentVariants,\n  timelineDescriptionVariants,\n  timelineIndicatorVariants,\n  timelineItemVariants,\n  timelineTitleVariants,\n  timelineVariants,\n} from \"./variants\";\n\nconst TimelineContext = createContext<TimelineCtx | null>(null);\n\nconst TimelineIndexContext = createContext<number | null>(null);\n\nexport const TimelineItemContext = createContext<TimelineItemCtx | null>(null);\n\nexport function useTimelineContext(component: string): TimelineCtx {\n  const ctx = useContext(TimelineContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Timeline>`);\n  }\n  return ctx;\n}\n\nexport function useTimelineIndex(component: string): number {\n  const index = useContext(TimelineIndexContext);\n  if (index === null) {\n    throw new Error(`${component} must be used within <Timeline>`);\n  }\n  return index;\n}\n\nfunction useTimelineSize(): TimelineSize {\n  return useContext(TimelineContext)?.size ?? \"md\";\n}\n\nfunction useTimelineIsLast(): boolean {\n  return useContext(TimelineItemContext)?.isLast ?? false;\n}\n\nexport function Timeline({\n  appearance = \"default\",\n  size = \"md\",\n  className,\n  children,\n  ref,\n  ...rest\n}: TimelineProps) {\n  const items = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const ctx = useMemo<TimelineCtx>(\n    () => ({\n      appearance: appearance ?? \"default\",\n      size: size ?? \"md\",\n      total: items.length,\n    }),\n    [appearance, size, items.length],\n  );\n\n  return (\n    <TimelineContext.Provider value={ctx}>\n      <ol\n        ref={ref}\n        data-slot=\"timeline\"\n        className={cn(timelineVariants(), \"m-0 list-none p-0\", className)}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <TimelineIndexContext.Provider key={child.key} value={index}>\n            {child}\n          </TimelineIndexContext.Provider>\n        ))}\n      </ol>\n    </TimelineContext.Provider>\n  );\n}\n\nTimeline.displayName = \"Timeline\";\n\nexport function TimelineItem({\n  className,\n  children,\n  ref,\n  ...rest\n}: TimelineItemProps) {\n  const { size, total } = useTimelineContext(\"TimelineItem\");\n  const index = useTimelineIndex(\"TimelineItem\");\n  const isLast = index === total - 1;\n  const itemCtx = useMemo<TimelineItemCtx>(\n    () => ({ index, isLast }),\n    [index, isLast],\n  );\n\n  return (\n    <TimelineItemContext.Provider value={itemCtx}>\n      <li\n        ref={ref}\n        data-slot=\"timeline-item\"\n        data-last={isLast ? \"\" : undefined}\n        className={cn(timelineItemVariants(), className)}\n        {...rest}\n      >\n        {!isLast ? (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"timeline-connector\"\n            className={timelineConnectorVariants({ size })}\n          />\n        ) : null}\n        {children}\n      </li>\n    </TimelineItemContext.Provider>\n  );\n}\n\nTimelineItem.displayName = \"TimelineItem\";\n\nexport function TimelineIndicator({\n  className,\n  appearance,\n  children,\n  ref,\n  ...rest\n}: TimelineIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { appearance: rootAppearance, size } =\n    useTimelineContext(\"TimelineIndicator\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"timeline-indicator\"\n      className={cn(\n        timelineIndicatorVariants({\n          appearance: appearance ?? rootAppearance,\n          size,\n        }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTimelineIndicator.displayName = \"TimelineIndicator\";\n\nexport function TimelineContent({\n  className,\n  children,\n  ref,\n  ...rest\n}: TimelineContentProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const size = useTimelineSize();\n  const isLast = useTimelineIsLast();\n  return (\n    <div\n      ref={ref}\n      data-slot=\"timeline-content\"\n      className={cn(\n        timelineContentVariants({ size }),\n        isLast && \"pb-0\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTimelineContent.displayName = \"TimelineContent\";\n\nexport function TimelineTitle({\n  className,\n  ref,\n  ...rest\n}: TimelineTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const size = useTimelineSize();\n  return (\n    <div\n      ref={ref}\n      data-slot=\"timeline-title\"\n      className={cn(timelineTitleVariants({ size }), className)}\n      {...rest}\n    />\n  );\n}\n\nTimelineTitle.displayName = \"TimelineTitle\";\n\nexport function TimelineDescription({\n  className,\n  ref,\n  ...rest\n}: TimelineDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n  const size = useTimelineSize();\n  return (\n    <p\n      ref={ref}\n      data-slot=\"timeline-description\"\n      className={cn(timelineDescriptionVariants({ size }), className)}\n      {...rest}\n    />\n  );\n}\n\nTimelineDescription.displayName = \"TimelineDescription\";\n"]}

package/dist/chunk-3IBWZM52.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/design-system/tooltip.ts","../src/ui/tooltip/variants.ts","../src/ui/tooltip/tooltip-base.tsx"],"names":["cva","createContext","useContext","useState","useId","useCallback","useRef","useEffect","jsx","Children","isValidElement","cloneElement","cn"],"mappings":"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","file":"chunk-3IBWZM52.js","sourcesContent":["export const zuiTooltipBase =\n  \"absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none\";\n\nexport const zuiTooltipVariants = {\n  default:\n    \"bg-[var(--zui-tooltip-default-bg,#ffffff)] dark:bg-[var(--zui-tooltip-default-bg-dark,#000000)] text-[color:var(--zui-tooltip-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tooltip-default-fg-dark,#ffffff)]\",\n  outline:\n    \"border bg-[var(--zui-tooltip-outline-bg,#000000)] dark:bg-[var(--zui-tooltip-outline-bg-dark,#ffffff)] text-[color:var(--zui-tooltip-outline-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-outline-fg-dark,#000000)]\",\n  ghost:\n    \"bg-[var(--zui-tooltip-ghost-bg,oklch(27.8%_0.033_256.848))] dark:bg-[var(--zui-tooltip-ghost-bg-dark,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-tooltip-ghost-fg,#ffffffe6)] dark:text-[color:var(--zui-tooltip-ghost-fg-dark,#ffffffe6)]\",\n  glass:\n    \"border border-[color:var(--zui-tooltip-glass-border,#00000026)] dark:border-[color:var(--zui-tooltip-glass-border-dark,#ffffff26)] bg-[var(--zui-tooltip-glass-bg,#0000001a)] dark:bg-[var(--zui-tooltip-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-tooltip-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tooltip-glass-fg-dark,#ffffff)] backdrop-blur-md\",\n  emerald:\n    \"bg-[var(--zui-tooltip-emerald-bg,oklch(43.2%_0.095_166.913))] dark:bg-[var(--zui-tooltip-emerald-bg-dark,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-tooltip-emerald-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-emerald-fg-dark,#ffffff)]\",\n  indigo:\n    \"bg-[var(--zui-tooltip-indigo-bg,oklch(39.8%_0.195_277.366))] dark:bg-[var(--zui-tooltip-indigo-bg-dark,oklch(39.8%_0.195_277.366))] text-[color:var(--zui-tooltip-indigo-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-indigo-fg-dark,#ffffff)]\",\n  purple:\n    \"bg-[var(--zui-tooltip-purple-bg,oklch(43.8%_0.218_303.724))] dark:bg-[var(--zui-tooltip-purple-bg-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-purple-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-purple-fg-dark,#ffffff)]\",\n  pink: \"bg-[var(--zui-tooltip-pink-bg,oklch(45.9%_0.187_3.815))] dark:bg-[var(--zui-tooltip-pink-bg-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-pink-fg-dark,#ffffff)]\",\n  rose: \"bg-[var(--zui-tooltip-rose-bg,oklch(45.5%_0.188_13.697))] dark:bg-[var(--zui-tooltip-rose-bg-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-rose-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-rose-fg-dark,#ffffff)]\",\n  sky: \"bg-[var(--zui-tooltip-sky-bg,oklch(50%_0.134_242.749))] dark:bg-[var(--zui-tooltip-sky-bg-dark,oklch(50%_0.134_242.749))] text-[color:var(--zui-tooltip-sky-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-sky-fg-dark,#ffffff)]\",\n  teal: \"bg-[var(--zui-tooltip-teal-bg,oklch(43.7%_0.078_188.216))] dark:bg-[var(--zui-tooltip-teal-bg-dark,oklch(43.7%_0.078_188.216))] text-[color:var(--zui-tooltip-teal-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-teal-fg-dark,#ffffff)]\",\n  yellow:\n    \"bg-[var(--zui-tooltip-yellow-bg,oklch(47.6%_0.114_61.907))] dark:bg-[var(--zui-tooltip-yellow-bg-dark,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-tooltip-yellow-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-yellow-fg-dark,#ffffff)]\",\n  orange:\n    \"bg-[var(--zui-tooltip-orange-bg,oklch(47%_0.157_37.304))] dark:bg-[var(--zui-tooltip-orange-bg-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-orange-fg-dark,#ffffff)]\",\n  green:\n    \"bg-[var(--zui-tooltip-green-bg,oklch(44.8%_0.119_151.328))] dark:bg-[var(--zui-tooltip-green-bg-dark,oklch(44.8%_0.119_151.328))] text-[color:var(--zui-tooltip-green-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-green-fg-dark,#ffffff)]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-tooltip-gradient-blue-from-dark,oklch(42.4%_0.199_265.638))] to-[var(--zui-tooltip-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-tooltip-gradient-blue-to-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-blue-fg-dark,#ffffff)]\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-tooltip-gradient-green-from-dark,oklch(44.8%_0.119_151.328))] to-[var(--zui-tooltip-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-tooltip-gradient-green-to-dark,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-tooltip-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-green-fg-dark,#ffffff)]\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-tooltip-gradient-red-from-dark,oklch(44.4%_0.177_26.899))] to-[var(--zui-tooltip-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-tooltip-gradient-red-to-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-red-fg-dark,#ffffff)]\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-tooltip-gradient-yellow-from-dark,oklch(47.6%_0.114_61.907))] to-[var(--zui-tooltip-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-tooltip-gradient-yellow-to-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-tooltip-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-yellow-fg-dark,#ffffff)]\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-tooltip-gradient-purple-from-dark,oklch(43.8%_0.218_303.724))] to-[var(--zui-tooltip-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-tooltip-gradient-purple-to-dark,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-tooltip-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-purple-fg-dark,#ffffff)]\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-tooltip-gradient-teal-from-dark,oklch(43.7%_0.078_188.216))] to-[var(--zui-tooltip-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-tooltip-gradient-teal-to-dark,oklch(45%_0.085_224.283))] text-[color:var(--zui-tooltip-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-teal-fg-dark,#ffffff)]\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-tooltip-gradient-indigo-from-dark,oklch(39.8%_0.195_277.366))] to-[var(--zui-tooltip-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-tooltip-gradient-indigo-to-dark,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-tooltip-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-indigo-fg-dark,#ffffff)]\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-tooltip-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-tooltip-gradient-pink-to-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-pink-fg-dark,#ffffff)]\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-tooltip-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-tooltip-gradient-orange-to-dark,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-orange-fg-dark,#ffffff)]\",\n  blue: \"border border-[color:var(--zui-tooltip-blue-border,#2563eb)] dark:border-[color:var(--zui-tooltip-blue-border-dark,#3b82f6)] bg-[var(--zui-tooltip-blue-bg,#2563eb14)] dark:bg-[var(--zui-tooltip-blue-bg-dark,#3b82f624)] text-[color:var(--zui-tooltip-blue-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-blue-fg-dark,#f8fafc)]\",\n  cyan: \"border border-[color:var(--zui-tooltip-cyan-border,#0891b2)] dark:border-[color:var(--zui-tooltip-cyan-border-dark,#22d3ee)] bg-[var(--zui-tooltip-cyan-bg,#0891b214)] dark:bg-[var(--zui-tooltip-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-tooltip-cyan-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-cyan-fg-dark,#f8fafc)]\",\n  lime: \"border border-[color:var(--zui-tooltip-lime-border,#65a30d)] dark:border-[color:var(--zui-tooltip-lime-border-dark,#a3e635)] bg-[var(--zui-tooltip-lime-bg,#65a30d14)] dark:bg-[var(--zui-tooltip-lime-bg-dark,#a3e63524)] text-[color:var(--zui-tooltip-lime-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lime-fg-dark,#f8fafc)]\",\n  mint: \"border border-[color:var(--zui-tooltip-mint-border,#10b981)] dark:border-[color:var(--zui-tooltip-mint-border-dark,#6ee7b7)] bg-[var(--zui-tooltip-mint-bg,#10b98114)] dark:bg-[var(--zui-tooltip-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-tooltip-mint-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-mint-fg-dark,#f8fafc)]\",\n  ocean:\n    \"border border-[color:var(--zui-tooltip-ocean-border,#0284c7)] dark:border-[color:var(--zui-tooltip-ocean-border-dark,#38bdf8)] bg-[var(--zui-tooltip-ocean-bg,#0284c714)] dark:bg-[var(--zui-tooltip-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-ocean-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ocean-fg-dark,#f8fafc)]\",\n  sapphire:\n    \"border border-[color:var(--zui-tooltip-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-tooltip-sapphire-border-dark,#60a5fa)] bg-[var(--zui-tooltip-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-tooltip-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-tooltip-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sapphire-fg-dark,#f8fafc)]\",\n  lavender:\n    \"border border-[color:var(--zui-tooltip-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-tooltip-lavender-border-dark,#a78bfa)] bg-[var(--zui-tooltip-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-tooltip-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-tooltip-lavender-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lavender-fg-dark,#f8fafc)]\",\n  ruby: \"border border-[color:var(--zui-tooltip-ruby-border,#be123c)] dark:border-[color:var(--zui-tooltip-ruby-border-dark,#fb7185)] bg-[var(--zui-tooltip-ruby-bg,#be123c14)] dark:bg-[var(--zui-tooltip-ruby-bg-dark,#fb718524)] text-[color:var(--zui-tooltip-ruby-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ruby-fg-dark,#f8fafc)]\",\n  red: \"border border-[color:var(--zui-tooltip-red-border,#dc2626)] dark:border-[color:var(--zui-tooltip-red-border-dark,#ef4444)] bg-[var(--zui-tooltip-red-bg,#dc262614)] dark:bg-[var(--zui-tooltip-red-bg-dark,#ef444424)] text-[color:var(--zui-tooltip-red-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-red-fg-dark,#f8fafc)]\",\n  slate:\n    \"border border-[color:var(--zui-tooltip-slate-border,#475569)] dark:border-[color:var(--zui-tooltip-slate-border-dark,#64748b)] bg-[var(--zui-tooltip-slate-bg,#47556914)] dark:bg-[var(--zui-tooltip-slate-bg-dark,#64748b24)] text-[color:var(--zui-tooltip-slate-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-slate-fg-dark,#f8fafc)]\",\n  zinc: \"border border-[color:var(--zui-tooltip-zinc-border,#52525b)] dark:border-[color:var(--zui-tooltip-zinc-border-dark,#71717a)] bg-[var(--zui-tooltip-zinc-bg,#52525b14)] dark:bg-[var(--zui-tooltip-zinc-bg-dark,#71717a24)] text-[color:var(--zui-tooltip-zinc-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-zinc-fg-dark,#f8fafc)]\",\n  stone:\n    \"border border-[color:var(--zui-tooltip-stone-border,#57534e)] dark:border-[color:var(--zui-tooltip-stone-border-dark,#78716c)] bg-[var(--zui-tooltip-stone-bg,#57534e14)] dark:bg-[var(--zui-tooltip-stone-bg-dark,#78716c24)] text-[color:var(--zui-tooltip-stone-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-stone-fg-dark,#f8fafc)]\",\n  royal:\n    \"border border-[color:var(--zui-tooltip-royal-border,#4338ca)] dark:border-[color:var(--zui-tooltip-royal-border-dark,#818cf8)] bg-[var(--zui-tooltip-royal-bg,#4338ca14)] dark:bg-[var(--zui-tooltip-royal-bg-dark,#818cf824)] text-[color:var(--zui-tooltip-royal-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-royal-fg-dark,#f8fafc)]\",\n  electric:\n    \"border border-[color:var(--zui-tooltip-electric-border,#0ea5e9)] dark:border-[color:var(--zui-tooltip-electric-border-dark,#38bdf8)] bg-[var(--zui-tooltip-electric-bg,#0ea5e914)] dark:bg-[var(--zui-tooltip-electric-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-electric-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-electric-fg-dark,#f8fafc)]\",\n  forest:\n    \"border border-[color:var(--zui-tooltip-forest-border,#166534)] dark:border-[color:var(--zui-tooltip-forest-border-dark,#4ade80)] bg-[var(--zui-tooltip-forest-bg,#16653414)] dark:bg-[var(--zui-tooltip-forest-bg-dark,#4ade8024)] text-[color:var(--zui-tooltip-forest-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-forest-fg-dark,#f8fafc)]\",\n  sunset:\n    \"border border-[color:var(--zui-tooltip-sunset-border,#ea580c)] dark:border-[color:var(--zui-tooltip-sunset-border-dark,#fb923c)] bg-[var(--zui-tooltip-sunset-bg,#ea580c14)] dark:bg-[var(--zui-tooltip-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-tooltip-sunset-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sunset-fg-dark,#f8fafc)]\",\n  magenta:\n    \"border border-[color:var(--zui-tooltip-magenta-border,#c026d3)] dark:border-[color:var(--zui-tooltip-magenta-border-dark,#e879f9)] bg-[var(--zui-tooltip-magenta-bg,#c026d314)] dark:bg-[var(--zui-tooltip-magenta-bg-dark,#e879f924)] text-[color:var(--zui-tooltip-magenta-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-magenta-fg-dark,#f8fafc)]\",\n  crimson:\n    \"border border-[color:var(--zui-tooltip-crimson-border,#b91c1c)] dark:border-[color:var(--zui-tooltip-crimson-border-dark,#f87171)] bg-[var(--zui-tooltip-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-tooltip-crimson-bg-dark,#f8717124)] text-[color:var(--zui-tooltip-crimson-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-crimson-fg-dark,#f8fafc)]\",\n  aqua: \"border border-[color:var(--zui-tooltip-aqua-border,#0f766e)] dark:border-[color:var(--zui-tooltip-aqua-border-dark,#2dd4bf)] bg-[var(--zui-tooltip-aqua-bg,#0f766e14)] dark:bg-[var(--zui-tooltip-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-tooltip-aqua-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-aqua-fg-dark,#f8fafc)]\",\n  plum: \"border border-[color:var(--zui-tooltip-plum-border,#7e22ce)] dark:border-[color:var(--zui-tooltip-plum-border-dark,#c084fc)] bg-[var(--zui-tooltip-plum-bg,#7e22ce14)] dark:bg-[var(--zui-tooltip-plum-bg-dark,#c084fc24)] text-[color:var(--zui-tooltip-plum-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-plum-fg-dark,#f8fafc)]\",\n} as const;\n\nexport const zuiTooltipSizes = {\n  sm: \"text-xs px-2 py-1\",\n  md: \"text-sm px-3 py-1.5\",\n  lg: \"text-base px-4 py-2\",\n} as const;\n\nexport const zuiTooltipWidths = {\n  fit: \"min-w-75 md:min-w-fit\",\n  xs: \"min-w-75 md:min-w-xs\",\n  sm: \"min-w-75 md:min-w-sm\",\n  md: \"min-w-75 md:min-w-md\",\n  lg: \"min-w-75 md:min-w-lg\",\n  xl: \"min-w-75 md:min-w-xl\",\n  \"2xl\": \"min-w-75 md:min-w-2xl\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiTooltipBase,\n  zuiTooltipSizes,\n  zuiTooltipVariants,\n  zuiTooltipWidths,\n} from \"../../design-system/tooltip\";\n\nexport const tooltipVariants = cva(zuiTooltipBase, {\n  variants: {\n    variant: zuiTooltipVariants,\n    size: zuiTooltipSizes,\n    width: zuiTooltipWidths,\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n    width: \"xs\",\n  },\n});\n","\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type FocusEventHandler,\n  type ReactElement,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  TooltipProps,\n  TooltipContextType,\n  TooltipTriggerProps,\n  TooltipContentProps,\n} from \"./types\";\nimport { tooltipVariants } from \"./variants\";\n\nexport const TooltipContext = createContext<TooltipContextType | null>(null);\n\nexport const useTooltip = () => {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error(\"Tooltip components must be used within Tooltip\");\n  }\n  return context;\n};\n\nfunction mergeDescribedBy(\n  tooltipId: string,\n  existing: unknown,\n  open: boolean,\n): string | undefined {\n  if (!open) {\n    return typeof existing === \"string\" ? existing : undefined;\n  }\n  const baseIds =\n    typeof existing === \"string\" && existing.trim().length > 0\n      ? existing.split(/\\s+/).filter(Boolean)\n      : [];\n  const merged = [...new Set([...baseIds, tooltipId])];\n  return merged.join(\" \");\n}\n\nexport const Tooltip = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  position = \"top\",\n  delay = 100,\n}: TooltipProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const tooltipId = `${useId()}-tooltip`;\n\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelDelayedOpen = useCallback(() => {\n    if (showTimeoutRef.current !== null) {\n      clearTimeout(showTimeoutRef.current);\n      showTimeoutRef.current = null;\n    }\n  }, []);\n\n  const scheduleDelayedOpen = useCallback(() => {\n    cancelDelayedOpen();\n    showTimeoutRef.current = setTimeout(() => {\n      showTimeoutRef.current = null;\n      setOpen(true);\n    }, delay);\n  }, [cancelDelayedOpen, delay, setOpen]);\n\n  useEffect(() => () => cancelDelayedOpen(), [cancelDelayedOpen]);\n\n  return (\n    <TooltipContext.Provider\n      value={{\n        open,\n        setOpen,\n        position,\n        delay,\n        scheduleDelayedOpen,\n        cancelDelayedOpen,\n        tooltipId,\n      }}\n    >\n      <div className=\"relative inline-block\">{children}</div>\n    </TooltipContext.Provider>\n  );\n};\n\nexport const TooltipTrigger = ({\n  children,\n  className,\n}: TooltipTriggerProps) => {\n  const { setOpen, scheduleDelayedOpen, cancelDelayedOpen, open, tooltipId } =\n    useTooltip();\n\n  const onMouseEnter: MouseEventHandler = () => scheduleDelayedOpen();\n  const onMouseLeave: MouseEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onFocus: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(true);\n  };\n  const onBlur: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === \"Escape\") {\n      cancelDelayedOpen();\n      setOpen(false);\n    }\n  };\n\n  const childList = Children.toArray(children).filter(\n    (node) => node !== null && node !== undefined && typeof node !== \"boolean\",\n  );\n\n  const soleCandidate =\n    childList.length === 1 && isValidElement(childList[0])\n      ? (childList[0] as ReactElement<{\n          className?: string;\n          \"aria-describedby\"?: string;\n          onMouseEnter?: MouseEventHandler;\n          onMouseLeave?: MouseEventHandler;\n          onFocus?: FocusEventHandler;\n          onBlur?: FocusEventHandler;\n          onKeyDown?: KeyboardEventHandler;\n        }>)\n      : undefined;\n\n  if (soleCandidate) {\n    const describedBy = mergeDescribedBy(\n      tooltipId,\n      soleCandidate.props[\"aria-describedby\"],\n      open,\n    );\n    return cloneElement(soleCandidate, {\n      onMouseEnter: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseEnter?.(event);\n        if (!event.defaultPrevented) {\n          scheduleDelayedOpen();\n        }\n      },\n      onMouseLeave: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseLeave?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onFocus: (event: React.FocusEvent) => {\n        soleCandidate.props.onFocus?.(event);\n        if (!event.defaultPrevented) {\n          cancelDelayedOpen();\n          setOpen(true);\n        }\n      },\n      onBlur: (event: React.FocusEvent) => {\n        soleCandidate.props.onBlur?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onKeyDown: (event: React.KeyboardEvent) => {\n        soleCandidate.props.onKeyDown?.(event);\n        if (event.key === \"Escape\") {\n          cancelDelayedOpen();\n          setOpen(false);\n        }\n      },\n      className: cn(className, soleCandidate.props.className),\n      \"aria-describedby\": describedBy,\n    });\n  }\n\n  return (\n    <span\n      className={className}\n      tabIndex={0}\n      aria-describedby={mergeDescribedBy(tooltipId, undefined, open)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport const TooltipContent = ({\n  children,\n  className,\n  variant,\n  size,\n  width,\n}: TooltipContentProps) => {\n  const { open, position, tooltipId } = useTooltip();\n\n  if (!open) return null;\n\n  const positionStyles = {\n    top: \"bottom-full mb-2\",\n    bottom: \"top-full mt-2\",\n    left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n    right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n  };\n\n  return (\n    <div\n      id={tooltipId}\n      data-open={open}\n      role=\"tooltip\"\n      className={cn(\n        tooltipVariants({ variant, size, width }),\n        positionStyles[position],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"]}