@alepha/ui 0.11.5 → 0.11.7

package/package.json

@@ -6,7 +6,7 @@
 		"mantine"
 	],
 	"author": "Feunard",
-	"version": "0.11.5",
+	"version": "0.11.7",
 	"type": "module",
 	"engines": {
 		"node": ">=22.0.0"
@@ -20,32 +20,34 @@
 		"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.7",
+		"@alepha/datetime": "0.11.7",
+		"@alepha/postgres": "0.11.7",
+		"@alepha/react": "0.11.7",
+		"@alepha/react-form": "0.11.7",
+		"@alepha/react-head": "0.11.7",
+		"@alepha/react-i18n": "0.11.7",
+		"@alepha/server": "0.11.7",
+		"@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.7",
+		"@alepha/vite": "0.11.7",
+		"@biomejs/biome": "^2.3.5",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"tsdown": "^0.16.0",
+		"tsdown": "^0.16.4",
 		"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/data/JsonViewer.tsx

@@ -0,0 +1,352 @@
+import {
+  ActionIcon,
+  Box,
+  Collapse,
+  CopyButton,
+  type MantineSize,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronRight,
+  IconCopy,
+} from "@tabler/icons-react";
+import { type ReactNode, useState } from "react";
+
+interface JsonViewerProps {
+  data: any;
+  defaultExpanded?: boolean;
+  maxDepth?: number;
+  copyable?: boolean;
+  size?: MantineSize;
+}
+
+interface JsonNodeProps {
+  name?: string;
+  value: any;
+  depth: number;
+  maxDepth: number;
+  isLast?: boolean;
+  isArrayItem?: boolean;
+  size?: MantineSize;
+}
+
+const getSizeConfig = (size: MantineSize = "sm") => {
+  const configs = {
+    xs: { text: "xs", icon: 12, indent: 16, gap: 2 },
+    sm: { text: "sm", icon: 14, indent: 20, gap: 4 },
+    md: { text: "md", icon: 16, indent: 24, gap: 6 },
+    lg: { text: "lg", icon: 18, indent: 28, gap: 8 },
+    xl: { text: "xl", icon: 20, indent: 32, gap: 10 },
+  };
+  return configs[size] || configs.sm;
+};
+
+const JsonNode = ({
+  name,
+  value,
+  depth,
+  maxDepth,
+  isLast = false,
+  isArrayItem = false,
+  size = "sm",
+}: JsonNodeProps) => {
+  const [expanded, setExpanded] = useState(depth < 2);
+  const sizeConfig = getSizeConfig(size);
+
+  const getValueType = (val: any): string => {
+    if (val === null) return "null";
+    if (val === undefined) return "undefined";
+    if (Array.isArray(val)) return "array";
+    return typeof val;
+  };
+
+  const valueType = getValueType(value);
+
+  const renderPrimitive = (val: any): ReactNode => {
+    const type = getValueType(val);
+
+    switch (type) {
+      case "string":
+        return (
+          <Text
+            component="span"
+            c="teal"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            "{val}"
+          </Text>
+        );
+      case "number":
+        return (
+          <Text
+            component="span"
+            c="blue"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            {val}
+          </Text>
+        );
+      case "boolean":
+        return (
+          <Text
+            component="span"
+            c="violet"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            {String(val)}
+          </Text>
+        );
+      case "null":
+        return (
+          <Text
+            component="span"
+            c="dimmed"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            null
+          </Text>
+        );
+      case "undefined":
+        return (
+          <Text
+            component="span"
+            c="dimmed"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            undefined
+          </Text>
+        );
+      default:
+        return (
+          <Text
+            component="span"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            {String(val)}
+          </Text>
+        );
+    }
+  };
+
+  const renderKey = () => {
+    if (!name) return null;
+    return (
+      <Text
+        component="span"
+        c="cyan"
+        ff="monospace"
+        fw={500}
+        size={sizeConfig.text}
+      >
+        {isArrayItem ? `[${name}]` : `"${name}"`}:
+      </Text>
+    );
+  };
+
+  if (valueType === "object" || valueType === "array") {
+    const isObject = valueType === "object";
+    const entries = isObject
+      ? Object.entries(value)
+      : value.map((v: any, i: number) => [i, v]);
+    const isEmpty = entries.length === 0;
+    const canExpand = depth < maxDepth && !isEmpty;
+
+    const preview = isObject ? "{...}" : "[...]";
+    const brackets = isObject ? ["{", "}"] : ["[", "]"];
+
+    return (
+      <Box>
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: sizeConfig.gap,
+            minWidth: "max-content",
+          }}
+        >
+          {canExpand && (
+            <ActionIcon
+              size="xs"
+              variant="transparent"
+              c="dimmed"
+              onClick={() => setExpanded(!expanded)}
+              style={{ cursor: "pointer", flexShrink: 0 }}
+            >
+              {expanded ? (
+                <IconChevronDown size={sizeConfig.icon} />
+              ) : (
+                <IconChevronRight size={sizeConfig.icon} />
+              )}
+            </ActionIcon>
+          )}
+          {!canExpand && (
+            <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
+          )}
+          <Box style={{ flexShrink: 0 }}>{renderKey()}</Box>{" "}
+          <Text
+            component="span"
+            c="dimmed"
+            ff="monospace"
+            size={sizeConfig.text}
+            style={{ flexShrink: 0 }}
+          >
+            {brackets[0]}
+          </Text>
+          {!expanded && !isEmpty && (
+            <Text
+              component="span"
+              c="dimmed"
+              ff="monospace"
+              fs="italic"
+              size={sizeConfig.text}
+              style={{ flexShrink: 0 }}
+            >
+              {preview}
+            </Text>
+          )}
+          {(isEmpty || !expanded) && (
+            <Text
+              component="span"
+              c="dimmed"
+              ff="monospace"
+              size={sizeConfig.text}
+              style={{ flexShrink: 0 }}
+            >
+              {brackets[1]}
+            </Text>
+          )}
+          {!isEmpty && !expanded && (
+            <Text
+              component="span"
+              c="dimmed"
+              size={sizeConfig.text}
+              style={{ flexShrink: 0 }}
+            >
+              {entries.length} {entries.length === 1 ? "item" : "items"}
+            </Text>
+          )}
+        </Box>
+
+        <Collapse in={expanded && canExpand}>
+          <Box
+            pl={sizeConfig.indent}
+            style={{
+              borderLeft: "1px solid var(--mantine-color-default-border)",
+              marginLeft: Math.floor((sizeConfig.icon + 6) / 2),
+            }}
+          >
+            {entries.map(
+              ([key, val]: [string | number, any], index: number) => (
+                <JsonNode
+                  key={String(key)}
+                  name={String(key)}
+                  value={val}
+                  depth={depth + 1}
+                  maxDepth={maxDepth}
+                  isLast={index === entries.length - 1}
+                  isArrayItem={!isObject}
+                  size={size}
+                />
+              ),
+            )}
+          </Box>
+          <Box style={{ display: "flex", minWidth: "max-content" }}>
+            <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
+            <Text
+              c="dimmed"
+              ff="monospace"
+              size={sizeConfig.text}
+              style={{ flexShrink: 0 }}
+            >
+              {brackets[1]}
+            </Text>
+          </Box>
+        </Collapse>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: sizeConfig.gap,
+        minWidth: "max-content",
+      }}
+    >
+      <Box w={sizeConfig.icon + 6} style={{ flexShrink: 0 }} />
+      <Box style={{ flexShrink: 0 }}>{renderKey()}</Box>
+      <Box style={{ flexShrink: 0 }}>{renderPrimitive(value)}</Box>
+      {!isLast && (
+        <Text
+          component="span"
+          c="dimmed"
+          ff="monospace"
+          size={sizeConfig.text}
+          style={{ flexShrink: 0 }}
+        >
+          ,
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+export const JsonViewer = ({
+  data,
+  defaultExpanded = true,
+  maxDepth = 10,
+  copyable = true,
+  size = "sm",
+}: JsonViewerProps) => {
+  const sizeConfig = getSizeConfig(size);
+  const copyIconSize = sizeConfig.icon + 2;
+
+  return (
+    <Box pos="relative" w={"100%"}>
+      {copyable && (
+        <Box pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
+          <CopyButton value={JSON.stringify(data, null, 2)}>
+            {({ copied, copy }) => (
+              <Tooltip label={copied ? "Copied" : "Copy JSON"}>
+                <ActionIcon
+                  color={copied ? "teal" : "gray"}
+                  variant="subtle"
+                  onClick={copy}
+                  size={size}
+                >
+                  {copied ? (
+                    <IconCheck size={copyIconSize} />
+                  ) : (
+                    <IconCopy size={copyIconSize} />
+                  )}
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </CopyButton>
+        </Box>
+      )}
+      <Box pt={copyable ? 30 : 0} style={{ overflowX: "auto" }}>
+        <JsonNode value={data} depth={0} maxDepth={maxDepth} size={size} />
+      </Box>
+    </Box>
+  );
+};
+
+export default JsonViewer;

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 (
+      <ControlQueryBuilder
+        {...props.input.props}
+        {...inputProps}
+        schema={props.query}
+        value={props.input.props.value}
+        onChange={(value) => {
+          props.input.set(value);
+        }}
+      />
+    );
+  }
+  //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;