feat(theme): custom className on ThemeProvider + subpath JS emit

package.json

@@ -30,9 +30,9 @@
       "require": "./dist/themes/index.js"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "import": "./dist/utils/index.js",
-      "require": "./dist/utils/index.js"
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js",
+      "require": "./dist/lib/utils.js"
     },
     "./settings": {
       "types": "./dist/components/settings/index.d.ts",

src/components/settings/settings-sidebar.tsx

@@ -169,7 +169,7 @@ export function SettingsSidebar({
                             value={search}
                             onChange={(e) => setSearch(e.target.value)}
                             className="h-8 pl-8"
-                            placeholder={searchPlaceholder}
+                            placeholder={searchPlaceholder || 'Search...'}
                             aria-label="Search settings"
                             data-testid="settings-search"
                         />

src/components/ui/alert-dialog.tsx

@@ -48,7 +48,7 @@ function AlertDialogContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <AlertDialogPortal className={ cn('pui-root', mode) } style={cssVariables}>
+    <AlertDialogPortal className={ cn('pui-root', mode, theme?.className) } style={cssVariables}>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"

src/components/ui/combobox.tsx

@@ -120,7 +120,7 @@ function ComboboxContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <ComboboxPrimitive.Portal className={ cn('pui-root', mode) } style={cssVariables}>
+    <ComboboxPrimitive.Portal className={ cn('pui-root', mode, theme?.className) } style={cssVariables}>
       <ComboboxPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}

src/components/ui/dialog.tsx

@@ -52,7 +52,7 @@ function DialogContent({
   const mode = theme?.mode ?? "light"
   const cssVariables = theme?.cssVariables ?? defaultCssVariables
   return (
-    <DialogPortal className={cn("pui-root", mode)} style={cssVariables}>
+    <DialogPortal className={cn("pui-root", mode, theme?.className)} style={cssVariables}>
       <DialogOverlay />
       <DialogPrimitive.Popup
         data-slot="dialog-content"

src/components/ui/dropdown-menu.tsx

@@ -33,7 +33,7 @@ function DropdownMenuContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <MenuPrimitive.Portal className={ cn('pui-root', mode) } style={cssVariables}>
+    <MenuPrimitive.Portal className={ cn('pui-root', mode, theme?.className) } style={cssVariables}>
       <MenuPrimitive.Positioner
         className="isolate z-50 outline-none"
         align={align}

src/components/ui/index.ts

@@ -290,7 +290,7 @@ export {
   FieldContent,
   FieldTitle,
 } from "./field";
-export { DataViews, type DataViewAction, type DataViewField, type DataViewFilterField, type DataViewFilterProps, type DataViewLayouts, type DataViewsProps, type DataViewState } from '../wordpress/dataviews';
+export { DataViews, type ConfirmActionTone, type DataViewAction, type DataViewField, type DataViewFilterField, type DataViewFilterProps, type DataViewLayouts, type DataViewsProps, type DataViewState, type DestructiveActionConfig } from '../wordpress/dataviews';
 export { DataForm, useFormValidity } from '@wordpress/dataviews/wp';
 export type {
     DataFormProps,

src/components/ui/modal.tsx

@@ -314,7 +314,7 @@ export function Modal({
 
     const container = document.createElement("div");
     container.setAttribute("data-pui-modal-root", "true");
-    container.className = cn("pui-root", mode);
+    container.className = cn("pui-root", mode, theme?.className);
     Object.assign(container.style, cssVariables);
 
     document.body.appendChild(container);
@@ -331,15 +331,15 @@ export function Modal({
         previousActiveElement.current.focus();
       }
     };
-  }, [open]);
+  }, [open, mode, cssVariables, theme?.className]);
 
   // Keep portal container class and CSS variables in sync with theme
   useEffect(() => {
     if (portalContainer) {
-      portalContainer.className = cn("pui-root", mode);
+      portalContainer.className = cn("pui-root", mode, theme?.className);
       Object.assign(portalContainer.style, cssVariables);
     }
-  }, [mode, cssVariables, portalContainer]);
+  }, [mode, cssVariables, portalContainer, theme?.className]);
 
   // Handle escape key
   useEffect(() => {

src/components/ui/popover.tsx

@@ -32,7 +32,7 @@ function PopoverContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <PopoverPrimitive.Portal className={cn("pui-root", mode)} style={cssVariables}>
+    <PopoverPrimitive.Portal className={cn("pui-root", mode, theme?.className)} style={cssVariables}>
       <PopoverPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}

src/components/ui/select.tsx

@@ -73,7 +73,7 @@ function SelectContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <SelectPrimitive.Portal className={ cn('pui-root', mode) } style={cssVariables}>
+    <SelectPrimitive.Portal className={ cn('pui-root', mode, theme?.className) } style={cssVariables}>
       <SelectPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}

src/components/ui/sheet.tsx

@@ -49,7 +49,7 @@ function SheetContent({
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
 
   return (
-    <SheetPortal className={cn("pui-root", mode)} style={cssVariables}>
+    <SheetPortal className={cn("pui-root", mode, theme?.className)} style={cssVariables}>
       <SheetOverlay />
       <SheetPrimitive.Popup
         data-slot="sheet-content"

src/components/ui/tooltip.tsx

@@ -54,7 +54,7 @@ function TooltipContent({
   const mode = theme?.mode ?? 'light';
   const cssVariables = theme?.cssVariables ?? defaultCssVariables;
   return (
-    <TooltipPrimitive.Portal className={ cn('pui-root', mode, portalClassName) } style={cssVariables}>
+    <TooltipPrimitive.Portal className={ cn('pui-root', mode, portalClassName, theme?.className) } style={cssVariables}>
       <TooltipPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}

src/components/wordpress/DataViews.stories.tsx

@@ -375,6 +375,105 @@ Both support bulk selection. Try selecting multiple rows and using the bulk tool
   },
 };
 
+/**
+ * Confirm-button color controlled by `confirmTone`:
+ * - `destructive` (default) — red button for delete/remove
+ * - `positive` — green button for approve/publish
+ * - `default` — neutral primary button
+ */
+export const ConfirmActionTones: StoryFn = () => {
+  const [view, setView] = useState<DataViewState>(createDefaultView());
+  const [selection, setSelection] = useState<string[]>([]);
+  const [users, setUsers] = useState(allUsers);
+
+  const paginatedData = paginateData(users, view);
+
+  const tonedActions: DataViewAction<User>[] = [
+    {
+      id: "approve",
+      label: "Approve",
+      icon: <CheckCircle size={16} />,
+      isDestructive: true,
+      confirmTone: "positive",
+      confirmTitle: "Approve users?",
+      confirmMessage: "Approved users gain access immediately.",
+      confirmButtonLabel: "Approve",
+      supportsBulk: true,
+      callback: async (items) => {
+        await new Promise((r) => setTimeout(r, 1000));
+        setUsers((prev) =>
+          prev.map((u) =>
+            items.some((i) => i.id === u.id) ? { ...u, status: "active" } : u
+          )
+        );
+        setSelection([]);
+      },
+    },
+    {
+      id: "mark-reviewed",
+      label: "Mark Reviewed",
+      icon: <ShieldCheck size={16} />,
+      isDestructive: true,
+      confirmTone: "default",
+      confirmTitle: "Mark as reviewed?",
+      confirmMessage: "Logs the review timestamp. Reversible.",
+      confirmButtonLabel: "Mark Reviewed",
+      supportsBulk: true,
+      callback: async (items) => {
+        await new Promise((r) => setTimeout(r, 800));
+        alert(`Marked reviewed: ${items.map((i) => i.name).join(", ")}`);
+      },
+    },
+    {
+      id: "delete",
+      label: "Delete",
+      icon: <Trash2 size={16} />,
+      isDestructive: true,
+      supportsBulk: true,
+      callback: async (items) => {
+        await new Promise((r) => setTimeout(r, 1000));
+        const ids = new Set(items.map((i) => i.id));
+        setUsers((prev) => prev.filter((u) => !ids.has(u.id)));
+        setSelection([]);
+      },
+    },
+  ];
+
+  return (
+    <div className="p-4">
+      <DataViews<User>
+        namespace="dataviews-demo"
+        data={paginatedData}
+        fields={fields}
+        view={view}
+        onChangeView={setView}
+        actions={tonedActions}
+        selection={selection}
+        onChangeSelection={setSelection}
+        paginationInfo={{
+          totalItems: users.length,
+          totalPages: getTotalPages(users.length, view.perPage),
+        }}
+        getItemId={(item) => item.id}
+      />
+    </div>
+  );
+};
+ConfirmActionTones.storyName = "Confirm Action Tones";
+ConfirmActionTones.parameters = {
+  docs: {
+    description: {
+      story: `Set \`confirmTone\` on any \`isDestructive\` action to color the confirm button.
+
+- **Approve** → \`confirmTone: "positive"\` (green / success)
+- **Mark Reviewed** → \`confirmTone: "default"\` (neutral primary)
+- **Delete** → omitted, defaults to \`"destructive"\` (red)
+
+Useful for non-destructive actions that still need a confirmation step.`,
+    },
+  },
+};
+
 /** DataViews with dynamic filters. Click "Add Filter" to add filters. */
 export const TabAndFilters: StoryFn = () => {
   const [view, setView] = useState<DataViewState>(createDefaultView());

src/components/wordpress/dataviews.tsx

@@ -58,9 +58,13 @@ function applyFiltersToTableElements<Item>(
 }
 
 // Extended action type with automatic destructive confirmation support
+export type ConfirmActionTone = 'destructive' | 'positive' | 'default';
+
 export type DestructiveActionConfig = {
     /** When true, shows an AlertDialog confirmation before executing the action callback. */
     isDestructive?: boolean;
+    /** Tone of the confirm button. Defaults to 'destructive'. Use 'positive' for approvals, 'default' for neutral confirmations. */
+    confirmTone?: ConfirmActionTone;
     /** Custom title for the confirmation dialog. Defaults to the action label. */
     confirmTitle?: string;
     /** Custom message for the confirmation dialog. */
@@ -71,6 +75,15 @@ export type DestructiveActionConfig = {
     cancelButtonLabel?: string;
 };
 
+const CONFIRM_TONE_VARIANT: Record<
+    ConfirmActionTone,
+    React.ComponentProps<typeof Button>['variant']
+> = {
+    destructive: 'destructive',
+    positive: 'success',
+    default: 'default'
+};
+
 // Re-export types from @wordpress/dataviews with prefixed names to avoid conflicts
 export type DataViewAction<Item> = Action<Item> & DestructiveActionConfig;
 export type { Field as DataViewField, SupportedLayouts as DataViewLayouts, View as DataViewState };
@@ -1017,7 +1030,12 @@ export function DataViews<Item>(props: DataViewsProps<Item>) {
                                     __('Cancel', 'default')}
                             </AlertDialogCancel>
                             <AlertDialogAction
-                                variant="destructive"
+                                variant={
+                                    CONFIRM_TONE_VARIANT[
+                                        pendingDestructiveAction.action.confirmTone ??
+                                            'destructive'
+                                    ]
+                                }
                                 onClick={handleDestructiveConfirm}
                                 disabled={isConfirming}>
                                 {isConfirming && <Spinner className="mr-2" />}

src/index.ts

@@ -290,7 +290,9 @@ export {
     type CurrencyInputProps,
     type CurrencyOption,
     type CheckboxProps,
+    type ConfirmActionTone,
     type DataViewAction,
+    type DestructiveActionConfig,
     type DataViewField,
     type DataViewFilterField,
     type DataViewFilterProps,

src/providers/theme-provider.tsx

@@ -196,6 +196,7 @@ export interface ThemeContextValue {
   tokens: ThemeTokens;
   resolvedMode: "light" | "dark";
   cssVariables: Record<string, string>;
+  className?: string;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -497,8 +498,9 @@ export function ThemeProvider({
       tokens: mergedTokens,
       resolvedMode,
       cssVariables,
+      className,
     }),
-    [pluginId, mode, setMode, mergedTokens, resolvedMode, cssVariables],
+    [pluginId, mode, setMode, mergedTokens, resolvedMode, cssVariables, className],
   );
 
   return (

webpack.config.js

@@ -6,6 +6,11 @@ module.exports = {
     ...defaultConfig,
     entry: {
         index: './src/index.ts',
+        'components/ui/index': './src/components/ui/index.ts',
+        'components/settings/index': './src/components/settings/index.tsx',
+        'providers/index': './src/providers/index.ts',
+        'themes/index': './src/themes/index.ts',
+        'lib/utils': './src/lib/utils.ts',
     },
     output: {
         ...defaultConfig.output,