@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/organisms/sidebar/sidebar.stories.tsx

@@ -1,234 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITSidebar from '@/components/organisms/sidebar/sidebar';
-import { FaHome, FaUsers, FaCog, FaChartBar, FaShieldAlt, FaShoppingCart, FaRegBell } from 'react-icons/fa';
-import { expect, fn, userEvent, waitFor } from 'storybook/test';
-
-const meta: Meta<typeof ITSidebar> = {
-  title: 'Components/Layout & Navigation/ITSidebar',
-  component: ITSidebar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Un sidebar moderno, verdaderamente minimalista, hermoso y personalizable con estados colapsables y submenús. Soporta theming global con hover states y glassmorphism elegantes.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSidebar>;
-
-const baseNavigationItems = [
-  {
-    id: 'dashboard',
-    label: 'Dashboard',
-    icon: <FaHome />,
-    action: () => console.log('Dashboard clicked'),
-    isActive: true,
-  },
-  {
-    id: 'users',
-    label: 'Gestión de Usuarios',
-    icon: <FaUsers />,
-    badge: '3',
-    subitems: [
-      { id: 'users-list', label: 'Lista de Usuarios', action: () => console.log('Users list'), isActive: false },
-      { id: 'users-roles', label: 'Roles y Permisos', action: () => console.log('Roles'), isActive: false },
-    ],
-  },
-  {
-    id: 'analytics',
-    label: 'Analíticas',
-    icon: <FaChartBar />,
-    action: () => console.log('Analytics clicked'),
-    isActive: false,
-  },
-  {
-    id: 'security',
-    label: 'Seguridad',
-    icon: <FaShieldAlt />,
-    badge: '!',
-    action: () => console.log('Security clicked'),
-    isActive: false,
-  },
-  {
-    id: 'settings',
-    label: 'Configuración',
-    icon: <FaCog />,
-    subitems: [
-      { id: 'settings-general', label: 'General', action: () => console.log('General'), isActive: false },
-      { id: 'settings-theme', label: 'Apariencia', action: () => console.log('Theme'), isActive: false },
-    ],
-  },
-];
-
-export const Default: Story = {
-  args: {
-    navigationItems: baseNavigationItems,
-    isCollapsed: false,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">Contenido principal simulado. Pasa el cursor por los íconos para ver el efecto de glassmorphism en los tooltips flotantes.</div>
-    </div>
-  ),
-};
-
-export const Collapsed: Story = {
-  args: {
-    navigationItems: baseNavigationItems,
-    isCollapsed: true,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">Contenido principal... ¡Pasa el cursor sobre los íconos del sidebar para ver el efecto de glassmorphism en los tooltips flotantes!</div>
-    </div>
-  ),
-};
-
-export const WithActiveSubmenu: Story = {
-  args: {
-    navigationItems: [
-      ...baseNavigationItems.slice(0, 1).map(i => ({...i, isActive: false})),
-      {
-        ...baseNavigationItems[1],
-        isActive: true,
-        subitems: [
-          { id: 'users-list', label: 'Lista de Usuarios', action: () => console.log('Users list'), isActive: true },
-          { id: 'users-roles', label: 'Roles y Permisos', action: () => console.log('Roles'), isActive: false },
-        ]
-      },
-      ...baseNavigationItems.slice(2),
-    ],
-    isCollapsed: false,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">El menú de usuarios está expandido y activo, mostrando el conector visual sutil.</div>
-    </div>
-  ),
-};
-
-const groupedSubItemActionSpy = fn();
-
-export const Grouped: Story = {
-  args: {
-    navigationItems: [
-      { id: 'dashboard', label: 'Dashboard', icon: <FaHome />, isActive: false },
-      {
-        id: 'ventas',
-        label: 'Ventas',
-        icon: <FaShoppingCart />,
-        subitems: [
-          { id: 'ventas-resumen', label: 'Resumen', action: fn() },
-          {
-            id: 'gestion',
-            label: 'Gestión',
-            items: [
-              { id: 'ordenes', label: 'Órdenes', action: groupedSubItemActionSpy },
-              { id: 'facturas', label: 'Facturas', action: fn() },
-            ],
-          },
-          {
-            id: 'catalogo',
-            label: 'Catálogo',
-            items: [
-              { id: 'productos', label: 'Productos', action: fn() },
-              { id: 'cotizaciones', label: 'Cotizaciones', action: fn() },
-            ],
-          },
-        ],
-      },
-      { id: 'settings', label: 'Configuración', icon: <FaCog />, action: fn() },
-    ],
-    isCollapsed: false,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">Los subítems de Ventas se agrupan bajo los títulos “Gestión” y “Catálogo”; los títulos no son interactivos.</div>
-    </div>
-  ),
-  play: async ({ canvas }) => {
-    await userEvent.click(canvas.getByRole('button', { name: 'Ventas' }));
-
-    const heading = canvas.getByText('Gestión');
-    // Wait out the 400ms expand transition before asserting visibility.
-    await waitFor(() => expect(heading).toBeVisible());
-
-    // The group <ul> is named by its heading via aria-labelledby.
-    await expect(canvas.getByRole('list', { name: 'Gestión' })).toBeInTheDocument();
-
-    // The heading is not focusable and is not inside anything with a tabindex.
-    await expect(heading.closest('[tabindex]')).toBeNull();
-
-    await userEvent.click(canvas.getByRole('button', { name: 'Órdenes' }));
-    await expect(groupedSubItemActionSpy).toHaveBeenCalled();
-  },
-};
-
-export const WithNotificationBadges: Story = {
-  args: {
-    navigationItems: [
-      { id: 'dashboard', label: 'Dashboard', icon: <FaHome />, isActive: true },
-      { id: 'inbox', label: 'Bandeja', icon: <FaUsers />, badge: 12 },
-      {
-        id: 'alerts',
-        label: 'Alertas',
-        icon: <FaShieldAlt />,
-        badge: 3,
-        badgeProps: { color: 'warning', variant: 'outlined' },
-      },
-      { id: 'settings', label: 'Configuración', icon: <FaCog />, action: fn() },
-    ],
-    notification: {
-      count: 5,
-      icon: <FaRegBell />,
-      label: 'Notificaciones',
-      onClick: fn(),
-    },
-    isCollapsed: false,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">
-        Cada ítem puede llevar un ITBadget con número (`badge` + `badgeProps`) y el sidebar admite una fila de notificación con contador (`notification`).
-      </div>
-    </div>
-  ),
-};
-
-export const CollapsedNotifications: Story = {
-  args: {
-    navigationItems: [
-      { id: 'dashboard', label: 'Dashboard', icon: <FaHome />, isActive: true },
-      { id: 'inbox', label: 'Bandeja', icon: <FaUsers />, badge: 12 },
-      { id: 'settings', label: 'Configuración', icon: <FaCog /> },
-    ],
-    notification: {
-      count: 9,
-      icon: <FaRegBell />,
-      label: 'Notificaciones',
-    },
-    isCollapsed: true,
-    visibleOnMobile: true,
-  },
-  render: (args) => (
-    <div className="h-screen bg-gray-50 flex">
-      <ITSidebar {...args} />
-      <div className="flex-1 p-8 text-zinc-500 font-medium">
-        Al colapsar, la fila de notificación queda como icono + contador, y los badges de cada ítem siguen visibles como píldoras con número.
-      </div>
-    </div>
-  ),
-};

package/src/components/organisms/toast/toast.doc.mdx

@@ -1,50 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './toast.stories';
-
-<Meta of={StoriesData} />
-
-# ITToast
-
-Floating notification with automatic dismiss and severity-based styling. Renders a positioned alert with an icon, message, and optional action button. Supports six on-screen positions and four semantic types — success, error, warning, and info — plus primary and danger variants.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `message` | `string` | — | Toast message text to display. |
-| `type` | `"success" \| "error" \| "warning" \| "info" \| "primary" \| "danger" \| string` | `"info"` | Severity type determining icon and background color. |
-| `duration` | `number` | `1500` | Auto-dismiss duration in milliseconds. |
-| `position` | `"top-right" \| "top-center" \| "top-left" \| "bottom-right" \| "bottom-center" \| "bottom-left"` | `"top-right"` | On-screen placement of the toast. |
-| `onClose` | `() => void` | — | Callback invoked after the toast finishes its dismiss transition animation. |
-
-## Usage
-
-```tsx
-import { ITToast } from '@axzydev/axzy_ui_system';
-
-<ITToast message="Operation completed successfully!" type="success" />
-
-<ITToast
-  message="There was a critical error processing your request."
-  type="error"
-  position="top-center"
-  duration={5000}
-  onClose={() => console.log("dismissed")}
-/>
-```
-
-## Notes
-
-- **type** values map to icons: `success` → check circle, `error` → times circle, `warning` → exclamation triangle, `info` → info circle. Unknown types fall back to the info icon.
-- **duration** starts counting after mount; the toast fades out with a 300ms transition after the timer expires.
-- The toast renders with `position: fixed`, so it overlays all page content at the chosen screen edge.
-- A close button (`×`) is always present for manual dismissal.
-- **onClose** fires after the fade-out transition completes — useful for unmounting the toast from a list.
-- For managing multiple toasts simultaneously, wrap with a toast provider context pattern outside `ITToast`.
-- All types also accept raw hex color strings, which get applied as background behind the themed icon.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/toast/toast.stories.tsx

@@ -1,137 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITToast from "@/components/organisms/toast/toast";
-import { useState } from "react";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITToast> = {
-  title: "Components/Feedback/ITToast",
-  component: ITToast,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["success", "error", "warning", "info", "primary", "danger"],
-    },
-    position: {
-      control: "select",
-      options: [
-        "top-right",
-        "top-center",
-        "top-left",
-        "bottom-right",
-        "bottom-center",
-        "bottom-left",
-      ],
-    },
-    duration: {
-      control: { type: "number", min: 1000, max: 10000, step: 500 },
-    },
-    message: {
-      control: "text",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITToast>;
-
-const ToastTrigger = (args: any) => {
-  const [show, setShow] = useState(false);
-
-  return (
-    <div className="flex items-center justify-center p-12">
-      <ITButton
-        variant="solid"
-        color={args.type in ["success", "error", "warning", "info", "primary"] ? args.type : "primary"}
-        onClick={() => {
-          setShow(false);
-          // Small delay to allow react to unmount and remount a fresh toast for demo purposes
-          setTimeout(() => setShow(true), 10);
-        }}
-      >
-        Show Toast ({args.type})
-      </ITButton>
-      
-      {show && (
-        <ITToast
-          {...args}
-          onClose={() => {
-            setShow(false);
-            if (args.onClose) args.onClose();
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <ToastTrigger {...args} />,
-  args: {
-    message: "This is a default information message.",
-    type: "info",
-    position: "top-right",
-    duration: 3000,
-  },
-};
-
-export const Success: Story = {
-  render: (args) => <ToastTrigger {...args} />,
-  args: {
-    message: "Operation completed successfully!",
-    type: "success",
-    position: "top-right",
-    duration: 3000,
-  },
-};
-
-export const Error: Story = {
-  render: (args) => <ToastTrigger {...args} />,
-  args: {
-    message: "There was a critical error processing your request.",
-    type: "error", // Uses theme.colors.error or danger
-    position: "top-center",
-    duration: 5000,
-  },
-};
-
-export const Warning: Story = {
-  render: (args) => <ToastTrigger {...args} />,
-  args: {
-    message: "Please check your input values before proceeding.",
-    type: "warning",
-    position: "bottom-left",
-    duration: 4000,
-  },
-};
-
-/**
- * Multiple Toasts Preview
- * Note: A real implementation would manage multiple toasts via a Toast Provider Context. 
- * This just shows how the colors resolve visually.
- */
-export const AllTypesPreview = () => {
-  const types = ["primary", "success", "error", "warning", "info"] as const;
-  
-  return (
-    <div className="flex flex-col gap-8 w-[400px]">
-      <h3 className="text-gray-500 text-sm font-semibold mb-2">Static Preview (Not positioned fixed)</h3>
-      <div className="flex flex-col gap-4 relative">
-        {types.map((type) => (
-          // We inline style it simply to bypass the fixed positioning just for this preview story block.
-           <div key={type} className="relative z-0">
-             <ITToast 
-                message={`This is a ${type} notification message`} 
-                type={type} 
-                duration={999999} 
-                position="top-right" 
-             />
-           </div>
-        ))}
-      </div>
-      <p className="text-xs text-gray-400 mt-4">Note: Actual ITToasts are position: fixed and rendered at the edges of the screen according to their position prop.</p>
-    </div>
-  );
-};

package/src/components/organisms/topbar/topbar.doc.mdx

@@ -1,72 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './topbar.stories';
-
-<Meta of={StoriesData} />
-
-# ITTopBar
-
-Sticky top navigation bar with glassmorphism effect, logo, breadcrumb-style nav items, and a floating user avatar dropdown. Themed via CSS variables. Designed as a full-width header for dashboards and admin panels.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logo` | `ReactNode` | — | Optional logo element (e.g. an `<img>` or SVG component). |
-| `logoText` | `string` | — | Text displayed next to the logo as the brand/title. |
-| `centerContent` | `ReactNode` | — | Content rendered in the centered region between the left (logo / nav) and right (user menu) areas — e.g. a global search box. Rendered only when provided, and only from the `lg` breakpoint up. |
-| `children` | `ReactNode` | — | Actions rendered in the right area, immediately before the user menu — e.g. a notification bell, a help link, a theme switcher. The component owns the placement; the caller only supplies the controls. The area renders only when this prop or `userMenu` is provided. |
-| `userMenu` | `object` | — | User dropdown configuration with name, email, avatar, and menu items. |
-| `userMenu.userName` | `string` | — | Display name shown in the trigger button and dropdown header. |
-| `userMenu.userEmail` | `string` | — | User email shown in the trigger button and dropdown header. |
-| `userMenu.userImage` | `string` | — | Optional avatar image URL. Falls back to a user-circle icon when omitted. |
-| `userMenu.menuItems` | `{ label: string; onClick: () => void }[]` | — | Array of dropdown menu actions. Items containing "salir", "cerrar", or "logout" are styled as destructive. |
-| `navItems` | `ITTopBarNavItem[]` | — | Desktop navigation items rendered beside the logo. Each has `id`, `label`, `icon`, and `action`. |
-| `onNavItemClick` | `(id: string) => void` | — | Callback fired when a navigation item is clicked. Receives the item's `id`. |
-| `showMobileMenuButton` | `boolean` | `false` | Whether to show the mobile hamburger menu toggle button. |
-| `onToggleMobileMenu` | `() => void` | — | Callback fired when the mobile menu toggle button is clicked. |
-
-## Usage
-
-```tsx
-import { ITTopBar } from '@axzydev/axzy_ui_system';
-import { FaChartBar, FaUserCog } from 'react-icons/fa';
-
-<ITTopBar
-  logoText="AXZY SYSTEM"
-  showMobileMenuButton
-  userMenu={{
-    userName: 'Alejandro G.',
-    userEmail: 'alejandro@axzy.io',
-    userImage: 'https://i.pravatar.cc/48',
-    menuItems: [
-      { label: 'Mi Perfil', onClick: () => {} },
-      { label: 'Configuración', onClick: () => {} },
-      { label: 'Cerrar Sesión', onClick: () => {} },
-    ],
-  }}
-  navItems={[
-    { id: '1', label: 'Monitor', icon: <FaChartBar />, action: () => {} },
-    { id: '2', label: 'Admin', icon: <FaUserCog />, action: () => {} },
-  ]}
-  onNavItemClick={(id) => console.log('Nav:', id)}
-  onToggleMobileMenu={() => setSidebarOpen(v => !v)}
-/>
-```
-
-## Notes
-
-- The `centerContent` slot renders in a centered `flex-1` (basis 0) region that absorbs all the slack, so the left and right areas stay flush with the row edges. It is `hidden` below `lg`, which leaves the below-`lg` layout exactly as before (logo + user menu).
-- The bar uses a **glassmorphism** backdrop blur effect (`backdrop-blur-xl`), giving it a translucent appearance over scrolling content.
-- Navigation items support **icons** and highlight the active item with the primary color and an underline indicator.
-- The **user menu** dropdown opens on avatar click and closes on outside click (via `useClickOutside` hook).
-- Menu items containing "salir", "cerrar", or "logout" (case-insensitive) are automatically styled red as destructive actions.
-- When `userImage` is omitted, a `FaUserCircle` fallback icon is displayed.
-- **showMobileMenuButton** renders a hamburger icon (`<FaBars />`) for toggling a sidebar — the actual sidebar is managed externally via `onToggleMobileMenu`.
-- All color tokens are sourced from CSS custom properties set by `ITThemeProvider`.
-- The bar is `sticky` by default and sits at `top: 0` with a high z-index.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/topbar/topbar.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITTopBar from '@/components/organisms/topbar/topbar';
-import { FaShieldAlt, FaChartBar, FaUserCog } from 'react-icons/fa';
-
-const meta: Meta<typeof ITTopBar> = {
-  title: 'Components/Layout & Navigation/ITTopBar',
-  component: ITTopBar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Un Header moderno, con efecto glassmorphism, sombras suaves y un submenú de usuario flotante con diseño premium. Totalmente integrado a theme.ts.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTopBar>;
-
-const mockUserMenu = {
-  userName: 'Alejandro G.',
-  userEmail: 'alejandro@axzy.io',
-  userImage: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
-  menuItems: [
-    { label: 'Mi Perfil', onClick: () => console.log('Perfil clicked') },
-    { label: 'Configuración de Cuenta', onClick: () => console.log('Config clicked') },
-    { label: 'Preferencias', onClick: () => console.log('Preferencias clicked') },
-    { label: 'Cerrar Sesión', onClick: () => console.log('Logout clicked') },
-  ],
-};
-
-const mockNavItems = [
-  { id: '1', label: 'Monitor', icon: <FaChartBar />, action: () => console.log('Monitor') },
-  { id: '2', label: 'Seguridad', icon: <FaShieldAlt />, action: () => console.log('Seguridad') },
-  { id: '3', label: 'Admin', icon: <FaUserCog />, action: () => console.log('Admin') },
-];
-
-export const Default: Story = {
-  args: {
-    logoText: 'AXZY SYSTEM',
-    showMobileMenuButton: true,
-    userMenu: mockUserMenu,
-    navItems: mockNavItems,
-    onToggleMobileMenu: () => console.log('Toggle Mobile Menu'),
-  },
-  render: (args) => (
-    <div className="h-[400px] w-full bg-slate-50 overflow-y-auto">
-      <ITTopBar {...args} />
-      <div className="p-8">
-        <h1 className="text-2xl font-bold text-slate-800 mb-4">Contenido de ejemplo</h1>
-        <p className="text-slate-500 max-w-2xl leading-relaxed mb-6">
-          Haz scroll hacia abajo para ver cómo el ITTopBar mantiene su efecto glassmorphism 
-          (fondo desenfocado) mientras se superpone al contenido. Prueba también a hacer clic 
-          en el avatar del usuario a la derecha para ver el nuevo menú desplegable flotante.
-        </p>
-        {[1, 2, 3, 4, 5].map(i => (
-          <div key={i} className="h-24 bg-white rounded-xl border border-slate-200 shadow-sm mb-4"></div>
-        ))}
-      </div>
-    </div>
-  )
-};
-
-export const WithoutNavigation: Story = {
-  args: {
-    logoText: 'AXZY Simple',
-    showMobileMenuButton: true,
-    userMenu: {
-      ...mockUserMenu,
-      userImage: undefined, // Test without avatar image
-    },
-  },
-  render: (args) => (
-    <div className="h-[250px] w-full bg-slate-50">
-      <ITTopBar {...args} />
-    </div>
-  )
-};

package/src/components/organisms/triple-filter/tripleFilter.doc.mdx

@@ -1,62 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './tripleFilter.stories';
-
-<Meta of={StoriesData} />
-
-# ITTripleFilter
-
-Generic segmented toggle filter bar for quick data filtering. Renders a row of pill-shaped buttons where exactly one is active at a time. Supports any string or boolean value type, configurable color theming, and full-width mode. Commonly used for "All / Active / Inactive" or similar tri-state filters in tables, lists, and dashboards.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `T extends string \| boolean` | — | Currently selected value. Must match one of the option values. |
-| `onChange` | `(value: T) => void` | — | Called when the user selects a different option. Receives the new value. |
-| `options` | `ITTripleFilterOption<T>[]` | — | Array of filter options to render (typically 2–4 items). Each has `label: string` and `value: T`. |
-| `color` | `ColorsTypes` | `"primary"` | Color theme for the active indicator. One of `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `purple`, `error`, `gray`. |
-| `className` | `string` | — | Additional CSS classes applied to the outermost container. |
-
-## Usage
-
-```tsx
-import { ITTripleFilter } from '@axzydev/axzy_ui_system';
-
-<ITTripleFilter<string>
-  value={status}
-  onChange={setStatus}
-  options={[
-    { label: 'All', value: 'all' },
-    { label: 'Active', value: 'active' },
-    { label: 'Inactive', value: 'inactive' },
-  ]}
-  color="success"
-/>
-
-<ITTripleFilter<boolean>
-  value={showActive}
-  onChange={setShowActive}
-  options={[
-    { label: 'All', value: false },
-    { label: 'Active', value: true },
-  ]}
-  color="danger"
-/>
-```
-
-## Notes
-
-- Generic component — works with `string` or `boolean` value types.
-- Active option receives a full background fill matching the `color` prop, while inactive options use a subtle outlined style.
-- Exactly **one** option is always active; selecting the already-active option is a no-op.
-- **color** accepts all semantic color tokens: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `purple`, `error`, `gray`.
-- Both `error` and `danger` map to the same danger color.
-- Use `className` to control width — for full-width mode, apply `w-full`.
-- The filter bar is rendered as a horizontal inline-flex row; options wrap naturally on narrow containers.
-- Ideal for filter bars above data tables, alongside search inputs and date pickers.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/triple-filter/tripleFilter.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITTripleFilter from './tripleFilter';
-
-const meta: Meta<typeof ITTripleFilter> = {
-  title: 'Components/ITTripleFilter',
-  component: ITTripleFilter,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTripleFilter>;
-
-export const Default: Story = {
-  args: {
-    value: 'all',
-    options: [
-      { label: 'Todos', value: 'all' },
-      { label: 'Activos', value: 'active' },
-      { label: 'Inactivos', value: 'inactive' },
-    ],
-  },
-};
-
-export const Boolean: Story = {
-  args: {
-    value: true,
-    options: [
-      { label: 'Sí', value: true },
-      { label: 'No', value: false },
-    ],
-  },
-};