@mshuja288/aksuicore 0.2.0

package/src/primitives/Snackbar.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+
+function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+}
+
+function SuccessIcon() {
+  return (
+    <svg className="snackbar-icon" viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.8" />
+      <path
+        d="M8.2 12.2 10.8 14.8 15.8 9.6"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function AlertIcon() {
+  return (
+    <svg className="snackbar-icon" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        d="M12 3.8 3.8 19.2h16.4L12 3.8Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinejoin="round"
+      />
+      <path d="M12 10v4.2" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <circle cx="12" cy="16.8" r="1" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function Snackbar({
+  message,
+  success,
+  onDismiss,
+}: {
+  message: string;
+  success: boolean;
+  onDismiss?: () => void;
+}) {
+  const isClient = useIsClient();
+
+  useEffect(() => {
+    if (!message || !onDismiss) {
+      return;
+    }
+
+    const timeout = window.setTimeout(onDismiss, success ? 3200 : 4800);
+    return () => window.clearTimeout(timeout);
+  }, [message, success, onDismiss]);
+
+  if (!isClient || !message) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="snackbar-host" aria-live="polite">
+      <div className={success ? "snackbar success" : "snackbar"} role="status">
+        {success ? <SuccessIcon /> : <AlertIcon />}
+        <p>{message}</p>
+        {onDismiss ? (
+          <button type="button" className="snackbar-close" aria-label="Dismiss" onClick={onDismiss}>
+            ×
+          </button>
+        ) : null}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/** @deprecated Prefer Snackbar — alias kept for configurator migration */
+export const StatusMessage = Snackbar;

package/src/primitives/Topbar.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Button } from "./Button";
+
+export function Topbar({
+  title,
+  logoSrc,
+  logoAlt = "Logo",
+  username = "",
+  onLogout,
+  children,
+}: {
+  title: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  username?: string;
+  onLogout?: () => void;
+  children?: ReactNode;
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const initial = (username || "U").slice(0, 1).toUpperCase();
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+
+    function onPointerDown(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [menuOpen]);
+
+  return (
+    <header className="topbar">
+      <div className="topbar-brand">
+        {logoSrc ? (
+          <img
+            className="topbar-logo"
+            src={logoSrc}
+            alt={logoAlt}
+            onError={(event) => {
+              event.currentTarget.hidden = true;
+            }}
+          />
+        ) : null}
+        <h1>{title}</h1>
+      </div>
+      <div className="topbar-actions" ref={menuRef}>
+        {children}
+        {onLogout ? (
+          <>
+            <button
+              type="button"
+              className="avatar-button"
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen((open) => !open)}
+              title={username || "Account"}
+            >
+              <span className="avatar">{initial}</span>
+            </button>
+            {menuOpen ? (
+              <div className="avatar-menu" role="menu">
+                {username ? <p className="avatar-name">{username}</p> : null}
+                <Button
+                  variant="ghost"
+                  role="menuitem"
+                  onClick={() => {
+                    setMenuOpen(false);
+                    onLogout();
+                  }}
+                >
+                  Logout
+                </Button>
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    </header>
+  );
+}

package/src/primitives/index.ts

@@ -0,0 +1,9 @@
+export { Button, type ButtonVariant } from "./Button";
+export { Select, AppSelect, type SelectOption, type AppSelectOption } from "./Select";
+export { DateField } from "./DateField";
+export { Dialog, FormDialog } from "./Dialog";
+export { Snackbar, StatusMessage } from "./Snackbar";
+export { Topbar } from "./Topbar";
+export { SideNav, type SideNavItem } from "./SideNav";
+export { Pagination, type PageSizeOption } from "./Pagination";
+export { FormActions } from "./FormActions";

package/src/theme/aksui.css

@@ -0,0 +1,70 @@
+:root {
+  /* Canonical aksui tokens */
+  --aks-brand: #1e2735;
+  --aks-accent: #e67e22;
+  --aks-ink: #1e2735;
+  --aks-muted: #667085;
+  --aks-line: #e6e4df;
+  --aks-field: #f6f5f3;
+  --aks-card: #ffffff;
+  --aks-danger: #b42318;
+  --aks-danger-bg: #fff1f0;
+  --aks-ok: #067647;
+  --aks-ok-bg: #ecfdf3;
+  --aks-radius: 8px;
+  --aks-row-height: 34px;
+  --aks-table-header-height: 36px;
+  --aks-side-rail-collapsed: 52px;
+  --aks-side-rail-expanded: 280px;
+  --aks-preview-panel-width: 300px;
+
+  /*
+   * Compatibility aliases for apps migrating from aksconfigurator_ui tokens.
+   * Prefer --aks-* in new code.
+   */
+  --brand: var(--aks-brand);
+  --accent: var(--aks-accent);
+  --ink: var(--aks-ink);
+  --muted: var(--aks-muted);
+  --line: var(--aks-line);
+  --field: var(--aks-field);
+  --card: var(--aks-card);
+  --danger: var(--aks-danger);
+  --danger-bg: var(--aks-danger-bg);
+  --ok: var(--aks-ok);
+  --ok-bg: var(--aks-ok-bg);
+  --radius: var(--aks-radius);
+  --row-height: var(--aks-row-height);
+  --table-header-height: var(--aks-table-header-height);
+  --side-rail-collapsed: var(--aks-side-rail-collapsed);
+  --side-rail-expanded: var(--aks-side-rail-expanded);
+  --preview-panel-width: var(--aks-preview-panel-width);
+
+  color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+}
+
+body {
+  min-height: 100dvh;
+  color: var(--aks-ink);
+  background: #f3f2ef;
+}
+
+.aksui-root {
+  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+  color: var(--aks-ink);
+  background: #f3f2ef;
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+/** Theme tokens live in aksui.css. Import `@mshuja288/aksuicore/styles.css` in the host app. */
+export const aksuiThemeVersion = "0.2.0";
+export { aksuiTokens, type AksuiTokenName } from "./tokens";