@alepha/ui 0.11.3 → 0.11.5

package/src/components/Omnibar.tsx

@@ -1,77 +0,0 @@
-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

@@ -1,217 +0,0 @@
-/* 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

@@ -1,255 +0,0 @@
-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>
-  );
-};