@softium/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    /** stretch to the container width */
+    block?: boolean;
+}
+/**
+ * Button — the one primitive seeded deliberately (used everywhere). Everything else
+ * is extracted from real usage as it appears.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AppShellProps {
+    /** left sidebar content (usually <Sidebar>) */
+    sidebar: ReactNode;
+    /** top bar content (usually <Header>) */
+    header?: ReactNode;
+    /** main content area */
+    children: ReactNode;
+    /** collapse the sidebar to an icon-only rail (controlled) */
+    collapsed?: boolean;
+    /** expanded sidebar width in px. Default 224. */
+    sidebarWidth?: number;
+    /** on mobile: whether the sidebar drawer is open (controlled) */
+    sidebarOpen?: boolean;
+    /** on mobile: called when the backdrop is tapped to close the drawer */
+    onSidebarClose?: () => void;
+    className?: string;
+}
+/**
+ * AppShell — the docs/admin layout: a fixed left sidebar + a scrolling body with a
+ * sticky top header. Ported from the akron-ui shell:
+ *   - desktop: sidebar can collapse to an icon-only rail (`collapsed`)
+ *   - tablet:  sidebar auto-collapses to the rail
+ *   - mobile:  sidebar becomes an off-canvas drawer (`sidebarOpen` + backdrop)
+ */
+declare function AppShell({ sidebar, header, children, collapsed, sidebarWidth, sidebarOpen, onSidebarClose, className, }: AppShellProps): react.JSX.Element;
+
+interface SidebarProps {
+    /** brand / logo shown in the sidebar's own header row */
+    header?: ReactNode;
+    /** pinned content at the very bottom (hidden while collapsed) */
+    footer?: ReactNode;
+    /** icon-only rail (controlled) */
+    collapsed?: boolean;
+    /** called by the built-in toggle to collapse (shown when expanded) */
+    onCollapse?: () => void;
+    /** called by the built-in toggle to expand (shown when collapsed) */
+    onExpand?: () => void;
+    /** grouped nav (usually <SidebarSection>) */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sidebar — vertical nav container with an optional brand header, a built-in
+ * collapse toggle (→ icon-only rail), scrollable grouped nav, and an optional
+ * pinned footer. Ported from akron-ui's LayoutSidebar.
+ */
+declare function Sidebar({ header, footer, collapsed, onCollapse, onExpand, children, className, }: SidebarProps): react.JSX.Element;
+interface SidebarBrandProps {
+    /** logo / mark slot */
+    logo?: ReactNode;
+    children: ReactNode;
+    /** small text under the title (e.g. version) */
+    subtitle?: ReactNode;
+}
+declare function SidebarBrand({ logo, children, subtitle }: SidebarBrandProps): react.JSX.Element;
+interface SidebarSectionProps {
+    label?: ReactNode;
+    /** make the group header a toggle that shows/hides its items */
+    collapsible?: boolean;
+    /** initial open state when collapsible. Default true. */
+    defaultOpen?: boolean;
+    children: ReactNode;
+}
+declare function SidebarSection({ label, collapsible, defaultOpen, children, }: SidebarSectionProps): react.JSX.Element;
+interface SidebarItemProps {
+    active?: boolean;
+    icon?: ReactNode;
+    /** label shown as a floating tooltip while the sidebar is collapsed */
+    tooltip?: string;
+    onClick?: () => void;
+    children: ReactNode;
+}
+declare function SidebarItem({ active, icon, tooltip, onClick, children }: SidebarItemProps): react.JSX.Element;
+
+interface HeaderProps {
+    /** far-left slot shown only on mobile (a hamburger that opens the drawer) */
+    menuButton?: ReactNode;
+    /** left side — brand / breadcrumb. Ignored if `children` is provided. */
+    logo?: ReactNode;
+    /** left side — plain title. Ignored if `logo` or `children` is provided. */
+    title?: ReactNode;
+    /** left side override (takes precedence over `logo` / `title`) */
+    children?: ReactNode;
+    /** center nav slot */
+    nav?: ReactNode;
+    /** right side — actions (search, theme toggle, links, …) */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * Header — the top bar. A mobile menu button, then a brand/breadcrumb on the left,
+ * an optional center nav, and an actions cluster pushed to the right. Ported from
+ * akron-ui's Header.
+ */
+declare function Header({ menuButton, logo, title, children, nav, actions, className, }: HeaderProps): react.JSX.Element;
+
+type Theme = 'light' | 'dark';
+interface UseThemeOptions {
+    /** theme to use when nothing is stored. Default 'light'. */
+    defaultTheme?: Theme;
+    /** persist the choice to localStorage. Default true. */
+    persist?: boolean;
+}
+/**
+ * useTheme — applies `data-theme` to <html> and (optionally) persists the choice.
+ * The actual re-skin is pure CSS (token swap), so this hook only flips the attribute.
+ */
+declare function useTheme({ defaultTheme, persist }?: UseThemeOptions): {
+    theme: Theme;
+    setTheme: (next: Theme) => void;
+    toggleTheme: () => void;
+};
+
+interface ThemeToggleProps {
+    /** optional controlled value; when omitted the component manages its own theme */
+    theme?: Theme;
+    onToggle?: () => void;
+    /** shown in light mode (click → dark). Defaults to a moon icon. */
+    labelLight?: ReactNode;
+    /** shown in dark mode (click → light). Defaults to a sun icon. */
+    labelDark?: ReactNode;
+}
+/**
+ * ThemeToggle — flips light/dark. Uncontrolled by default (manages + persists its
+ * own theme); pass `theme` + `onToggle` to control it from outside.
+ */
+declare function ThemeToggle({ theme: controlled, onToggle, labelLight, labelDark, }: ThemeToggleProps): react.JSX.Element;
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** text shown next to the switch */
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Switch — an independent on/off toggle. Built on a real checkbox (role="switch")
+ * so it's keyboard- and screen-reader-accessible.
+ */
+declare function Switch({ checked, onChange, label, disabled, className }: SwitchProps): react.JSX.Element;
+
+/**
+ * @softium/ui
+ *
+ * General React primitives + app-shell layout for softium-ui.
+ * Remember to import the stylesheet once:
+ *   import '@softium/ui/styles.css';
+ */
+declare const VERSION = "0.0.0";
+
+export { AppShell, type AppShellProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Header, type HeaderProps, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, Switch, type SwitchProps, type Theme, ThemeToggle, type ThemeToggleProps, type UseThemeOptions, VERSION, useTheme };

package/dist/index.js

@@ -0,0 +1,265 @@
+"use client";
+import { forwardRef, useState, useCallback, useEffect, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronLeft, ChevronDown, Moon, Sun } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+// src/components/Button.tsx
+
+// src/util/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var Button = forwardRef(function Button2({
+  variant = "secondary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  block,
+  className,
+  children,
+  type,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      className: cx(
+        "sft-button",
+        `sft-button--${variant}`,
+        `sft-button--${size}`,
+        block && "sft-button--block",
+        className
+      ),
+      ...rest,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx("span", { className: "sft-button__icon", children: iconLeft }),
+        children != null && /* @__PURE__ */ jsx("span", { className: "sft-button__label", children }),
+        iconRight && /* @__PURE__ */ jsx("span", { className: "sft-button__icon", children: iconRight })
+      ]
+    }
+  );
+});
+function AppShell({
+  sidebar,
+  header,
+  children,
+  collapsed,
+  sidebarWidth = 224,
+  sidebarOpen = false,
+  onSidebarClose,
+  className
+}) {
+  const vars = { "--sft-sidebar-width": `${sidebarWidth}px` };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("sft-app sft-shell", className),
+      style: vars,
+      "data-collapsed": collapsed || void 0,
+      "data-drawer-open": sidebarOpen || void 0,
+      children: [
+        /* @__PURE__ */ jsx("aside", { className: "sft-shell__sidebar", children: sidebar }),
+        sidebarOpen && onSidebarClose && /* @__PURE__ */ jsx("div", { className: "sft-shell__overlay", onClick: onSidebarClose, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "sft-shell__main", children: [
+          header && /* @__PURE__ */ jsx("div", { className: "sft-shell__header", children: header }),
+          /* @__PURE__ */ jsx("main", { className: "sft-shell__content", children })
+        ] })
+      ]
+    }
+  );
+}
+function Sidebar({
+  header,
+  footer,
+  collapsed = false,
+  onCollapse,
+  onExpand,
+  children,
+  className
+}) {
+  const toggle = collapsed ? onExpand : onCollapse;
+  return /* @__PURE__ */ jsxs("div", { className: cx("sft-sidebar", collapsed && "sft-sidebar--collapsed", className), children: [
+    (header || toggle) && /* @__PURE__ */ jsxs("div", { className: "sft-sidebar__header", children: [
+      header && /* @__PURE__ */ jsx("div", { className: "sft-sidebar__header-content", children: header }),
+      toggle && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sft-sidebar__collapse",
+          onClick: toggle,
+          "aria-label": collapsed ? "expand sidebar" : "collapse sidebar",
+          children: /* @__PURE__ */ jsx(
+            ChevronLeft,
+            {
+              size: 16,
+              className: cx(
+                "sft-sidebar__collapse-icon",
+                collapsed && "sft-sidebar__collapse-icon--flipped"
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "sft-sidebar__content", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "sft-sidebar__footer", children: footer })
+  ] });
+}
+function SidebarBrand({ logo, children, subtitle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sft-sidebar__brand", children: [
+    logo && /* @__PURE__ */ jsx("span", { className: "sft-sidebar__logo", children: logo }),
+    /* @__PURE__ */ jsxs("span", { className: "sft-sidebar__brand-text", children: [
+      /* @__PURE__ */ jsx("span", { className: "sft-sidebar__title", children }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: "sft-sidebar__subtitle", children: subtitle })
+    ] })
+  ] });
+}
+function SidebarSection({
+  label,
+  collapsible = false,
+  defaultOpen = true,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const hidden = collapsible && !open;
+  return /* @__PURE__ */ jsxs("div", { className: "sft-sidebar__section", children: [
+    label && (collapsible ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sft-sidebar__section-toggle",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 12,
+              className: cx(
+                "sft-sidebar__section-chevron",
+                open && "sft-sidebar__section-chevron--open"
+              )
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "sft-sidebar__section-label", children: label })),
+    !hidden && /* @__PURE__ */ jsx("div", { className: "sft-sidebar__items", children })
+  ] });
+}
+function SidebarItem({ active, icon, tooltip, onClick, children }) {
+  const [tip, setTip] = useState(null);
+  const onEnter = useCallback((e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    setTip({ top: r.top + r.height / 2, left: r.right + 8 });
+  }, []);
+  const onLeave = useCallback(() => setTip(null), []);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cx("sft-sidebar__item", active && "sft-sidebar__item--active"),
+      "aria-current": active ? "page" : void 0,
+      onClick,
+      onMouseEnter: tooltip ? onEnter : void 0,
+      onMouseLeave: tooltip ? onLeave : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "sft-sidebar__item-icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sft-sidebar__item-label", children }),
+        tooltip && tip && createPortal(
+          /* @__PURE__ */ jsx("div", { className: "sft-sidebar__tooltip", style: { top: tip.top, left: tip.left }, children: tooltip }),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function Header({
+  menuButton,
+  logo,
+  title,
+  children,
+  nav,
+  actions,
+  className
+}) {
+  const left = children ?? logo ?? (title != null ? /* @__PURE__ */ jsx("h1", { className: "sft-header__title", children: title }) : null);
+  return /* @__PURE__ */ jsxs("header", { className: cx("sft-header", className), children: [
+    menuButton && /* @__PURE__ */ jsx("div", { className: "sft-header__menu", children: menuButton }),
+    left && /* @__PURE__ */ jsx("div", { className: "sft-header__left", children: left }),
+    nav && /* @__PURE__ */ jsx("nav", { className: "sft-header__nav", children: nav }),
+    actions && /* @__PURE__ */ jsx("div", { className: "sft-header__actions", children: actions })
+  ] });
+}
+var STORAGE_KEY = "softium.theme";
+function readStored() {
+  if (typeof window === "undefined") return null;
+  try {
+    const v = window.localStorage.getItem(STORAGE_KEY);
+    return v === "light" || v === "dark" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function useTheme({ defaultTheme = "light", persist = true } = {}) {
+  const [theme, setThemeState] = useState(() => readStored() ?? defaultTheme);
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+    if (persist && typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(STORAGE_KEY, theme);
+      } catch {
+      }
+    }
+  }, [theme, persist]);
+  const setTheme = useCallback((next) => setThemeState(next), []);
+  const toggleTheme = useCallback(
+    () => setThemeState((t) => t === "light" ? "dark" : "light"),
+    []
+  );
+  return { theme, setTheme, toggleTheme };
+}
+function ThemeToggle({
+  theme: controlled,
+  onToggle,
+  labelLight = /* @__PURE__ */ jsx(Moon, { size: 16 }),
+  labelDark = /* @__PURE__ */ jsx(Sun, { size: 16 })
+}) {
+  const internal = useTheme();
+  const theme = controlled ?? internal.theme;
+  const toggle = onToggle ?? internal.toggleTheme;
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: toggle, "aria-label": "Toggle theme", children: theme === "light" ? labelLight : labelDark });
+}
+function Switch({ checked, onChange, label, disabled, className }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cx("sft-switch", disabled && "sft-switch--disabled", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        role: "switch",
+        "aria-checked": checked,
+        className: "sft-switch__input",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sft-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "sft-switch__thumb" }) }),
+    label != null && /* @__PURE__ */ jsx("span", { className: "sft-switch__label", children: label })
+  ] });
+}
+
+// src/index.ts
+var VERSION = "0.0.0";
+
+export { AppShell, Button, Header, Sidebar, SidebarBrand, SidebarItem, SidebarSection, Switch, ThemeToggle, VERSION, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/util/cx.ts","../src/components/Button.tsx","../src/components/AppShell.tsx","../src/components/Sidebar.tsx","../src/components/Header.tsx","../src/hooks/useTheme.ts","../src/components/ThemeToggle.tsx","../src/components/Switch.tsx","../src/index.ts"],"names":["Button","jsxs","jsx","useState","useCallback"],"mappings":"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","file":"index.js","sourcesContent":["/** Minimal classnames joiner — no dependency. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(' ');\n}\n","import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from 'react';\nimport { cx } from '../util/cx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  iconLeft?: ReactNode;\n  iconRight?: ReactNode;\n  /** stretch to the container width */\n  block?: boolean;\n}\n\n/**\n * Button — the one primitive seeded deliberately (used everywhere). Everything else\n * is extracted from real usage as it appears.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'secondary',\n    size = 'md',\n    iconLeft,\n    iconRight,\n    block,\n    className,\n    children,\n    type,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(\n        'sft-button',\n        `sft-button--${variant}`,\n        `sft-button--${size}`,\n        block && 'sft-button--block',\n        className,\n      )}\n      {...rest}\n    >\n      {iconLeft && <span className=\"sft-button__icon\">{iconLeft}</span>}\n      {children != null && <span className=\"sft-button__label\">{children}</span>}\n      {iconRight && <span className=\"sft-button__icon\">{iconRight}</span>}\n    </button>\n  );\n});\n","import type { CSSProperties, ReactNode } from 'react';\nimport { cx } from '../util/cx';\n\nexport interface AppShellProps {\n  /** left sidebar content (usually <Sidebar>) */\n  sidebar: ReactNode;\n  /** top bar content (usually <Header>) */\n  header?: ReactNode;\n  /** main content area */\n  children: ReactNode;\n  /** collapse the sidebar to an icon-only rail (controlled) */\n  collapsed?: boolean;\n  /** expanded sidebar width in px. Default 224. */\n  sidebarWidth?: number;\n  /** on mobile: whether the sidebar drawer is open (controlled) */\n  sidebarOpen?: boolean;\n  /** on mobile: called when the backdrop is tapped to close the drawer */\n  onSidebarClose?: () => void;\n  className?: string;\n}\n\n/**\n * AppShell — the docs/admin layout: a fixed left sidebar + a scrolling body with a\n * sticky top header. Ported from the akron-ui shell:\n *   - desktop: sidebar can collapse to an icon-only rail (`collapsed`)\n *   - tablet:  sidebar auto-collapses to the rail\n *   - mobile:  sidebar becomes an off-canvas drawer (`sidebarOpen` + backdrop)\n */\nexport function AppShell({\n  sidebar,\n  header,\n  children,\n  collapsed,\n  sidebarWidth = 224,\n  sidebarOpen = false,\n  onSidebarClose,\n  className,\n}: AppShellProps) {\n  const vars = { '--sft-sidebar-width': `${sidebarWidth}px` } as CSSProperties;\n\n  return (\n    <div\n      className={cx('sft-app sft-shell', className)}\n      style={vars}\n      data-collapsed={collapsed || undefined}\n      data-drawer-open={sidebarOpen || undefined}\n    >\n      <aside className=\"sft-shell__sidebar\">{sidebar}</aside>\n      {sidebarOpen && onSidebarClose && (\n        <div className=\"sft-shell__overlay\" onClick={onSidebarClose} aria-hidden=\"true\" />\n      )}\n      <div className=\"sft-shell__main\">\n        {header && <div className=\"sft-shell__header\">{header}</div>}\n        <main className=\"sft-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n","import { ChevronDown, ChevronLeft } from 'lucide-react';\nimport { type MouseEvent, type ReactNode, useCallback, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { cx } from '../util/cx';\n\nexport interface SidebarProps {\n  /** brand / logo shown in the sidebar's own header row */\n  header?: ReactNode;\n  /** pinned content at the very bottom (hidden while collapsed) */\n  footer?: ReactNode;\n  /** icon-only rail (controlled) */\n  collapsed?: boolean;\n  /** called by the built-in toggle to collapse (shown when expanded) */\n  onCollapse?: () => void;\n  /** called by the built-in toggle to expand (shown when collapsed) */\n  onExpand?: () => void;\n  /** grouped nav (usually <SidebarSection>) */\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Sidebar — vertical nav container with an optional brand header, a built-in\n * collapse toggle (→ icon-only rail), scrollable grouped nav, and an optional\n * pinned footer. Ported from akron-ui's LayoutSidebar.\n */\nexport function Sidebar({\n  header,\n  footer,\n  collapsed = false,\n  onCollapse,\n  onExpand,\n  children,\n  className,\n}: SidebarProps) {\n  const toggle = collapsed ? onExpand : onCollapse;\n\n  return (\n    <div className={cx('sft-sidebar', collapsed && 'sft-sidebar--collapsed', className)}>\n      {(header || toggle) && (\n        <div className=\"sft-sidebar__header\">\n          {header && <div className=\"sft-sidebar__header-content\">{header}</div>}\n          {toggle && (\n            <button\n              type=\"button\"\n              className=\"sft-sidebar__collapse\"\n              onClick={toggle}\n              aria-label={collapsed ? 'expand sidebar' : 'collapse sidebar'}\n            >\n              <ChevronLeft\n                size={16}\n                className={cx(\n                  'sft-sidebar__collapse-icon',\n                  collapsed && 'sft-sidebar__collapse-icon--flipped',\n                )}\n              />\n            </button>\n          )}\n        </div>\n      )}\n      <nav className=\"sft-sidebar__content\">{children}</nav>\n      {footer && <div className=\"sft-sidebar__footer\">{footer}</div>}\n    </div>\n  );\n}\n\nexport interface SidebarBrandProps {\n  /** logo / mark slot */\n  logo?: ReactNode;\n  children: ReactNode;\n  /** small text under the title (e.g. version) */\n  subtitle?: ReactNode;\n}\n\nexport function SidebarBrand({ logo, children, subtitle }: SidebarBrandProps) {\n  return (\n    <div className=\"sft-sidebar__brand\">\n      {logo && <span className=\"sft-sidebar__logo\">{logo}</span>}\n      <span className=\"sft-sidebar__brand-text\">\n        <span className=\"sft-sidebar__title\">{children}</span>\n        {subtitle && <span className=\"sft-sidebar__subtitle\">{subtitle}</span>}\n      </span>\n    </div>\n  );\n}\n\nexport interface SidebarSectionProps {\n  label?: ReactNode;\n  /** make the group header a toggle that shows/hides its items */\n  collapsible?: boolean;\n  /** initial open state when collapsible. Default true. */\n  defaultOpen?: boolean;\n  children: ReactNode;\n}\n\nexport function SidebarSection({\n  label,\n  collapsible = false,\n  defaultOpen = true,\n  children,\n}: SidebarSectionProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const hidden = collapsible && !open;\n\n  return (\n    <div className=\"sft-sidebar__section\">\n      {label &&\n        (collapsible ? (\n          <button\n            type=\"button\"\n            className=\"sft-sidebar__section-toggle\"\n            onClick={() => setOpen((v) => !v)}\n            aria-expanded={open}\n          >\n            <span>{label}</span>\n            <ChevronDown\n              size={12}\n              className={cx(\n                'sft-sidebar__section-chevron',\n                open && 'sft-sidebar__section-chevron--open',\n              )}\n            />\n          </button>\n        ) : (\n          <div className=\"sft-sidebar__section-label\">{label}</div>\n        ))}\n      {!hidden && <div className=\"sft-sidebar__items\">{children}</div>}\n    </div>\n  );\n}\n\nexport interface SidebarItemProps {\n  active?: boolean;\n  icon?: ReactNode;\n  /** label shown as a floating tooltip while the sidebar is collapsed */\n  tooltip?: string;\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nexport function SidebarItem({ active, icon, tooltip, onClick, children }: SidebarItemProps) {\n  const [tip, setTip] = useState<{ top: number; left: number } | null>(null);\n\n  const onEnter = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    setTip({ top: r.top + r.height / 2, left: r.right + 8 });\n  }, []);\n  const onLeave = useCallback(() => setTip(null), []);\n\n  return (\n    <button\n      type=\"button\"\n      className={cx('sft-sidebar__item', active && 'sft-sidebar__item--active')}\n      aria-current={active ? 'page' : undefined}\n      onClick={onClick}\n      onMouseEnter={tooltip ? onEnter : undefined}\n      onMouseLeave={tooltip ? onLeave : undefined}\n    >\n      {icon && <span className=\"sft-sidebar__item-icon\">{icon}</span>}\n      <span className=\"sft-sidebar__item-label\">{children}</span>\n      {tooltip &&\n        tip &&\n        createPortal(\n          <div className=\"sft-sidebar__tooltip\" style={{ top: tip.top, left: tip.left }}>\n            {tooltip}\n          </div>,\n          document.body,\n        )}\n    </button>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cx } from '../util/cx';\n\nexport interface HeaderProps {\n  /** far-left slot shown only on mobile (a hamburger that opens the drawer) */\n  menuButton?: ReactNode;\n  /** left side — brand / breadcrumb. Ignored if `children` is provided. */\n  logo?: ReactNode;\n  /** left side — plain title. Ignored if `logo` or `children` is provided. */\n  title?: ReactNode;\n  /** left side override (takes precedence over `logo` / `title`) */\n  children?: ReactNode;\n  /** center nav slot */\n  nav?: ReactNode;\n  /** right side — actions (search, theme toggle, links, …) */\n  actions?: ReactNode;\n  className?: string;\n}\n\n/**\n * Header — the top bar. A mobile menu button, then a brand/breadcrumb on the left,\n * an optional center nav, and an actions cluster pushed to the right. Ported from\n * akron-ui's Header.\n */\nexport function Header({\n  menuButton,\n  logo,\n  title,\n  children,\n  nav,\n  actions,\n  className,\n}: HeaderProps) {\n  const left =\n    children ?? logo ?? (title != null ? <h1 className=\"sft-header__title\">{title}</h1> : null);\n\n  return (\n    <header className={cx('sft-header', className)}>\n      {menuButton && <div className=\"sft-header__menu\">{menuButton}</div>}\n      {left && <div className=\"sft-header__left\">{left}</div>}\n      {nav && <nav className=\"sft-header__nav\">{nav}</nav>}\n      {actions && <div className=\"sft-header__actions\">{actions}</div>}\n    </header>\n  );\n}\n","import { useCallback, useEffect, useState } from 'react';\n\nexport type Theme = 'light' | 'dark';\n\nconst STORAGE_KEY = 'softium.theme';\n\nfunction readStored(): Theme | null {\n  if (typeof window === 'undefined') return null;\n  try {\n    const v = window.localStorage.getItem(STORAGE_KEY);\n    return v === 'light' || v === 'dark' ? v : null;\n  } catch {\n    return null;\n  }\n}\n\nexport interface UseThemeOptions {\n  /** theme to use when nothing is stored. Default 'light'. */\n  defaultTheme?: Theme;\n  /** persist the choice to localStorage. Default true. */\n  persist?: boolean;\n}\n\n/**\n * useTheme — applies `data-theme` to <html> and (optionally) persists the choice.\n * The actual re-skin is pure CSS (token swap), so this hook only flips the attribute.\n */\nexport function useTheme({ defaultTheme = 'light', persist = true }: UseThemeOptions = {}) {\n  const [theme, setThemeState] = useState<Theme>(() => readStored() ?? defaultTheme);\n\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      document.documentElement.setAttribute('data-theme', theme);\n    }\n    if (persist && typeof window !== 'undefined') {\n      try {\n        window.localStorage.setItem(STORAGE_KEY, theme);\n      } catch {\n        // best-effort\n      }\n    }\n  }, [theme, persist]);\n\n  const setTheme = useCallback((next: Theme) => setThemeState(next), []);\n  const toggleTheme = useCallback(\n    () => setThemeState((t) => (t === 'light' ? 'dark' : 'light')),\n    [],\n  );\n\n  return { theme, setTheme, toggleTheme };\n}\n","import { Moon, Sun } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { type Theme, useTheme } from '../hooks/useTheme';\nimport { Button } from './Button';\n\nexport interface ThemeToggleProps {\n  /** optional controlled value; when omitted the component manages its own theme */\n  theme?: Theme;\n  onToggle?: () => void;\n  /** shown in light mode (click → dark). Defaults to a moon icon. */\n  labelLight?: ReactNode;\n  /** shown in dark mode (click → light). Defaults to a sun icon. */\n  labelDark?: ReactNode;\n}\n\n/**\n * ThemeToggle — flips light/dark. Uncontrolled by default (manages + persists its\n * own theme); pass `theme` + `onToggle` to control it from outside.\n */\nexport function ThemeToggle({\n  theme: controlled,\n  onToggle,\n  labelLight = <Moon size={16} />,\n  labelDark = <Sun size={16} />,\n}: ThemeToggleProps) {\n  const internal = useTheme();\n  const theme = controlled ?? internal.theme;\n  const toggle = onToggle ?? internal.toggleTheme;\n\n  return (\n    <Button variant=\"ghost\" size=\"sm\" onClick={toggle} aria-label=\"Toggle theme\">\n      {theme === 'light' ? labelLight : labelDark}\n    </Button>\n  );\n}\n","import { type ReactNode, useId } from 'react';\nimport { cx } from '../util/cx';\n\nexport interface SwitchProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  /** text shown next to the switch */\n  label?: ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * Switch — an independent on/off toggle. Built on a real checkbox (role=\"switch\")\n * so it's keyboard- and screen-reader-accessible.\n */\nexport function Switch({ checked, onChange, label, disabled, className }: SwitchProps) {\n  const id = useId();\n  return (\n    <label htmlFor={id} className={cx('sft-switch', disabled && 'sft-switch--disabled', className)}>\n      <input\n        id={id}\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-checked={checked}\n        className=\"sft-switch__input\"\n        checked={checked}\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.checked)}\n      />\n      <span className=\"sft-switch__track\" aria-hidden=\"true\">\n        <span className=\"sft-switch__thumb\" />\n      </span>\n      {label != null && <span className=\"sft-switch__label\">{label}</span>}\n    </label>\n  );\n}\n","/**\n * @softium/ui\n *\n * General React primitives + app-shell layout for softium-ui.\n * Remember to import the stylesheet once:\n *   import '@softium/ui/styles.css';\n */\n\nexport const VERSION = '0.0.0';\n\nexport { Button } from './components/Button';\nexport type { ButtonProps, ButtonSize, ButtonVariant } from './components/Button';\n\nexport { AppShell } from './components/AppShell';\nexport type { AppShellProps } from './components/AppShell';\n\nexport {\n  Sidebar,\n  SidebarBrand,\n  SidebarItem,\n  SidebarSection,\n} from './components/Sidebar';\nexport type {\n  SidebarBrandProps,\n  SidebarItemProps,\n  SidebarProps,\n  SidebarSectionProps,\n} from './components/Sidebar';\n\nexport { Header } from './components/Header';\nexport type { HeaderProps } from './components/Header';\n\nexport { ThemeToggle } from './components/ThemeToggle';\nexport type { ThemeToggleProps } from './components/ThemeToggle';\n\nexport { Switch } from './components/Switch';\nexport type { SwitchProps } from './components/Switch';\n\nexport { useTheme } from './hooks/useTheme';\nexport type { Theme, UseThemeOptions } from './hooks/useTheme';\n"]}