@godxjp/ui 11.0.1 → 11.1.0

package/dist/styles/data-display-layout.css

@@ -120,13 +120,22 @@
   .ui-timeline {
     display: flex;
     flex-direction: column;
-    gap: var(--space-stack-md);
   }
 
   .ui-timeline-item {
     display: grid;
     grid-template-columns: 1.5rem minmax(0, 1fr);
-    gap: var(--space-stack-md);
+    column-gap: var(--space-stack-md);
+  }
+
+  /* Spacing lives INSIDE the item (not a flex gap between items) so the rail line
+     spans the full item height and the connector stays continuous dot-to-dot. */
+  .ui-timeline-body {
+    padding-bottom: var(--space-stack-md);
+  }
+
+  .ui-timeline-item:last-child .ui-timeline-body {
+    padding-bottom: 0;
   }
 
   .ui-timeline-rail {
@@ -207,6 +216,17 @@
 .ui-accordion-trigger:hover {
   text-decoration: underline;
 }
+.ui-accordion-trigger:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.ui-accordion-trigger:disabled,
+.ui-accordion-trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
 .ui-accordion-chevron {
   width: 1rem;
   height: 1rem;
@@ -292,3 +312,33 @@
   width: 1rem;
   height: 1rem;
 }
+
+/* Vertical orientation (opts.axis === "y") — flips the track and the arrow positions. */
+.ui-carousel[data-orientation="vertical"] .ui-carousel-content {
+  flex-direction: column;
+  margin-inline: 0;
+  margin-block: calc(var(--space-4) * -1);
+}
+
+.ui-carousel[data-orientation="vertical"] .ui-carousel-item {
+  min-width: 0;
+  min-height: 100%;
+  padding-inline: 0;
+  padding-block: var(--space-4);
+}
+
+.ui-carousel[data-orientation="vertical"] .ui-carousel-previous,
+.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
+  top: auto;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
+.ui-carousel[data-orientation="vertical"] .ui-carousel-previous {
+  top: var(--space-2);
+}
+
+.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
+  bottom: var(--space-2);
+}

package/dist/styles/layout.css

@@ -201,21 +201,39 @@
     background: hsl(var(--border));
     position: relative;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--muted-foreground));
   }
 
+  /* Vertical orientation: the separator is a horizontal strip, so swap the
+     geometry — give it height instead of width. v4 sets aria-orientation. */
+  .ui-resizable-handle[aria-orientation="vertical"] {
+    width: auto;
+    height: var(--control-border-width);
+  }
+
+  /* v4 react-resizable-panels marks the active (dragging) and disabled state
+     via the data-separator attribute value, not data-state. */
   .ui-resizable-handle:hover,
-  .ui-resizable-handle[data-state="drag"] {
+  .ui-resizable-handle[data-separator="active"] {
     background: hsl(var(--accent));
   }
 
   .ui-resizable-handle:hover::after,
-  .ui-resizable-handle[data-state="drag"]::after {
+  .ui-resizable-handle[data-separator="active"]::after {
     content: "";
     position: absolute;
     inset: 0;
     background: hsl(var(--accent-foreground) / 0.2);
   }
 
+  .ui-resizable-handle[data-separator="disabled"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   @media (min-width: 1080px) {
     .ui-split-pane[data-aside-width="sm"] {
       grid-template-columns: minmax(0, 1fr) 20rem;
@@ -465,7 +483,9 @@
 
   .ui-pagination-size-trigger {
     width: var(--pagination-size-width);
-    height: calc(var(--control-height) - 0.25rem);
+    /* Default control height — primitive never picks a sub-default tier; the app
+     * overrides via className if it wants smaller. Shared with the page buttons. */
+    height: var(--control-height);
   }
 
   .ui-pagination-list {
@@ -482,6 +502,8 @@
 
   .ui-pagination-ellipsis {
     display: flex;
+    width: var(--control-height);
+    height: var(--control-height);
     align-items: center;
     justify-content: center;
     color: hsl(var(--muted-foreground));
@@ -489,8 +511,8 @@
 
   .ui-pagination-link {
     display: inline-flex;
-    width: 2rem;
-    height: 2rem;
+    width: var(--control-height);
+    height: var(--control-height);
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);

package/dist/styles/navigation-layout.css

@@ -160,14 +160,14 @@
 
   .ui-menubar {
     display: flex;
-    min-height: 2.25rem;
+    min-height: var(--control-height);
     align-items: center;
     gap: var(--space-1);
     border-radius: var(--radius-md);
   }
 
   .ui-menubar-trigger {
-    height: 2.25rem;
+    height: var(--control-height);
     padding: 0 var(--space-3);
     border-radius: var(--radius-md);
   }
@@ -207,7 +207,7 @@
     border-radius: var(--radius-md);
     padding-inline: var(--space-2);
     padding-block: var(--space-2);
-    height: 2.25rem;
+    height: var(--control-height);
     font-size: var(--font-size-sm);
     display: inline-flex;
     align-items: center;

package/dist/styles/shell-layout.css

@@ -482,7 +482,7 @@
     display: inline-flex;
     max-width: 15rem;
     min-width: 0;
-    height: calc(var(--control-height) - 0.25rem);
+    height: var(--control-height-sm);
     align-items: center;
     gap: var(--space-1);
     padding-inline: var(--space-2);
@@ -540,7 +540,7 @@
   .tb-search {
     display: flex;
     width: min(20rem, 30vw);
-    height: calc(var(--control-height) - 0.25rem);
+    height: var(--control-height-sm);
     align-items: center;
     gap: var(--space-2);
     padding-inline: var(--space-2);
@@ -576,8 +576,8 @@
 
   .tb-icon-btn {
     display: grid;
-    width: calc(var(--control-height) - 0.25rem);
-    height: calc(var(--control-height) - 0.25rem);
+    width: var(--control-height-sm);
+    height: var(--control-height-sm);
     flex: 0 0 auto;
     place-items: center;
     border: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -266,12 +266,13 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
-    "verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
+    "verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:prop-vocabulary": "node scripts/check-prop-vocabulary.mjs",
     "check:token-tiers": "node scripts/check-token-tiers.mjs",
+    "check:control-sizing": "node scripts/check-control-sizing.mjs",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "release": "node scripts/release.mjs",
     "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",

package/dist/chunk-5NCFLCM7.js

@@ -1,255 +0,0 @@
-import { normalizeTreeOptions, formatPathLabels, getNodeByPath, filterTreeOptions, pathsEqual, pathKey } from './chunk-SMLKNECP.js';
-import { Command, CommandInput } from './chunk-HTEL5DQI.js';
-import { Checkbox } from './chunk-BE6GJGKJ.js';
-import { Button } from './chunk-M4PZNAMV.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { ScrollArea, ScrollBar } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React from 'react';
-import { X, ChevronsUpDown, Check, ChevronRight } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function pathInValues(path, values) {
-  return values.some((v) => pathsEqual(v, path));
-}
-function togglePath(values, path) {
-  if (pathInValues(path, values)) return values.filter((v) => !pathsEqual(v, path));
-  return [...values, path];
-}
-function Cascader({
-  options: optionsProp,
-  value,
-  defaultValue,
-  onValueChange,
-  multiple,
-  changeOnSelect,
-  showSearch,
-  placeholder,
-  disabled,
-  className,
-  id,
-  expandTrigger = "click",
-  fieldNames,
-  allowClear = true
-}) {
-  const { t } = useTranslation();
-  const options = React.useMemo(
-    () => normalizeTreeOptions(optionsProp, fieldNames),
-    [optionsProp, fieldNames]
-  );
-  const [open, setOpen] = React.useState(false);
-  const [activePath, setActivePath] = React.useState([]);
-  const [search, setSearch] = React.useState("");
-  const isControlledSingle = !multiple && value !== void 0;
-  const isControlledMulti = multiple && value !== void 0;
-  const [internalSingle, setInternalSingle] = React.useState(
-    multiple ? [] : defaultValue ?? []
-  );
-  const [internalMulti, setInternalMulti] = React.useState(
-    defaultValue ?? []
-  );
-  const singleValue = isControlledSingle ? value : internalSingle;
-  const multiValue = isControlledMulti ? value : internalMulti;
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
-  const displayLabel = React.useMemo(() => {
-    if (multiple) {
-      if (!multiValue.length) return null;
-      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
-    }
-    if (!singleValue.length) return null;
-    return formatPathLabels(getNodeByPath(options, singleValue));
-  }, [multiple, multiValue, singleValue, options]);
-  const commitSingle = (path) => {
-    if (!isControlledSingle) setInternalSingle(path);
-    onValueChange?.(path, getNodeByPath(options, path));
-    setOpen(false);
-    setActivePath([]);
-    setSearch("");
-  };
-  const commitMulti = (paths) => {
-    if (!isControlledMulti) setInternalMulti(paths);
-    onValueChange?.(
-      paths,
-      paths.map((p) => getNodeByPath(options, p))
-    );
-  };
-  const columns = React.useMemo(() => {
-    const cols = [options];
-    for (const segment of activePath) {
-      const col = cols.at(-1);
-      const node = col?.find((n) => n.value === segment);
-      if (node?.children?.length) cols.push(node.children);
-      else break;
-    }
-    return cols;
-  }, [options, activePath]);
-  const handleSelectNode = (node, path) => {
-    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-    if (hasChildren && !changeOnSelect) {
-      setActivePath(path);
-      return;
-    }
-    if (multiple) {
-      commitMulti(togglePath(multiValue, path));
-      return;
-    }
-    commitSingle(path);
-  };
-  const isSearching = showSearch && search.trim().length > 0;
-  const searchResults = React.useMemo(
-    () => isSearching ? filterTreeOptions(options, search) : [],
-    [options, search, isSearching]
-  );
-  const handleOpenChange = (next) => {
-    setOpen(next);
-    if (!next) {
-      setSearch("");
-      setActivePath([]);
-    }
-  };
-  const clearValue = (e) => {
-    e.stopPropagation();
-    if (multiple) commitMulti([]);
-    else commitSingle([]);
-  };
-  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex max-h-[min(280px,50vh)]", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
-      "ul",
-      {
-        role: "listbox",
-        "aria-orientation": "vertical",
-        "aria-multiselectable": multiple ? true : void 0,
-        className: "min-w-[9rem] border-e last:border-e-0",
-        onMouseLeave: expandTrigger === "hover" ? () => setActivePath(activePath.slice(0, colIndex)) : void 0,
-        children: col.map((node) => {
-          const path = [...activePath.slice(0, colIndex), node.value];
-          const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-          const active = activePath[colIndex] === node.value;
-          const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
-          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": selected,
-              "aria-haspopup": hasChildren ? "menu" : void 0,
-              "aria-expanded": hasChildren ? active : void 0,
-              disabled: node.disabled,
-              className: cn(
-                "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
-                "hover:bg-accent hover:text-accent-foreground",
-                active && "bg-accent/70 font-medium",
-                node.disabled && "pointer-events-none opacity-50"
-              ),
-              onMouseEnter: expandTrigger === "hover" && hasChildren ? () => setActivePath(path) : void 0,
-              onClick: () => !node.disabled && handleSelectNode(node, path),
-              children: [
-                multiple && /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    checked: selected,
-                    disabled: node.disabled,
-                    className: "me-1",
-                    "aria-hidden": true,
-                    tabIndex: -1
-                  }
-                ),
-                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "me-1 size-4 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: node.label }),
-                hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
-              ]
-            }
-          ) }, node.value);
-        })
-      },
-      colIndex
-    )) }),
-    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
-  ] });
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        id,
-        type: "button",
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        disabled,
-        className: cn(
-          "w-full justify-between font-normal",
-          !displayLabel && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder }),
-          /* @__PURE__ */ jsxs("span", { className: "ms-2 flex shrink-0 items-center gap-1", children: [
-            allowClear && displayLabel && !disabled && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": t("dataEntry.cascader.clear"),
-                className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
-                onClick: clearValue,
-                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-              }
-            ),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" })
-          ] })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
-      {
-        className: "w-auto min-w-[var(--radix-popover-trigger-width)] p-0",
-        align: "start",
-        children: [
-          showSearch && /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
-            CommandInput,
-            {
-              placeholder: t("dataEntry.cascader.searchPlaceholder"),
-              value: search,
-              onValueChange: setSearch
-            }
-          ) }) }),
-          isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx("div", { className: "p-1", role: "listbox", "aria-multiselectable": multiple ? true : void 0, children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
-            const label = labels.join(" / ");
-            const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": selected,
-                className: cn(
-                  "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  selected && "bg-accent/60"
-                ),
-                onClick: () => handleSelectNode({ value: path.at(-1)}, path),
-                children: [
-                  multiple ? /* @__PURE__ */ jsx(Checkbox, { checked: selected, className: "me-2", "aria-hidden": true, tabIndex: -1 }) : /* @__PURE__ */ jsx(
-                    Check,
-                    {
-                      className: cn(
-                        "me-2 size-4 shrink-0",
-                        selected ? "opacity-100" : "opacity-0"
-                      ),
-                      "aria-hidden": "true"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
-                ]
-              },
-              pathKey(path)
-            );
-          }) }) }) : renderCascadeColumns()
-        ]
-      }
-    )
-  ] });
-}
-
-export { Cascader };

package/dist/{chunk-QHODCQDW.js → chunk-BG5RNXTH.js}

@@ -1,7 +1,7 @@
 import { Input } from './chunk-VOHTRR5X.js';
 import { buttonVariants, Button } from './chunk-M4PZNAMV.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
 import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';

package/dist/{chunk-TGNBXS7H.js → chunk-PUGEOUWZ.js}

@@ -1,5 +1,5 @@
-import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
+import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-DV52WNXO.js';
 import { densityClass, pageContainerVariantClass } from './chunk-INIIF7F7.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';

package/dist/{chunk-SJ77SVEK.js → chunk-USNR424B.js}

@@ -1,5 +1,5 @@
-import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Flex, densityClass } from './chunk-INIIF7F7.js';
+import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-4MMIMZMK.js';
 import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass } from './chunk-IBK5D2Q6.js';