@alepha/ui 0.17.2 → 0.18.1

package/src/demo/components/core/DemoText.tsx

@@ -0,0 +1,110 @@
+import type { AlephaIntent } from "@alepha/ui";
+import { Flex, Text } from "@alepha/ui";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  bold: t.boolean({
+    title: "bold",
+    default: false,
+    $control: { switch: true },
+  }),
+  italic: t.boolean({
+    title: "italic",
+    default: false,
+    $control: { switch: true },
+  }),
+  light: t.boolean({
+    title: "light",
+    default: false,
+    $control: { switch: true },
+  }),
+  muted: t.boolean({
+    title: "muted",
+    default: false,
+    $control: { switch: true },
+  }),
+  small: t.boolean({
+    title: "small",
+    default: false,
+    $control: { switch: true },
+  }),
+  monospace: t.boolean({
+    title: "monospace",
+    default: false,
+    $control: { switch: true },
+  }),
+  uppercase: t.boolean({
+    title: "uppercase",
+    default: false,
+    $control: { switch: true },
+  }),
+  capitalize: t.boolean({
+    title: "capitalize",
+    default: false,
+    $control: { switch: true },
+  }),
+  center: t.boolean({
+    title: "center",
+    default: false,
+    $control: { switch: true },
+  }),
+  intent: t.optional(
+    t.enum(["primary", "info", "success", "warning", "danger"], {
+      title: "intent",
+    }),
+  ),
+});
+
+const DemoText = () => {
+  return (
+    <Showcase
+      title="Text"
+      schema={showcaseSchema}
+      initialValues={{
+        bold: false,
+        italic: false,
+        light: false,
+        muted: false,
+        small: false,
+        monospace: false,
+        uppercase: false,
+        capitalize: false,
+        center: false,
+        intent: undefined,
+      }}
+      columns={2}
+    >
+      {(props) => (
+        <Flex col gap="lg" p="md" style={{ minWidth: 300 }}>
+          <Text
+            bold={props.bold}
+            italic={props.italic}
+            light={props.light}
+            muted={props.muted}
+            small={props.small}
+            monospace={props.monospace}
+            uppercase={props.uppercase}
+            capitalize={props.capitalize}
+            center={props.center}
+            intent={(props.intent || undefined) as AlephaIntent | undefined}
+          >
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+          <Text muted small>
+            Muted small text for secondary information.
+          </Text>
+          <Text bold intent="danger">
+            Bold danger text for errors.
+          </Text>
+          <Text monospace>console.log("monospace text");</Text>
+          <Text bold uppercase muted>
+            Section header style
+          </Text>
+        </Flex>
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoText;

package/src/demo/components/json/DemoJsonViewer.tsx

@@ -1,4 +1,4 @@
-import { JsonViewer } from "@alepha/ui/json";
+import { JsonViewer } from "@alepha/ui";
 import { t } from "alepha";
 import { useI18n } from "alepha/react/i18n";
 import Showcase from "../shared/Showcase.tsx";

package/src/demo/components/layout/DemoDialog.tsx

@@ -0,0 +1,103 @@
+import { ActionButton, Flex, Text, useDialog } from "@alepha/ui";
+import {
+  IconAlertCircle,
+  IconMessage,
+  IconQuestionMark,
+} from "@tabler/icons-react";
+
+const DemoDialog = () => {
+  const dialog = useDialog();
+
+  return (
+    <Flex col gap="xl" p="xl">
+      <Text bold size="lg">
+        Dialog Service
+      </Text>
+      <Text muted small>
+        Programmatic dialogs via the DialogService. No need to mount modal
+        components — just call the service.
+      </Text>
+
+      <Flex gap="md" wrap="wrap">
+        <ActionButton
+          icon={IconAlertCircle}
+          variant="light"
+          onClick={() =>
+            dialog.alert({
+              title: "Heads up",
+              message: "This is an informational alert dialog.",
+            })
+          }
+        >
+          Alert
+        </ActionButton>
+
+        <ActionButton
+          icon={IconQuestionMark}
+          variant="light"
+          intent="warning"
+          onClick={async () => {
+            const ok = await dialog.confirm({
+              title: "Confirm action",
+              message: "Are you sure you want to proceed?",
+            });
+            if (ok) {
+              dialog.alert({
+                title: "Confirmed",
+                message: "You confirmed the action.",
+              });
+            }
+          }}
+        >
+          Confirm
+        </ActionButton>
+
+        <ActionButton
+          icon={IconMessage}
+          variant="light"
+          intent="primary"
+          onClick={async () => {
+            const value = await dialog.prompt({
+              title: "Enter a value",
+              message: "What is your name?",
+              placeholder: "John Doe",
+            });
+            if (value) {
+              dialog.alert({
+                title: "Hello",
+                message: `Nice to meet you, ${value}!`,
+              });
+            }
+          }}
+        >
+          Prompt
+        </ActionButton>
+      </Flex>
+
+      <Flex col gap="md">
+        <Text bold small uppercase muted>
+          Variants
+        </Text>
+        <Flex gap="md" wrap="wrap">
+          <ActionButton
+            variant="light"
+            intent="danger"
+            onClick={() =>
+              dialog.confirm({
+                title: "Delete item",
+                message:
+                  "This action cannot be undone. Are you sure you want to delete this item?",
+                confirmColor: "red",
+                confirmLabel: "Delete",
+              })
+            }
+          >
+            Danger Confirm
+          </ActionButton>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DemoDialog;

package/src/demo/components/{core → layout}/DemoSidebar.tsx

@@ -61,7 +61,6 @@ const DemoSidebar = () => {
       }}
       columns={1}
       windowProps={{
-        fill: true,
         containerProps: { p: 0 },
       }}
     >

package/src/demo/components/layout/DemoToast.tsx

@@ -0,0 +1,96 @@
+import { ActionButton, Flex, Text, useToast } from "@alepha/ui";
+import {
+  IconCheck,
+  IconExclamationMark,
+  IconInfoCircle,
+  IconX,
+} from "@tabler/icons-react";
+
+const DemoToast = () => {
+  const toast = useToast();
+
+  return (
+    <Flex col gap="xl" p="xl">
+      <Text bold size="lg">
+        Toast Service
+      </Text>
+      <Text muted small>
+        Notification toasts via the ToastService. Fire-and-forget notifications
+        for user feedback.
+      </Text>
+
+      <Flex gap="md" wrap="wrap">
+        <ActionButton
+          icon={IconCheck}
+          variant="light"
+          intent="success"
+          onClick={() => toast.success("Operation completed successfully.")}
+        >
+          Success
+        </ActionButton>
+
+        <ActionButton
+          icon={IconX}
+          variant="light"
+          intent="danger"
+          onClick={() => toast.danger("Something went wrong.")}
+        >
+          Error
+        </ActionButton>
+
+        <ActionButton
+          icon={IconExclamationMark}
+          variant="light"
+          intent="warning"
+          onClick={() => toast.warning("Please check your input.")}
+        >
+          Warning
+        </ActionButton>
+
+        <ActionButton
+          icon={IconInfoCircle}
+          variant="light"
+          intent="info"
+          onClick={() => toast.info("Here is some useful information.")}
+        >
+          Info
+        </ActionButton>
+      </Flex>
+
+      <Flex col gap="md">
+        <Text bold small uppercase muted>
+          With Title
+        </Text>
+        <Flex gap="md" wrap="wrap">
+          <ActionButton
+            variant="light"
+            intent="success"
+            onClick={() =>
+              toast.success({
+                message: "Your changes have been saved.",
+                title: "Saved",
+              })
+            }
+          >
+            With Title
+          </ActionButton>
+          <ActionButton
+            variant="light"
+            intent="danger"
+            onClick={() =>
+              toast.danger({
+                message: "Failed to connect to the server.",
+                title: "Connection Error",
+                autoClose: false,
+              })
+            }
+          >
+            Persistent
+          </ActionButton>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DemoToast;

package/src/demo/components/shared/MacWindow.tsx

@@ -1,103 +1,178 @@
-import { Flex, type FlexProps, SegmentedControl } from "@mantine/core";
+import {
+  Flex,
+  type FlexProps,
+  Portal,
+  SegmentedControl,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowsMaximize,
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconDeviceTablet,
+} from "@tabler/icons-react";
 import { type ReactNode, useState } from "react";
 
 export interface MacWindowProps {
   children: ReactNode;
   title?: string;
   containerProps?: FlexProps;
-  fill?: boolean;
 }
 
-type WindowSize = "25" | "50" | "75" | "100";
+type DeviceSize = "phone" | "tablet" | "desktop" | "full";
 
-const MacWindow = ({
-  children,
-  title,
-  containerProps,
-  fill,
-}: MacWindowProps) => {
-  const [size, setSize] = useState<WindowSize>("100");
+const DEVICE_WIDTHS: Record<DeviceSize, string> = {
+  phone: "375px",
+  tablet: "768px",
+  desktop: "100%",
+  full: "100%",
+};
 
-  const getWidth = () => {
-    return `${size}%`;
-  };
+const MacWindow = ({ children, title, containerProps }: MacWindowProps) => {
+  const [device, setDevice] = useState<DeviceSize>("desktop");
+  const isFullPage = device === "full";
 
-  return (
+  const controls = (
+    <SegmentedControl
+      size="xs"
+      value={device}
+      onChange={(v) => setDevice(v as DeviceSize)}
+      data={[
+        {
+          label: (
+            <Tooltip label="Phone (375px)" openDelay={400}>
+              <Flex align="center">
+                <IconDeviceMobile size={14} />
+              </Flex>
+            </Tooltip>
+          ),
+          value: "phone",
+        },
+        {
+          label: (
+            <Tooltip label="Tablet (768px)" openDelay={400}>
+              <Flex align="center">
+                <IconDeviceTablet size={14} />
+              </Flex>
+            </Tooltip>
+          ),
+          value: "tablet",
+        },
+        {
+          label: (
+            <Tooltip label="Desktop (100%)" openDelay={400}>
+              <Flex align="center">
+                <IconDeviceDesktop size={14} />
+              </Flex>
+            </Tooltip>
+          ),
+          value: "desktop",
+        },
+        {
+          label: (
+            <Tooltip label="Full page" openDelay={400}>
+              <Flex align="center">
+                <IconArrowsMaximize size={14} />
+              </Flex>
+            </Tooltip>
+          ),
+          value: "full",
+        },
+      ]}
+    />
+  );
+
+  const header = (
     <Flex
-      direction="column"
-      flex={fill ? 1 : undefined}
-      h={fill ? "100%" : undefined}
-      bdrs={"md"}
+      h={36}
+      px="sm"
+      align="center"
+      gap={8}
       style={{
-        width: getWidth(),
-        border: "1px solid var(--mantine-color-default-border)",
-        overflow: "hidden",
-        background: "var(--mantine-color-body)",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-        transition: "width 0.3s ease",
+        background: "var(--mantine-color-default)",
+        borderBottom: "1px solid var(--mantine-color-default-border)",
       }}
     >
+      <Flex gap={6}>
+        <Flex
+          w={12}
+          h={12}
+          style={{ borderRadius: "50%", background: "#ff5f57" }}
+        />
+        <Flex
+          w={12}
+          h={12}
+          style={{ borderRadius: "50%", background: "#febc2e" }}
+        />
+        <Flex
+          w={12}
+          h={12}
+          style={{ borderRadius: "50%", background: "#28c840" }}
+        />
+      </Flex>
+
       <Flex
-        h={36}
-        px="sm"
-        align="center"
-        gap={8}
         style={{
-          background: "var(--mantine-color-default)",
-          borderBottom: "1px solid var(--mantine-color-default-border)",
+          flex: 1,
+          textAlign: "center",
+          fontSize: 13,
+          color: "var(--mantine-color-dimmed)",
         }}
       >
-        <Flex gap={6}>
-          <Flex
-            w={12}
-            h={12}
-            style={{ borderRadius: "50%", background: "#ff5f57" }}
-          />
-          <Flex
-            w={12}
-            h={12}
-            style={{ borderRadius: "50%", background: "#febc2e" }}
-          />
-          <Flex
-            w={12}
-            h={12}
-            style={{ borderRadius: "50%", background: "#28c840" }}
-          />
-        </Flex>
+        {title}
+      </Flex>
+
+      {controls}
+    </Flex>
+  );
 
+  const body = (
+    <Flex
+      direction={"column"}
+      flex={1}
+      p="md"
+      style={{ overflow: "auto" }}
+      {...containerProps}
+    >
+      {children}
+    </Flex>
+  );
+
+  if (isFullPage) {
+    return (
+      <Portal>
         <Flex
+          direction="column"
           style={{
-            flex: 1,
-            textAlign: "center",
-            fontSize: 13,
-            color: "var(--mantine-color-dimmed)",
+            position: "fixed",
+            inset: 0,
+            zIndex: 1000,
+            background: "var(--mantine-color-body)",
           }}
         >
-          {title}
+          {header}
+          {body}
         </Flex>
+      </Portal>
+    );
+  }
 
-        {fill ? undefined : (
-          <SegmentedControl
-            size="xs"
-            value={size}
-            onChange={(v) => setSize(v as WindowSize)}
-            data={[
-              { label: "25", value: "25" },
-              { label: "50", value: "50" },
-              { label: "75", value: "75" },
-              { label: "100", value: "100" },
-            ]}
-          />
-        )}
-      </Flex>
-      <Flex
-        direction={"column"}
-        flex={fill ? 1 : undefined}
-        p="md"
-        {...containerProps}
-      >
-        {children}
-      </Flex>
+  return (
+    <Flex
+      direction="column"
+      bdrs={"md"}
+      style={{
+        width: DEVICE_WIDTHS[device],
+        maxWidth: "100%",
+        border: "1px solid var(--mantine-color-default-border)",
+        overflow: "hidden",
+        background: "var(--mantine-color-body)",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        transition: "width 0.3s ease",
+      }}
+    >
+      {header}
+      {body}
     </Flex>
   );
 };

package/src/demo/components/shared/Showcase.tsx

@@ -56,20 +56,18 @@ const Showcase = <T extends TObject>({
         setValues(values as Record<string, any>);
       },
       onChange: (key, value) => {
-        console.log("onChange", key, value);
-        form.submit();
+        return form.submit();
       },
     },
     [schema],
   );
 
   return (
-    <Flex flex={1} h={"100%"}>
+    <Flex flex={1} px={"md"} gap={"md"}>
       <Flex
         flex={1}
         bg={ui.colors.background}
         h={"100%"}
-        p="xl"
         justify="center"
         align="flex-start"
         style={{ flex: 1, minWidth: 0, overflow: "auto" }}
@@ -80,15 +78,13 @@ const Showcase = <T extends TObject>({
       </Flex>
 
       <Flex
-        bg={ui.colors.surface}
         h={"100%"}
-        p={"md"}
         style={{
           flex: "0 0 300px",
           overflow: "auto",
         }}
       >
-        <Card withBorder shadow="sm" radius="md" bg={ui.colors.elevated}>
+        <Card shadow="sm" radius="md">
           <Card.Section withBorder py={"xs"} inheritPadding>
             <Text size={"xs"} fw={500}>
               {title} Props
@@ -98,7 +94,7 @@ const Showcase = <T extends TObject>({
           <Card.Section p={"sm"}>
             <TypeForm
               form={form}
-              columns={columns}
+              columns={{ base: 1, xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }}
               skipSubmitButton
               skipFormElement
             />

package/src/demo/index.ts

@@ -5,14 +5,11 @@ import { DemoRouter } from "./DemoRouter.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { DemoRouter } from "./DemoRouter.ts";
+export * from "./primitives/$uiDemo.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | standard | experimental |
- *
  * Component showcase and documentation.
  *
  * **Features:**

package/src/demo/primitives/$uiDemo.ts

@@ -0,0 +1,10 @@
+import { $context } from "alepha";
+import { DemoRouter } from "../DemoRouter.ts";
+
+/**
+ * Register Demo UI components and get the DemoRouter instance.
+ */
+export const $uiDemo = () => {
+  const { alepha } = $context();
+  return alepha.inject(DemoRouter);
+};