@alepha/ui 0.11.5 → 0.11.6

package/package.json

@@ -6,7 +6,7 @@
 		"mantine"
 	],
 	"author": "Feunard",
-	"version": "0.11.5",
+	"version": "0.11.6",
 	"type": "module",
 	"engines": {
 		"node": ">=22.0.0"
@@ -20,32 +20,33 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/core": "0.11.5",
-		"@alepha/react": "0.11.5",
-		"@alepha/react-form": "0.11.5",
-		"@alepha/react-head": "0.11.5",
-		"@alepha/react-i18n": "0.11.5",
-		"@alepha/server": "0.11.5",
-		"@mantine/core": "^8.3.6",
-		"@mantine/dates": "^8.3.6",
-		"@mantine/hooks": "^8.3.6",
-		"@mantine/modals": "^8.3.6",
-		"@mantine/notifications": "^8.3.6",
-		"@mantine/nprogress": "^8.3.6",
-		"@mantine/spotlight": "^8.3.6",
+		"@alepha/core": "0.11.6",
+		"@alepha/datetime": "0.11.6",
+		"@alepha/react": "0.11.6",
+		"@alepha/react-form": "0.11.6",
+		"@alepha/react-head": "0.11.6",
+		"@alepha/react-i18n": "0.11.6",
+		"@alepha/server": "0.11.6",
+		"@mantine/core": "^8.3.7",
+		"@mantine/dates": "^8.3.7",
+		"@mantine/hooks": "^8.3.7",
+		"@mantine/modals": "^8.3.7",
+		"@mantine/notifications": "^8.3.7",
+		"@mantine/nprogress": "^8.3.7",
+		"@mantine/spotlight": "^8.3.7",
 		"@tabler/icons-react": "^3.35.0",
 		"dayjs": "^1.11.19"
 	},
 	"devDependencies": {
-		"@alepha/cli": "0.11.5",
-		"@alepha/vite": "0.11.5",
-		"@biomejs/biome": "^2.3.3",
+		"@alepha/cli": "0.11.6",
+		"@alepha/vite": "0.11.6",
+		"@biomejs/biome": "^2.3.4",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"tsdown": "^0.16.0",
+		"tsdown": "^0.16.1",
 		"typescript": "^5.9.3",
-		"vite": "^7.1.12",
-		"vitest": "^4.0.6"
+		"vite": "^7.2.2",
+		"vitest": "^4.0.8"
 	},
 	"peerDependencies": {
 		"react": "*",

package/src/components/buttons/ActionButton.tsx

@@ -277,7 +277,7 @@ const ActionButton = (_props: ActionProps) => {
 
   const renderAction = () => {
     if ("href" in restProps && restProps.href) {
-      if (restProps.href.startsWith("http")) {
+      if (restProps.href.startsWith("http") || restProps.target) {
         return (
           <ActionHrefButton {...restProps} href={restProps.href}>
             {restProps.children}
@@ -311,6 +311,13 @@ const ActionButton = (_props: ActionProps) => {
     }
 
     if ("form" in restProps && restProps.form) {
+      if (restProps.type === "reset") {
+        return (
+          <ActionResetButton {...restProps} form={restProps.form}>
+            {restProps.children}
+          </ActionResetButton>
+        );
+      }
       return (
         <ActionSubmitButton {...restProps} form={restProps.form}>
           {restProps.children}
@@ -345,10 +352,18 @@ const ActionButton = (_props: ActionProps) => {
 
   // Wrap with Tooltip if provided
   if (tooltip) {
+    // openDelay: 1000 -> like HTML title attribute
+    const defaultTooltipProps: Partial<TooltipProps> = {
+      openDelay: 1000,
+    };
     const tooltipProps: TooltipProps =
       typeof tooltip === "string"
-        ? { label: tooltip, children: actionElement }
-        : { ...tooltip, children: actionElement };
+        ? {
+            ...defaultTooltipProps,
+            label: tooltip,
+            children: actionElement,
+          }
+        : { ...defaultTooltipProps, ...tooltip, children: actionElement };
 
     return <Tooltip {...tooltipProps} />;
   }
@@ -366,6 +381,7 @@ export default ActionButton;
 
 export interface ActionSubmitButtonProps extends ButtonProps {
   form: FormModel<any>;
+  type?: "submit" | "reset";
 }
 
 /**
@@ -386,6 +402,16 @@ const ActionSubmitButton = (props: ActionSubmitButtonProps) => {
   );
 };
 
+const ActionResetButton = (props: ActionSubmitButtonProps) => {
+  const { form, ...buttonProps } = props;
+  const state = useFormState(form);
+  return (
+    <Button {...buttonProps} disabled={state.loading} type={"reset"}>
+      {props.children}
+    </Button>
+  );
+};
+
 // ---------------------------------------------------------------------------------------------------------------------
 
 // Action with useAction Hook

package/src/components/buttons/ToggleSidebarButton.tsx

@@ -20,7 +20,10 @@ const ToggleSidebarButton = () => {
       variant={"subtle"}
       size={"md"}
       onClick={() => setCollapsed(!collapsed)}
-      tooltip={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+      tooltip={{
+        position: "right",
+        label: collapsed ? "Show sidebar" : "Hide sidebar",
+      }}
     />
   );
 };

package/src/components/form/Control.tsx

@@ -6,8 +6,6 @@ import {
   type FileInputProps,
   Flex,
   Input,
-  NumberInput,
-  type NumberInputProps,
   PasswordInput,
   type PasswordInputProps,
   Switch,
@@ -28,6 +26,8 @@ import {
   parseInput,
 } from "../../utils/parseInput.ts";
 import ControlDate from "./ControlDate.tsx";
+import ControlNumber, { type ControlNumberProps } from "./ControlNumber.tsx";
+import ControlQueryBuilder from "./ControlQueryBuilder.tsx";
 import ControlSelect, { type ControlSelectProps } from "./ControlSelect.tsx";
 
 export interface ControlProps extends GenericControlProps {
@@ -36,12 +36,13 @@ export interface ControlProps extends GenericControlProps {
   select?: boolean | Partial<ControlSelectProps>;
   password?: boolean | PasswordInputProps;
   switch?: boolean | SwitchProps;
-  number?: boolean | NumberInputProps;
+  number?: boolean | Partial<ControlNumberProps>;
   file?: boolean | FileInputProps;
   color?: boolean | ColorInputProps;
   date?: boolean | DateInputProps;
   datetime?: boolean | DateTimePickerProps;
   time?: boolean | TimeInputProps;
+  query?: any; // Enable query builder mode with schema-aware autocomplete
   custom?: ComponentType<CustomControlProps>;
 }
 
@@ -62,6 +63,7 @@ export interface ControlProps extends GenericControlProps {
  * - DateInput (for date format)
  * - DateTimePicker (for date-time format)
  * - TimeInput (for time format)
+ * - QueryBuilder (for building type-safe queries with autocomplete)
  * - Custom component
  *
  * Automatically handles labels, descriptions, error messages, required state, and default icons.
@@ -78,6 +80,22 @@ const Control = (_props: ControlProps) => {
     ...schema.$control,
   };
 
+  //region <QueryBuilder/>
+  if (props.query) {
+    return (
+      <Input.Wrapper {...inputProps}>
+        <ControlQueryBuilder
+          schema={props.query}
+          value={props.input.props.value}
+          onChange={(value) => {
+            props.input.set(value);
+          }}
+        />
+      </Input.Wrapper>
+    );
+  }
+  //endregion
+
   //region <Custom/>
   if (props.custom) {
     const Custom = props.custom;
@@ -104,16 +122,15 @@ const Control = (_props: ControlProps) => {
       (props.input.schema.type === "number" ||
         props.input.schema.type === "integer"))
   ) {
-    const numberInputProps =
+    const controlNumberProps =
       typeof props.number === "object" ? props.number : {};
-    const { type, ...inputPropsWithoutType } = props.input.props;
     return (
-      <NumberInput
-        {...inputProps}
-        id={id}
-        leftSection={icon}
-        {...inputPropsWithoutType}
-        {...numberInputProps}
+      <ControlNumber
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        icon={icon}
+        {...controlNumberProps}
       />
     );
   }

package/src/components/form/ControlNumber.tsx

@@ -0,0 +1,96 @@
+import { useEvents } from "@alepha/react";
+import { useFormState } from "@alepha/react-form";
+import {
+  Input,
+  NumberInput,
+  type NumberInputProps,
+  Slider,
+  type SliderProps,
+} from "@mantine/core";
+import { useRef, useState } from "react";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
+
+export interface ControlNumberProps extends GenericControlProps {
+  numberInputProps?: Partial<NumberInputProps>;
+  sliderProps?: Partial<SliderProps>;
+}
+
+/**
+ *
+ */
+const ControlNumber = (props: ControlNumberProps) => {
+  const form = useFormState(props.input);
+  const { inputProps, id, icon } = parseInput(props, form);
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  // HTML Reset doesn't trigger on <NumberInput /> so we handle it manually
+
+  const [value, setValue] = useState<number | undefined>(
+    props.input.props.defaultValue,
+  );
+
+  useEvents(
+    {
+      "form:reset": (event) => {
+        if (event.id === props.input?.form.id && ref.current) {
+          setValue(props.input.props.defaultValue);
+        }
+      },
+    },
+    [props.input],
+  );
+
+  if (!props.input?.props) {
+    return null;
+  }
+
+  const { type, ...inputPropsWithoutType } = props.input.props;
+
+  if (props.sliderProps) {
+    return (
+      <Input.Wrapper {...inputProps}>
+        <div
+          style={{
+            height: 32,
+            padding: 8,
+          }}
+        >
+          <Slider
+            {...inputProps}
+            ref={ref}
+            id={id}
+            {...inputPropsWithoutType}
+            {...props.sliderProps}
+            value={value}
+            onChange={(val) => {
+              setValue(val);
+              props.input.set(val);
+            }}
+          />
+        </div>
+      </Input.Wrapper>
+    );
+  }
+
+  return (
+    <NumberInput
+      {...inputProps}
+      ref={ref}
+      id={id}
+      leftSection={icon}
+      {...inputPropsWithoutType}
+      {...props.numberInputProps}
+      value={value ?? ""}
+      onChange={(val) => {
+        const newValue = val !== null ? Number(val) : undefined;
+        setValue(newValue);
+        props.input.set(newValue);
+      }}
+    />
+  );
+};
+
+export default ControlNumber;

package/src/components/form/ControlQueryBuilder.tsx

@@ -0,0 +1,248 @@
+import type { TObject } from "@alepha/core";
+import {
+  ActionIcon,
+  Badge,
+  Code,
+  Divider,
+  Group,
+  Popover,
+  Stack,
+  Text,
+  TextInput,
+  type TextInputProps,
+} from "@mantine/core";
+import { IconFilter, IconX } from "@tabler/icons-react";
+import { useRef, useState } from "react";
+import {
+  extractSchemaFields,
+  OPERATOR_INFO,
+  type SchemaField,
+} from "../../utils/extractSchemaFields.ts";
+
+export interface ControlQueryBuilderProps
+  extends Omit<TextInputProps, "value" | "onChange"> {
+  schema?: TObject;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+/**
+ * Query builder with text input and help popover.
+ * Generates query strings for parseQueryString syntax.
+ */
+const ControlQueryBuilder = ({
+  schema,
+  value = "",
+  onChange,
+  placeholder = "Enter query or click help for assistance...",
+  ...textInputProps
+}: ControlQueryBuilderProps) => {
+  const [helpOpened, setHelpOpened] = useState(false);
+  const [textValue, setTextValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fields = schema ? extractSchemaFields(schema) : [];
+
+  const handleTextChange = (newValue: string) => {
+    setTextValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleClear = () => {
+    setTextValue("");
+    onChange?.("");
+  };
+
+  const handleInsert = (text: string) => {
+    const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+    setTextValue(newValue);
+    onChange?.(newValue);
+    // Refocus the input after inserting
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  };
+
+  return (
+    <Popover
+      width={800}
+      position="bottom-start"
+      shadow="md"
+      opened={helpOpened}
+      onChange={setHelpOpened}
+      closeOnClickOutside
+      closeOnEscape
+      withArrow
+      arrowSize={14}
+      transitionProps={{
+        transition: "fade-down",
+        duration: 200,
+        timingFunction: "ease",
+      }}
+    >
+      <Popover.Target>
+        <TextInput
+          ref={inputRef}
+          placeholder={placeholder}
+          value={textValue}
+          onChange={(e) => handleTextChange(e.currentTarget.value)}
+          onFocus={() => setHelpOpened(true)}
+          leftSection={<IconFilter size={16} />}
+          rightSection={
+            textValue && (
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="gray"
+                onClick={handleClear}
+              >
+                <IconX size={14} />
+              </ActionIcon>
+            )
+          }
+          {...textInputProps}
+        />
+      </Popover.Target>
+      <Popover.Dropdown>
+        <QueryHelp fields={fields} onInsert={handleInsert} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+// Query Help Component
+// ---------------------------------------------------------------------------------------------------------------------
+
+interface QueryHelpProps {
+  fields: SchemaField[];
+  onInsert: (text: string) => void;
+}
+
+function QueryHelp({ fields, onInsert }: QueryHelpProps) {
+  return (
+    <Group gap="md" align="flex-start" wrap="nowrap">
+      {/* Left Column: Operators */}
+      <Stack gap="md" style={{ flex: 1 }}>
+        {/* Available Operators */}
+        <Stack gap="xs">
+          <Text size="sm" fw={600}>
+            Operators
+          </Text>
+          <Stack gap={4}>
+            {Object.entries(OPERATOR_INFO).map(([key, info]) => (
+              <Group key={key} gap="xs" wrap="nowrap">
+                <Code
+                  style={{
+                    minWidth: 35,
+                    textAlign: "center",
+                    cursor: "pointer",
+                  }}
+                  onClick={() => onInsert(info.symbol)}
+                >
+                  {info.symbol}
+                </Code>
+                <Text size="xs" c="dimmed" style={{ flex: 1 }}>
+                  {info.label}
+                </Text>
+              </Group>
+            ))}
+          </Stack>
+        </Stack>
+
+        <Divider />
+
+        {/* Logic Operators */}
+        <Stack gap="xs">
+          <Text size="sm" fw={600}>
+            Logic
+          </Text>
+          <Stack gap={4}>
+            <Group gap="xs" wrap="nowrap">
+              <Code
+                style={{
+                  minWidth: 35,
+                  textAlign: "center",
+                  cursor: "pointer",
+                }}
+                onClick={() => onInsert("&")}
+              >
+                &
+              </Code>
+              <Text size="xs" c="dimmed">
+                AND
+              </Text>
+            </Group>
+            <Group gap="xs" wrap="nowrap">
+              <Code
+                style={{
+                  minWidth: 35,
+                  textAlign: "center",
+                  cursor: "pointer",
+                }}
+                onClick={() => onInsert("|")}
+              >
+                |
+              </Code>
+              <Text size="xs" c="dimmed">
+                OR
+              </Text>
+            </Group>
+          </Stack>
+        </Stack>
+      </Stack>
+
+      {/* Divider */}
+      {fields.length > 0 && <Divider orientation="vertical" />}
+
+      {/* Right Column: Fields */}
+      {fields.length > 0 && (
+        <Stack gap="xs" style={{ flex: 2 }}>
+          <Text size="sm" fw={600}>
+            Fields
+          </Text>
+          <Stack gap={4} style={{ maxHeight: 300, overflowY: "auto" }}>
+            {fields.map((field) => (
+              <Group key={field.path} gap="xs" wrap="nowrap" align="flex-start">
+                <Code
+                  style={{ minWidth: 120, cursor: "pointer" }}
+                  onClick={() => onInsert(field.path)}
+                >
+                  {field.path}
+                </Code>
+                <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+                  <Text size="xs" c="dimmed" lineClamp={1}>
+                    {field.description || field.type}
+                  </Text>
+                  {field.enum && (
+                    <Group gap={4} wrap="wrap">
+                      {field.enum.map((enumValue) => (
+                        <Code
+                          key={enumValue}
+                          style={{
+                            cursor: "pointer",
+                            fontStyle: "italic",
+                            fontSize: "0.75rem",
+                          }}
+                          c="blue"
+                          onClick={() => onInsert(enumValue)}
+                        >
+                          {enumValue}
+                        </Code>
+                      ))}
+                    </Group>
+                  )}
+                </Stack>
+                <Badge size="xs" variant="light" style={{ flexShrink: 0 }}>
+                  {field.type}
+                </Badge>
+              </Group>
+            ))}
+          </Stack>
+        </Stack>
+      )}
+    </Group>
+  );
+}
+
+export default ControlQueryBuilder;

package/src/components/form/TypeForm.tsx

@@ -19,6 +19,7 @@ export interface TypeFormProps<T extends TObject> {
         lg?: number;
         xl?: number;
       };
+  schema?: TObject;
   children?: (input: FormModel<T>["input"]) => ReactNode;
   controlProps?: Partial<Omit<ControlProps, "input">>;
   skipFormElement?: boolean;
@@ -63,11 +64,12 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     submitButtonProps,
   } = props;
 
-  if (!form.options?.schema?.properties) {
+  const schema = props.schema || form.options.schema;
+  if (!schema?.properties) {
     return null;
   }
 
-  const fieldNames = Object.keys(form.options.schema.properties);
+  const fieldNames = Object.keys(schema.properties);
 
   // Filter out unsupported field types (objects only, arrays are now supported)
   const supportedFields = fieldNames.filter((fieldName) => {
@@ -140,11 +142,11 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     <Flex direction={"column"} gap={"sm"}>
       {renderFields()}
       {!skipSubmitButton && (
-        <Flex>
+        <Flex gap={"sm"}>
           <ActionButton form={form} {...submitButtonProps}>
             {submitButtonProps?.children ?? "Submit"}
           </ActionButton>
-          <button type={"reset"}>Reset</button>
+          <ActionButton type={"reset"}>Reset</ActionButton>
         </Flex>
       )}
     </Flex>

package/src/components/layout/AdminShell.tsx

@@ -27,7 +27,14 @@ export interface AdminShellProps {
 
 declare module "@alepha/core" {
   interface State {
+    /**
+     * Whether the sidebar is opened or closed.
+     */
     "alepha.ui.sidebar.opened"?: boolean;
+
+    /**
+     * Whether the sidebar is collapsed (narrow) or expanded (wide).
+     */
     "alepha.ui.sidebar.collapsed"?: boolean;
   }
 }