@godxjp/ui 6.2.0 → 6.4.0

package/dist/styles/shell-layout.css

@@ -339,6 +339,81 @@
     opacity: 1;
   }
 
+  /* Collapsed rail flyout — names a leaf item (tooltip) or reveals a group's submenu on
+   * hover/focus, since the rail hides labels. Hidden by default; shown only when collapsed. */
+  .sb-nav-fly {
+    position: relative;
+  }
+
+  .sb-flyout {
+    display: none;
+  }
+
+  [data-collapsed="true"] .sb-nav-item {
+    position: relative;
+  }
+
+  [data-collapsed="true"] .sb-flyout {
+    position: absolute;
+    inset-inline-start: 100%;
+    top: 0;
+    z-index: 50;
+    margin-inline-start: var(--space-2);
+    min-width: 11rem;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--space-1);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    background: hsl(var(--popover, var(--background)));
+    color: hsl(var(--popover-foreground, var(--foreground)));
+    box-shadow:
+      0 4px 6px -1px hsl(var(--foreground) / 0.1),
+      0 2px 4px -2px hsl(var(--foreground) / 0.1);
+    white-space: nowrap;
+    font-size: var(--font-size-sm);
+  }
+
+  /* Leaf tooltip — a single label chip, vertically centered on the icon row. */
+  [data-collapsed="true"] .sb-nav-item > .sb-flyout:not(.sb-flyout--group) {
+    top: 50%;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    transform: translateY(-50%);
+    padding: var(--space-1) var(--space-2);
+    font-weight: 500;
+  }
+
+  [data-collapsed="true"] .sb-flyout-title {
+    padding: var(--space-1) var(--space-2);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+  }
+
+  /* Submenu rows inside a collapsed flyout read as normal (full) nav rows, not dotted children. */
+  [data-collapsed="true"] .sb-flyout .sb-nav-item--sub {
+    height: var(--control-height);
+    font-size: var(--font-size-sm);
+  }
+
+  [data-collapsed="true"] .sb-flyout .sb-nav-item--sub::before {
+    content: none;
+  }
+
+  [data-collapsed="true"] .sb-flyout .sb-label {
+    display: inline;
+  }
+
+  /* Reveal on hover / keyboard focus. */
+  [data-collapsed="true"] .sb-nav-item:hover > .sb-flyout,
+  [data-collapsed="true"] .sb-nav-item:focus-visible > .sb-flyout,
+  [data-collapsed="true"] .sb-nav-fly:hover .sb-flyout,
+  [data-collapsed="true"] .sb-nav-fly:focus-within .sb-flyout {
+    display: flex;
+  }
+
   /* Footer user — circular avatar with live dot + overflow menu, design `.sb-user`. */
   .sb-user {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "type": "module",
   "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
@@ -294,6 +294,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.19.19",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",

package/dist/chunk-ACNKID6V.js

@@ -1,70 +0,0 @@
-import { Calendar } from './chunk-IK7I3ABN.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation, usePickerLocales } from './chunk-32UNYHGY.js';
-import { formatDate } from './chunk-7OTWYSVX.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React from 'react';
-import { CalendarIcon } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function formatRange(range) {
-  if (!range?.from) return "";
-  const fmt = (d) => formatDate(d, { kind: "calendar" });
-  if (!range.to) return fmt(range.from);
-  return `${fmt(range.from)} \u2013 ${fmt(range.to)}`;
-}
-function DateRangePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  locale: localeProp,
-  fromDate,
-  toDate
-}) {
-  const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
-  const label = formatRange(value);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder");
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        id,
-        type: "button",
-        variant: "outline",
-        disabled,
-        className: cn(
-          "w-full justify-start text-left font-normal",
-          !label && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4 shrink-0", "aria-hidden": "true" }),
-          label || resolvedPlaceholder
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        mode: "range",
-        selected: value,
-        onSelect: onChange,
-        locale: dayPickerLocale,
-        disabled: [
-          ...fromDate ? [{ before: fromDate }] : [],
-          ...toDate ? [{ after: toDate }] : []
-        ],
-        startMonth: fromDate,
-        endMonth: toDate
-      }
-    ) })
-  ] });
-}
-
-export { DateRangePicker };

package/dist/chunk-HNH4PJSV.js

@@ -1,66 +0,0 @@
-import { Calendar } from './chunk-IK7I3ABN.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
-import { Button } from './chunk-HJEBRCXL.js';
-import { useTranslation, usePickerLocales } from './chunk-32UNYHGY.js';
-import { formatDate } from './chunk-7OTWYSVX.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React from 'react';
-import { CalendarIcon } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function DatePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  locale: localeProp,
-  fromDate,
-  toDate
-}) {
-  const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder");
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        id,
-        type: "button",
-        variant: "outline",
-        disabled,
-        className: cn(
-          "w-full justify-start text-left font-normal",
-          !value && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4 shrink-0", "aria-hidden": "true" }),
-          value ? formatDate(value, { kind: "calendar" }) : resolvedPlaceholder
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        mode: "single",
-        selected: value,
-        onSelect: (date) => {
-          onChange?.(date);
-          setOpen(false);
-        },
-        locale: dayPickerLocale,
-        disabled: [
-          ...fromDate ? [{ before: fromDate }] : [],
-          ...toDate ? [{ after: toDate }] : []
-        ],
-        startMonth: fromDate,
-        endMonth: toDate
-      }
-    ) })
-  ] });
-}
-
-export { DatePicker };