@dimaan/ui 0.0.10 → 0.0.11

package/dist/index.cjs

@@ -6,9 +6,10 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var RadixDropdown = require('@radix-ui/react-dropdown-menu');
 var reactHookForm = require('react-hook-form');
-var RadixRadioGroup = require('@radix-ui/react-radio-group');
 var RadixSelect = require('@radix-ui/react-select');
+var RadixRadioGroup = require('@radix-ui/react-radio-group');
 var RadixSwitch = require('@radix-ui/react-switch');
 
 function _interopNamespace(e) {
@@ -29,8 +30,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
+var RadixDropdown__namespace = /*#__PURE__*/_interopNamespace(RadixDropdown);
 var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
+var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 
 // src/components/app-shell/AppShell.tsx
@@ -724,6 +726,47 @@ function Avatar({ src, alt = "", fallback, size = "md", className, ...props }) {
     }
   );
 }
+
+// src/components/badge/badgeVariants.ts
+var badgeVariantClass = {
+  default: "bg-muted text-foreground border-transparent",
+  primary: "bg-primary text-primary-foreground border-transparent",
+  success: "bg-success text-success-foreground border-transparent",
+  warning: "bg-warning text-warning-foreground border-transparent",
+  destructive: "bg-destructive text-destructive-foreground border-transparent",
+  outline: "border-border bg-transparent text-foreground"
+};
+var badgeSizeClass = {
+  sm: "h-5 gap-1 px-2 text-[11px]",
+  md: "h-6 gap-1.5 px-2.5 text-xs"
+};
+var badgeDotSizeClass = {
+  sm: "size-1.5",
+  md: "size-2"
+};
+var badgeBaseClass = "inline-flex shrink-0 items-center rounded-full border font-medium leading-none whitespace-nowrap select-none transition-colors";
+var Badge = react.forwardRef(function Badge2({ variant = "default", size = "md", dot = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeBaseClass, badgeVariantClass[variant], badgeSizeClass[size], className),
+      ...props,
+      children: [
+        dot ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("inline-block rounded-full bg-current opacity-80", badgeDotSizeClass[size])
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
 var sizeClass2 = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4"
@@ -792,6 +835,166 @@ var Checkbox = react.forwardRef(function Checkbox2({
     )
   ] });
 });
+
+// src/components/dropdown-menu/dropdownMenuVariants.ts
+var dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+var dropdownMenuItemVariantClass = {
+  default: "text-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+  destructive: "text-destructive data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
+};
+var dropdownMenuItemInsetClass = "ps-8";
+var dropdownMenuSeparatorClass = "-mx-1 my-1 h-px bg-border";
+var dropdownMenuLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground select-none";
+var dropdownMenuShortcutClass = "ms-auto text-xs tracking-widest text-muted-foreground";
+var DropdownMenu = RadixDropdown__namespace.Root;
+var DropdownMenuTrigger = RadixDropdown__namespace.Trigger;
+var DropdownMenuGroup = RadixDropdown__namespace.Group;
+var DropdownMenuPortal = RadixDropdown__namespace.Portal;
+var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ className, sideOffset = 4, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDropdown__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDropdown__namespace.Content,
+    {
+      ref,
+      sideOffset,
+      "data-slot": "dropdown-menu-content",
+      className: cn(dropdownMenuContentClass, className),
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = react.forwardRef(function DropdownMenuItem2({ className, variant = "default", inset = false, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDropdown__namespace.Item,
+    {
+      ref,
+      "data-slot": "dropdown-menu-item",
+      "data-variant": variant,
+      className: cn(
+        dropdownMenuItemBaseClass,
+        dropdownMenuItemVariantClass[variant],
+        inset && dropdownMenuItemInsetClass,
+        className
+      ),
+      ...props
+    }
+  );
+});
+var DropdownMenuSeparator = react.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDropdown__namespace.Separator,
+    {
+      ref,
+      "data-slot": "dropdown-menu-separator",
+      className: cn(dropdownMenuSeparatorClass, className),
+      ...props
+    }
+  );
+});
+var DropdownMenuLabel = react.forwardRef(function DropdownMenuLabel2({ className, inset = false, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDropdown__namespace.Label,
+    {
+      ref,
+      "data-slot": "dropdown-menu-label",
+      className: cn(dropdownMenuLabelClass, inset && dropdownMenuItemInsetClass, className),
+      ...props
+    }
+  );
+});
+var DropdownMenuShortcut = react.forwardRef(
+  function DropdownMenuShortcut2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "dropdown-menu-shortcut",
+        className: cn(dropdownMenuShortcutClass, className),
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/empty-state/emptyStateVariants.ts
+var emptyStateContainerSizeClass = {
+  sm: "py-8 gap-2",
+  md: "py-14 gap-3",
+  lg: "py-20 gap-4"
+};
+var emptyStateIconWrapperSizeClass = {
+  sm: "size-10 [&_svg]:size-5",
+  md: "size-14 [&_svg]:size-7",
+  lg: "size-16 [&_svg]:size-8"
+};
+var emptyStateTitleSizeClass = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var emptyStateDescriptionSizeClass = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm"
+};
+var emptyStateActionsSpacingClass = {
+  sm: "mt-2",
+  md: "mt-4",
+  lg: "mt-6"
+};
+var emptyStateBaseClass = "flex flex-col items-center justify-center text-center px-4";
+var emptyStateIconWrapperBaseClass = "inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground";
+var EmptyState = react.forwardRef(function EmptyState2({ icon, title, description, action, size = "md", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "empty-state",
+      className: cn(emptyStateBaseClass, emptyStateContainerSizeClass[size], className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "empty-state-icon",
+            className: cn(emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass[size]),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            "data-slot": "empty-state-title",
+            className: cn("font-semibold text-foreground", emptyStateTitleSizeClass[size]),
+            children: title
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            "data-slot": "empty-state-description",
+            className: cn("max-w-sm text-muted-foreground", emptyStateDescriptionSizeClass[size]),
+            children: description
+          }
+        ) : null,
+        action ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "empty-state-actions",
+            className: cn(
+              "flex flex-wrap items-center justify-center gap-2",
+              emptyStateActionsSpacingClass[size]
+            ),
+            children: action
+          }
+        ) : null
+      ]
+    }
+  );
+});
 function Field(props) {
   const formContext = reactHookForm.useFormContext();
   if (props.name !== void 0) {
@@ -1036,130 +1239,71 @@ function LanguageSwitcher({
   );
 }
 
-// src/components/radio-group/radioGroupVariants.ts
-var radioItemSizeClass = {
-  sm: "size-4",
-  md: "size-5",
-  lg: "size-6"
-};
-var radioIndicatorSizeClass = {
-  sm: "size-1.5",
-  md: "size-2",
-  lg: "size-2.5"
-};
-var radioLabelSizeClass = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
-};
-var radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
-var radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
-var radioIndicatorDotClass = "rounded-full bg-primary";
-var radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
-var radioGroupBaseClass = "flex gap-3";
-var radioGroupOrientationClass = {
-  vertical: "flex-col",
-  horizontal: "flex-row flex-wrap"
-};
-var RadioGroup = react.forwardRef(function RadioGroup2({
-  radioSize = "md",
-  orientation = "vertical",
-  value,
-  defaultValue,
-  onValueChange,
-  onChange,
-  onBlur,
-  name,
-  disabled,
-  required,
-  id,
-  options,
+// src/components/page-header/pageHeaderVariants.ts
+var pageHeaderBaseClass = "flex w-full flex-col gap-3";
+var pageHeaderBorderedClass = "border-b border-border pb-4";
+var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
+var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
+var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
+var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
+var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
+var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
+var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
+var PageHeader = react.forwardRef(function PageHeader2({
+  title,
+  description,
+  breadcrumbs,
+  back,
+  actions,
+  as = "h1",
+  bordered = false,
   className,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid,
-  children
+  ...props
 }, ref) {
-  const generatedId = react.useId();
-  const groupId = id ?? generatedId;
-  const handleValueChange = react.useCallback(
-    (next) => {
-      onValueChange?.(next);
-      if (onChange) {
-        const synthetic = {
-          target: { value: next, name },
-          currentTarget: { value: next, name },
-          type: "change"
-        };
-        onChange(synthetic);
-      }
-    },
-    [onValueChange, onChange, name]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixRadioGroup__namespace.Root,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
     {
       ref,
-      id: groupId,
-      value,
-      defaultValue,
-      onValueChange: handleValueChange,
-      onBlur,
-      disabled,
-      required,
-      name,
-      orientation,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-invalid": ariaInvalid,
-      "data-slot": "radio-group",
-      className: cn(radioGroupBaseClass, radioGroupOrientationClass[orientation], className),
-      children: children ?? options?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-        RadioGroupOptionRow,
-        {
-          option: opt,
-          radioSize,
-          groupId
-        },
-        opt.value
-      ))
+      "data-slot": "page-header",
+      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
+        back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
+            react.createElement(
+              as,
+              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+              title
+            ),
+            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
+        ] })
+      ]
     }
   );
 });
-function RadioGroupOptionRow({ option, radioSize, groupId }) {
-  const itemId = `${groupId}-${option.value}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: itemId, className: radioOptionRowClass, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadixRadioGroup__namespace.Item,
-      {
-        id: itemId,
-        value: option.value,
-        disabled: option.disabled,
-        "data-slot": "radio-item",
-        className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], "mt-0.5"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block font-medium text-foreground", radioLabelSizeClass[radioSize]), children: option.label }),
-      option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
-    ] })
+function PageHeaderBack({ label = "Back", href, onClick, render }) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
   ] });
+  if (render) {
+    return render({
+      href,
+      onClick,
+      className: pageHeaderBackClass,
+      children: inner
+    });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, onClick, className: pageHeaderBackClass, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
 }
-var RadioGroupItem = react.forwardRef(function RadioGroupItem2({ className, radioSize = "md", ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixRadioGroup__namespace.Item,
-    {
-      ref,
-      "data-slot": "radio-item",
-      className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
-    }
-  );
-});
 
 // src/components/select/selectVariants.ts
 var selectVariantClass = {
@@ -1286,81 +1430,6 @@ var SelectItem = react.forwardRef(function SelectItem2({ className, children, ..
     /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
   ] });
 });
-
-// src/components/switch/switchVariants.ts
-var switchTrackClass = {
-  sm: "h-4 w-7",
-  md: "h-5 w-9",
-  lg: "h-6 w-11"
-};
-var switchThumbClass = {
-  sm: "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
-  md: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
-  lg: "size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"
-};
-var switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/40";
-var switchThumbBaseClass = "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform";
-var Switch = react.forwardRef(function Switch2({
-  switchSize = "md",
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  value,
-  onChange,
-  onBlur,
-  name,
-  disabled,
-  required,
-  id,
-  className,
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid
-}, ref) {
-  const generatedId = react.useId();
-  const switchId = id ?? generatedId;
-  const resolvedChecked = checked ?? (value === void 0 ? void 0 : Boolean(value));
-  const handleCheckedChange = react.useCallback(
-    (next) => {
-      onCheckedChange?.(next);
-      if (onChange) {
-        const synthetic = {
-          target: { checked: next, value: next, name },
-          currentTarget: { checked: next, value: next, name },
-          type: "change"
-        };
-        onChange(synthetic);
-      }
-    },
-    [onCheckedChange, onChange, name]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixSwitch__namespace.Root,
-    {
-      ref,
-      id: switchId,
-      checked: resolvedChecked,
-      defaultChecked,
-      onCheckedChange: handleCheckedChange,
-      onBlur,
-      disabled,
-      required,
-      name,
-      "aria-label": ariaLabel,
-      "aria-invalid": ariaInvalid,
-      "aria-describedby": ariaDescribedBy,
-      "data-slot": "switch-track",
-      className: cn(switchTrackBaseClass, switchTrackClass[switchSize], className),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        RadixSwitch__namespace.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(switchThumbBaseClass, switchThumbClass[switchSize])
-        }
-      )
-    }
-  );
-});
 function Pagination({
   pageIndex,
   pageSize,
@@ -1848,6 +1917,333 @@ function SortIndicator({ active, direction }) {
   if (!active) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
 }
+var DEFAULT_LABELS = {
+  searchPlaceholder: "Search\u2026",
+  searchAriaLabel: "Search",
+  reset: "Reset filters",
+  emptyTitle: "No results",
+  emptyDescription: "Try clearing the search or adjusting the filters."
+};
+var FILTER_WIDTH_CLASS = {
+  narrow: "w-32",
+  default: "w-44",
+  wide: "w-56"
+};
+function ListPage({
+  title,
+  description,
+  bordered = true,
+  actions,
+  data,
+  columns,
+  getRowId,
+  searchKeys,
+  filters,
+  enableRowSelection,
+  bulkActions,
+  emptyState,
+  labels: labelsProp,
+  className
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const initialFilterValues = react.useMemo(() => {
+    const init = {};
+    for (const f of filters ?? []) {
+      init[f.key] = f.defaultValue ?? f.options[0]?.value ?? "";
+    }
+    return init;
+  }, [filters]);
+  const [search, setSearch] = react.useState("");
+  const [filterValues, setFilterValues] = react.useState(initialFilterValues);
+  const setFilter = (key, value) => {
+    setFilterValues((prev) => ({ ...prev, [key]: value }));
+  };
+  const reset = () => {
+    setSearch("");
+    setFilterValues(initialFilterValues);
+  };
+  const hasActiveFilters = react.useMemo(() => {
+    if (search.trim() !== "") return true;
+    for (const f of filters ?? []) {
+      const current = filterValues[f.key];
+      const def = f.defaultValue ?? f.options[0]?.value ?? "";
+      if (current !== def) return true;
+    }
+    return false;
+  }, [search, filters, filterValues]);
+  const filtered = react.useMemo(() => {
+    return data.filter((row) => {
+      if (search.trim() && searchKeys && searchKeys.length > 0) {
+        const q = search.trim().toLowerCase();
+        const matches = searchKeys.some((key) => {
+          const val = row[key];
+          return val != null && String(val).toLowerCase().includes(q);
+        });
+        if (!matches) return false;
+      }
+      for (const f of filters ?? []) {
+        const value = filterValues[f.key];
+        const def = f.defaultValue ?? f.options[0]?.value ?? "";
+        if (value !== void 0 && value !== def) {
+          if (f.accessor(row) !== value) return false;
+        }
+      }
+      return true;
+    });
+  }, [data, search, searchKeys, filters, filterValues]);
+  const showFilterBar = Boolean(searchKeys?.length) || Boolean(filters?.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, bordered, actions }),
+    showFilterBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "flex flex-wrap items-center gap-3", children: [
+      searchKeys?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          type: "search",
+          placeholder: labels.searchPlaceholder,
+          "aria-label": labels.searchAriaLabel || labels.searchPlaceholder,
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
+          wrapperClassName: "sm:max-w-xs"
+        }
+      ) : null,
+      filters?.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          "aria-label": f.ariaLabel,
+          value: filterValues[f.key],
+          onValueChange: (v) => setFilter(f.key, v),
+          options: f.options,
+          className: FILTER_WIDTH_CLASS[f.width ?? "default"]
+        },
+        f.key
+      )),
+      hasActiveFilters ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
+        labels.reset
+      ] }) : null
+    ] }) : null,
+    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      Table,
+      {
+        "aria-label": typeof title === "string" ? title : void 0,
+        data: filtered,
+        columns,
+        getRowId,
+        enableRowSelection,
+        bulkActions
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "list-page-empty", className: "rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        icon: emptyState?.icon,
+        title: emptyState?.title ?? labels.emptyTitle,
+        description: emptyState?.description ?? labels.emptyDescription,
+        action: emptyState?.action !== void 0 ? emptyState.action : hasActiveFilters ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: reset, children: labels.reset }) : null
+      }
+    ) })
+  ] });
+}
+
+// src/components/radio-group/radioGroupVariants.ts
+var radioItemSizeClass = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+var radioIndicatorSizeClass = {
+  sm: "size-1.5",
+  md: "size-2",
+  lg: "size-2.5"
+};
+var radioLabelSizeClass = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
+var radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
+var radioIndicatorDotClass = "rounded-full bg-primary";
+var radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
+var radioGroupBaseClass = "flex gap-3";
+var radioGroupOrientationClass = {
+  vertical: "flex-col",
+  horizontal: "flex-row flex-wrap"
+};
+var RadioGroup = react.forwardRef(function RadioGroup2({
+  radioSize = "md",
+  orientation = "vertical",
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  required,
+  id,
+  options,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  children
+}, ref) {
+  const generatedId = react.useId();
+  const groupId = id ?? generatedId;
+  const handleValueChange = react.useCallback(
+    (next) => {
+      onValueChange?.(next);
+      if (onChange) {
+        const synthetic = {
+          target: { value: next, name },
+          currentTarget: { value: next, name },
+          type: "change"
+        };
+        onChange(synthetic);
+      }
+    },
+    [onValueChange, onChange, name]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixRadioGroup__namespace.Root,
+    {
+      ref,
+      id: groupId,
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      onBlur,
+      disabled,
+      required,
+      name,
+      orientation,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      "data-slot": "radio-group",
+      className: cn(radioGroupBaseClass, radioGroupOrientationClass[orientation], className),
+      children: children ?? options?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroupOptionRow,
+        {
+          option: opt,
+          radioSize,
+          groupId
+        },
+        opt.value
+      ))
+    }
+  );
+});
+function RadioGroupOptionRow({ option, radioSize, groupId }) {
+  const itemId = `${groupId}-${option.value}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: itemId, className: radioOptionRowClass, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadixRadioGroup__namespace.Item,
+      {
+        id: itemId,
+        value: option.value,
+        disabled: option.disabled,
+        "data-slot": "radio-item",
+        className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], "mt-0.5"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block font-medium text-foreground", radioLabelSizeClass[radioSize]), children: option.label }),
+      option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
+    ] })
+  ] });
+}
+var RadioGroupItem = react.forwardRef(function RadioGroupItem2({ className, radioSize = "md", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixRadioGroup__namespace.Item,
+    {
+      ref,
+      "data-slot": "radio-item",
+      className: cn(radioItemBaseClass, radioItemSizeClass[radioSize], className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: radioIndicatorBaseClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioIndicatorDotClass, radioIndicatorSizeClass[radioSize]) }) })
+    }
+  );
+});
+
+// src/components/switch/switchVariants.ts
+var switchTrackClass = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9",
+  lg: "h-6 w-11"
+};
+var switchThumbClass = {
+  sm: "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
+  md: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+  lg: "size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"
+};
+var switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/40";
+var switchThumbBaseClass = "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform";
+var Switch = react.forwardRef(function Switch2({
+  switchSize = "md",
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  value,
+  onChange,
+  onBlur,
+  name,
+  disabled,
+  required,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid
+}, ref) {
+  const generatedId = react.useId();
+  const switchId = id ?? generatedId;
+  const resolvedChecked = checked ?? (value === void 0 ? void 0 : Boolean(value));
+  const handleCheckedChange = react.useCallback(
+    (next) => {
+      onCheckedChange?.(next);
+      if (onChange) {
+        const synthetic = {
+          target: { checked: next, value: next, name },
+          currentTarget: { checked: next, value: next, name },
+          type: "change"
+        };
+        onChange(synthetic);
+      }
+    },
+    [onCheckedChange, onChange, name]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixSwitch__namespace.Root,
+    {
+      ref,
+      id: switchId,
+      checked: resolvedChecked,
+      defaultChecked,
+      onCheckedChange: handleCheckedChange,
+      onBlur,
+      disabled,
+      required,
+      name,
+      "aria-label": ariaLabel,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "data-slot": "switch-track",
+      className: cn(switchTrackBaseClass, switchTrackClass[switchSize], className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RadixSwitch__namespace.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(switchThumbBaseClass, switchThumbClass[switchSize])
+        }
+      )
+    }
+  );
+});
 
 // src/components/textarea/textareaVariants.ts
 var textareaVariantClass = {
@@ -1917,12 +2313,23 @@ var Textarea = react.forwardRef(function Textarea2({
 
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardMain = DashboardMain;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EmptyState = EmptyState;
 exports.Field = Field;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
@@ -1931,6 +2338,8 @@ exports.HeaderSearch = HeaderSearch;
 exports.HeaderTitle = HeaderTitle;
 exports.Input = Input;
 exports.LanguageSwitcher = LanguageSwitcher;
+exports.ListPage = ListPage;
+exports.PageHeader = PageHeader;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Select = Select;
@@ -1944,13 +2353,41 @@ exports.SidebarNavItem = SidebarNavItem;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Textarea = Textarea;
+exports.badgeBaseClass = badgeBaseClass;
+exports.badgeDotSizeClass = badgeDotSizeClass;
+exports.badgeSizeClass = badgeSizeClass;
+exports.badgeVariantClass = badgeVariantClass;
 exports.buttonBaseClass = buttonBaseClass;
 exports.buttonSizeClass = buttonSizeClass;
 exports.buttonVariantClass = buttonVariantClass;
 exports.cn = cn;
+exports.dropdownMenuContentClass = dropdownMenuContentClass;
+exports.dropdownMenuItemBaseClass = dropdownMenuItemBaseClass;
+exports.dropdownMenuItemInsetClass = dropdownMenuItemInsetClass;
+exports.dropdownMenuItemVariantClass = dropdownMenuItemVariantClass;
+exports.dropdownMenuLabelClass = dropdownMenuLabelClass;
+exports.dropdownMenuSeparatorClass = dropdownMenuSeparatorClass;
+exports.dropdownMenuShortcutClass = dropdownMenuShortcutClass;
+exports.emptyStateActionsSpacingClass = emptyStateActionsSpacingClass;
+exports.emptyStateBaseClass = emptyStateBaseClass;
+exports.emptyStateContainerSizeClass = emptyStateContainerSizeClass;
+exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
+exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
+exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
+exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
 exports.inputBaseClass = inputBaseClass;
 exports.inputSizeClass = inputSizeClass;
 exports.inputVariantClass = inputVariantClass;
+exports.pageHeaderActionsClass = pageHeaderActionsClass;
+exports.pageHeaderBackClass = pageHeaderBackClass;
+exports.pageHeaderBackIconClass = pageHeaderBackIconClass;
+exports.pageHeaderBaseClass = pageHeaderBaseClass;
+exports.pageHeaderBorderedClass = pageHeaderBorderedClass;
+exports.pageHeaderBreadcrumbsClass = pageHeaderBreadcrumbsClass;
+exports.pageHeaderDescriptionClass = pageHeaderDescriptionClass;
+exports.pageHeaderTitleBlockClass = pageHeaderTitleBlockClass;
+exports.pageHeaderTitleClass = pageHeaderTitleClass;
+exports.pageHeaderTitleRowClass = pageHeaderTitleRowClass;
 exports.radioGroupBaseClass = radioGroupBaseClass;
 exports.radioGroupOrientationClass = radioGroupOrientationClass;
 exports.radioIndicatorBaseClass = radioIndicatorBaseClass;