@alepha/ui 0.10.7 → 0.11.1

package/src/components/Omnibar.tsx

@@ -7,7 +7,8 @@ import {
   IconSettings,
   IconUser,
 } from "@tabler/icons-react";
-import type { ReactNode } from "react";
+// biome-ignore lint/correctness/noUnusedImports: required
+import React, { type ReactNode } from "react";
 
 export interface OmnibarProps {
   actions?: SpotlightActionData[];

package/src/components/Sidebar.css

@@ -0,0 +1,217 @@
+/* Sidebar Component Styles */
+
+.alepha-sidebar {
+  width: 100%;
+  padding: 8px;
+}
+
+/* Search button styles */
+.alepha-sidebar-search-button {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background-color: var(--alepha-surface);
+  border: 1px solid var(--alepha-border);
+  border-radius: 8px;
+  transition: all 150ms ease;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.alepha-sidebar-search-button:hover {
+  background-color: var(--alepha-elevated-hover);
+  border-color: var(--mantine-color-blue-6);
+}
+
+.alepha-sidebar-search-button-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.alepha-sidebar-search-button-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--alepha-text-muted);
+  font-size: 14px;
+}
+
+.alepha-sidebar-search-button-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.alepha-sidebar-search-button-shortcut kbd {
+  padding: 2px 6px;
+  background-color: var(--alepha-elevated);
+  border: 1px solid var(--alepha-border);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--alepha-text-muted);
+  box-shadow: 0 1px 2px var(--alepha-shadow);
+}
+
+.alepha-sidebar-item-wrapper {
+  position: relative;
+}
+
+.alepha-sidebar-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  text-decoration: none;
+  color: var(--alepha-text);
+  border-radius: 24px;
+  transition: background-color 150ms ease;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* Full width for level 0 items */
+.alepha-sidebar-level-0 {
+  margin-left: 0;
+}
+
+/* Adjusted width for indented items */
+.alepha-sidebar-level-1 {
+  width: calc(100% - 24px);
+}
+
+.alepha-sidebar-level-2 {
+  width: calc(100% - 48px);
+}
+
+/* Active state for current page */
+.alepha-sidebar-item-active {
+  background-color: var(--mantine-color-blue-0);
+  color: var(--mantine-color-blue-7);
+  font-weight: 500;
+}
+
+.alepha-sidebar-item:hover:not(.alepha-sidebar-item-active) {
+  background-color: var(--alepha-elevated-hover);
+  color: var(--alepha-text) !important;
+}
+
+[data-mantine-color-scheme="dark"] .alepha-sidebar-item-active {
+  background-color: rgba(34, 139, 230, 0.15);
+  color: var(--mantine-color-blue-4);
+}
+
+.alepha-sidebar-item-active .alepha-sidebar-item-icon {
+  color: var(--mantine-color-blue-6);
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-sidebar-item-active
+  .alepha-sidebar-item-icon {
+  color: var(--mantine-color-blue-4);
+}
+
+.alepha-sidebar-item-content {
+  flex: 1;
+}
+
+.alepha-sidebar-item-icon {
+  flex-shrink: 0;
+  color: var(--alepha-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alepha-sidebar-item-label {
+  flex: 1;
+  font-weight: 400;
+}
+
+.alepha-sidebar-item-caret {
+  flex-shrink: 0;
+  color: var(--alepha-text-muted);
+  transition: transform 150ms ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Level-specific indentation (now in the width calc above) */
+.alepha-sidebar-level-1 {
+  margin-left: 24px;
+}
+
+.alepha-sidebar-level-2 {
+  margin-left: 48px;
+}
+
+/* Children container */
+.alepha-sidebar-children {
+  position: relative;
+  margin-top: 2px;
+}
+
+.alepha-sidebar-children-items {
+  position: relative;
+}
+
+/* Vertical bar for nested items */
+.alepha-sidebar-vertical-bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: linear-gradient(
+    to bottom,
+    var(--alepha-border) 0%,
+    var(--alepha-border) 90%,
+    transparent 100%
+  );
+  opacity: 0.5;
+}
+
+/* Vertical bar positioning based on parent level */
+.alepha-sidebar-children[data-parent-level="0"] .alepha-sidebar-vertical-bar {
+  left: 20px; /* Position for level 1 children (level 2 items) */
+}
+
+.alepha-sidebar-children[data-parent-level="1"] .alepha-sidebar-vertical-bar {
+  left: 45px; /* Position for level 2 children (level 3 items) */
+}
+
+/* Smooth animations */
+.alepha-sidebar-children {
+  animation: alepha-sidebar-slideDown 150ms ease-out;
+}
+
+@keyframes alepha-sidebar-slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Remove default focus outline and add custom */
+.alepha-sidebar-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--alepha-focus-ring, #0969da);
+}
+
+/* Active state */
+.alepha-sidebar-item:active {
+  transform: scale(0.98);
+}
+
+/* Optional: Add subtle hover effect for icons (but not for active items) */
+.alepha-sidebar-item:hover:not(.alepha-sidebar-item-active)
+.alepha-sidebar-item-icon {
+  color: var(--alepha-text);
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,255 @@
+import { useActive } from "@alepha/react";
+import { Box, Flex, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconCircle,
+  IconSearch,
+} from "@tabler/icons-react";
+import { type FC, type ReactNode, useState } from "react";
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  activeStartsWith?: boolean; // Use startWith matching for active state
+  onClick?: () => void;
+  children?: MenuItem[];
+}
+
+export interface SidebarProps {
+  menu: MenuItem[];
+  defaultOpenIds?: string[];
+  onItemClick?: (item: MenuItem) => void;
+  showSearchButton?: boolean;
+  onSearchClick?: () => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({
+  menu,
+  defaultOpenIds = [],
+  onItemClick,
+  showSearchButton = false,
+  onSearchClick,
+}) => {
+  const [openIds, setOpenIds] = useState<Set<string>>(new Set(defaultOpenIds));
+
+  const toggleOpen = (id: string) => {
+    setOpenIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Box component="nav" className="alepha-sidebar">
+      {showSearchButton && (
+        <UnstyledButton
+          className="alepha-sidebar-search-button"
+          onClick={onSearchClick}
+        >
+          <Box className="alepha-sidebar-search-button-content">
+            <Box className="alepha-sidebar-search-button-left">
+              <IconSearch size={16} />
+              <span>Search...</span>
+            </Box>
+            <Box className="alepha-sidebar-search-button-shortcut">
+              <kbd>⌘+K</kbd>
+            </Box>
+          </Box>
+        </UnstyledButton>
+      )}
+      {menu.map((item) => (
+        <SidebarItem
+          key={item.id}
+          item={item}
+          level={0}
+          openIds={openIds}
+          onToggle={toggleOpen}
+          onItemClick={onItemClick}
+        />
+      ))}
+    </Box>
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+// SidebarItem - Main component that decides which variant to render
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface SidebarItemProps {
+  item: MenuItem;
+  level: number;
+  openIds: Set<string>;
+  onToggle: (id: string) => void;
+  onItemClick?: (item: MenuItem) => void;
+}
+
+export const SidebarItem: React.FC<SidebarItemProps> = (props) => {
+  const { item, level } = props;
+  const maxLevel = 2; // 0, 1, 2 = 3 levels total
+
+  if (level > maxLevel) return null;
+
+  // Render different components based on whether item has href or not
+  if (item.href) {
+    return <SidebarItemHref {...props} />;
+  }
+
+  return <SidebarItemButton {...props} />;
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+// SidebarItemHref - Component for items with href (navigation)
+// ---------------------------------------------------------------------------------------------------------------------
+
+const SidebarItemHref: React.FC<SidebarItemProps> = ({
+  item,
+  level,
+  openIds,
+  onToggle,
+  onItemClick,
+}) => {
+  const hasChildren = item.children && item.children.length > 0;
+  const isOpen = openIds.has(item.id);
+
+  // Use the useActive hook for navigation
+  const { isActive, anchorProps } = useActive({
+    href: item.href!,
+    startWith: item.activeStartsWith,
+  });
+
+  const handleItemClick = (e: React.MouseEvent) => {
+    if (hasChildren) {
+      e.preventDefault();
+      onToggle(item.id);
+    }
+    // anchorProps.onClick handles navigation automatically
+  };
+
+  return (
+    <Box className="alepha-sidebar-item-wrapper">
+      <UnstyledButton
+        component="a"
+        {...anchorProps}
+        className={`alepha-sidebar-item alepha-sidebar-level-${level} ${isActive ? "alepha-sidebar-item-active" : ""}`}
+        onClick={hasChildren ? handleItemClick : anchorProps.onClick}
+      >
+        <Flex justify="space-between" align="center" w="100%">
+          <Flex className="alepha-sidebar-item-content" align="center" gap={10}>
+            <Box className="alepha-sidebar-item-icon">
+              {item.icon || <IconCircle size={16} />}
+            </Box>
+            <Box className="alepha-sidebar-item-label">{item.label}</Box>
+          </Flex>
+          {hasChildren && (
+            <Box className="alepha-sidebar-item-caret">
+              {isOpen ? (
+                <IconChevronDown size={14} />
+              ) : (
+                <IconChevronRight size={14} />
+              )}
+            </Box>
+          )}
+        </Flex>
+      </UnstyledButton>
+      {hasChildren && isOpen && (
+        <Box className="alepha-sidebar-children" data-parent-level={level}>
+          {(level === 0 || level === 1) && (
+            <Box className="alepha-sidebar-vertical-bar" />
+          )}
+          <Box className="alepha-sidebar-children-items">
+            {item.children!.map((child) => (
+              <SidebarItem
+                key={child.id}
+                item={child}
+                level={level + 1}
+                openIds={openIds}
+                onToggle={onToggle}
+                onItemClick={onItemClick}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+// SidebarItemButton - Component for items without href (buttons with onClick)
+// ---------------------------------------------------------------------------------------------------------------------
+
+const SidebarItemButton: React.FC<SidebarItemProps> = ({
+  item,
+  level,
+  openIds,
+  onToggle,
+  onItemClick,
+}) => {
+  const hasChildren = item.children && item.children.length > 0;
+  const isOpen = openIds.has(item.id);
+
+  const handleItemClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (hasChildren) {
+      onToggle(item.id);
+    } else {
+      onItemClick?.(item);
+      item.onClick?.();
+    }
+  };
+
+  return (
+    <Box className="alepha-sidebar-item-wrapper">
+      <UnstyledButton
+        component="button"
+        className={`alepha-sidebar-item alepha-sidebar-level-${level}`}
+        onClick={handleItemClick}
+      >
+        <Flex justify="space-between" align="center" w="100%">
+          <Flex className="alepha-sidebar-item-content" align="center" gap={10}>
+            <Box className="alepha-sidebar-item-icon">
+              {item.icon || <IconCircle size={16} />}
+            </Box>
+            <Box className="alepha-sidebar-item-label">{item.label}</Box>
+          </Flex>
+          {hasChildren && (
+            <Box className="alepha-sidebar-item-caret">
+              {isOpen ? (
+                <IconChevronDown size={14} />
+              ) : (
+                <IconChevronRight size={14} />
+              )}
+            </Box>
+          )}
+        </Flex>
+      </UnstyledButton>
+      {hasChildren && isOpen && (
+        <Box className="alepha-sidebar-children" data-parent-level={level}>
+          {(level === 0 || level === 1) && (
+            <Box className="alepha-sidebar-vertical-bar" />
+          )}
+          <Box className="alepha-sidebar-children-items">
+            {item.children!.map((child) => (
+              <SidebarItem
+                key={child.id}
+                item={child}
+                level={level + 1}
+                openIds={openIds}
+                onToggle={onToggle}
+                onItemClick={onItemClick}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/TypeForm.tsx

@@ -1,6 +1,6 @@
 import type { TObject } from "@alepha/core";
 import type { FormModel } from "@alepha/react-form";
-import { Grid, Stack } from "@mantine/core";
+import { Flex, Grid } from "@mantine/core";
 import type { ReactNode } from "react";
 import Action, { type ActionSubmitProps } from "./Action";
 import Control, { type ControlProps } from "./Control";
@@ -22,6 +22,7 @@ export interface TypeFormProps<T extends TObject> {
   skipFormElement?: boolean;
   skipSubmitButton?: boolean;
   submitButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+  resetButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
 }
 
 /**
@@ -52,7 +53,7 @@ export interface TypeFormProps<T extends TObject> {
 const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
   const {
     form,
-    columns = 1,
+    columns = 3,
     children,
     controlProps,
     skipFormElement = false,
@@ -97,7 +98,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
       ? {
           xs: 12,
           sm: 6,
-          lg: 12 / 3,
+          lg: 12 / columns,
         }
       : {
           base: columns.base ? 12 / columns.base : undefined,
@@ -134,25 +135,24 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
   };
 
   const content = (
-    <Stack>
+    <Flex direction={"column"} gap={"sm"}>
       {renderFields()}
       {!skipSubmitButton && (
-        <Action form={form} {...submitButtonProps}>
-          {submitButtonProps?.children ?? "Submit"}
-        </Action>
+        <Flex>
+          <Action form={form} {...submitButtonProps}>
+            {submitButtonProps?.children ?? "Submit"}
+          </Action>
+          <button type={"reset"}>Reset</button>
+        </Flex>
       )}
-    </Stack>
+    </Flex>
   );
 
   if (skipFormElement) {
     return content;
   }
 
-  return (
-    <form onSubmit={form.onSubmit} noValidate>
-      {content}
-    </form>
-  );
+  return <form {...form.props}>{content}</form>;
 };
 
 export default TypeForm;

package/src/components/dialogs/AlertDialog.tsx

@@ -0,0 +1,13 @@
+import { Button, Group, Text } from "@mantine/core";
+import type { AlertDialogProps } from "../../services/DialogService";
+
+export function AlertDialog({ options, onClose }: AlertDialogProps) {
+  return (
+    <>
+      {options?.message && <Text mb="md">{options.message}</Text>}
+      <Group justify="flex-end">
+        <Button onClick={onClose}>{options?.okLabel || "OK"}</Button>
+      </Group>
+    </>
+  );
+}

package/src/components/dialogs/ConfirmDialog.tsx

@@ -0,0 +1,21 @@
+import { Button, Group, Text } from "@mantine/core";
+import type { ConfirmDialogProps } from "../../services/DialogService";
+
+export function ConfirmDialog({ options, onConfirm }: ConfirmDialogProps) {
+  return (
+    <>
+      {options?.message && <Text mb="md">{options.message}</Text>}
+      <Group justify="flex-end">
+        <Button variant="subtle" onClick={() => onConfirm(false)}>
+          {options?.cancelLabel || "Cancel"}
+        </Button>
+        <Button
+          color={options?.confirmColor || "blue"}
+          onClick={() => onConfirm(true)}
+        >
+          {options?.confirmLabel || "Confirm"}
+        </Button>
+      </Group>
+    </>
+  );
+}

package/src/components/dialogs/PromptDialog.tsx

@@ -0,0 +1,52 @@
+import { Button, Group, Text, TextInput } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import type { PromptDialogProps } from "../../services/DialogService";
+
+export function PromptDialog({ options, onSubmit }: PromptDialogProps) {
+  const [value, setValue] = useState(options?.defaultValue || "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Auto-focus the input when the dialog opens
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = () => {
+    if (!options?.required || value.trim()) {
+      onSubmit(value);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <>
+      {options?.message && <Text mb="md">{options.message}</Text>}
+      <TextInput
+        ref={inputRef}
+        label={options?.label}
+        placeholder={options?.placeholder}
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        required={options?.required}
+        mb="md"
+      />
+      <Group justify="flex-end">
+        <Button variant="subtle" onClick={() => onSubmit(null)}>
+          {options?.cancelLabel || "Cancel"}
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          disabled={options?.required && !value.trim()}
+        >
+          {options?.submitLabel || "OK"}
+        </Button>
+      </Group>
+    </>
+  );
+}

package/src/hooks/useDialog.ts

@@ -0,0 +1,15 @@
+import { useInject } from "@alepha/react";
+import { DialogService } from "../services/DialogService.tsx";
+
+/**
+ * Use this hook to access the Dialog Service for showing various dialog types.
+ *
+ * @example
+ * const dialog = useDialog();
+ * await dialog.alert({ title: "Alert", message: "This is an alert message" });
+ * const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+ * const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+ */
+export const useDialog = (): DialogService => {
+  return useInject(DialogService);
+};