@godxjp/ui 15.0.0 → 16.0.0

package/dist/components/data-entry/index.d.ts

@@ -45,8 +45,6 @@ export { Cascader } from "./cascader";
 export type { CascaderProps, TreeOption, TreeFieldNames } from "./cascader";
 export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select";
 export type { TreeSelectProps } from "./tree-select";
-export { TimeInput } from "./time-input";
-export type { TimeInputProps } from "./time-input";
 export { Transfer } from "./transfer";
 export type { TransferProps, TransferItemProp } from "./transfer";
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command";

package/dist/components/data-entry/index.js

@@ -35,7 +35,6 @@ import { ColorPicker } from "./color-picker";
 import { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from "./upload";
 import { Cascader } from "./cascader";
 import { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select";
-import { TimeInput } from "./time-input";
 import { Transfer } from "./transfer";
 import {
   Command,
@@ -101,7 +100,6 @@ export {
   Switch,
   TagInput,
   Textarea,
-  TimeInput,
   TimePicker,
   Toggle,
   ToggleGroup,

package/dist/components/data-entry/time-picker.js

@@ -5,7 +5,7 @@ import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { isValidHhmm, normalizeHhmm } from "../../lib/datetime";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
 import { Input } from "./input";
 function pad2(n) {
   return String(n).padStart(2, "0");
@@ -233,59 +233,58 @@ function TimePicker({
     setValue("");
     setText("");
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id,
-        name,
-        value: text,
-        disabled,
-        placeholder: resolvedPlaceholder,
-        inputMode: "numeric",
-        autoComplete: "off",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        className: cn("tabular-nums", showClear ? "pe-16" : "pe-10"),
-        onClick: () => {
-          if (!disabled) setOpen(true);
-        },
-        onKeyDown: (event) => {
-          if (event.key === "ArrowDown") {
-            event.preventDefault();
-            setOpen(true);
-          } else if (event.key === "Escape" && open) {
-            setOpen(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          name,
+          value: text,
+          disabled,
+          placeholder: resolvedPlaceholder,
+          inputMode: "numeric",
+          autoComplete: "off",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          className: cn("tabular-nums", "pe-10"),
+          onClick: () => {
+            if (!disabled) setOpen(true);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+            } else if (event.key === "Escape" && open) {
+              setOpen(false);
+            }
+          },
+          onChange: (event) => {
+            setText(event.target.value);
+            const normalized = normalizeHhmm(event.target.value);
+            if (normalized) setValue(normalized);
+          },
+          onBlur: (event) => {
+            const normalized = normalizeHhmm(event.target.value);
+            setText(normalized ?? (isValidHhmm(value) ? value : ""));
           }
-        },
-        onChange: (event) => {
-          setText(event.target.value);
-          const normalized = normalizeHhmm(event.target.value);
-          if (normalized) setValue(normalized);
-        },
-        onBlur: (event) => {
-          const normalized = normalizeHhmm(event.target.value);
-          setText(normalized ?? (isValidHhmm(value) ? value : ""));
         }
-      }
-    ),
-    showClear ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        disabled,
-        tabIndex: -1,
-        "aria-label": t("common.clear") ?? "Clear",
-        className: "text-muted-foreground absolute inset-y-0 end-8 h-full px-2 hover:bg-transparent",
-        onClick: clear,
-        children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      ),
+      showClear ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          disabled,
+          tabIndex: -1,
+          "aria-label": t("common.clear") ?? "Clear",
+          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
+          onClick: clear,
+          children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+        }
+      ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
@@ -297,31 +296,31 @@ function TimePicker({
           className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
           children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
-      ) }),
-      /* @__PURE__ */ jsx(
-        PopoverContent,
-        {
-          className: "w-auto p-0",
-          align: "end",
-          onOpenAutoFocus: (event) => event.preventDefault(),
-          children: /* @__PURE__ */ jsx(
-            TimePickerPanel,
-            {
-              value: value || "09:00",
-              minuteStep,
-              use12h,
-              onChange: (next) => {
-                setValue(next);
-                setText(next);
-              },
-              onDone: () => {
-                setOpen(false);
-              }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-auto p-0",
+        align: "end",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          TimePickerPanel,
+          {
+            value: value || "09:00",
+            minuteStep,
+            use12h,
+            onChange: (next) => {
+              setValue(next);
+              setText(next);
+            },
+            onDone: () => {
+              setOpen(false);
             }
-          )
-        }
-      )
-    ] })
+          }
+        )
+      }
+    )
   ] });
 }
 export {

package/dist/components/navigation/pagination.js

@@ -164,7 +164,7 @@ function Pagination({
               /* @__PURE__ */ jsx(
                 SelectTrigger,
                 {
-                  className: "ui-pagination-size-trigger",
+                  className: "ui-pagination-size-trigger w-[var(--pagination-size-width)]",
                   "aria-label": t("navigation.pagination.pageSize"),
                   children: /* @__PURE__ */ jsx(SelectValue, {})
                 }

package/dist/components/ui/index.d.ts

@@ -21,7 +21,6 @@ export { Separator } from "./separator";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip";
 export * from "./dropdown-menu";
 export * from "./input";
-export * from "./time-input";
 export * from "./label";
 export * from "./pagination";
 export * from "./password-strength";

package/dist/components/ui/index.js

@@ -21,7 +21,6 @@ import { Separator } from "./separator";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip";
 export * from "./dropdown-menu";
 export * from "./input";
-export * from "./time-input";
 export * from "./label";
 export * from "./pagination";
 export * from "./password-strength";

package/dist/styles/alert-layout.css

@@ -193,6 +193,14 @@
     border-radius: var(--skeleton-radius);
   }
 
+  /* Drop the self-frame inside a flush CardContent so the Card supplies the single
+   * border — mirrors `.ui-data-table-surface` so the skeleton placeholder and the
+   * real DataTable it swaps for sit identically (no nested double border). */
+  [data-slot="card-content"][data-flush] .ui-skeleton-table {
+    border-width: 0;
+    border-radius: 0;
+  }
+
   .ui-skeleton-table-head {
     display: flex;
     align-items: center;

package/dist/styles/layout.css

@@ -84,8 +84,14 @@
     justify-content: space-evenly;
   }
 
-  .ui-flex-gap-xs,
+  .ui-flex-gap-xs {
+    gap: var(--space-stack-xs);
+  }
+  /* Match the other `.ui-stack-*` sizes: a stack is a vertical column, not a row.
+   * Without this, `gap="xs"` stacks (e.g. ToolbarGroup label + control) laid out
+   * as a row and squeezed CJK labels into a vertical wrap. */
   .ui-stack-xs {
+    flex-direction: column;
     gap: var(--space-stack-xs);
   }
   .ui-flex-gap-sm {
@@ -591,8 +597,7 @@
     font-variant-numeric: tabular-nums;
   }
 
-  .ui-toolbar,
-  .ui-filter-bar {
+  .ui-toolbar {
     display: flex;
     flex-direction: column;
     gap: var(--filter-bar-gap);
@@ -600,41 +605,35 @@
   }
 
   @media (min-width: 640px) {
-    .ui-toolbar,
-    .ui-filter-bar {
+    .ui-toolbar {
       flex-flow: row wrap;
       align-items: flex-end;
     }
   }
 
-  .ui-toolbar-clear,
-  .ui-filter-clear {
+  .ui-toolbar-clear {
     width: 100%;
   }
 
   @media (min-width: 640px) {
-    .ui-toolbar-clear,
-    .ui-filter-clear {
+    .ui-toolbar-clear {
       width: auto;
       margin-inline-start: auto;
     }
   }
 
-  .ui-toolbar-group,
-  .ui-filter-group {
+  .ui-toolbar-group {
     min-width: 0;
     width: 100%;
   }
 
   @media (min-width: 640px) {
-    .ui-toolbar-group,
-    .ui-filter-group {
+    .ui-toolbar-group {
       width: auto;
     }
   }
 
-  .ui-toolbar-label,
-  .ui-filter-label {
+  .ui-toolbar-label {
     display: flex;
     align-items: center;
     color: hsl(var(--muted-foreground));

package/dist/styles/navigation-layout.css

@@ -17,7 +17,6 @@
   .ui-context-menu-checkbox-item,
   .ui-context-menu-radio-item,
   .ui-context-menu-shortcut,
-  .ui-context-menu-content > div,
   .ui-menubar-item,
   .ui-menubar-label,
   .ui-menubar-trigger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "15.0.0",
+  "version": "16.0.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,

package/dist/components/data-entry/time-input.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-type TimeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    step?: number;
-};
-export declare function TimeInput({ value: controlledValue, defaultValue, onValueChange, placeholder, step, className, name, id, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
-export type { TimeInputProps };

package/dist/components/data-entry/time-input.js

@@ -1,137 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-import { isValidHhmm, normalizeHhmm } from "../../lib/datetime";
-function clampStep(step) {
-  if (!step || Number.isNaN(step)) return 1;
-  const parsed = Math.max(1, Math.floor(step));
-  if (!Number.isFinite(parsed)) return 1;
-  return Math.min(59, parsed);
-}
-function applyStep(value, step) {
-  const normalized = normalizeHhmm(value);
-  if (!normalized) return value;
-  const [hourText, minuteText] = normalized.split(":");
-  const hour = Number(hourText);
-  const minute = Number(minuteText);
-  const floored = Math.floor(minute / step) * step;
-  const safeMinute = Math.min(59, Math.max(0, floored));
-  return `${String(hour).padStart(2, "0")}:${String(safeMinute).padStart(2, "0")}`;
-}
-function maskTime(raw) {
-  const digits = raw.replace(/\D/g, "").slice(0, 4);
-  if (digits.length <= 2) return digits;
-  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
-}
-function stepTime(value, deltaMinutes) {
-  const normalized = normalizeHhmm(value) ?? "00:00";
-  const [hourText, minuteText] = normalized.split(":");
-  const total = (Number(hourText) * 60 + Number(minuteText) + deltaMinutes + 24 * 60) % (24 * 60);
-  const hour = Math.floor(total / 60);
-  const minute = total % 60;
-  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
-}
-function TimeInput({
-  value: controlledValue,
-  defaultValue = "",
-  onValueChange,
-  placeholder,
-  step = 1,
-  className,
-  name,
-  id,
-  ...props
-}) {
-  const safeStep = clampStep(step);
-  const [internal, setInternal] = React.useState(defaultValue);
-  const [displayValue, setDisplayValue] = React.useState(controlledValue ?? defaultValue);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue ?? "" : internal;
-  React.useEffect(() => {
-    if (!isControlled) return;
-    setDisplayValue(controlledValue ?? "");
-  }, [controlledValue, isControlled]);
-  React.useEffect(() => {
-    if (isControlled) return;
-    setDisplayValue(internal);
-  }, [internal, isControlled]);
-  const commit = React.useCallback(
-    (next, fromBlur = false) => {
-      const normalized = normalizeHhmm(next);
-      if (!normalized) return;
-      const snapped = applyStep(normalized, safeStep);
-      if (!isControlled) {
-        setInternal(snapped);
-      }
-      if (isValidHhmm(snapped)) {
-        onValueChange?.(snapped);
-        setDisplayValue(snapped);
-      }
-      if (fromBlur && value !== snapped) {
-        onValueChange?.(snapped);
-      }
-    },
-    [isControlled, onValueChange, safeStep, value]
-  );
-  const valid = isValidHhmm(value);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      id,
-      name,
-      value: displayValue,
-      "data-slot": "time-input",
-      className: cn("ui-time-input", className),
-      role: "spinbutton",
-      "aria-valuemin": 0,
-      "aria-valuemax": 24 * 60 - 1,
-      "aria-valuenow": valid ? Number(value.slice(0, 2)) * 60 + Number(value.slice(3, 5)) : void 0,
-      "aria-valuetext": valid ? value : void 0,
-      "aria-invalid": displayValue !== "" && !isValidHhmm(displayValue) ? "true" : void 0,
-      placeholder: placeholder ?? "HH:mm",
-      inputMode: "numeric",
-      autoComplete: "off",
-      ...props,
-      onChange: (event) => {
-        const masked = maskTime(event.target.value);
-        setDisplayValue(masked);
-        const normalized = normalizeHhmm(masked);
-        if (normalized) {
-          const snapped = applyStep(normalized, safeStep);
-          if (!isControlled) {
-            setInternal(snapped);
-          }
-          onValueChange?.(snapped);
-          setDisplayValue(snapped);
-        }
-        props.onChange?.(event);
-      },
-      onBlur: (event) => {
-        commit(event.target.value, true);
-        const normalized = normalizeHhmm(event.target.value);
-        if (!normalized) {
-          setDisplayValue(value);
-        }
-        props.onBlur?.(event);
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          commit(event.currentTarget.value, true);
-        } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-          event.preventDefault();
-          const base = isValidHhmm(displayValue) ? displayValue : value || "00:00";
-          const next = stepTime(base, event.key === "ArrowUp" ? safeStep : -safeStep);
-          setDisplayValue(next);
-          if (!isControlled) {
-            setInternal(next);
-          }
-          onValueChange?.(next);
-        }
-        props.onKeyDown?.(event);
-      }
-    }
-  );
-}
-export {
-  TimeInput
-};

package/dist/components/ui/time-input.d.ts

@@ -1 +0,0 @@
-export * from "../data-entry/time-input";

package/dist/components/ui/time-input.js

@@ -1 +0,0 @@
-export * from "../data-entry/time-input";