UI & permissions

@sumx/ui separates permission data (host app) from UI primitives (package).

Provider API


import { PermissionProvider, usePermission, hasPermission } from '@sumx/ui';
 
// Option A — pass checker
<PermissionProvider checkPermission={(keys) => myAppCan(keys)}>
 
// Option B — pass permission list
<PermissionProvider permissions={permissionsFromStore} />

Default without provider: only ['allow'] passes (safe for auth dialogs).

Component props

Prop	Values	Behavior
`permission`	`string[]` resource keys	Required resources
`permissionMode`	`hide` (default) \| `disable`	Hidden vs disabled

Applies to Button and DialogTrigger.

Portal mapping

Portal permissions use { resource: string, ... }[]. hasPermission in @sumx/ui matches portal helpers/permission.helper.ts semantics ('allow' bypass).

Tailwind / theme

Host tailwind.config.js owns colors (primary, etc.). @sumx/ui only adds class names; scan via:


/* src/styles/tailwind.css */
@source '../../node_modules/@sumx/ui/dist';
@source '../../node_modules/@sumx/ssr-auth-react/dist';

Do not import kit theme over portal tokens.