@alepha/ui 0.16.1 → 0.17.0

package/src/core/components/buttons/DarkModeButton.tsx

@@ -1,5 +1,6 @@
 import { useMantineColorScheme } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
+import { ui } from "../../constants/ui.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 /**
@@ -19,17 +20,20 @@ const DarkModeButton = (props: Partial<ActionProps>) => {
     setColorScheme(current === "dark" ? "light" : "dark");
   };
 
+  const size = props.size ?? "md";
+  const iconSize =
+    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.md;
+
   return (
     <ActionButton
       onClick={toggleColorScheme}
       variant={props.variant ?? "subtle"}
-      size={props.size ?? "sm"}
+      size={size}
       aria-label="Toggle color scheme"
-      px={"xs"}
       icon={
         <>
-          <IconSun className="alepha-light-hidden" />
-          <IconMoon className="alepha-dark-hidden" />
+          <IconSun size={iconSize} className="alepha-light-hidden" />
+          <IconMoon size={iconSize} className="alepha-dark-hidden" />
         </>
       }
       {...props}

package/src/core/components/buttons/ToggleSidebarButton.tsx

@@ -14,11 +14,9 @@ const ToggleSidebarButton = (props: Props) => {
   return (
     <ActionButton
       icon={
-        sidebar.collapsed ? (
-          <IconLayoutSidebarRightCollapse />
-        ) : (
-          <IconLayoutSidebarLeftCollapse />
-        )
+        sidebar.collapsed
+          ? IconLayoutSidebarRightCollapse
+          : IconLayoutSidebarLeftCollapse
       }
       visibleFrom={"sm"}
       variant={"subtle"}

package/src/core/components/data/ErrorViewer.tsx

@@ -1,8 +1,8 @@
 import {
   ActionIcon,
-  Box,
   Collapse,
   CopyButton,
+  Flex,
   type MantineSize,
   Text,
   Tooltip,
@@ -64,9 +64,9 @@ export const ErrorViewer = ({
   };
 
   return (
-    <Box pos="relative" w="100%">
+    <Flex pos="relative" w="100%">
       {copyable && (
-        <Box pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
+        <Flex pos="absolute" top={0} right={0} style={{ zIndex: 1 }}>
           <CopyButton value={getCopyContent()}>
             {({ copied, copy }) => (
               <Tooltip label={copied ? "Copied" : "Copy Error"}>
@@ -85,10 +85,10 @@ export const ErrorViewer = ({
               </Tooltip>
             )}
           </CopyButton>
-        </Box>
+        </Flex>
       )}
-      <Box pt={copyable ? 30 : 0}>
-        <Box
+      <Flex pt={copyable ? 30 : 0}>
+        <Flex
           style={{
             display: "flex",
             alignItems: "flex-start",
@@ -112,11 +112,11 @@ export const ErrorViewer = ({
           >
             {errorMessage}
           </Text>
-        </Box>
+        </Flex>
 
         {showStack && stackLines.length > 1 && (
-          <Box mt="sm">
-            <Box
+          <Flex mt="sm">
+            <Flex
               style={{
                 display: "flex",
                 alignItems: "center",
@@ -135,10 +135,10 @@ export const ErrorViewer = ({
               <Text c="dimmed" size={sizeConfig.text} fw={500}>
                 Stack Trace ({stackLines.length - 1} frames)
               </Text>
-            </Box>
+            </Flex>
 
             <Collapse in={stackExpanded}>
-              <Box
+              <Flex
                 mt="xs"
                 pl="md"
                 style={{
@@ -159,12 +159,12 @@ export const ErrorViewer = ({
                     {line}
                   </Text>
                 ))}
-              </Box>
+              </Flex>
             </Collapse>
-          </Box>
+          </Flex>
         )}
-      </Box>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 

package/src/core/components/dialogs/AlertDialog.tsx

@@ -1,12 +1,12 @@
-import { Button, Group, Text } from "@mantine/core";
+import { Button, Flex, Text } from "@mantine/core";
 import type { AlertDialogProps } from "../../services/DialogService.tsx";
 
 const AlertDialog = ({ options, onClose }: AlertDialogProps) => (
   <>
     {options?.message && <Text mb="md">{options.message}</Text>}
-    <Group justify="flex-end">
+    <Flex justify="flex-end">
       <Button onClick={onClose}>{options?.okLabel || "OK"}</Button>
-    </Group>
+    </Flex>
   </>
 );
 

package/src/core/components/dialogs/ConfirmDialog.tsx

@@ -1,10 +1,10 @@
-import { Button, Group, Text } from "@mantine/core";
+import { Button, Flex, Text } from "@mantine/core";
 import type { ConfirmDialogProps } from "../../services/DialogService.tsx";
 
 const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
   <>
     {options?.message && <Text mb="md">{options.message}</Text>}
-    <Group justify="flex-end">
+    <Flex justify="flex-end">
       <Button variant="subtle" onClick={() => onConfirm(false)}>
         {options?.cancelLabel || "Cancel"}
       </Button>
@@ -14,7 +14,7 @@ const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
       >
         {options?.confirmLabel || "Confirm"}
       </Button>
-    </Group>
+    </Flex>
   </>
 );
 

package/src/core/components/dialogs/PromptDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Text, TextInput } from "@mantine/core";
+import { Button, Flex, Text, TextInput } from "@mantine/core";
 import { useEffect, useRef, useState } from "react";
 import type { PromptDialogProps } from "../../services/DialogService.tsx";
 
@@ -36,7 +36,7 @@ const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
         required={options?.required}
         mb="md"
       />
-      <Group justify="flex-end">
+      <Flex justify="flex-end">
         <Button variant="subtle" onClick={() => onSubmit(null)}>
           {options?.cancelLabel || "Cancel"}
         </Button>
@@ -46,7 +46,7 @@ const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
         >
           {options?.submitLabel || "OK"}
         </Button>
-      </Group>
+      </Flex>
     </>
   );
 };

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}
@@ -264,40 +268,19 @@ const Control = (_props: ControlProps) => {
     "type" in props.input.schema &&
     props.input.schema.type === "boolean"
   ) {
-    if (props.switch) {
-      const switchProps = typeof props.switch === "object" ? props.switch : {};
-
-      return (
-        <Switch
-          {...inputProps}
-          id={id}
-          color={"blue"}
-          defaultChecked={props.input.props.defaultValue}
-          onChange={(event) => {
-            props.input.set(event.currentTarget.checked);
-          }}
-          {...switchProps}
-        />
-      );
-    }
-
-    // by default, render as <Select/> with Yes/No/Empty options
-    const selectProps: Partial<ControlSelectProps> = {
-      loader: async () => [
-        { value: "true", label: "Yes" },
-        { value: "false", label: "No" },
-        { value: "", label: "" },
-      ],
-      ...props.input.props,
-    };
+    const switchProps = typeof props.switch === "object" ? props.switch : {};
 
     return (
-      <ControlSelect
-        input={props.input}
-        title={props.title}
-        description={props.description}
-        icon={icon}
-        {...selectProps}
+      <Switch
+        {...inputProps}
+        size={props.size}
+        id={id}
+        color={"blue"}
+        defaultChecked={props.input.props.defaultValue}
+        onChange={(event) => {
+          props.input.set(event.currentTarget.checked);
+        }}
+        {...switchProps}
       />
     );
   }
@@ -310,6 +293,7 @@ const Control = (_props: ControlProps) => {
     return (
       <PasswordInput
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         {...props.input.props}
@@ -325,6 +309,7 @@ const Control = (_props: ControlProps) => {
     return (
       <Textarea
         {...inputProps}
+        size={props.size}
         id={id}
         leftSection={icon}
         {...props.input.props}
@@ -346,6 +331,7 @@ const Control = (_props: ControlProps) => {
   ) {
     return (
       <ControlDate
+        size={props.size}
         input={props.input}
         title={props.title}
         description={props.description}
@@ -380,6 +366,7 @@ const Control = (_props: ControlProps) => {
   return (
     <TextInput
       {...inputProps}
+      size={props.size}
       id={id}
       leftSection={icon}
       type={getInputType()}