@producteca/producteca-ui-kit 1.80.4 → 1.82.0

package/dist/components/index.d.js

@@ -17,4 +17,5 @@ export * from './dropdown';
 export * from './link';
 export * from './draggableList';
 export * from './stepper';
-export * from './table';
+export * from './table';
+export * from './permissionOption';

package/dist/components/index.d.ts

@@ -18,3 +18,4 @@ export * from './link';
 export * from './draggableList';
 export * from './stepper';
 export * from './table';
+export * from './permissionOption';

package/dist/components/patterns/index.d.js

@@ -8,4 +8,5 @@ export * from './iconWithIdentifier';
 export * from './conditionalOperator';
 export * from './helpArticleLink';
 export * from './maintenance/maintenance';
-export * from './pickChannelModal';
+export * from './pickChannelModal';
+export * from './permissionSelector';

package/dist/components/patterns/index.d.ts

@@ -9,3 +9,4 @@ export * from './conditionalOperator';
 export * from './helpArticleLink';
 export * from './maintenance/maintenance';
 export * from './pickChannelModal';
+export * from './permissionSelector';

package/dist/components/patterns/permissionSelector/index.d.js

@@ -0,0 +1 @@
+export { PermissionSelector } from './permissionSelector';

package/dist/components/patterns/permissionSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { PermissionSelector } from './permissionSelector';
+export type { PermissionSelectorProps } from './permissionSelector.types';

package/dist/components/patterns/permissionSelector/permissionSelector.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/permissionSelector/permissionSelector.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { PermissionSelectorProps } from './permissionSelector.types';
+
+export type { PermissionSelectorProps } from './permissionSelector.types';
+export declare const PermissionSelector: React.FC<PermissionSelectorProps>;
+export default PermissionSelector;

package/dist/components/patterns/permissionSelector/permissionSelector.examples.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/permissionSelector/permissionSelector.examples.d.ts

@@ -0,0 +1,5 @@
+import { PermissionSelectorItem } from './permissionSelector.types';
+
+export declare const disabledItems: PermissionSelectorItem[];
+export declare const customizedItems: PermissionSelectorItem[];
+export declare const InteractivePermissionSelector: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/patterns/permissionSelector/permissionSelector.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/permissionSelector/permissionSelector.types.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, CSSProperties } from 'react';
+import { Permission, PermissionOptionProps } from '../../permissionOption/permissionOption.types';
+
+export type PermissionSelectorItem = Pick<PermissionOptionProps, 'permission' | 'disabled' | 'label' | 'icon'>;
+export interface PermissionSelectorProps {
+    name?: string;
+    sx?: CSSProperties;
+    value?: Permission;
+    defaultValue?: Permission;
+    items?: PermissionSelectorItem[];
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/permissionOption/index.d.js

@@ -0,0 +1 @@
+export { PermissionOption } from './permissionOption';

package/dist/components/permissionOption/index.d.ts

@@ -0,0 +1,2 @@
+export { PermissionOption } from './permissionOption';
+export type { PermissionOptionProps, Permission } from './permissionOption.types';

package/dist/components/permissionOption/permissionOption.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/permissionOption/permissionOption.d.ts

@@ -0,0 +1,4 @@
+import { PermissionOptionProps } from './permissionOption.types';
+
+export declare const PermissionOption: ({ permission, isActive, disabled, showBackground, label, icon, onClick }: PermissionOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default PermissionOption;

package/dist/components/permissionOption/permissionOption.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/permissionOption/permissionOption.types.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent, ReactElement } from 'react';
+
+export type Permission = 'read' | 'edit' | 'noAccess';
+export interface PermissionOptionProps {
+    label?: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    icon?: ReactElement;
+    permission: Permission;
+    showBackground?: boolean;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}

package/dist/locales/description.d.ts

@@ -56,3 +56,5 @@ export declare const tableExample = "\n## Uso del componente\n\nEl componente `T
 export declare const tableAsyncContentExample = "\n`Table.Body` integra `AsyncContent` internamente: recibe las mismas props de estado (`isLoading`, `error`, `empty`, `success`) y resuelve el loader, el error y el estado vac\u00EDo **dentro** de la tabla, sin desmontar el `Table.Header`.\n\nEl estado vac\u00EDo se deriva de `data` (no hace falta pasar `items`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.\n\n### Ejemplo:\n\n```tsx\n<Table columns={columns}>\n  <Table.Header />\n  <Table.Body\n    data={rows}\n    isLoading={isLoading}\n    empty={{\n      text: 'No hay datos disponibles',\n      actionText: 'Cargar datos',\n      onClick: loadData,\n    }}\n  />\n</Table>\n```\n";
 export declare const spinnerExample = "\n## Uso del componente\n\nEl componente `Spinner` muestra un indicador de carga. Acepta `size` (`xs`, `sm`, `md`, `lg`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Spinner size=\"md\" />\n```\n";
 export declare const maintenanceExample = "\n## Uso del componente\n\nEl componente `Maintenance` muestra una vista de p\u00E1gina completa para indicar que el sistema est\u00E1 en mantenimiento. Acepta `title`, `description` y `subtitle` opcionales con valores por defecto en espa\u00F1ol.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Maintenance />\n```\n\n### Con contenido personalizado:\n\n```tsx\n<Maintenance\n  title=\"Estamos mejorando\"\n  description=\"Estamos haciendo algunos ajustes para brindarte una mejor experiencia.\"\n  subtitle=\"Volvemos en unos minutos.\"\n/>\n```\n";
+export declare const permissionOptionExample = "\n## Uso del componente\n\nEl componente `PermissionOption` muestra un permiso (Lectura, Edici\u00F3n o Sin acceso) con su \u00EDcono y label. Es clickeable/seleccionable: al definir `onClick` se vuelve interactivo (accesible por teclado). `isActive` lo muestra seleccionado (fondo celeste + texto/\u00EDcono azul) y `disabled` lo aten\u00FAa (opacidad 0.5) sin interacci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PermissionOption\n  permission=\"read\"\n  isActive\n  onClick={() => setPermission('read')}\n/>\n```\n";
+export declare const permissionSelectorExample = "\n## Uso del componente\n\nEl componente `PermissionSelector` muestra los tres permisos (Sin acceso, Lectura, Edici\u00F3n) en l\u00EDnea como un selector de opci\u00F3n \u00FAnica. Al elegir un permiso, el fondo celeste se desliza desde el permiso actual hacia el seleccionado (misma t\u00E9cnica que `Tabs`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [permission, setPermission] = React.useState('noAccess')\n\n<PermissionSelector\n  value={permission}\n  onChange={setPermission}\n/>\n```\n";

package/dist/locales/es.d.ts

@@ -33,6 +33,11 @@ declare const _default: {
     loremIpsumExtraLarge: string;
     add: string;
     addPlus: string;
+    permissions: {
+        read: string;
+        edit: string;
+        noAccess: string;
+    };
     previous: string;
     continue: string;
     cancel: string;
@@ -170,6 +175,12 @@ declare const _default: {
         chip: {
             example: string;
         };
+        permissionOption: {
+            example: string;
+        };
+        permissionSelector: {
+            example: string;
+        };
         dropdown: {
             example: string;
         };
@@ -383,6 +394,22 @@ declare const _default: {
         size: string;
         number: string;
     };
+    permissionOption: {
+        permission: string;
+        isActive: string;
+        disabled: string;
+        onClick: string;
+        showBackground: string;
+    };
+    permissionSelector: {
+        ariaLabel: string;
+        value: string;
+        defaultValue: string;
+        name: string;
+        items: string;
+        customLabelExample: string;
+        onChange: string;
+    };
     warningModal: {
         warning: string;
         dontShowAgain: string;

package/dist/playground/ComponentDemos.d.ts

@@ -33,5 +33,6 @@ export declare const DemoModal: DemoComponent;
 export declare const DemoWarningModal: DemoComponent;
 export declare const DemoMenuAction: DemoComponent;
 export declare const DemoTable: DemoComponent;
+export declare const DemoPermissionSelector: DemoComponent;
 export declare const ComponentDemos: Record<string, DemoComponent>;
 export {};