@alepha/ui 0.15.1 → 0.15.2

package/src/auth/AuthRouter.ts

@@ -1,5 +1,3 @@
-import { ReactAuth } from "@alepha/react/auth";
-import { $page } from "@alepha/react/router";
 import {
   IconLogin2,
   IconLogout2,
@@ -9,6 +7,8 @@ import {
 } from "@tabler/icons-react";
 import { $inject, AlephaError, t } from "alepha";
 import type { RealmController } from "alepha/api/users";
+import { ReactAuth } from "alepha/react/auth";
+import { $page } from "alepha/react/router";
 import { $client } from "alepha/server/links";
 
 /**

package/src/auth/components/AuthLayout.tsx

@@ -1,6 +1,6 @@
-import { NestedView } from "@alepha/react/router";
 import { AlephaMantineProvider } from "@alepha/ui";
 import { Flex } from "@mantine/core";
+import { NestedView } from "alepha/react/router";
 
 const AuthLayout = () => {
   return (

package/src/auth/components/Login.tsx

@@ -1,12 +1,12 @@
-import { useAuth } from "@alepha/react/auth";
-import { FormValidationError, useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
 import { IconLock, IconUser } from "@tabler/icons-react";
 import { AlephaError, t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
+import { useAuth } from "alepha/react/auth";
+import { FormValidationError, useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { HttpError } from "alepha/server";
 import { useMemo } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";

package/src/auth/components/Register.tsx

@@ -1,8 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useAuth } from "@alepha/react/auth";
-import { useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import {
   Alert,
@@ -28,6 +23,11 @@ import type {
   RegistrationIntentResponse,
   UserController,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useAuth } from "alepha/react/auth";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { useMemo, useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";

package/src/auth/components/ResetPassword.tsx

@@ -1,7 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control } from "@alepha/ui";
 import {
   Alert,
@@ -27,6 +23,10 @@ import type {
   UserController,
 } from "alepha/api/users";
 import { resetPasswordRequestSchema } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";

package/src/auth/components/VerifyEmail.tsx

@@ -1,10 +1,10 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton } from "@alepha/ui";
 import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
 import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
 import type { UserController } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter, useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";

package/src/auth/components/buttons/UserButton.tsx

@@ -1,5 +1,3 @@
-import { useAuth } from "@alepha/react/auth";
-import { useRouter } from "@alepha/react/router";
 import {
   ActionButton,
   type ActionMenuConfig,
@@ -9,6 +7,8 @@ import {
 } from "@alepha/ui";
 import { Avatar } from "@mantine/core";
 import { IconLogin2, IconLogout, IconUser } from "@tabler/icons-react";
+import { useAuth } from "alepha/react/auth";
+import { useRouter } from "alepha/react/router";
 import type { ReactNode } from "react";
 import type { AuthRouter } from "../../AuthRouter.ts";
 

package/src/auth/index.ts

@@ -1,7 +1,7 @@
-import { AlephaReactAuth } from "@alepha/react/auth";
-import { AlephaReactI18n } from "@alepha/react/i18n";
 import { AlephaUI } from "@alepha/ui";
 import { $module } from "alepha";
+import { AlephaReactAuth } from "alepha/react/auth";
+import { AlephaReactI18n } from "alepha/react/i18n";
 import { AuthI18n } from "./AuthI18n.ts";
 import { AuthRouter } from "./AuthRouter.ts";
 
@@ -18,7 +18,18 @@ export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * Login UI Module
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | experimental |
+ *
+ * Authentication UI components.
+ *
+ * **Features:**
+ * - Login page component
+ * - Register page component
+ * - Reset password page component
+ * - Email verification page component
+ * - UserButton for user menu
  *
  * @module alepha.ui.auth
  */

package/src/core/RootRouter.ts

@@ -1,4 +1,4 @@
-import { $page } from "@alepha/react/router";
+import { $page } from "alepha/react/router";
 import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
 
 export class RootRouter {

package/src/core/atoms/alephaSidebarAtom.ts

@@ -0,0 +1,57 @@
+import { $atom, type Static, t } from "alepha";
+
+export const alephaSidebarAtom = $atom({
+  name: "alepha.ui.sidebar",
+  schema: t.object({
+    /**
+     * Whether the sidebar is opened or closed (mobile).
+     */
+    opened: t.boolean(),
+    /**
+     * Whether the sidebar is collapsed (narrow) or expanded (wide).
+     */
+    collapsed: t.boolean(),
+    /**
+     * Current width of the sidebar when expanded (can be changed by resizing).
+     * @default 300
+     */
+    width: t.number(),
+    /**
+     * Default width used when expanding from collapsed state or on hover.
+     * @default 300
+     */
+    defaultWidth: t.number(),
+    /**
+     * Width of the sidebar when collapsed.
+     * @default 78
+     */
+    collapsedWidth: t.number(),
+    /**
+     * Maximum width when resizing.
+     * @default 500
+     */
+    maxWidth: t.number(),
+    /**
+     * Minimum width before auto-collapse triggers.
+     * @default 150
+     */
+    collapseThreshold: t.number(),
+    /**
+     * Delay in ms before sidebar expands on hover when collapsed.
+     * @default 300
+     */
+    hoverDelay: t.number(),
+  }),
+  default: {
+    opened: false,
+    collapsed: false,
+    width: 300,
+    defaultWidth: 300,
+    collapsedWidth: 78,
+    maxWidth: 500,
+    collapseThreshold: 240,
+    hoverDelay: 300,
+  },
+});
+
+export type AlephaSidebarState = Static<typeof alephaSidebarAtom.schema>;

package/src/core/components/buttons/ActionButton.tsx

@@ -1,11 +1,3 @@
-import { type UseActionReturn, useAction } from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react/form";
-import {
-  type RouterGoOptions,
-  type UseActiveOptions,
-  useActive,
-  useRouter,
-} from "@alepha/react/router";
 import {
   Anchor,
   type AnchorProps,
@@ -23,6 +15,14 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { type UseActionReturn, useAction } from "alepha/react";
+import { type FormModel, useFormState } from "alepha/react/form";
+import {
+  type RouterGoOptions,
+  type UseActiveOptions,
+  useActive,
+  useRouter,
+} from "alepha/react/router";
 import {
   type ButtonHTMLAttributes,
   Children,
@@ -287,7 +287,7 @@ const ActionButton = (_props: ActionProps) => {
 
     if (!props.children) {
       restProps.children = Children.only(icon);
-      restProps.px ??= "xs";
+      restProps.px ??= "xs"; // TODO: change based on props.size ?
     } else {
       restProps.leftSection = icon;
     }

package/src/core/components/buttons/BurgerButton.tsx

@@ -1,15 +1,16 @@
-import { useStore } from "@alepha/react";
 import { Burger, type BurgerProps } from "@mantine/core";
+import { useStore } from "alepha/react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
 
 export interface BurgerButtonProps extends BurgerProps {}
 
 const BurgerButton = (props: BurgerButtonProps) => {
-  const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
+  const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 
   return (
     <Burger
-      opened={opened}
-      onClick={() => setOpened(!opened)}
+      opened={sidebar.opened}
+      onClick={() => setSidebar({ ...sidebar, opened: !sidebar.opened })}
       hiddenFrom="sm"
       size="sm"
       {...props}

package/src/core/components/buttons/LanguageButton.tsx

@@ -1,5 +1,5 @@
-import { useI18n } from "@alepha/react/i18n";
 import { IconLanguage } from "@tabler/icons-react";
+import { useI18n } from "alepha/react/i18n";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 export interface LanguageButtonProps {

package/src/core/components/buttons/OmnibarButton.tsx

@@ -1,6 +1,8 @@
 import { Flex, Kbd, Text } from "@mantine/core";
+import { useOs } from "@mantine/hooks";
 import { spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
+import { ClientOnly } from "alepha/react";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 export interface OmnibarButtonProps {
@@ -9,6 +11,23 @@ export interface OmnibarButtonProps {
 }
 
 const OmnibarButton = (props: OmnibarButtonProps) => {
+  const os = useOs();
+  const isMac = os === "macos" || os === "ios";
+  const shortcut = isMac ? "⌘" : "Ctrl";
+
+  if (props.collapsed) {
+    return (
+      <ActionButton
+        variant={"subtle"}
+        onClick={spotlight.open}
+        radius={"md"}
+        icon={<IconSearch size={16} />}
+        tooltip={{ label: "Search", position: "right" }}
+        {...props.actionProps}
+      />
+    );
+  }
+
   return (
     <ActionButton
       variant={"default"}
@@ -16,7 +35,7 @@ const OmnibarButton = (props: OmnibarButtonProps) => {
       justify={"space-between"}
       rightSection={
         <Kbd visibleFrom={"sm"} size={"sm"}>
-          ⌘+K
+          <ClientOnly>{shortcut}</ClientOnly>+K
         </Kbd>
       }
       radius={"md"}

package/src/core/components/buttons/ThemeButton.tsx

@@ -1,5 +1,5 @@
-import { useStore } from "@alepha/react";
 import { IconPalette } from "@tabler/icons-react";
+import { useStore } from "alepha/react";
 import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";

package/src/core/components/buttons/ToggleSidebarButton.tsx

@@ -1,33 +1,43 @@
-import { useStore } from "@alepha/react";
-import { Flex } from "@mantine/core";
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
 } from "@tabler/icons-react";
-import ActionButton from "./ActionButton.tsx";
+import { useStore } from "alepha/react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
+import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
-const ToggleSidebarButton = () => {
-  const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
+type Props = ActionProps;
+
+const ToggleSidebarButton = (props: Props) => {
+  const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 
   return (
-    <Flex>
-      <ActionButton
-        icon={
-          collapsed ? (
-            <IconLayoutSidebarRightCollapse />
-          ) : (
-            <IconLayoutSidebarLeftCollapse />
-          )
-        }
-        variant={"subtle"}
-        size={"md"}
-        onClick={() => setCollapsed(!collapsed)}
-        tooltip={{
-          position: "right",
-          label: collapsed ? "Show sidebar" : "Hide sidebar",
-        }}
-      />
-    </Flex>
+    <ActionButton
+      icon={
+        sidebar.collapsed ? (
+          <IconLayoutSidebarRightCollapse />
+        ) : (
+          <IconLayoutSidebarLeftCollapse />
+        )
+      }
+      visibleFrom={"sm"}
+      variant={"subtle"}
+      size={"md"}
+      onClick={() => {
+        const expanding = sidebar.collapsed;
+        setSidebar({
+          ...sidebar,
+          collapsed: !sidebar.collapsed,
+          // Reset width to defaultWidth when expanding
+          width: expanding ? sidebar.defaultWidth : sidebar.width,
+        });
+      }}
+      tooltip={{
+        position: "right",
+        label: sidebar.collapsed ? "Show sidebar" : "Hide sidebar",
+      }}
+      {...props}
+    />
   );
 };
 

package/src/core/components/form/Control.tsx

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   ColorInput,
   type ColorInputProps,
@@ -20,6 +19,7 @@ import type {
   DateTimePickerProps,
   TimeInputProps,
 } from "@mantine/dates";
+import { useFormState } from "alepha/react/form";
 import type { ComponentType } from "react";
 import {
   type GenericControlProps,

package/src/core/components/form/ControlArray.tsx

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import type { BaseInputField } from "@alepha/react/form";
 import {
   ActionIcon,
   Fieldset,
@@ -11,6 +9,8 @@ import {
 } from "@mantine/core";
 import { IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
 import type { TObject, TSchema } from "alepha";
+import { useEvents } from "alepha/react";
+import type { BaseInputField } from "alepha/react/form";
 import { useRef, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import {

package/src/core/components/form/ControlDate.tsx

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   DateInput,
   type DateInputProps,
@@ -7,6 +6,7 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
+import { useFormState } from "alepha/react/form";
 import {
   type GenericControlProps,
   parseInput,

package/src/core/components/form/ControlNumber.tsx

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { useFormState } from "@alepha/react/form";
 import {
   Input,
   NumberInput,
@@ -7,6 +5,8 @@ import {
   Slider,
   type SliderProps,
 } from "@mantine/core";
+import { useEvents } from "alepha/react";
+import { useFormState } from "alepha/react/form";
 import { useRef, useState } from "react";
 import {
   type GenericControlProps,

package/src/core/components/form/ControlObject.tsx

@@ -1,6 +1,6 @@
-import type { BaseInputField, ObjectInputField } from "@alepha/react/form";
 import { Fieldset, Grid, Stack, Text } from "@mantine/core";
 import type { TObject } from "alepha";
+import type { BaseInputField, ObjectInputField } from "alepha/react/form";
 import {
   type GenericControlProps,
   parseInput,

package/src/core/components/form/ControlQueryBuilder.tsx

@@ -1,4 +1,3 @@
-import { useEvents } from "@alepha/react";
 import {
   ActionIcon,
   Badge,
@@ -14,6 +13,7 @@ import {
 import { IconFilter, IconInfoTriangle, IconX } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { parseQueryString } from "alepha/orm";
+import { useEvents } from "alepha/react";
 import { useRef, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import {

package/src/core/components/form/ControlSelect.tsx

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   Autocomplete,
   type AutocompleteProps,
@@ -13,6 +12,7 @@ import {
   TagsInput,
   type TagsInputProps,
 } from "@mantine/core";
+import { useFormState } from "alepha/react/form";
 import { useEffect, useState } from "react";
 import {
   type GenericControlProps,

package/src/core/components/form/TypeForm.tsx

@@ -1,6 +1,6 @@
-import type { FormModel } from "@alepha/react/form";
 import { Card, Flex, type FlexProps, Grid } from "@mantine/core";
 import type { TObject } from "alepha";
+import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
 import ActionButton, {
   type ActionSubmitButtonProps,
@@ -55,7 +55,7 @@ export interface TypeFormProps<T extends TObject> {
  * @example
  * ```tsx
  * import { t } from "alepha";
- * import { useForm } from "@alepha/react/form";
+ * import { useForm } from "alepha/react/form";
  * import { TypeForm } from "@alepha/ui";
  *
  * const form = useForm({