@alepha/ui 0.19.0 → 0.19.1

package/src/admin/components/notifications/AdminNotifications.tsx

@@ -4,6 +4,7 @@ import {
   DataTable,
   DetailList,
   Flex,
+  Section,
   Text,
   useToast,
 } from "@alepha/ui";
@@ -384,19 +385,13 @@ const NotificationDetailContent = ({
       </Flex>
 
       {/* Details */}
-      <Paper p="sm" radius="md" withBorder>
-        <Text size="sm" fw={600} mb="xs">
-          Details
-        </Text>
+      <Section title="Details" p="sm">
         <DetailList items={detailItems} columns={2} />
-      </Paper>
+      </Section>
 
       {/* Rendered Content */}
       {rendered && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Content
-          </Text>
+        <Section title="Content" p="sm">
           {rendered.type === "email" && (
             <Flex direction="column" gap="xs">
               <Flex direction="column" gap={2}>
@@ -455,25 +450,19 @@ const NotificationDetailContent = ({
               </Flex>
             </Flex>
           )}
-        </Paper>
+        </Section>
       )}
 
       {/* Variables */}
       {detail.variables && Object.keys(detail.variables).length > 0 && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Variables
-          </Text>
+        <Section title="Variables" p="sm">
           <Code block>{JSON.stringify(detail.variables, null, 2)}</Code>
-        </Paper>
+        </Section>
       )}
 
       {/* Error */}
       {detail.error && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Error
-          </Text>
+        <Section title="Error" p="sm">
           <Paper p="xs" radius="sm" withBorder>
             <Text
               size="sm"
@@ -485,15 +474,12 @@ const NotificationDetailContent = ({
               {detail.error}
             </Text>
           </Paper>
-        </Paper>
+        </Section>
       )}
 
       {/* Logs */}
       {detail.logs && detail.logs.length > 0 && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Logs ({detail.logs.length})
-          </Text>
+        <Section title={`Logs (${detail.logs.length})`} p="sm">
           <Flex
             direction="column"
             style={{ maxHeight: 300, overflowY: "auto" }}
@@ -510,7 +496,7 @@ const NotificationDetailContent = ({
               </Flex>
             ))}
           </Flex>
-        </Paper>
+        </Section>
       )}
     </Flex>
   );

package/src/core/components/Section.tsx

@@ -0,0 +1,109 @@
+import { Collapse } from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { type ReactNode, useState } from "react";
+import { ui } from "../constants/ui.ts";
+import type { ActionProps } from "./buttons/ActionButton.tsx";
+import Flex from "./Flex.tsx";
+import SectionHeader, { type SectionHeaderProps } from "./SectionHeader.tsx";
+
+export interface SectionProps
+  extends Omit<SectionHeaderProps, "extra" | "size" | "title"> {
+  /**
+   * Section header title. When omitted, no header is rendered.
+   */
+  title?: string | ReactNode;
+  /**
+   * Section content.
+   */
+  children?: ReactNode;
+
+  /**
+   * When `true`, the section body can be collapsed/expanded.
+   */
+  collapsible?: boolean;
+
+  /**
+   * Initial collapsed state. Only applies when `collapsible` is `true`.
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Padding for the section body.
+   */
+  p?: string | number;
+}
+
+const Section = (props: SectionProps) => {
+  const {
+    children,
+    collapsible,
+    defaultCollapsed = false,
+    title,
+    icon,
+    tag,
+    subtitle,
+    actions,
+    p = "md",
+    ...rest
+  } = props;
+
+  const [collapsed, setCollapsed] = useState(
+    collapsible ? defaultCollapsed : false,
+  );
+
+  const hasHeader = !!title;
+
+  const headerActions: ActionProps[] = [...(actions ?? [])];
+
+  const chevronExtra = collapsible ? (
+    <Flex
+      centerY
+      style={{ cursor: "pointer", flexShrink: 0 }}
+      onClick={() => setCollapsed((v) => !v)}
+    >
+      {collapsed ? (
+        <IconChevronRight size={ui.sizes.icon.sm} />
+      ) : (
+        <IconChevronDown size={ui.sizes.icon.sm} />
+      )}
+    </Flex>
+  ) : undefined;
+
+  return (
+    <Flex col surface rounded bordered {...rest}>
+      {hasHeader && (
+        <Flex
+          p="sm"
+          px="md"
+          style={{
+            cursor: collapsible ? "pointer" : undefined,
+          }}
+          onClick={collapsible ? () => setCollapsed((v) => !v) : undefined}
+        >
+          <SectionHeader
+            icon={icon}
+            title={title}
+            tag={tag}
+            subtitle={subtitle}
+            actions={headerActions}
+            size="sm"
+            extra={chevronExtra}
+          />
+        </Flex>
+      )}
+      {collapsible ? (
+        <Collapse in={!collapsed}>
+          <Flex col p={p} {...(hasHeader ? { borderedTop: true } : {})}>
+            {children}
+          </Flex>
+        </Collapse>
+      ) : (
+        <Flex col p={p} {...(hasHeader ? { borderedTop: true } : {})}>
+          {children}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Section;

package/src/core/components/SectionHeader.tsx

@@ -0,0 +1,106 @@
+import { Title } from "@mantine/core";
+import type { ComponentType, ReactNode } from "react";
+import { ui } from "../constants/ui.ts";
+import { renderIcon } from "../helpers/renderIcon.tsx";
+import type { ActionProps } from "./buttons/ActionButton.tsx";
+import ActionButton from "./buttons/ActionButton.tsx";
+import Flex from "./Flex.tsx";
+import Text from "./Text.tsx";
+
+export interface SectionHeaderProps {
+  /**
+   * Icon displayed before the title.
+   * Accepts a React element or a component type (e.g. `IconUser` from tabler).
+   */
+  icon?: ReactNode | ComponentType<{ size?: number }>;
+
+  /**
+   * Main title text.
+   */
+  title: string | ReactNode;
+
+  /**
+   * Optional tag displayed after the title (e.g. a Badge or status text).
+   */
+  tag?: ReactNode;
+
+  /**
+   * Subtitle displayed below the title.
+   */
+  subtitle?: string | ReactNode;
+
+  /**
+   * Action buttons displayed on the right side.
+   */
+  actions?: ActionProps[];
+
+  /**
+   * Controls the title size and icon size.
+   *
+   * - `"sm"` → Title order 5, icon 16px
+   * - `"md"` → Title order 4, icon 20px (default)
+   * - `"lg"` → Title order 3, icon 24px
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Extra content appended to the right side (after actions).
+   */
+  extra?: ReactNode;
+}
+
+const TITLE_ORDER: Record<string, 1 | 2 | 3 | 4 | 5 | 6> = {
+  sm: 5,
+  md: 4,
+  lg: 3,
+};
+
+const ICON_SIZE: Record<string, number> = {
+  sm: ui.sizes.icon.xs,
+  md: ui.sizes.icon.sm,
+  lg: ui.sizes.icon.md,
+};
+
+const SectionHeader = (props: SectionHeaderProps) => {
+  const { icon, title, tag, subtitle, actions, size = "md", extra } = props;
+
+  const iconSize = ICON_SIZE[size];
+  const titleOrder = TITLE_ORDER[size];
+
+  return (
+    <Flex col gap={2}>
+      <Flex centerY gap="xs">
+        {icon && (
+          <Flex centerY style={{ flexShrink: 0 }}>
+            {renderIcon(icon, iconSize)}
+          </Flex>
+        )}
+        <Title order={titleOrder} lh={1.2}>
+          {title}
+        </Title>
+        {tag}
+        <Flex fill />
+        {actions && actions.length > 0 && (
+          <Flex gap="xs" centerY style={{ flexShrink: 0 }}>
+            {actions.map((actionProps, index) => (
+              <ActionButton
+                key={index}
+                size="xs"
+                variant="default"
+                {...actionProps}
+              />
+            ))}
+          </Flex>
+        )}
+        {extra}
+      </Flex>
+      {subtitle && (
+        <Text muted small>
+          {subtitle}
+        </Text>
+      )}
+    </Flex>
+  );
+};
+
+export default SectionHeader;

package/src/core/index.ts

@@ -61,7 +61,6 @@ export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx
 export { default as PromptDialog } from "./components/dialogs/PromptDialog.tsx";
 export type { FlexProps } from "./components/Flex.tsx";
 export { default as Flex } from "./components/Flex.tsx";
-export { default as Heading } from "./components/Heading.tsx";
 export type {
   AppBarBack,
   AppBarBurger,
@@ -105,6 +104,10 @@ export { Sidebar } from "./components/layout/Sidebar.tsx";
 export { SidebarCollapsedItem } from "./components/layout/SidebarCollapsedItem.tsx";
 export type { SidebarItemProps } from "./components/layout/SidebarItem.tsx";
 export { SidebarItem } from "./components/layout/SidebarItem.tsx";
+export type { SectionProps } from "./components/Section.tsx";
+export { default as Section } from "./components/Section.tsx";
+export type { SectionHeaderProps } from "./components/SectionHeader.tsx";
+export { default as SectionHeader } from "./components/SectionHeader.tsx";
 export type { TextProps } from "./components/Text.tsx";
 export { default as Text } from "./components/Text.tsx";
 export * from "./constants/ui.ts";

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

@@ -90,7 +90,11 @@ const toAriaSort = (
   return "none";
 };
 
-const FIT_STYLE = { width: 1, whiteSpace: "nowrap" } as const;
+const FIT_STYLE = {
+  width: 1,
+  whiteSpace: "nowrap",
+  minWidth: "fit-content",
+} as const;
 
 const DataTable = <T extends object, Filters extends TObject>(
   props: DataTableProps<T, Filters>,

package/src/demo/DemoRouter.ts

@@ -76,7 +76,7 @@ export class DemoRouter {
   demoHeading = $page({
     icon: IconHeading,
     path: "/heading",
-    label: "Heading",
+    label: "Section",
     lazy: () => import("./components/core/DemoHeading.tsx"),
   });
 

package/src/demo/components/auth/DemoLogin.tsx

@@ -104,6 +104,11 @@ const buildRealmConfig = (props: {
         requireNumbers: true,
         requireSpecialCharacters: false,
       },
+      loginRateLimit: {
+        ipMaxAttempts: 15,
+        accountMaxAttempts: 5,
+        windowMs: 15 * 60 * 1000,
+      },
     },
   };
 };

package/src/demo/components/auth/DemoRegister.tsx

@@ -98,6 +98,11 @@ const buildRealmConfig = (props: {
         requireNumbers: true,
         requireSpecialCharacters: false,
       },
+      loginRateLimit: {
+        ipMaxAttempts: 15,
+        accountMaxAttempts: 5,
+        windowMs: 15 * 60 * 1000,
+      },
     },
   };
 };

package/src/demo/components/auth/DemoResetPassword.tsx

@@ -45,6 +45,11 @@ const buildRealmConfig = (props: {
         requireNumbers: true,
         requireSpecialCharacters: false,
       },
+      loginRateLimit: {
+        ipMaxAttempts: 15,
+        accountMaxAttempts: 5,
+        windowMs: 15 * 60 * 1000,
+      },
     },
   };
 };

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

@@ -1,11 +1,64 @@
-import { Heading } from "@alepha/ui";
+import { Flex, Section, SectionHeader } from "@alepha/ui";
+import { IconUser } from "@tabler/icons-react";
 import { t } from "alepha";
 import Showcase from "../shared/Showcase.tsx";
 
 const DemoHeading = () => {
   return (
-    <Showcase title="Flex" schema={t.object({})} initialValues={{}}>
-      {(props) => <Heading title={"Hello!"} />}
+    <Showcase
+      title="SectionHeader & Section"
+      schema={t.object({})}
+      initialValues={{}}
+    >
+      {() => (
+        <Flex col gap="lg" w="100%">
+          <SectionHeader title="Simple" />
+
+          <SectionHeader
+            title="With Icon & Subtitle"
+            icon={IconUser}
+            subtitle="This is a subtitle"
+          />
+
+          <SectionHeader
+            title="With Actions"
+            subtitle="Section with action buttons"
+            actions={[
+              { children: "Edit", onClick: () => {} },
+              { children: "Delete", intent: "danger", onClick: () => {} },
+            ]}
+          />
+
+          <Section title="Basic Section">
+            Section body content goes here.
+          </Section>
+
+          <Section
+            title="With Icon & Actions"
+            icon={IconUser}
+            subtitle="A section with header features"
+            actions={[{ children: "Edit", onClick: () => {} }]}
+          >
+            Section body with icon and actions.
+          </Section>
+
+          <Section
+            title="Collapsible Section"
+            collapsible
+            subtitle="Click header to toggle"
+          >
+            This content can be collapsed.
+          </Section>
+
+          <Section title="Collapsed by Default" collapsible defaultCollapsed>
+            This was hidden initially.
+          </Section>
+
+          <Section>
+            Section without header — just a bordered surface container.
+          </Section>
+        </Flex>
+      )}
     </Showcase>
   );
 };

package/dist/admin/AdminFiles-31ivR6Wq.js

@@ -1,110 +0,0 @@
-import { l as Flex, r as DataTable, s as Text } from "./core-D1AbU50V.js";
-import { t } from "alepha";
-import { useI18n } from "alepha/react/i18n";
-import { jsx } from "react/jsx-runtime";
-import { useClient } from "alepha/react";
-import { files } from "alepha/api/files";
-//#region ../../src/admin/components/files/AdminFiles.tsx
-const AdminFiles = () => {
-	const client = useClient();
-	const { l } = useI18n();
-	const filters = t.object({
-		bucket: t.optional(t.string()),
-		name: t.optional(t.string({ $control: { query: t.pick(files.schema, [
-			"name",
-			"bucket",
-			"mimeType"
-		]) } }))
-	});
-	const formatFileSize = (bytes) => {
-		if (bytes === 0) return "0 B";
-		const k = 1024;
-		const sizes = [
-			"B",
-			"KB",
-			"MB",
-			"GB"
-		];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
-	};
-	return /* @__PURE__ */ jsx(Flex, {
-		p: "md",
-		flex: 1,
-		direction: "column",
-		children: /* @__PURE__ */ jsx(DataTable, {
-			submitOnInit: true,
-			defaultSize: 10,
-			typeFormProps: {
-				skipSubmitButton: true,
-				columns: 3
-			},
-			tableProps: {
-				horizontalSpacing: "xs",
-				verticalSpacing: "xs"
-			},
-			onFilterChange: (key, _value, form) => {
-				if (key === "name" || key === "bucket") return form.submit();
-			},
-			filters,
-			items: async (filters) => {
-				return await client.findFiles({ query: filters });
-			},
-			columns: {
-				name: {
-					label: "Name",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "sm",
-						fw: 500,
-						lineClamp: 1,
-						children: item.name
-					})
-				},
-				bucket: {
-					label: "Bucket",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						ff: "monospace",
-						children: item.bucket
-					})
-				},
-				mimeType: {
-					label: "Type",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						c: "dimmed",
-						children: item.mimeType
-					})
-				},
-				size: {
-					label: "Size",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						c: "dimmed",
-						children: formatFileSize(item.size)
-					})
-				},
-				creatorName: {
-					label: "Creator",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						c: "dimmed",
-						children: item.creatorName || "-"
-					})
-				},
-				createdAt: {
-					label: "Created",
-					value: (item) => /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						c: "dimmed",
-						children: l(item.createdAt, { date: "fromNow" })
-					})
-				}
-			}
-		})
-	});
-};
-//#endregion
-export { AdminFiles as default };
-
-//# sourceMappingURL=AdminFiles-31ivR6Wq.js.map

package/dist/admin/AdminFiles-31ivR6Wq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminFiles-31ivR6Wq.js","names":[],"sources":["../../src/admin/components/files/AdminFiles.tsx"],"sourcesContent":["import { DataTable, Flex, Text } from \"@alepha/ui\";\nimport { type Page, t } from \"alepha\";\nimport { type FileController, type FileEntity, files } from \"alepha/api/files\";\nimport { useClient } from \"alepha/react\";\nimport { useI18n } from \"alepha/react/i18n\";\n\nconst AdminFiles = () => {\n  const client = useClient<FileController>();\n  const { l } = useI18n();\n\n  const filters = t.object({\n    bucket: t.optional(t.string()),\n    name: t.optional(\n      t.string({\n        $control: {\n          query: t.pick(files.schema, [\"name\", \"bucket\", \"mimeType\"]),\n        },\n      }),\n    ),\n  });\n\n  const formatFileSize = (bytes: number) => {\n    if (bytes === 0) return \"0 B\";\n    const k = 1024;\n    const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n  };\n\n  return (\n    <Flex p=\"md\" flex={1} direction={\"column\"}>\n      <DataTable<FileEntity, typeof filters>\n        submitOnInit\n        defaultSize={10}\n        typeFormProps={{\n          skipSubmitButton: true,\n          columns: 3,\n        }}\n        tableProps={{\n          horizontalSpacing: \"xs\",\n          verticalSpacing: \"xs\",\n        }}\n        onFilterChange={(key, _value, form) => {\n          if (key === \"name\" || key === \"bucket\") {\n            return form.submit();\n          }\n        }}\n        filters={filters}\n        items={async (filters) => {\n          const response = await client.findFiles({\n            query: filters,\n          });\n\n          return response as Page<FileEntity>;\n        }}\n        columns={{\n          name: {\n            label: \"Name\",\n            value: (item) => (\n              <Text size=\"sm\" fw={500} lineClamp={1}>\n                {item.name}\n              </Text>\n            ),\n          },\n          bucket: {\n            label: \"Bucket\",\n            value: (item) => (\n              <Text size=\"xs\" ff=\"monospace\">\n                {item.bucket}\n              </Text>\n            ),\n          },\n          mimeType: {\n            label: \"Type\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {item.mimeType}\n              </Text>\n            ),\n          },\n          size: {\n            label: \"Size\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {formatFileSize(item.size)}\n              </Text>\n            ),\n          },\n          creatorName: {\n            label: \"Creator\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {item.creatorName || \"-\"}\n              </Text>\n            ),\n          },\n          createdAt: {\n            label: \"Created\",\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {l(item.createdAt, { date: \"fromNow\" })}\n              </Text>\n            ),\n          },\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default AdminFiles;\n"],"mappings":";;;;;;;AAMA,MAAM,mBAAmB;CACvB,MAAM,SAAS,WAA2B;CAC1C,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,UAAU,EAAE,OAAO;EACvB,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;EAC9B,MAAM,EAAE,SACN,EAAE,OAAO,EACP,UAAU,EACR,OAAO,EAAE,KAAK,MAAM,QAAQ;GAAC;GAAQ;GAAU;GAAW,CAAC,EAC5D,EACF,CAAC,CACH;EACF,CAAC;CAEF,MAAM,kBAAkB,UAAkB;AACxC,MAAI,UAAU,EAAG,QAAO;EACxB,MAAM,IAAI;EACV,MAAM,QAAQ;GAAC;GAAK;GAAM;GAAM;GAAK;EACrC,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;AACnD,SAAO,GAAG,OAAO,YAAY,QAAQ,KAAK,GAAG,QAAQ,EAAE,CAAC,CAAC,GAAG,MAAM;;AAGpE,QACE,oBAAC,MAAD;EAAM,GAAE;EAAK,MAAM;EAAG,WAAW;YAC/B,oBAAC,WAAD;GACE,cAAA;GACA,aAAa;GACb,eAAe;IACb,kBAAkB;IAClB,SAAS;IACV;GACD,YAAY;IACV,mBAAmB;IACnB,iBAAiB;IAClB;GACD,iBAAiB,KAAK,QAAQ,SAAS;AACrC,QAAI,QAAQ,UAAU,QAAQ,SAC5B,QAAO,KAAK,QAAQ;;GAGf;GACT,OAAO,OAAO,YAAY;AAKxB,WAJiB,MAAM,OAAO,UAAU,EACtC,OAAO,SACR,CAAC;;GAIJ,SAAS;IACP,MAAM;KACJ,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,IAAI;MAAK,WAAW;gBACjC,KAAK;MACD,CAAA;KAEV;IACD,QAAQ;KACN,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,IAAG;gBAChB,KAAK;MACD,CAAA;KAEV;IACD,UAAU;KACR,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,GAAE;gBACf,KAAK;MACD,CAAA;KAEV;IACD,MAAM;KACJ,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,GAAE;gBACf,eAAe,KAAK,KAAK;MACrB,CAAA;KAEV;IACD,aAAa;KACX,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,GAAE;gBACf,KAAK,eAAe;MAChB,CAAA;KAEV;IACD,WAAW;KACT,OAAO;KACP,QAAQ,SACN,oBAAC,MAAD;MAAM,MAAK;MAAK,GAAE;gBACf,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;MAClC,CAAA;KAEV;IACF;GACD,CAAA;EACG,CAAA"}