kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-5V2KMO56.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/selectable-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectableCard({
+  selected,
+  onClick,
+  title,
+  description,
+  badge,
+  preview,
+  indicator = true,
+  children,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      indicator && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+            selected ? "border-primary bg-primary bg-gradient-primary shadow-glow-primary-soft" : "border-secondary/40"
+          ),
+          children: selected && /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-white" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body font-bold text-foreground", children: title }),
+          badge
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-relaxed text-muted-foreground", children: description }),
+        children
+      ] })
+    ] }),
+    preview && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-right", children: preview })
+  ] });
+  const cardClassName = cn(
+    "w-full rounded-2xl border border-transparent bg-card p-4 text-left transition-all duration-200",
+    selected ? "bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-soft" : cn("bg-gradient-card shadow-card", onClick && "hover:-translate-y-0.5 hover:shadow-card-hover"),
+    className
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: cardClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cardClassName, children: content });
+}
+
+export {
+  SelectableCard
+};

package/dist/web/chunk-5WBAFYPH.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/choice-group.tsx
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChoiceGroupContext = createContext(void 0);
+function ChoiceGroup({ legend, children, name, className }) {
+  const generated = useId();
+  return /* @__PURE__ */ jsxs("fieldset", { "data-slot": "choice-group", className: cn("m-0 min-w-0 space-y-2 border-0 p-0", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: cn(eyebrow, "mb-1 p-0 text-muted-foreground"), children: legend }),
+    /* @__PURE__ */ jsx(ChoiceGroupContext.Provider, { value: name ?? generated, children })
+  ] });
+}
+function Choice({ checked, onChange, title, detail, disabled, name, className }) {
+  const groupName = useContext(ChoiceGroupContext);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-slot": "choice",
+      className: cn(
+        "flex min-w-0 items-start gap-3 text-body text-foreground",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: name ?? groupName,
+            checked,
+            disabled,
+            onChange,
+            className: "mt-1 size-4 shrink-0 accent-primary"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+          detail && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block truncate text-caption text-muted-foreground",
+              title: typeof detail === "string" ? detail : void 0,
+              children: detail
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  ChoiceGroup,
+  Choice
+};

package/dist/web/chunk-62HIDJCD.js

@@ -0,0 +1,98 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  ArrowBack
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/page-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeader({
+  variant = "bar",
+  left,
+  title,
+  subtitle,
+  description,
+  action,
+  right,
+  className,
+  onBack,
+  backLabel = "Go back",
+  borderClassName
+}) {
+  if (variant === "page") {
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        "data-slot": "page-header",
+        "data-variant": "page",
+        className: cn("flex flex-wrap items-start justify-between gap-x-4 gap-y-3", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-leading", className: "flex min-w-0 flex-[1_1_16rem] items-start gap-3", children: [
+            onBack && /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: backLabel, onClick: onBack, className: "-ml-2" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h1", { className: "m-0 text-title font-bold text-foreground", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "m-0 mt-1 text-caption text-muted-foreground", children: description })
+            ] })
+          ] }),
+          (action ?? right) && // The title's line box is 28px; the action is centred on it, so it
+          // lines up with the title rather than with the title-plus-description block.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "page-header-actions",
+              className: "flex min-h-7 shrink-0 items-center gap-2",
+              children: action ?? right
+            }
+          )
+        ]
+      }
+    );
+  }
+  const backButton = onBack ? /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: backLabel, size: "lg", onClick: onBack }) : null;
+  const titleBlock = title ? /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-left", children: [
+    /* @__PURE__ */ jsx("div", { className: "truncate font-bold text-body text-foreground", children: title }),
+    subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1 truncate text-caption text-muted-foreground", children: subtitle })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs("header", { className: cn(
+    "sticky top-0 z-[var(--z-header)] flex min-h-14 shrink-0 items-center bg-background bg-gradient-card px-4 py-2 shadow-header backdrop-blur-xl",
+    borderClassName && "border-b",
+    borderClassName,
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "page-header-leading",
+        className: cn(
+          "flex min-w-0 items-center",
+          title ? "flex-1 gap-3" : "shrink-0"
+        ),
+        children: [
+          backButton,
+          left,
+          titleBlock
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "page-header-actions",
+        className: cn(
+          "flex min-w-0 items-center justify-end gap-2",
+          title ? "ml-3 shrink-0" : "ml-auto"
+        ),
+        children: right
+      }
+    )
+  ] });
+}
+
+export {
+  PageHeader
+};

package/dist/web/chunk-6IBQJIHT.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/collapsible.tsx
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "collapsible-trigger",
+    className: cn("group/collapsible transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft", className),
+    ...props
+  }
+));
+CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
+var CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.Content,
+  {
+    ref,
+    "data-slot": "collapsible-content",
+    className: cn("data-[state=open]:animate-fade-in motion-reduce:animate-none", className),
+    ...props
+  }
+));
+CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
+function CollapsibleChevron({ className }) {
+  return /* @__PURE__ */ jsx(
+    IconGlyph,
+    {
+      glyph: ExpandMore,
+      "aria-hidden": "true",
+      className: cn(
+        "shrink-0 text-icon-md text-muted-foreground transition-transform duration-200 group-hover/collapsible:text-secondary-content group-data-[state=open]/collapsible:rotate-180 group-data-[state=open]/collapsible:text-secondary-content motion-reduce:transition-none",
+        className
+      )
+    }
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleChevron
+};

package/dist/web/chunk-6PNGSAJB.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/dot-pagination.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var toneClasses = {
+  primary: "bg-primary bg-gradient-brand shadow-glow-primary-soft",
+  warning: "bg-warning shadow-raised"
+};
+var DotPagination = React.forwardRef(
+  ({ count, index, tone = "primary", onSelect, ariaLabel, className, ...props }, ref) => {
+    if (count <= 1) return null;
+    const interactive = typeof onSelect === "function";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": ariaLabel ?? "Pagination",
+        className: cn("flex items-center justify-center gap-1.5", className),
+        ...props,
+        children: Array.from({ length: count }).map((_, i) => {
+          const active = i === index;
+          const dotClass = cn(
+            "rounded-full transition-all duration-200",
+            active ? cn("h-2 w-5", toneClasses[tone]) : "h-2 w-2 bg-secondary/35",
+            interactive && !active && "cursor-pointer hover:bg-secondary-content/70",
+            interactive && active && "cursor-pointer"
+          );
+          const Tag = interactive ? "button" : "span";
+          return /* @__PURE__ */ jsx(
+            Tag,
+            {
+              type: interactive ? "button" : void 0,
+              role: "tab",
+              "aria-selected": active,
+              "aria-label": `Page ${i + 1} of ${count}`,
+              onClick: interactive ? () => onSelect(i) : void 0,
+              className: dotClass
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+DotPagination.displayName = "DotPagination";
+
+export {
+  DotPagination
+};

package/dist/web/chunk-6VKWG5FJ.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  MENU_VISIBLE_ITEMS,
+  MenuNoResults,
+  MenuSearch,
+  countMenuItems,
+  filterMenuItems,
+  isElementOf
+} from "./chunk-CBE7BT3M.js";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/select.tsx
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React.forwardRef(({ className, children, compact = false, hug = false, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "group flex items-center justify-between transition-all outline-none",
+      compact ? [
+        "w-auto gap-1 rounded-2xl bg-foreground/[0.09] px-2 py-1.5 text-caption leading-none shadow-raised backdrop-blur-md",
+        "hover-gradient-violet data-[state=open]:bg-secondary/20 data-[state=open]:text-secondary-content"
+      ] : [
+        hug ? "w-auto" : "w-full",
+        "gap-3 px-4 py-3 text-left text-body",
+        fieldSurface,
+        "data-[state=open]:ring-primary/50"
+      ],
+      "focus:ring-1 focus:ring-primary/50",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconGlyph,
+        {
+          glyph: ExpandMore,
+          className: cn(
+            "shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180",
+            compact ? "text-icon-xs text-foreground/55 group-data-[state=open]:text-secondary-content" : "text-icon-lg text-muted-foreground group-hover:text-secondary-content group-data-[state=open]:text-secondary-content"
+          )
+        }
+      ) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SELECT_MAX_HEIGHT = "max-h-[204px]";
+var isSelectItem = (element) => isElementOf(SelectItem)(element);
+function SelectBody({ children }) {
+  const [query, setQuery] = React.useState("");
+  const searchable = countMenuItems(children, isSelectItem) > MENU_VISIBLE_ITEMS;
+  const searching = searchable && query.trim() !== "";
+  const shown = searching ? filterMenuItems(children, isSelectItem, query) : children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    searchable && /* @__PURE__ */ jsx(MenuSearch, { value: query, onChange: setQuery }),
+    /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: searchable ? "-mr-1.5" : void 0,
+        viewportClassName: searchable ? cn(SELECT_MAX_HEIGHT, "pr-1.5") : void 0,
+        children: [
+          /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { style: { overflow: "visible" }, children: shown }),
+          searching && React.Children.count(shown) === 0 && /* @__PURE__ */ jsx(MenuNoResults, {})
+        ]
+      }
+    )
+  ] });
+}
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative min-w-[8rem] overflow-hidden rounded-2xl bg-popover/95 bg-gradient-card p-2 shadow-popover backdrop-blur",
+      "z-[var(--z-popover)]",
+      position === "popper" && "w-max min-w-[var(--radix-select-trigger-width)]",
+      className
+    ),
+    position,
+    sideOffset: 8,
+    ...props,
+    children: /* @__PURE__ */ jsx(SelectBody, { children })
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-3 py-1.5 text-caption font-semibold text-secondary-content/80", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer whitespace-nowrap select-none items-center justify-between rounded-xl px-3 py-3 text-body outline-none transition-colors",
+      "data-[highlighted]:bg-secondary/15",
+      "data-[state=checked]:bg-primary/10 data-[state=checked]:font-semibold data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary/40 data-[state=checked]:text-brand",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-icon-xxs text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-md text-brand" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator
+};

package/dist/web/chunk-76DAZT7Q.js

@@ -0,0 +1,107 @@
+"use client";
+import {
+  InlineSelector
+} from "./chunk-Z2SS7UJ4.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/filter-dropdown.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FilterDropdown({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+  compact = false,
+  onOpenPanelHeightChange,
+  hideLabel = false
+}) {
+  const selected = options.find((option) => option.id === value) ?? options[0];
+  const specificOptions = options.filter((option) => option.id !== "all");
+  const isFiltered = value !== "all";
+  const scrolls = options.length > 4;
+  const overflowBadge = value === "all" && specificOptions.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xxs font-semibold leading-none text-muted-foreground", children: [
+    "+",
+    specificOptions.length
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    InlineSelector,
+    {
+      label,
+      value,
+      options,
+      onChange,
+      className: cn("flex-1", className),
+      panelClassName: "min-w-[140px]",
+      optionClassName: "px-3 py-2.5",
+      scrollClassName: scrolls ? "max-h-none -mr-1" : void 0,
+      scrollViewportClassName: scrolls ? "max-h-[211.5px] pr-1.5" : void 0,
+      onOpenPanelHeightChange,
+      renderTrigger: ({ open }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex w-full items-center justify-between rounded-2xl leading-none outline-none transition-all",
+            compact ? "gap-1 px-2 py-1.5" : "gap-1.5 px-2.5 py-2",
+            isFiltered ? "bg-primary/10 bg-gradient-active shadow-glow-primary-faint ring-1 ring-inset ring-primary/40" : "bg-foreground/[0.09] shadow-raised backdrop-blur-md hover-gradient-violet",
+            open && !isFiltered && "bg-secondary/15 ring-1 ring-inset ring-secondary/30"
+          ),
+          children: [
+            !hideLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 font-medium uppercase tracking-eyebrow",
+                  compact ? "text-xxs" : "text-mini",
+                  isFiltered ? "text-brand" : "text-foreground/55"
+                ),
+                children: label
+              }
+            ),
+            !hideLabel && overflowBadge,
+            /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center justify-center gap-1.5", children: value === "all" ? hideLabel ? overflowBadge : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center", children: selected?.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-tiny font-bold text-foreground", children: selected?.label })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: ExpandMore,
+                className: cn(
+                  "shrink-0 text-icon-xs text-foreground/55 transition-transform",
+                  (open || isFiltered) && "text-secondary-content",
+                  open && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      renderOption: ({ option, selected: optionSelected }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex w-full items-center gap-2 leading-none transition-all",
+            optionSelected ? "text-foreground" : "text-foreground/60 hover:text-foreground/90"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center", children: option.icon }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-caption", optionSelected ? "font-bold" : "font-medium"), children: option.label })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  FilterDropdown
+};