@bunnix/components 0.9.1 → 0.9.2

package/@types/index.d.ts

@@ -6,10 +6,16 @@ export interface BaseProps {
   [key: string]: unknown;
 }
 
+export type Size = "xsmall" | "small" | "regular" | "large" | "xlarge";
+export type LegacySize = "xs" | "sm" | "md" | "lg" | "xl" | "default";
+export type SizeValue = Size | LegacySize;
+export type SizeNoSmall = Exclude<SizeValue, "small" | "sm">;
+export type SizeRegularUp = Exclude<SizeValue, "xsmall" | "xs" | "small" | "sm">;
+
 export interface ButtonProps extends BaseProps {
   type?: string;
   variant?: string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   href?: string;
   disabled?: boolean;
   onClick?: (event?: any) => void;
@@ -19,28 +25,53 @@ export interface ButtonProps extends BaseProps {
 export interface IconProps extends BaseProps {
   name?: string;
   fill?: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue | `icon-${string}`;
 }
 
 export interface TextProps extends BaseProps {
-  type?: "text" | "paragraph" | "heading1" | "heading2" | "heading3" | "heading4" | string;
-  color?: string;
-  design?: "regular" | "mono" | string;
+  type?: "text" | "paragraph" | "heading1" | "heading2" | "heading3" | "heading4";
+  color?: "default"
+    | "primary"
+    | "primary-dimmed"
+    | "secondary"
+    | "tertiary"
+    | "quaternary"
+    | "destructive"
+    | "destructive-dimmed"
+    | "accent"
+    | "accent-dimmed"
+    | "white"
+    | (string & {});
+  design?: "regular" | "mono";
+  weight?: "regular" | "semibold" | "bold";
+  size?: SizeValue;
+  wrap?: "wrap" | "nowrap";
 }
 
 export interface ContainerProps extends BaseProps {
-  type?: "main" | "content" | "page" | string;
-  direction?: "horizontal" | "vertical" | string;
+  type?: "main" | "content" | "page" | (string & {});
+  direction?: "row" | "column" | (string & {});
 }
 
-export interface StackProps extends BaseProps {
+export interface CardProps extends BaseProps {
+  direction?: "horizontal" | "vertical" | string;
   alignment?: "leading" | "middle" | "trailing" | string;
-  gap?: "small" | "regular" | "large" | string;
+}
+
+export interface HStackProps extends BaseProps {
+  alignment?: "leading" | "middle" | "trailing" | (string & {});
+  verticalAlignment?: "top" | "center" | "bottom" | (string & {});
+  gap?: "xsmall" | "small" | "regular" | "large" | (string & {});
+}
+
+export interface VStackProps extends BaseProps {
+  alignment?: "leading" | "middle" | "trailing" | (string & {});
+  gap?: "xsmall" | "small" | "regular" | "large" | (string & {});
 }
 
 export interface BadgeProps extends BaseProps {
   tone?: "base" | "success" | "info" | "warning" | "danger" | "accent" | "dimmed" | string;
-  size?: "xs" | "sm" | "md" | string;
+  size?: SizeValue;
   variant?: "solid" | "soft" | "outline" | string;
   icon?: string;
   overlap?: boolean;
@@ -50,6 +81,7 @@ export interface BadgeProps extends BaseProps {
 export interface InputFieldProps extends BaseProps {
   type?: string;
   variant?: "regular" | "rounded" | string;
+  size?: SizeRegularUp;
   value?: string;
   placeholder?: string;
   label?: string;
@@ -82,14 +114,14 @@ export interface ComboBoxOption {
 export interface ComboBoxProps extends BaseProps {
   options?: Array<string | ComboBoxOption>;
   selection?: any;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onChange?: (event?: any) => void;
   change?: (event?: any) => void;
 }
 
 export interface CheckboxProps extends BaseProps {
   labelText?: string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onCheck?: (checked: boolean) => void;
   check?: (checked: boolean) => void;
   onChange?: (event?: any) => void;
@@ -97,7 +129,7 @@ export interface CheckboxProps extends BaseProps {
 
 export interface RadioCheckboxProps extends BaseProps {
   labelText?: string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onCheck?: (checked: boolean) => void;
   check?: (checked: boolean) => void;
   onChange?: (event?: any) => void;
@@ -105,7 +137,7 @@ export interface RadioCheckboxProps extends BaseProps {
 
 export interface ToggleSwitchProps extends BaseProps {
   labelText?: string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onChange?: (event?: any) => void;
 }
 
@@ -122,7 +154,7 @@ export interface SearchBoxProps extends BaseProps {
   placeholder?: string;
   onInput?: (event?: any) => void;
   input?: (event?: any) => void;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   variant?: "regular" | "rounded" | string;
   onSelect?: (item?: SearchBoxItem) => void;
   select?: (item?: SearchBoxItem) => void;
@@ -131,9 +163,13 @@ export interface SearchBoxProps extends BaseProps {
 export interface SidebarItem {
   id?: string;
   label?: string;
+  /**
+   * Icon name. Accepts either a full icon class (e.g. "icon-person")
+   * or a bare name (e.g. "person"), which will be prefixed with "icon-".
+   */
   icon?: string;
   href?: string | null;
-  badge?: string | number | { value?: string | number; tone?: string; variant?: string; size?: string };
+  badge?: string | number | { value?: string | number; tone?: string; variant?: string; size?: SizeValue };
   children?: SidebarItem[];
   isExpanded?: boolean;
   isHeader?: boolean;
@@ -143,15 +179,18 @@ export interface SidebarItem {
 
 export interface SidebarProps extends BaseProps {
   items?: SidebarItem[];
-  selection?: string;
+  selection?: string | any;
+  /** @deprecated Use onItemSelect instead. */
   onSelect?: (id?: string) => void;
   onItemSelect?: (id?: string) => void;
   searchable?: boolean;
   searchProps?: Record<string, unknown>;
+  leading?: BunnixChildren | (() => BunnixChildren);
+  trailing?: BunnixChildren | (() => BunnixChildren);
 }
 
 export interface NavigationBarProps extends BaseProps {
-  title?: string | (() => BunnixChildren);
+  title?: string | any;
   leading?: BunnixChildren | (() => BunnixChildren);
   trailing?: BunnixChildren | (() => BunnixChildren);
   searchable?: boolean;
@@ -167,18 +206,22 @@ export interface DatePickerProps extends BaseProps {
   placeholder?: string;
   range?: boolean;
   variant?: "regular" | "rounded" | string;
-  size?: "md" | "lg" | "xl" | string;
+  size?: SizeNoSmall;
 }
 
 export interface TimePickerProps extends BaseProps {
   id?: string;
   placeholder?: string;
   variant?: "regular" | "rounded" | string;
-  size?: "md" | "lg" | "xl" | string;
+  size?: SizeNoSmall;
 }
 
 export interface DropdownMenuItem {
   title?: string;
+  /**
+   * Icon name. Accepts either a full icon class (e.g. "icon-person")
+   * or a bare name (e.g. "person"), which will be prefixed with "icon-".
+   */
   icon?: string;
   destructive?: boolean;
   isSeparator?: boolean;
@@ -192,16 +235,16 @@ export interface DropdownMenuProps extends BaseProps {
   id?: string;
   align?: "left" | "right" | string;
   placeholder?: string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onSelect?: (item?: DropdownMenuItem) => void;
 }
 
 export interface PopoverMenuProps extends BaseProps {
-  trigger?: BunnixChildren;
-  items?: DropdownMenuItem[];
+  trigger?: BunnixChildren | (() => BunnixChildren);
+  menuItems?: DropdownMenuItem[];
   id?: string;
   align?: "left" | "right" | string;
-  size?: "sm" | "md" | "lg" | "xl" | string;
+  size?: SizeValue;
   onSelect?: (item?: DropdownMenuItem) => void;
 }
 
@@ -216,6 +259,8 @@ export interface DialogConfirmation {
 export interface ShowDialogOptions {
   title?: string;
   message?: string;
+  minWidth?: number | string | null;
+  minHeight?: number | string | null;
   confirmation?: DialogConfirmation;
   content?: (args: { setConfirmDisabled: (disabled: boolean) => void }) => BunnixChildren;
 }
@@ -224,15 +269,66 @@ export interface ToastOptions {
   message?: string;
   duration?: number;
   anchor?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | string;
-  size?: "md" | "lg" | "xl" | string;
+  size?: SizeNoSmall;
+  /**
+   * Icon name. Accepts either a full icon class (e.g. "icon-bell")
+   * or a bare name (e.g. "bell"), which will be prefixed with "icon-".
+   */
   icon?: string;
 }
 
+export interface PageHeaderProps extends BaseProps {
+  title?: string;
+  description?: string;
+  trailing?: BunnixChildren | (() => BunnixChildren);
+}
+
+export interface PageSectionProps extends BaseProps {
+  title?: string;
+  stickyOffset?: string | number;
+  gap?: "small" | "regular" | "large" | string;
+  trailing?: BunnixChildren | (() => BunnixChildren);
+}
+
+export interface TableColumn {
+  field: string;
+  label: string;
+  size?: "auto" | number | string;
+}
+
+export interface TableSortableConfig {
+  field: string;
+  sortType?: "string" | "number" | "date";
+  sorted?: boolean;
+  direction?: "asc" | "desc";
+}
+
+export interface TableSearchableConfig {
+  field: string;
+  searchText?: string | any;
+}
+
+export interface TableProps extends BaseProps {
+  columns?: Array<TableColumn>;
+  data?: Array<any> | any;
+  key?: string;
+  renderCell?: (columnIndex: number, field: string, row: any, column?: TableColumn) => any;
+  cell?: (columnIndex: number, field: string, row: any, column?: TableColumn) => any;
+  searchable?: TableSearchableConfig;
+  sortable?: Array<TableSortableConfig>;
+  selection?: (keys: Array<string>) => void;
+  sort?: (field?: string) => ((a: any, b: any) => number) | null;
+  variant?: "regular" | "background" | "bordered" | string;
+  interactive?: boolean;
+  hideHeaders?: boolean;
+}
+
 export type Component<P = BaseProps> = (props?: P, children?: BunnixChildren) => any;
 
 export const AccordionGroup: Component<BaseProps>;
 export const Badge: Component<BadgeProps>;
 export const Button: Component<ButtonProps>;
+export const Card: Component<CardProps>;
 export const Checkbox: Component<CheckboxProps>;
 export const CodeBlock: Component<CodeBlockProps>;
 export const ComboBox: Component<ComboBoxProps>;
@@ -241,22 +337,22 @@ export const DatePicker: Component<DatePickerProps>;
 export const Dialog: Component<BaseProps>;
 export const DropdownMenu: Component<DropdownMenuProps>;
 export const Grid: Component<BaseProps>;
-export const HStack: Component<StackProps>;
+export const HStack: Component<HStackProps>;
 export const Icon: Component<IconProps>;
 export const InputField: Component<InputFieldProps>;
 export const NavigationBar: Component<NavigationBarProps>;
-export const PageHeader: Component<BaseProps>;
-export const PageSection: Component<BaseProps>;
+export const PageHeader: Component<PageHeaderProps>;
+export const PageSection: Component<PageSectionProps>;
 export const PopoverMenu: Component<PopoverMenuProps>;
 export const RadioCheckbox: Component<RadioCheckboxProps>;
 export const SearchBox: Component<SearchBoxProps>;
 export const Sidebar: Component<SidebarProps>;
-export const Table: Component<BaseProps>;
+export const Table: Component<TableProps>;
 export const Text: Component<TextProps>;
 export const TimePicker: Component<TimePickerProps>;
 export const ToastNotification: Component<BaseProps>;
 export const ToggleSwitch: Component<ToggleSwitchProps>;
-export const VStack: Component<StackProps>;
+export const VStack: Component<VStackProps>;
 
 export const dialogState: any;
 export function showDialog(options?: ShowDialogOptions): void;

package/README.md

@@ -98,10 +98,10 @@ You can compose your own UI using the same CSS utilities the components use:
 
 - Layout: `row-container`, `column-container`, `grid-flow`, `gap-xs|sm|md|lg`, `items-start|center|end|stretch`, `justify-start|center|end`, `w-full`, `h-full`, `spacer-h`, `spacer-v`
 - Surfaces: `box`, `box-sm`, `box-control`, `box-capsule`, `card`, `shadow`, `rounded|rounded-sm|rounded-full`
-- Typography: `text-primary|secondary|tertiary|quaternary`, `text-accent`, `text-destructive`, `text-sm|base|lg|xl`, `text-mono`, `whitespace-nowrap`, `whitespace-pre-line`
+- Typography: `text-default|primary|secondary|tertiary|quaternary`, `text-accent`, `text-destructive`, `text-sm|base|lg|xl`, `text-mono`, `whitespace-nowrap`, `whitespace-pre-line`
 - Buttons: `btn`, `btn-flat`, `btn-outline`, `btn-destructive`, `btn-lg`, `btn-xl`, `btn-disabled`
 - Forms: `input-lg`, `input-xl`, `rounded-full` (useful for pill inputs)
-- Icons: `icon`, `icon-<name>`, `icon-xs|sm|lg|xl`, `icon-base|white|secondary|tertiary|quaternary`
+- Icons: `icon`, `icon-<name>`, `icon-xs|sm|lg|xl`, `icon-default|base|white|secondary|tertiary|quaternary`
 
 Example:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",

package/src/components/AccordionGroup.mjs

@@ -1,4 +1,5 @@
 import Bunnix, { useState } from "@bunnix/core";
+import { resolveIconClass } from "../utils/iconUtils.mjs";
 const { div, button, span, p } = Bunnix;
 
 export default function AccordionGroup({ items = [], class: className = "", initialIndex } = {}) {
@@ -16,7 +17,7 @@ export default function AccordionGroup({ items = [], class: className = "", init
     { class: `accordion-group ${className}`.trim() },
     items.map((item, index) => {
       const isOpen = openIndex.map((value) => value === index);
-      const iconClass = item.icon ? item.icon : "icon-add";
+      const iconClass = resolveIconClass(item.icon) || "icon-add";
       const description = item.description ?? item.content ?? "";
 
       return div({ class: isOpen.map((open) => `accordion-item hoverable ${open ? "accordion-open" : ""}`) }, [

package/src/components/Badge.mjs

@@ -1,4 +1,5 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 import Icon from "./Icon.mjs";
 
 const { span } = Bunnix;
@@ -16,7 +17,9 @@ const toneClassMap = {
 const sizeClassMap = {
   xs: "badge-xs",
   sm: "badge-sm",
-  md: "badge-md"
+  md: "badge-md",
+  lg: "badge-lg",
+  xl: "badge-xl"
 };
 
 const variantClassMap = {
@@ -27,17 +30,28 @@ const variantClassMap = {
 
 export default function Badge({
   tone = "base",
-  size = "sm",
+  size = "small",
   variant = "solid",
   icon,
   overlap = false,
   shape = "capsule",
   class: className = ""
 } = {}, children) {
+  // Badge supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "small");
+  const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
+
   const toneClass = toneClassMap[tone] || toneClassMap.base;
-  const sizeClass = sizeClassMap[size] || sizeClassMap.sm;
+  const sizeClass = sizeClassMap[sizeToken] || sizeClassMap.sm;
   const variantClass = variantClassMap[variant] || variantClassMap.solid;
-  const iconSize = size === "md" ? "lg" : size === "xs" ? "xs" : "sm";
+  const iconSize = normalizedSize === "regular"
+    ? "large"
+    : normalizedSize === "xsmall"
+      ? "xsmall"
+      : normalizedSize === "xlarge"
+        ? "xlarge"
+        : "small";
   const overlapClass = overlap ? "badge-overlap" : "";
   const shapeClass = shape === "circle" ? "badge-circle" : "";
   const combinedClass = `badge ${toneClass} ${sizeClass} ${variantClass} ${overlapClass} ${shapeClass} ${className}`.trim();

package/src/components/Button.mjs

@@ -1,4 +1,5 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { button, a } = Bunnix;
 
 export default function Button({
@@ -12,12 +13,8 @@ export default function Button({
   class: className = "",
   ...rest
 } = {}, children) {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "sm";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // Button supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
 
   const variantState = variant && typeof variant.map === "function" ? variant : null;
   const sizeState = size && typeof size.map === "function" ? size : null;
@@ -28,13 +25,14 @@ export default function Button({
 
   const buildClass = (variantValue, sizeValue, disabledValue) => {
     const normalizedSize = normalizeSize(sizeValue);
+    const sizeToken = toSizeToken(normalizedSize);
     const baseClass = isHyperlink ? "" : "btn";
     const variantClass = (isHyperlink || variantValue === "regular") ? "" : `btn-${variantValue}`;
-    const sizeClass = (!isHyperlink && normalizedSize && normalizedSize !== "md" && (normalizedSize === "lg" || normalizedSize === "xl"))
-      ? `btn-${normalizedSize}`
+    const sizeClass = (!isHyperlink && sizeToken && sizeToken !== "md")
+      ? `btn-${sizeToken}`
       : "";
     const disabledClass = disabledValue ? "btn-disabled" : "";
-    return `${baseClass} ${variantClass} ${sizeClass} ${disabledClass} ${className}`.trim();
+    return `row-container justify-start shrink-0 no-selectable ${baseClass} ${variantClass} ${sizeClass} ${disabledClass} ${className}`.trim();
   };
 
   const combinedClass = variantState

package/src/components/Card.mjs

@@ -0,0 +1,37 @@
+import Bunnix from "@bunnix/core";
+
+const { div } = Bunnix;
+
+const directionClassMap = {
+  horizontal: "row-container",
+  vertical: "column-container"
+};
+
+export default function Card({
+  direction,
+  alignment,
+  class: className = "",
+  ...rest
+} = {}, children) {
+  const directionClass = directionClassMap[direction] || "";
+  const rowAlignmentMap = {
+    leading: "justify-start",
+    middle: "justify-center",
+    trailing: "justify-end"
+  };
+  const columnAlignmentMap = {
+    leading: "items-start",
+    middle: "items-center",
+    trailing: "items-end"
+  };
+  const alignmentClass = alignment
+    ? direction === "vertical"
+      ? columnAlignmentMap[alignment] || ""
+      : direction === "horizontal"
+        ? rowAlignmentMap[alignment] || ""
+        : ""
+    : "";
+  const combinedClass = `card ${directionClass} ${alignmentClass} ${className}`.trim();
+
+  return div({ class: combinedClass, ...rest }, children);
+}

package/src/components/Checkbox.mjs

@@ -1,4 +1,5 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { label, input, span } = Bunnix;
 
 export default function Checkbox({
@@ -10,14 +11,11 @@ export default function Checkbox({
   class: className = "",
   ...inputProps
 }) {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "sm";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // Checkbox supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
-  const sizeClass = normalizedSize === "lg" ? "checkbox-lg" : normalizedSize === "xl" ? "checkbox-xl" : "";
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "checkbox-xl" : sizeToken === "lg" ? "checkbox-lg" : "";
   const nativeChange = onChange ?? inputProps.change;
   const checkHandler = onCheck ?? check;
 

package/src/components/ComboBox.mjs

@@ -1,5 +1,6 @@
 import Bunnix from "@bunnix/core";
-const { select, option } = Bunnix;
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+const { select, option, div, span } = Bunnix;
 
 export default function ComboBox({
   options = [],
@@ -10,14 +11,18 @@ export default function ComboBox({
   change,
   ...rest
 } = {}, children) {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "sm";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // ComboBox supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
-  const sizeClass = normalizedSize === "lg" ? "input-lg" : normalizedSize === "xl" ? "input-xl" : "";
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "input-xl" : sizeToken === "lg" ? "input-lg" : "";
+  const iconSizeClass = sizeToken === "sm"
+    ? "icon-sm"
+    : sizeToken === "lg"
+      ? "icon-lg"
+      : sizeToken === "xl"
+        ? "icon-xl"
+        : "";
   const selectionState = selection && typeof selection.map === "function" ? selection : null;
   const handleChangeExternal = onChange ?? change;
 
@@ -35,10 +40,13 @@ export default function ComboBox({
     return option({ value: opt.value }, opt.label ?? opt.value);
   });
 
-  return select({
-    class: `${sizeClass} ${className}`.trim(),
-    value: selection ?? "",
-    change: handleChange,
-    ...rest
-  }, resolvedChildren);
+  return div({ class: "combobox" }, [
+    select({
+      class: `combobox-select ${sizeClass} ${className}`.trim(),
+      value: selection ?? "",
+      change: handleChange,
+      ...rest
+    }, resolvedChildren),
+    span({ class: `combobox-chevron icon icon-chevron-down icon-base ${iconSizeClass}`.trim() })
+  ]);
 }

package/src/components/Container.mjs

@@ -5,23 +5,21 @@ const { div } = Bunnix;
 const typeClassMap = {
   main: "main-container",
   content: "main-content",
-  page: "page-layout"
+  page: "page-layout",
 };
 
 const directionClassMap = {
-  horizontal: "row-container",
-  vertical: "column-container"
+  row: "row-container",
+  column: "column-container",
 };
 
-export default function Container({
-  type,
-  direction,
-  class: className = "",
-  ...rest
-} = {}, children) {
+export default function Container(
+  { type = "box", direction = "column", class: className = "", ...rest } = {},
+  ...children
+) {
   const typeClass = typeClassMap[type] || "";
   const directionClass = directionClassMap[direction] || "";
   const combinedClass = `${typeClass} ${directionClass} ${className}`.trim();
 
-  return div({ class: combinedClass, ...rest }, children);
+  return div({ class: combinedClass, ...rest }, ...children);
 }

package/src/components/DatePicker.mjs

@@ -1,4 +1,5 @@
 import Bunnix, { ForEach, useMemo, useRef, useState } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 import Icon from "./Icon.mjs";
 const { div, button, span, hr } = Bunnix;
 
@@ -51,7 +52,7 @@ export default function DatePicker({
   placeholder,
   range = false,
   variant = "regular",
-  size = "md",
+  size = "regular",
   class: className = ""
 } = {}) {
   const popoverRef = useRef(null);
@@ -161,25 +162,22 @@ export default function DatePicker({
 
   const hasValue = inputValue.map(v => !!v);
 
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "md";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // DatePicker does not support small size (clamps to regular)
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
   const variantClass = variant === "rounded" ? "rounded-full" : "";
-  const triggerSizeClass = normalizedSize === "xl"
+  const triggerSizeClass = sizeToken === "xl"
     ? "dropdown-xl"
-    : normalizedSize === "lg"
+    : sizeToken === "lg"
       ? "dropdown-lg"
       : "";
-  const iconSizeValue = normalizedSize === "sm"
-    ? "sm"
-    : normalizedSize === "lg"
-      ? "lg"
-      : normalizedSize === "xl"
-        ? "xl"
+  const iconSizeValue = normalizedSize === "small"
+    ? "small"
+    : normalizedSize === "large"
+      ? "large"
+      : normalizedSize === "xlarge"
+        ? "xlarge"
         : undefined;
 
   return div({ class: `datepicker-wrapper ${className}`.trim() }, [