@robr0/design-system 0.1.0

package/components/Alert/Alert.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Alert.css";
+import "../../fonts/material-symbols.css";
+const defaultIcons = {
+  info: "info",
+  positive: "check_circle",
+  warning: "warning",
+  error: "error",
+  neutral: "info"
+};
+const Alert = ({
+  title,
+  description,
+  variant = "info",
+  size = "default",
+  dismissible = false,
+  icon,
+  onDismiss,
+  className = ""
+}) => {
+  const baseClass = "ds-alert";
+  const variantClass = `${baseClass}--${variant}`;
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, variantClass, sizeClass, className].filter(Boolean).join(" ");
+  const iconName = icon || defaultIcons[variant];
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "alert", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__icon material-symbols-rounded`,
+        "aria-hidden": "true",
+        children: iconName
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+      title && /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+    ] }),
+    dismissible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__dismiss`,
+        onClick: onDismiss,
+        "aria-label": "Dismiss alert",
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+      }
+    )
+  ] });
+};
+export {
+  Alert
+};

package/components/AlertDialog/AlertDialog.css

@@ -0,0 +1,131 @@
+/* ============================================
+   ALERT DIALOG COMPONENT
+   Modal confirmation with backdrop overlay
+   ============================================ */
+
+.ds-alert-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-alert-dialog--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.ds-alert-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-alert-dialog__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md); /* 16px */
+  min-width: 320px;
+  max-width: 480px;
+  padding: var(--padding-lg); /* 20px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-modal);
+  transform: scale(0.96);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-alert-dialog--open .ds-alert-dialog__panel {
+  transform: scale(1);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-alert-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+}
+
+.ds-alert-dialog__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+.ds-alert-dialog--destructive .ds-alert-dialog__icon {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.ds-alert-dialog__title {
+  font-family: var(--font-heading-6-family);
+  font-size: var(--font-heading-6-size);
+  font-weight: var(--font-heading-6-weight);
+  line-height: var(--font-heading-6-line-height);
+  letter-spacing: var(--font-heading-6-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-alert-dialog--destructive .ds-alert-dialog__title {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.ds-alert-dialog__description {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* ============================================
+   ACTIONS
+   ============================================ */
+
+.ds-alert-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gap-sm); /* 8px */
+  padding-top: var(--padding-xs); /* 6px */
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-alert-dialog__panel {
+    min-width: auto;
+    margin: var(--padding-md);
+  }
+}

package/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,29 @@
+export interface AlertDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when dialog requests to close */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog description / body text */
+    description?: string;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Callback when confirm is clicked */
+    onConfirm?: () => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Destructive variant for dangerous actions */
+    variant?: 'default' | 'destructive';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * AlertDialog component for important confirmations.
+ * Renders a modal overlay with title, description,
+ * and confirm / cancel actions. Traps focus and
+ * supports ESC key dismissal.
+ */
+export declare const AlertDialog: ({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant, className, }: AlertDialogProps) => import('react').ReactPortal | null;

package/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,143 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useId, useSyncExternalStore, useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Button } from "../Button/Button.js";
+import "./AlertDialog.css";
+import "../../fonts/material-symbols.css";
+const emptySubscribe = () => () => {
+};
+const AlertDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  className = ""
+}) => {
+  const panelRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const titleId = useId();
+  const descId = useId();
+  const baseClass = "ds-alert-dialog";
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
+  useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    if (panel) {
+      const cancelBtn = panel.querySelector(
+        `.${baseClass}__actions button:first-child`
+      );
+      cancelBtn?.focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleCancel();
+        return;
+      }
+      if (e.key === "Tab" && panel) {
+        const focusable = panel.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, handleCancel]);
+  useEffect(() => {
+    if (!open && previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const variantClass = variant !== "default" ? `${baseClass}--${variant}` : "";
+  const openClass = open ? `${baseClass}--open` : "";
+  const containerClasses = [baseClass, variantClass, openClass, className].filter(Boolean).join(" ");
+  const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleCancel }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__panel`,
+        ref: panelRef,
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": description ? descId : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__icon material-symbols-rounded`,
+                "aria-hidden": "true",
+                children: variant === "destructive" ? "warning" : "info"
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__actions`, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: cancelLabel,
+                priority: "tertiary",
+                onClick: handleCancel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: confirmLabel,
+                priority: variant === "destructive" ? "destructive" : "primary",
+                onClick: handleConfirm
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+  if (!mounted) return null;
+  return ReactDOM.createPortal(dialog, document.body);
+};
+export {
+  AlertDialog
+};

package/components/AppLayout/AppLayout.css

@@ -0,0 +1,52 @@
+/* ============================================
+   APP LAYOUT — full-page template
+   Sidebar rail on the left, centered content area
+   ============================================ */
+
+.ds-app-layout {
+  display: flex;
+  min-height: 100vh;
+  background-color: var(--color-bg-page-primary);
+}
+
+/* ============================================
+   MAIN CONTENT AREA
+   ============================================ */
+.ds-app-layout__main {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  margin-left: 64px;
+  padding: var(--padding-xl) var(--padding-lg);
+  transition: margin-left var(--motion-duration-slow) var(--motion-ease-emphasized);
+  min-width: 0;
+}
+
+.ds-app-layout--expanded .ds-app-layout__main {
+  margin-left: 280px;
+}
+
+/* ============================================
+   CENTERED CONTENT WRAPPER
+   ============================================ */
+.ds-app-layout__content {
+  width: 100%;
+  max-width: 1120px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xl);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+  .ds-app-layout__main {
+    margin-left: 0;
+    padding: var(--padding-lg) var(--padding-md);
+  }
+
+  .ds-app-layout--expanded .ds-app-layout__main {
+    margin-left: 0;
+  }
+}

package/components/AppLayout/AppLayout.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { AppSidebarSection, AppSidebarProfile } from '../AppSidebar/AppSidebar';
+export interface AppLayoutProps {
+    /** Sidebar navigation sections */
+    sections: AppSidebarSection[];
+    /** Sidebar profile */
+    profile?: AppSidebarProfile;
+    /** Active nav item key */
+    activeKey?: string;
+    /** Active sub-item key */
+    activeSubKey?: string;
+    /** Whether sidebar starts expanded */
+    defaultExpanded?: boolean;
+    /** Logo text next to icon */
+    logoText?: string;
+    /** Custom logo element */
+    logo?: React.ReactNode;
+    /** Page content — centred in the main area */
+    children: React.ReactNode;
+    /** Additional CSS classes on outer wrapper */
+    className?: string;
+}
+/**
+ * AppLayout — full-page template with a collapsible sidebar
+ * and a centred content area.
+ */
+export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, logoText, logo, children, className, }: AppLayoutProps) => React.JSX.Element;

package/components/AppLayout/AppLayout.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { AppSidebar } from "../AppSidebar/AppSidebar.js";
+import "./AppLayout.css";
+const AppLayout = ({
+  sections,
+  profile,
+  activeKey,
+  activeSubKey,
+  defaultExpanded = true,
+  logoText,
+  logo,
+  children,
+  className = ""
+}) => {
+  const baseClass = "ds-app-layout";
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const handleExpandedChange = useCallback((next) => {
+    setExpanded(next);
+  }, []);
+  const classes = [
+    baseClass,
+    expanded ? `${baseClass}--expanded` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, "data-theme": "dark", children: [
+    /* @__PURE__ */ jsx(
+      AppSidebar,
+      {
+        sections,
+        profile,
+        activeKey,
+        activeSubKey,
+        expanded,
+        onExpandedChange: handleExpandedChange,
+        logoText,
+        logo
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+  ] });
+};
+export {
+  AppLayout
+};