@alepha/ui 0.18.1 → 0.18.3

package/src/core/table/components/DataTableToolbar.tsx

@@ -1,5 +1,10 @@
-import { ActionButton, type ActionProps, isComponentType } from "@alepha/ui";
-import { Badge, Divider, Flex } from "@mantine/core";
+import {
+  ActionButton,
+  type ActionProps,
+  Flex,
+  isComponentType,
+} from "@alepha/ui";
+import { Badge, Divider } from "@mantine/core";
 import {
   IconClipboard,
   IconDownload,
@@ -78,7 +83,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
 
   const exportableColumns = useCallback(() => {
     return Object.entries(columns).filter(
-      ([key, col]) => !col.actions && columnVisibility[key] !== false,
+      ([key]) => columnVisibility[key] !== false,
     );
   }, [columns, columnVisibility]);
 
@@ -130,7 +135,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
   };
 
   return (
-    <Flex p="xs" style={{ borderBottom: "1px solid var(--alepha-border)" }}>
+    <Flex p="xs">
       <Flex gap={4} align="center">
         {filters && (
           <FilterPicker
@@ -146,7 +151,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
         />
         {withExport && (
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconDownload}
             menu={{
               items: [
@@ -172,7 +177,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
               {selectedItems.length} selected
             </Badge>
             <ActionButton
-              variant="subtle"
+              variant={"minimal"}
               size="compact-sm"
               icon={IconX}
               onClick={onClearSelection}
@@ -209,7 +214,11 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
             props
           ),
         )}
-        <ActionButton variant="subtle" icon={IconRefresh} onClick={onRefresh} />
+        <ActionButton
+          variant={"minimal"}
+          icon={IconRefresh}
+          onClick={onRefresh}
+        />
       </Flex>
     </Flex>
   );

package/src/core/table/components/FilterPicker.tsx

@@ -74,7 +74,7 @@ const FilterPicker = ({
       <Popover.Target>
         <div>
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconFilter}
             onClick={() => setOpened((o) => !o)}
           />
@@ -102,14 +102,14 @@ const FilterPicker = ({
             <Flex gap={4}>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleShowAll}
               >
                 All
               </ActionButton>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleHideAll}
               >
                 None

package/src/core/table/index.ts

@@ -6,6 +6,7 @@ export type {
   DataTableColumn,
   DataTableColumnContext,
   DataTableProps,
+  DataTableRowAction,
   DataTableSubmitContext,
   FilterVisibility,
   MaybePage,

package/src/core/table/interfaces/types.ts

@@ -24,7 +24,16 @@ export const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
 // -----------------------------------------------------------------------------
 
 export type DataTableRowAction = ActionProps & {
+  /**
+   * Label for the action shown in the row menu.
+   */
+  label?: string;
   visible?: boolean;
+  /**
+   * When true, skip the automatic table refresh after a successful onClick.
+   * By default, the table re-fetches data after every row action completes.
+   */
+  skipRefresh?: boolean;
 };
 
 // -----------------------------------------------------------------------------
@@ -62,19 +71,15 @@ export interface DataTableColumn<T extends object, Filters extends TObject> {
    * Follows Alepha sort convention: 'field' for ASC, '-field' for DESC.
    */
   sortKey?: string;
-  /**
-   * Row-level actions rendered as ActionButtons.
-   * Defaults: variant="subtle", size="xs", preventDefault=true.
-   * Use `visible` on each action to conditionally show/hide.
-   */
-  actions?: (
-    item: T,
-    ctx: DataTableColumnContext<Filters>,
-  ) => DataTableRowAction[];
   /**
    * Hide this column by default. Users can show it via the column picker.
    */
   defaultHidden?: boolean;
+  /**
+   * Wrap the cell content with an ActionButton. Defaults to `variant="unstyled"`.
+   * Receives the row item to generate per-row action props (e.g., dynamic href).
+   */
+  action?: (item: T) => ActionProps;
 }
 
 // -----------------------------------------------------------------------------
@@ -141,6 +146,20 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
     form: FormModel<Filters>,
   ) => void;
 
+  /**
+   * Skip auto-submit when filter values change.
+   * When true, filters update form state but do not trigger a refetch.
+   * The user must manually refresh (e.g. via the toolbar refresh button).
+   */
+  skipSubmitOnChange?: boolean;
+
+  /**
+   * Debounce delay in milliseconds for filter auto-submit.
+   * Defaults to 300ms. Set to 0 to disable debounce.
+   * Ignored when skipSubmitOnChange is true.
+   */
+  debounce?: number;
+
   /**
    * Optional filters to apply to the data.
    */
@@ -188,6 +207,15 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
 
   actions?: Array<ActionProps & { label?: ReactNode }>;
 
+  /**
+   * Row-level actions rendered as a 3-dot menu on each row.
+   * Use `visible` on each action to conditionally show/hide.
+   */
+  rowActions?: (
+    item: T,
+    ctx: DataTableColumnContext<Filters>,
+  ) => DataTableRowAction[];
+
   /**
    * Enable infinity scroll mode. When true, pagination controls are hidden and new items are loaded automatically when scrolling to the bottom.
    */
@@ -202,6 +230,11 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
   // Mantine Props
   // -------------------------------------------------------------------------------------------------------------------
 
+  /**
+   * Label shown when the table has no results. Defaults to "No results".
+   */
+  emptyLabel?: string;
+
   /**
    * Props to pass to the Mantine Table component.
    */

package/src/core/utils/icons.tsx

@@ -31,8 +31,8 @@ export const getDefaultIcon = (params: {
   isArray?: boolean;
   size?: IconSize;
 }): ReactElement => {
-  const { type, format, name, isEnum, isArray, size = "sm" } = params;
-  const iconSize = ui.sizes.icon[size];
+  const { type, format, name, isEnum, isArray, size = "xs" } = params;
+  const iconSize = ui.sizes.icon[size] - 4; // TODO: better mapping
 
   // Format-based icons (highest priority)
   if (format) {

package/src/demo/DemoRouter.ts

@@ -121,7 +121,7 @@ export class DemoRouter {
     icon: IconForms,
     path: "/form",
     label: "Form",
-    children: () => [this.demoTypeForm],
+    children: () => [this.demoTypeForm, this.demoControlSelect],
   });
 
   demoTypeForm = $page({
@@ -131,6 +131,13 @@ export class DemoRouter {
     lazy: () => import("./components/core/DemoTypeForm.tsx"),
   });
 
+  demoControlSelect = $page({
+    icon: IconForms,
+    path: "/control-select",
+    label: "ControlSelect",
+    lazy: () => import("./components/core/DemoControlSelect.tsx"),
+  });
+
   // Table Components
   demoTable = $page({
     icon: IconTable,

package/src/demo/components/DemoLayout.tsx

@@ -13,12 +13,14 @@ const DemoLayout = () => {
   return (
     <AlephaMantineProvider>
       <DashboardShell
+        fill
         appShellProps={{
           withBorder: false,
           bg: ui.colors.background,
         }}
         appShellHeaderProps={{
           bg: "transparent",
+          style: { backdropFilter: "blur(10px)" },
         }}
         appBarProps={{
           items: [
@@ -58,7 +60,10 @@ const DemoLayout = () => {
             },
             {
               ...router.node("demoForm"),
-              children: [router.node("demoTypeForm")],
+              children: [
+                router.node("demoTypeForm"),
+                router.node("demoControlSelect"),
+              ],
             },
             {
               ...router.node("demoTable"),
@@ -70,7 +75,12 @@ const DemoLayout = () => {
             },
             {
               ...router.node("demoAuth"),
-              children: [router.node("demoLogin"), router.node("demoRegister")],
+              children: [
+                router.node("demoLogin"),
+                router.node("demoRegister"),
+                router.node("demoResetPassword"),
+                router.node("demoVerifyEmail"),
+              ],
             },
             {
               position: "bottom",

package/src/demo/components/auth/DemoLogin.tsx

@@ -1,9 +1,14 @@
 import { Login } from "@alepha/ui/auth";
 import { t } from "alepha";
-import type { RealmConfig } from "alepha/api/users";
+import type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
+  variant: t.string({
+    title: "Variant",
+    default: "card",
+    enum: ["card", "split"],
+  }),
   showCredentials: t.boolean({
     title: "Credentials",
     default: true,
@@ -19,20 +24,20 @@ const showcaseSchema = t.object({
     default: false,
     $control: { switch: true },
   }),
-  usernameEnabled: t.boolean({
-    title: "Username Login",
-    default: true,
-    $control: { switch: true },
+  username: t.string({
+    title: "Username",
+    default: "optional",
+    enum: ["none", "optional", "required"],
   }),
-  emailEnabled: t.boolean({
-    title: "Email Login",
-    default: true,
-    $control: { switch: true },
+  email: t.string({
+    title: "Email",
+    default: "optional",
+    enum: ["none", "optional", "required"],
   }),
-  phoneEnabled: t.boolean({
-    title: "Phone Login",
-    default: false,
-    $control: { switch: true },
+  phoneNumber: t.string({
+    title: "Phone Number",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
   registrationAllowed: t.boolean({
     title: "Show Sign Up",
@@ -55,9 +60,9 @@ const buildRealmConfig = (props: {
   showCredentials: boolean;
   showGoogleOAuth: boolean;
   showGithubOAuth: boolean;
-  usernameEnabled: boolean;
-  emailEnabled: boolean;
-  phoneEnabled: boolean;
+  username: string;
+  email: string;
+  phoneNumber: string;
   registrationAllowed: boolean;
   resetPasswordAllowed: boolean;
   showBranding: boolean;
@@ -82,17 +87,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Sign in to continue" : undefined,
       logoUrl: undefined,
       registrationAllowed: props.registrationAllowed,
-      emailEnabled: props.emailEnabled,
-      emailRequired: false,
-      usernameEnabled: props.usernameEnabled,
+      email: props.email as FieldRequirement,
+      username: props.username as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      usernameRequired: false,
-      phoneEnabled: props.phoneEnabled,
-      phoneRequired: false,
+      phoneNumber: props.phoneNumber as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: props.resetPasswordAllowed,
       adminEmails: [],
       adminUsernames: [],
@@ -113,19 +114,25 @@ const DemoLogin = () => {
       title="Login"
       schema={showcaseSchema}
       initialValues={{
+        variant: "card",
         showCredentials: true,
         showGoogleOAuth: true,
         showGithubOAuth: false,
-        usernameEnabled: true,
-        emailEnabled: true,
-        phoneEnabled: false,
+        username: "optional",
+        email: "optional",
+        phoneNumber: "none",
         registrationAllowed: true,
         resetPasswordAllowed: true,
         showBranding: true,
       }}
       columns={1}
     >
-      {(props) => <Login realmConfig={buildRealmConfig(props)} />}
+      {(props) => (
+        <Login
+          realmConfig={buildRealmConfig(props)}
+          variant={props.variant as "card" | "split"}
+        />
+      )}
     </Showcase>
   );
 };

package/src/demo/components/auth/DemoRegister.tsx

@@ -1,9 +1,14 @@
 import { Register } from "@alepha/ui/auth";
 import { t } from "alepha";
-import type { RealmConfig } from "alepha/api/users";
+import type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
+  variant: t.string({
+    title: "Variant",
+    default: "card",
+    enum: ["card", "split"],
+  }),
   showCredentials: t.boolean({
     title: "Credentials",
     default: true,
@@ -19,35 +24,20 @@ const showcaseSchema = t.object({
     default: false,
     $control: { switch: true },
   }),
-  usernameEnabled: t.boolean({
-    title: "Username Field",
-    default: true,
-    $control: { switch: true },
-  }),
-  usernameRequired: t.boolean({
-    title: "Username Required",
-    default: false,
-    $control: { switch: true },
-  }),
-  emailEnabled: t.boolean({
-    title: "Email Field",
-    default: true,
-    $control: { switch: true },
-  }),
-  emailRequired: t.boolean({
-    title: "Email Required",
-    default: true,
-    $control: { switch: true },
+  username: t.string({
+    title: "Username",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
-  phoneEnabled: t.boolean({
-    title: "Phone Field",
-    default: false,
-    $control: { switch: true },
+  email: t.string({
+    title: "Email",
+    default: "required",
+    enum: ["none", "optional", "required"],
   }),
-  phoneRequired: t.boolean({
-    title: "Phone Required",
-    default: false,
-    $control: { switch: true },
+  phoneNumber: t.string({
+    title: "Phone Number",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
   registrationAllowed: t.boolean({
     title: "Registration Allowed",
@@ -65,12 +55,9 @@ const buildRealmConfig = (props: {
   showCredentials: boolean;
   showGoogleOAuth: boolean;
   showGithubOAuth: boolean;
-  usernameEnabled: boolean;
-  usernameRequired: boolean;
-  emailEnabled: boolean;
-  emailRequired: boolean;
-  phoneEnabled: boolean;
-  phoneRequired: boolean;
+  username: string;
+  email: string;
+  phoneNumber: string;
   registrationAllowed: boolean;
   showBranding: boolean;
 }): RealmConfig => {
@@ -94,17 +81,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Create your account" : undefined,
       logoUrl: undefined,
       registrationAllowed: props.registrationAllowed,
-      emailEnabled: props.emailEnabled,
-      emailRequired: props.emailRequired,
-      usernameEnabled: props.usernameEnabled,
-      usernameRequired: props.usernameRequired,
+      email: props.email as FieldRequirement,
+      username: props.username as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      phoneEnabled: props.phoneEnabled,
-      phoneRequired: props.phoneRequired,
+      phoneNumber: props.phoneNumber as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: true,
       adminEmails: [],
       adminUsernames: [],
@@ -125,21 +108,24 @@ const DemoRegister = () => {
       title="Register"
       schema={showcaseSchema}
       initialValues={{
+        variant: "card",
         showCredentials: true,
         showGoogleOAuth: true,
         showGithubOAuth: false,
-        usernameEnabled: true,
-        usernameRequired: false,
-        emailEnabled: true,
-        emailRequired: true,
-        phoneEnabled: false,
-        phoneRequired: false,
+        username: "none",
+        email: "required",
+        phoneNumber: "none",
         registrationAllowed: true,
         showBranding: true,
       }}
       columns={1}
     >
-      {(props) => <Register realmConfig={buildRealmConfig(props)} />}
+      {(props) => (
+        <Register
+          realmConfig={buildRealmConfig(props)}
+          variant={props.variant as "card" | "split"}
+        />
+      )}
     </Showcase>
   );
 };

package/src/demo/components/auth/DemoResetPassword.tsx

@@ -1,6 +1,6 @@
 import { ResetPassword } from "@alepha/ui/auth";
 import { t } from "alepha";
-import type { RealmConfig } from "alepha/api/users";
+import type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
@@ -28,17 +28,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Reset your password" : undefined,
       logoUrl: undefined,
       registrationAllowed: true,
-      emailEnabled: true,
-      emailRequired: true,
-      usernameEnabled: false,
-      usernameRequired: false,
+      email: "required" as FieldRequirement,
+      username: "none" as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      phoneEnabled: false,
-      phoneRequired: false,
+      phoneNumber: "none" as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: props.resetPasswordAllowed,
       adminEmails: [],
       adminUsernames: [],

package/src/demo/components/auth/DemoVerifyEmail.tsx

@@ -1,12 +1,13 @@
+import type { VerifyEmailStep } from "@alepha/ui/auth";
 import { VerifyEmail } from "@alepha/ui/auth";
 import { t } from "alepha";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
-  placeholder: t.boolean({
-    title: "Demo Mode",
-    default: true,
-    $control: { switch: true },
+  step: t.string({
+    title: "Step",
+    default: "success",
+    enum: ["verifying", "success", "error"],
   }),
 });
 
@@ -16,11 +17,11 @@ const DemoVerifyEmail = () => {
       title="VerifyEmail"
       schema={showcaseSchema}
       initialValues={{
-        placeholder: true,
+        step: "success",
       }}
       columns={1}
     >
-      {() => <VerifyEmail />}
+      {(values) => <VerifyEmail step={values.step as VerifyEmailStep} />}
     </Showcase>
   );
 };