@alepha/ui 0.15.0 → 0.15.2

package/src/admin/components/sessions/AdminSessions.tsx

@@ -1,6 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group } from "@mantine/core";
 import {
@@ -15,6 +12,9 @@ import {
   type SessionEntity,
   sessions,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 

package/src/admin/components/shared/AdminResourceHeader.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "@alepha/react/router";
 import { ActionButton } from "@alepha/ui";
 import {
   ActionIcon,
@@ -16,6 +15,7 @@ import {
   IconChevronLeft,
   IconExternalLink,
 } from "@tabler/icons-react";
+import { useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
 
 export interface AdminResourceAction {

package/src/admin/components/shared/AdminResourceTabs.tsx

@@ -1,5 +1,5 @@
-import { useActive, useRouter } from "@alepha/react/router";
 import { Tabs } from "@mantine/core";
+import { useActive, useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
 
 export interface AdminResourceTab {

package/src/admin/components/users/AdminUserAudits.tsx

@@ -1,6 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouterState } from "@alepha/react/router";
 import { DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group, Tooltip } from "@mantine/core";
 import {
@@ -11,6 +8,9 @@ import {
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type { AdminAuditController, AuditEntity } from "alepha/api/audits";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouterState } from "alepha/react/router";
 
 export interface AdminUserAuditsProps {
   userRealmName?: string;

package/src/admin/components/users/AdminUserCreate.tsx

@@ -1,10 +1,10 @@
-import { useClient } from "@alepha/react";
-import { useForm } from "@alepha/react/form";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, Flex } from "@alepha/ui";
 import { Card, Stack, Text } from "@mantine/core";
 import { t } from "alepha";
 import type { AdminUserController } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useForm } from "alepha/react/form";
+import { useRouter } from "alepha/react/router";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUserCreateProps {

package/src/admin/components/users/AdminUserDetails.tsx

@@ -1,7 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouterState } from "@alepha/react/router";
 import { ActionButton, ClipboardButton, Control } from "@alepha/ui";
 import {
   Badge,
@@ -30,6 +26,10 @@ import {
 } from "@tabler/icons-react";
 import { t } from "alepha";
 import type { AdminUserController, UserEntity } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouterState } from "alepha/react/router";
 import { type ReactNode, useEffect, useState } from "react";
 
 export interface AdminUserDetailsProps {

package/src/admin/components/users/AdminUserLayout.tsx

@@ -1,5 +1,3 @@
-import { useClient } from "@alepha/react";
-import { NestedView, useRouter, useRouterState } from "@alepha/react/router";
 import { Box, Center, Loader, Stack, Text } from "@mantine/core";
 import {
   IconBan,
@@ -14,6 +12,8 @@ import {
   IconUser,
 } from "@tabler/icons-react";
 import type { AdminUserController, UserEntity } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { NestedView, useRouter, useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";

package/src/admin/components/users/AdminUserSessions.tsx

@@ -1,6 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouterState } from "@alepha/react/router";
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group } from "@mantine/core";
 import {
@@ -11,6 +8,9 @@ import {
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type { AdminSessionController, SessionEntity } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouterState } from "alepha/react/router";
 import { useState } from "react";
 
 export interface AdminUserSessionsProps {

package/src/admin/components/users/AdminUserSettings.tsx

@@ -1,5 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton, Flex, Text } from "@alepha/ui";
 import { Alert, Card, Group, Loader, Stack } from "@mantine/core";
 import {
@@ -13,6 +11,8 @@ import type {
   UserController,
   UserEntity,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useRouter, useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
@@ -76,7 +76,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
         query: {
           userRealmName: props.userRealmName,
           method: "link",
-          verifyUrl: `${window.location.origin}/verify-email`,
+          verifyUrl: `${window.location.origin}/auth/verify-email`,
         },
         body: { email: user.email },
       });

package/src/admin/components/users/AdminUsers.tsx

@@ -1,6 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { DataTable, Text } from "@alepha/ui";
 import { Badge, Flex, Group } from "@mantine/core";
 import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
@@ -10,6 +7,9 @@ import {
   type UserEntity,
   users,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {

package/src/admin/index.ts

@@ -36,7 +36,22 @@ export { MainRouter } from "./MainRouter.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * Admin panel UI Module
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | experimental |
+ *
+ * Admin panel UI components.
+ *
+ * **Features:**
+ * - AdminLayout for admin pages
+ * - AdminUsers with user list, create, details, settings, sessions, audits
+ * - AdminFiles for file management
+ * - AdminJobs for job monitoring
+ * - AdminNotifications for notification management
+ * - AdminParameters for configuration management
+ * - AdminSessions for session management
+ * - AdminAudits for audit log viewing
+ * - AdminVerifications for verification management
  *
  * @module alepha.ui.admin
  */

package/src/auth/AuthI18n.ts

@@ -1,4 +1,4 @@
-import { $dictionary } from "@alepha/react/i18n";
+import { $dictionary } from "alepha/react/i18n";
 
 export class AuthI18n {
   en = $dictionary({

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,