@alepha/ui 0.10.6 → 0.11.0

package/src/components/Omnibar.tsx

@@ -0,0 +1,77 @@
+import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
+import {
+  IconDashboard,
+  IconFileText,
+  IconHome,
+  IconSearch,
+  IconSettings,
+  IconUser,
+} from "@tabler/icons-react";
+// biome-ignore lint/correctness/noUnusedImports: required
+import React, { type ReactNode } from "react";
+
+export interface OmnibarProps {
+  actions?: SpotlightActionData[];
+  shortcut?: string | string[];
+  searchPlaceholder?: string;
+  nothingFound?: ReactNode;
+}
+
+const defaultActions: SpotlightActionData[] = [
+  {
+    id: "home",
+    label: "Home",
+    description: "Go to home page",
+    onClick: () => console.log("Home"),
+    leftSection: <IconHome size={20} />,
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    description: "View your dashboard",
+    onClick: () => console.log("Dashboard"),
+    leftSection: <IconDashboard size={20} />,
+  },
+  {
+    id: "documents",
+    label: "Documents",
+    description: "Browse all documents",
+    onClick: () => console.log("Documents"),
+    leftSection: <IconFileText size={20} />,
+  },
+  {
+    id: "profile",
+    label: "Profile",
+    description: "View and edit your profile",
+    onClick: () => console.log("Profile"),
+    leftSection: <IconUser size={20} />,
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    description: "Manage application settings",
+    onClick: () => console.log("Settings"),
+    leftSection: <IconSettings size={20} />,
+  },
+];
+
+const Omnibar = (props: OmnibarProps) => {
+  const actions = props.actions ?? defaultActions;
+  const shortcut = props.shortcut ?? "mod+K";
+  const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+  const nothingFound = props.nothingFound ?? "Nothing found...";
+
+  return (
+    <Spotlight
+      actions={actions}
+      shortcut={shortcut}
+      searchProps={{
+        leftSection: <IconSearch size={20} />,
+        placeholder: searchPlaceholder,
+      }}
+      nothingFound={nothingFound}
+    />
+  );
+};
+
+export default Omnibar;

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/src/hooks/useActive";
+import { Box, Flex, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconCircle,
+  IconSearch,
+} from "@tabler/icons-react";
+import { useState } from "react";
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: React.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: React.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

@@ -0,0 +1,158 @@
+import type { TObject } from "@alepha/core";
+import type { FormModel } from "@alepha/react-form";
+import { Flex, Grid } from "@mantine/core";
+import type { ReactNode } from "react";
+import Action, { type ActionSubmitProps } from "./Action";
+import Control, { type ControlProps } from "./Control";
+
+export interface TypeFormProps<T extends TObject> {
+  form: FormModel<T>;
+  columns?:
+    | number
+    | {
+        base?: number;
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+      };
+  children?: (input: FormModel<T>["input"]) => ReactNode;
+  controlProps?: Partial<Omit<ControlProps, "input">>;
+  skipFormElement?: boolean;
+  skipSubmitButton?: boolean;
+  submitButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+  resetButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+}
+
+/**
+ * TypeForm component that automatically renders all form inputs based on schema.
+ * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ * import { useForm } from "@alepha/react-form";
+ * import { TypeForm } from "@alepha/ui";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.text(),
+ *     email: t.text(),
+ *     age: t.integer(),
+ *     subscribe: t.boolean(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log(values);
+ *   },
+ * });
+ *
+ * return <TypeForm form={form} columns={2} />;
+ * ```
+ */
+const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
+  const {
+    form,
+    columns = 3,
+    children,
+    controlProps,
+    skipFormElement = false,
+    skipSubmitButton = false,
+    submitButtonProps,
+  } = props;
+
+  if (!form.options?.schema?.properties) {
+    return null;
+  }
+
+  const fieldNames = Object.keys(form.options.schema.properties);
+
+  // Filter out unsupported field types (objects only, arrays are now supported)
+  const supportedFields = fieldNames.filter((fieldName) => {
+    const field = form.input[fieldName as keyof typeof form.input];
+    if (!field || typeof field !== "object" || !("schema" in field)) {
+      return false;
+    }
+
+    const schema: any = field.schema;
+
+    // Skip if it's an object (not supported by Control)
+    // Arrays are now supported via ControlSelect (MultiSelect/TagsInput)
+    if ("type" in schema) {
+      if (schema.type === "object") {
+        return false;
+      }
+    }
+
+    // Check if it has properties (nested object)
+    if ("properties" in schema && schema.properties) {
+      return false;
+    }
+
+    return true;
+  });
+
+  // Handle column configuration with defaults: xs=1, sm=2, lg=3
+  const colSpan =
+    typeof columns === "number"
+      ? {
+          xs: 12,
+          sm: 6,
+          lg: 12 / columns,
+        }
+      : {
+          base: columns.base ? 12 / columns.base : undefined,
+          xs: columns.xs ? 12 / columns.xs : 12,
+          sm: columns.sm ? 12 / columns.sm : 6,
+          md: columns.md ? 12 / columns.md : undefined,
+          lg: columns.lg ? 12 / columns.lg : 4,
+          xl: columns.xl ? 12 / columns.xl : undefined,
+        };
+
+  const renderFields = () => {
+    if (children) {
+      return <>{children(form.input)}</>;
+    }
+
+    return (
+      <Grid>
+        {supportedFields.map((fieldName) => {
+          const field = form.input[fieldName as keyof typeof form.input];
+
+          // Type guard to ensure field has the expected structure
+          if (!field || typeof field !== "object" || !("schema" in field)) {
+            return null;
+          }
+
+          return (
+            <Grid.Col key={fieldName} span={colSpan}>
+              <Control input={field as any} {...controlProps} />
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+    );
+  };
+
+  const content = (
+    <Flex direction={"column"} gap={"sm"}>
+      {renderFields()}
+      {!skipSubmitButton && (
+        <Flex>
+          <Action form={form} {...submitButtonProps}>
+            {submitButtonProps?.children ?? "Submit"}
+          </Action>
+          <button type={"reset"}>Reset</button>
+        </Flex>
+      )}
+    </Flex>
+  );
+
+  if (skipFormElement) {
+    return content;
+  }
+
+  return <form {...form.props}>{content}</form>;
+};
+
+export default TypeForm;