@alepha/ui 0.16.2 → 0.17.1

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

@@ -191,6 +191,7 @@ const Control = (_props: ControlProps) => {
     }
     return (
       <ControlNumber
+        size={props.size}
         input={props.input}
         title={props.title}
         description={props.description}
@@ -207,6 +208,7 @@ const Control = (_props: ControlProps) => {
     return (
       <FileInput
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         onChange={(file) => {
@@ -224,6 +226,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ColorInput
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         {...props.input.props}
@@ -248,6 +251,7 @@ const Control = (_props: ControlProps) => {
     }
     return (
       <ControlSelect
+        size={props.size}
         input={props.input}
         title={props.title}
         description={props.description}
@@ -269,6 +273,7 @@ const Control = (_props: ControlProps) => {
     return (
       <Switch
         {...inputProps}
+        size={props.size}
         id={id}
         color={"blue"}
         defaultChecked={props.input.props.defaultValue}
@@ -288,6 +293,7 @@ const Control = (_props: ControlProps) => {
     return (
       <PasswordInput
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         {...props.input.props}
@@ -303,6 +309,7 @@ const Control = (_props: ControlProps) => {
     return (
       <Textarea
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         {...props.input.props}
@@ -324,6 +331,7 @@ const Control = (_props: ControlProps) => {
   ) {
     return (
       <ControlDate
+        size={props.size}
         input={props.input}
         title={props.title}
         description={props.description}
@@ -358,6 +366,7 @@ const Control = (_props: ControlProps) => {
   return (
     <TextInput
       {...inputProps}
+      size={props.size}
       id={id}
       leftSection={icon}
       type={getInputType()}

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

@@ -3,7 +3,6 @@ import {
   Fieldset,
   Flex,
   Grid,
-  Stack,
   Text,
   UnstyledButton,
 } from "@mantine/core";
@@ -337,7 +336,7 @@ const ControlArray = (props: ControlArrayProps) => {
     : [];
 
   const renderItems = () => (
-    <Stack gap="sm">
+    <Flex direction="column" gap="sm">
       {items.map((item, index) => (
         <Flex
           key={item.key}
@@ -440,12 +439,12 @@ const ControlArray = (props: ControlArrayProps) => {
         <IconPlus size={14} />
         {props.addLabel ?? "Add"}
       </UnstyledButton>
-    </Stack>
+    </Flex>
   );
 
   if (props.variant === "plain") {
     return (
-      <Stack gap="xs">
+      <Flex direction="column" gap="xs">
         {inputProps.label && (
           <Text size="sm" fw={500}>
             {inputProps.label}
@@ -462,13 +461,13 @@ const ControlArray = (props: ControlArrayProps) => {
             {inputProps.error}
           </Text>
         )}
-      </Stack>
+      </Flex>
     );
   }
 
   return (
     <Fieldset legend={inputProps.label}>
-      <Stack gap="xs">
+      <Flex direction="column" gap="xs">
         {inputProps.description && (
           <Text size="sm" c="dimmed">
             {inputProps.description}
@@ -480,7 +479,7 @@ const ControlArray = (props: ControlArrayProps) => {
             {inputProps.error}
           </Text>
         )}
-      </Stack>
+      </Flex>
     </Fieldset>
   );
 };

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

@@ -1,4 +1,4 @@
-import { Fieldset, Grid, Stack, Text } from "@mantine/core";
+import { Fieldset, Flex, Grid, Text } from "@mantine/core";
 import type { TObject } from "alepha";
 import type { BaseInputField, ObjectInputField } from "alepha/react/form";
 import {
@@ -107,7 +107,7 @@ const ControlObject = (props: ControlObjectProps) => {
 
   return (
     <Fieldset legend={inputProps.label}>
-      <Stack gap="xs">
+      <Flex direction="column" gap="xs">
         {inputProps.description && (
           <Text size="sm" c="dimmed">
             {inputProps.description}
@@ -119,7 +119,7 @@ const ControlObject = (props: ControlObjectProps) => {
             {inputProps.error}
           </Text>
         )}
-      </Stack>
+      </Flex>
     </Fieldset>
   );
 };

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

@@ -3,9 +3,7 @@ import {
   Badge,
   Divider,
   Flex,
-  Group,
   Popover,
-  Stack,
   Text,
   TextInput,
   type TextInputProps,
@@ -165,7 +163,7 @@ interface QueryHelpProps {
 
 function QueryHelp({ fields, onInsert }: QueryHelpProps) {
   return (
-    <Group
+    <Flex
       gap="md"
       align="flex-start"
       wrap="nowrap"
@@ -174,15 +172,15 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
       bdrs={"sm"}
     >
       {/* Left Column: Operators */}
-      <Stack gap="md" style={{ flex: 1 }}>
+      <Flex direction="column" gap="md" style={{ flex: 1 }}>
         {/* Available Operators */}
-        <Stack gap="xs">
+        <Flex direction="column" gap="xs">
           <Text size="sm" fw={600}>
             Operators
           </Text>
-          <Stack gap={4}>
+          <Flex direction="column" gap={4}>
             {Object.entries(OPERATOR_INFO).map(([key, info]) => (
-              <Group key={key} gap="xs" wrap="nowrap">
+              <Flex key={key} gap="xs" wrap="nowrap">
                 <ActionButton
                   px={"xs"}
                   size={"xs"}
@@ -197,20 +195,20 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
                 <Text size="xs" c="dimmed" style={{ flex: 1 }}>
                   {info.label}
                 </Text>
-              </Group>
+              </Flex>
             ))}
-          </Stack>
-        </Stack>
+          </Flex>
+        </Flex>
 
         <Divider />
 
         {/* Logic Operators */}
-        <Stack gap="xs">
+        <Flex direction="column" gap="xs">
           <Text size="sm" fw={600}>
             Logic
           </Text>
-          <Stack gap={4}>
-            <Group gap="xs" wrap="nowrap">
+          <Flex direction="column" gap={4}>
+            <Flex gap="xs" wrap="nowrap">
               <ActionButton
                 px={"xs"}
                 size={"xs"}
@@ -225,8 +223,8 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
               <Text size="xs" c="dimmed">
                 AND
               </Text>
-            </Group>
-            <Group gap="xs" wrap="nowrap">
+            </Flex>
+            <Flex gap="xs" wrap="nowrap">
               <ActionButton
                 px={"xs"}
                 size={"xs"}
@@ -241,10 +239,10 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
               <Text size="xs" c="dimmed">
                 OR
               </Text>
-            </Group>
-          </Stack>
-        </Stack>
-      </Stack>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
 
       {/* Divider */}
       {fields.length > 0 && <Divider orientation="vertical" />}
@@ -283,7 +281,7 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
                     {field.description || field.type}
                   </Text>
                   {field.enum && (
-                    <Group gap={0} wrap="wrap">
+                    <Flex gap={0} wrap="wrap">
                       {field.enum.map((enumValue) => (
                         <ActionButton
                           px={"xs"}
@@ -295,7 +293,7 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
                           {enumValue}
                         </ActionButton>
                       ))}
-                    </Group>
+                    </Flex>
                   )}
                 </Flex>
                 <Badge size="xs" variant="light" style={{ flexShrink: 0 }}>
@@ -306,7 +304,7 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
           </Flex>
         </Flex>
       )}
-    </Group>
+    </Flex>
   );
 }
 

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

@@ -119,6 +119,7 @@ const ControlSelect = (props: ControlSelectProps) => {
     return (
       <Autocomplete
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         data={data}
@@ -134,6 +135,7 @@ const ControlSelect = (props: ControlSelectProps) => {
     return (
       <TagsInput
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         defaultValue={
@@ -163,6 +165,7 @@ const ControlSelect = (props: ControlSelectProps) => {
     return (
       <MultiSelect
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         data={data}
@@ -186,6 +189,7 @@ const ControlSelect = (props: ControlSelectProps) => {
   return (
     <Select
       {...inputProps}
+      size={props.size}
       id={id}
       leftSection={icon}
       data={data}

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

@@ -39,6 +39,8 @@ export interface TypeFormProps<T extends TObject> {
 
   fill?: boolean;
   flexProps?: FlexProps;
+
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
 /**
@@ -93,6 +95,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     skipSubmitButton = false,
     submitButtonProps,
     fill = true,
+    size,
   } = props;
 
   const schema = props.schema || form.options.schema;
@@ -163,6 +166,10 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
             ...fieldControlProps?.[fieldName],
           };
 
+          if (size) {
+            mergedControlProps.size = size;
+          }
+
           return (
             <Grid.Col key={fieldName} span={span}>
               <Control input={field} {...mergedControlProps} />

package/src/core/components/layout/Breadcrumb.tsx

@@ -1,10 +1,10 @@
-import { Anchor, Group, type GroupProps, Text } from "@mantine/core";
+import { Anchor, Flex, type FlexProps, Text } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Link, useRouter, useRouterState } from "alepha/react/router";
 import type { ReactNode } from "react";
 import { toTitleCase } from "../../utils/string.ts";
 
-export interface BreadcrumbProps extends GroupProps {
+export interface BreadcrumbProps extends FlexProps {
   /**
    * Label for the home/root crumb. Set to `false` to hide the root crumb.
    *
@@ -69,9 +69,9 @@ const Breadcrumb = ({
   const sep = separator ?? <IconChevronRight size={12} color="#9ca3af" />;
 
   return (
-    <Group gap={4} {...groupProps}>
+    <Flex gap={4} {...groupProps}>
       {crumbs.map((crumb, i) => (
-        <Group key={crumb.href} gap={4}>
+        <Flex key={crumb.href} gap={4}>
           {i > 0 && sep}
           {i < crumbs.length - 1 ? (
             <Anchor component={Link} href={crumb.href} size={size} c="dimmed">
@@ -82,9 +82,9 @@ const Breadcrumb = ({
               {crumb.label}
             </Text>
           )}
-        </Group>
+        </Flex>
       ))}
-    </Group>
+    </Flex>
   );
 };
 

package/src/core/components/layout/Omnibar.tsx

@@ -2,6 +2,7 @@ import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { useStore } from "alepha/react";
 import { useRouter } from "alepha/react/router";
+import { currentUserAtom } from "alepha/security";
 import { type ReactNode, useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import { renderIcon } from "../../helpers/renderIcon.tsx";
@@ -19,7 +20,7 @@ const Omnibar = (props: OmnibarProps) => {
   const router = useRouter();
 
   // watch user to re-render on permission changes
-  const [user] = useStore("alepha.server.request.user");
+  const [user] = useStore(currentUserAtom);
 
   const actions: SpotlightActionData[] = useMemo(
     () =>

package/src/core/components/layout/Sidebar.tsx

@@ -310,7 +310,11 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
-        tooltip={item.description}
+        tooltip={
+          item.description
+            ? { label: item.description, position: "right" }
+            : undefined
+        }
         color={"gray"}
         variant={"subtle"}
         variantActive={"default"}

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

@@ -1,18 +1,14 @@
-import {
-  Button,
-  Checkbox,
-  Group,
-  Popover,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Checkbox, Flex, Popover, ScrollArea, Text } from "@mantine/core";
 import { IconColumns } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import ActionButton from "../buttons/ActionButton.tsx";
-import type { ColumnVisibility, DataTableColumn } from "./types.ts";
+import {
+  type ColumnVisibility,
+  type DataTableColumn,
+  DEFAULT_MAX_VISIBLE_COLUMNS,
+} from "./types.ts";
 
 export interface ColumnPickerProps<T extends object, Filters extends TObject> {
   columns: { [key: string]: DataTableColumn<T, Filters> };
@@ -36,11 +32,19 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
     onVisibilityChange(newVisibility);
   };
 
-  const handleHideAll = () => {
-    const newVisibility = columnEntries.reduce(
-      (acc, [key]) => ({ ...acc, [key]: false }),
-      {} as ColumnVisibility,
-    );
+  const handleDefault = () => {
+    let count = 0;
+    const newVisibility = columnEntries.reduce((acc, [key, col]) => {
+      if (col.defaultHidden) {
+        acc[key] = false;
+      } else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+        acc[key] = true;
+        count++;
+      } else {
+        acc[key] = false;
+      }
+      return acc;
+    }, {} as ColumnVisibility);
     onVisibilityChange(newVisibility);
   };
 
@@ -71,7 +75,13 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
       }}
     >
       <Popover.Target>
-        <ActionButton variant="subtle" icon={IconColumns} />
+        <div>
+          <ActionButton
+            variant="subtle"
+            icon={IconColumns}
+            onClick={() => setOpened((o) => !o)}
+          />
+        </div>
       </Popover.Target>
       <Popover.Dropdown
         bg="transparent"
@@ -81,43 +91,49 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
           backdropFilter: "blur(20px)",
         }}
       >
-        <Stack gap="xs" bg={ui.colors.surface} p="sm" bdrs="sm">
-          <Group justify="space-between">
+        <Flex
+          direction="column"
+          gap="xs"
+          bg={ui.colors.surface}
+          p="sm"
+          bdrs="sm"
+        >
+          <Flex justify="space-between">
             <Text size="sm" fw={500}>
               Columns ({visibleCount}/{columnEntries.length})
             </Text>
-            <Group gap={4}>
-              <Button
+            <Flex gap={4}>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
                 onClick={handleShowAll}
               >
                 All
-              </Button>
-              <Button
+              </ActionButton>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
-                onClick={handleHideAll}
+                onClick={handleDefault}
               >
-                None
-              </Button>
-            </Group>
-          </Group>
+                Default
+              </ActionButton>
+            </Flex>
+          </Flex>
 
           <ScrollArea.Autosize mah={300}>
-            <Stack gap={4}>
+            <Flex direction="column" gap={4}>
               {columnEntries.map(([key, col]) => (
                 <Checkbox
                   key={key}
-                  label={col.label}
+                  label={col.label || key}
                   checked={visibility[key] !== false}
                   onChange={(e) => handleToggle(key, e.currentTarget.checked)}
                   size="sm"
                 />
               ))}
-            </Stack>
+            </Flex>
           </ScrollArea.Autosize>
-        </Stack>
+        </Flex>
       </Popover.Dropdown>
     </Popover>
   );