@godxjp/ui 5.0.2 → 6.0.1

package/dist/chunk-WRFKVUPW.js

@@ -0,0 +1,332 @@
+import { Badge } from './chunk-PIIRNAXA.js';
+import { densityClass, pageContainerVariantClass, stackGapClass } from './chunk-S66TJXJU.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import { Link } from 'react-router-dom';
+import { ChevronRight, PanelLeftOpen, PanelLeftClose, ChevronDown, Search, Bell, SlidersHorizontal } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function PageContainer({
+  title,
+  subtitle,
+  extra,
+  footer,
+  breadcrumb,
+  density = "default",
+  variant = "default",
+  stickyFooter = false,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ui-page-container",
+        densityClass[density],
+        pageContainerVariantClass[variant],
+        stickyFooter && "ui-page-container--sticky-footer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "ui-page-header", children: [
+          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+            const isLast = i === breadcrumb.length - 1;
+            return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
+              item.to && !isLast ? /* @__PURE__ */ jsx(Link, { to: item.to, className: "hover:text-foreground hover:underline", children: item.label }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: isLast ? "text-foreground" : "",
+                  "aria-current": isLast ? "page" : void 0,
+                  children: item.label
+                }
+              ),
+              !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
+            ] }, i);
+          }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
+            ] }),
+            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
+          ] })
+        ] }),
+        children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
+      ]
+    }
+  );
+}
+function PageInset({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-page-inset", className), ...props, children });
+}
+function Stack({ gap = "md", className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(stackGapClass[gap], className), ...props, children });
+}
+function AppShell({
+  sidebar,
+  topbar,
+  topbarLeft,
+  topbarRight,
+  logo,
+  breadcrumb,
+  footer,
+  children,
+  sidebarCollapsed = false
+}) {
+  const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
+    logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+    topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
+    /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
+    topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed ? "true" : void 0, children: [
+    /* @__PURE__ */ jsx("aside", { className: "app-sidebar", children: sidebar }),
+    /* @__PURE__ */ jsx("header", { className: "app-topbar", children: resolvedTopbar }),
+    /* @__PURE__ */ jsxs("main", { className: "app-main", children: [
+      breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
+      children
+    ] }),
+    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", children: footer })
+  ] });
+}
+function Topbar({
+  product,
+  project,
+  onProductOpen,
+  onProjectOpen,
+  onSearchOpen,
+  onTweaksOpen,
+  collapsed = false,
+  onToggleCollapsed,
+  rightSlot,
+  unread = false,
+  onNotificationsOpen,
+  user
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleCollapsed ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tb-icon-btn",
+        "aria-label": "Toggle sidebar",
+        "aria-pressed": collapsed,
+        onClick: onToggleCollapsed,
+        children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PanelLeftClose, { "aria-hidden": "true" })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "tb-switcher", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "tb-chip", "aria-label": product.name, onClick: onProductOpen, children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "tb-chip-icon",
+            style: { background: product.color ?? "hsl(var(--attention))" },
+            children: product.name[0]?.toUpperCase() ?? "?"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: product.name }),
+        /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "tb-chip-sep", children: "/" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `tb-chip ${project ? "" : "tb-chip-empty"}`,
+          "aria-label": project ? project.name : "Pick project",
+          onClick: onProjectOpen,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-label", children: project ? project.name : "Pick project" }),
+            /* @__PURE__ */ jsx("span", { className: "tb-chip-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "tb-search", onClick: onSearchOpen, children: [
+      /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: "Search..." }),
+      /* @__PURE__ */ jsx("kbd", { className: "kbd", children: "\u2318K" })
+    ] }),
+    rightSlot,
+    onNotificationsOpen ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "tb-icon-btn tb-bell",
+        "aria-label": "Notifications",
+        onClick: onNotificationsOpen,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { "aria-hidden": "true" }),
+          unread ? /* @__PURE__ */ jsx("span", { className: "tb-bell-dot", "aria-hidden": "true" }) : null
+        ]
+      }
+    ) : null,
+    user,
+    onTweaksOpen ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tb-icon-btn",
+        "aria-label": "Open tweaks",
+        onClick: onTweaksOpen,
+        children: /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" })
+      }
+    ) : null
+  ] });
+}
+function ShellApp({ menu, breadcrumb, children }) {
+  return /* @__PURE__ */ jsx(
+    AppShell,
+    {
+      sidebar: menu,
+      breadcrumb,
+      topbar: /* @__PURE__ */ jsx(
+        Topbar,
+        {
+          product: { name: "GodX", color: "hsl(var(--attention))" },
+          project: { name: "Japan to SEA lanes" },
+          onSearchOpen: () => void 0,
+          onNotificationsOpen: () => void 0,
+          unread: true
+        }
+      ),
+      children
+    }
+  );
+}
+function Sidebar({
+  activeId,
+  onSelect,
+  sections,
+  product,
+  onProductClick,
+  brand,
+  collapsed = false,
+  footer
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
+    brand !== void 0 ? /* @__PURE__ */ jsx("div", { className: "sb-brand", children: brand }) : product ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sb-product",
+        onClick: onProductClick,
+        "aria-label": product.name,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sb-logo-mark",
+              style: { background: product.color ?? "hsl(var(--attention))" },
+              children: product.name[0]?.toUpperCase() ?? "?"
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs("span", { className: "sb-product-meta", children: [
+            /* @__PURE__ */ jsx("span", { className: "sb-product-name", children: product.name }),
+            product.role ? /* @__PURE__ */ jsx("span", { className: "sb-product-tenant", children: product.role }) : null
+          ] }),
+          !collapsed && /* @__PURE__ */ jsx("span", { className: "sb-product-caret", children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("div", { className: "sb-nav-scroll", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { className: "sb-section", children: [
+      section.label && !collapsed ? /* @__PURE__ */ jsx("div", { className: "sb-section-label", children: section.label }) : null,
+      /* @__PURE__ */ jsx("div", { className: "sb-nav", role: "navigation", children: section.items.map((item) => {
+        const Icon = item.icon;
+        const isActive = item.id === activeId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn("sb-nav-item"),
+            "data-active": isActive ? "true" : void 0,
+            "aria-current": isActive ? "page" : void 0,
+            "aria-disabled": item.disabled,
+            "aria-label": collapsed ? item.label : void 0,
+            title: collapsed ? item.label : void 0,
+            onClick: () => {
+              if (!item.disabled) onSelect?.(item.id);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
+              !collapsed && /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+              !collapsed && item.badge !== void 0 && item.badge !== "" ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+            ]
+          },
+          item.id
+        );
+      }) })
+    ] }, section.label ?? sectionIndex)) }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "sb-footer", children: footer }) : null
+  ] });
+}
+function Menu({ items }) {
+  const sections = items.map((section) => ({
+    label: section.label,
+    items: section.items.map(({ active: _active, ...item }) => item)
+  }));
+  const activeId = items.flatMap((section) => section.items).find((item) => item.active)?.id ?? items[0]?.items[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      activeId,
+      sections,
+      product: { name: "Acme Console", role: "Workspace", color: "hsl(var(--attention))" }
+    }
+  );
+}
+function Breadcrumb({ items }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
+      item.to && !isLast ? /* @__PURE__ */ jsx(Link, { to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),
+      !isLast ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : null
+    ] }, item.to ?? index);
+  }) }) });
+}
+function ResponsiveGrid({ columns = 3, children }) {
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", "data-columns": columns, children });
+}
+function SplitPane({ children, aside, asideWidth = "md" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
+    /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
+    /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", children: aside })
+  ] });
+}
+function MobileFrame({
+  title,
+  subtitle,
+  status,
+  children,
+  navItems = []
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "ui-mobile-stage", children: /* @__PURE__ */ jsxs("div", { className: "ui-mobile-frame", children: [
+    /* @__PURE__ */ jsxs("header", { className: "ui-mobile-header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-mobile-title", children: title }),
+        subtitle ? /* @__PURE__ */ jsx("div", { className: "ui-mobile-subtitle", children: subtitle }) : null
+      ] }),
+      status ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: status }) : null
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "ui-mobile-main", children }),
+    navItems.length > 0 ? /* @__PURE__ */ jsx("footer", { className: "ui-mobile-nav", children: navItems.map((item) => {
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "ui-mobile-nav-item",
+          "data-active": item.active ? "true" : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        },
+        item.label
+      );
+    }) }) : null
+  ] }) });
+}
+
+export { AppShell, Breadcrumb, Menu, MobileFrame, PageContainer, PageInset, ResponsiveGrid, ShellApp, Sidebar, SplitPane, Stack, Topbar };

package/dist/chunk-WXW43RK5.js

@@ -0,0 +1,24 @@
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { jsx } from 'react/jsx-runtime';
+
+var Switch = React.forwardRef(
+  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer ui-switch focus-visible:border-ring focus-visible:ring-ring/50 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb" })
+    }
+  )
+);
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/dist/chunk-XG7XDYIM.js

@@ -0,0 +1,60 @@
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { jsx } from 'react/jsx-runtime';
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+      ...props
+    }
+  );
+}
+var TabsList = React.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    "data-slot": "tabs-list",
+    "data-variant": variant,
+    className: cn(
+      "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit items-center justify-center rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "tabs-trigger",
+    className: cn(
+      "text-foreground/60 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-primary/25 after:bg-foreground relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    "data-slot": "tabs-content",
+    className: cn("focus-visible:ring-ring flex-1 outline-none focus-visible:ring-2", className),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };