@axzydev/axzy_ui_system 1.2.6 → 1.2.8

package/src/components/topbar/topbar.tsx

@@ -4,6 +4,44 @@ import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
 import ITText from "@/components/text/text";
 
+/**
+ * ITTopBar — sticky top navigation bar with logo, nav items, and user avatar dropdown.
+ *
+ * Renders a horizontal header bar that includes an optional logo and brand text,
+ * desktop navigation links, a mobile hamburger toggle, and a user-menu dropdown
+ * with avatar, name, email, and action items. Destructive actions (labels containing
+ * "salir", "cerrar", or "logout") are automatically highlighted in red.
+ *
+ * @example
+ * // Basic topbar with user menu
+ * <ITTopBar
+ *   logo={<LogoIcon />}
+ *   logoText="Dashboard"
+ *   userMenu={{
+ *     userName: "Jane Doe",
+ *     userEmail: "jane@example.com",
+ *     userImage: "https://i.pravatar.cc/48",
+ *     menuItems: [
+ *       { label: "Settings", onClick: () => {} },
+ *       { label: "Logout", onClick: () => {} },
+ *     ],
+ *   }}
+ * />
+ *
+ * @example
+ * // Topbar with navigation items and mobile toggle
+ * <ITTopBar
+ *   logo={<BrandLogo />}
+ *   logoText="Admin"
+ *   navItems={[
+ *     { id: "home", label: "Home", action: () => {} },
+ *     { id: "reports", label: "Reports", action: () => {} },
+ *   ]}
+ *   onNavItemClick={(id) => navigate(id)}
+ *   showMobileMenuButton
+ *   onToggleMobileMenu={() => setSidebarOpen((v) => !v)}
+ * />
+ */
 export default function ITTopBar({
   logo,
   logoText,

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

@@ -0,0 +1,62 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as Stories from './tripleFilter.stories';
+
+<Meta of={Stories} />
+
+# 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/triple-filter/tripleFilter.props.ts

@@ -2,14 +2,21 @@ import React from 'react';
 import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITTripleFilterOption<T> {
+  /** Display label for the filter button. */
   label: string;
+  /** The value associated with this option (string or boolean). */
   value: T;
 }
 
 export interface ITTripleFilterProps<T> {
+  /** Currently selected value. Must match one of the option values. */
   value: T;
+  /** Called when the user selects a different option. Receives the new value. */
   onChange: (value: T) => void;
+  /** Array of filter options to render (typically 2-4 items, e.g. All / Active / Inactive). */
   options: ITTripleFilterOption<T>[];
+  /** Color theme for the active indicator. One of "primary", "secondary", "success", "danger", "warning", "info", "purple", "error", "gray". @default "primary" */
   color?: ColorsTypes;
+  /** Additional CSS classes applied to the outermost container. */
   className?: string;
 }

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

@@ -15,6 +15,38 @@ const colorMap: Record<ColorsTypes, string> = {
   gray: "text-secondary-600",
 };
 
+/**
+ * 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 and configurable color theming.
+ * Commonly used for "All / Active / Inactive" or similar tri-state filters.
+ *
+ * @example
+ * // Boolean triple filter
+ * <ITTripleFilter<boolean>
+ *   value={showActive}
+ *   onChange={setShowActive}
+ *   options={[
+ *     { label: "All", value: false },
+ *     { label: "Active", value: true },
+ *   ]}
+ * />
+ *
+ * @example
+ * // String triple filter with danger color
+ * <ITTripleFilter<string>
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={[
+ *     { label: "Pending", value: "pending" },
+ *     { label: "Approved", value: "approved" },
+ *     { label: "Rejected", value: "rejected" },
+ *   ]}
+ *   color="danger"
+ *   className="my-4"
+ * />
+ */
 /**
  * @description Generic triple/segmented filter component with color support.
  */

package/src/index.css

@@ -28,6 +28,8 @@
   --color-secondary-400: #94a3b8;
   --color-secondary-500: #64748b;
   --color-secondary-600: #475569;
+
+  --color-text-muted: #475569;
   --color-secondary-700: #334155;
   --color-secondary-800: #1e293b;
   --color-secondary-900: #0f172a;
@@ -99,6 +101,21 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.col-span-full { grid-column: 1 / -1; }
+
 .col-span-1 { grid-column: span 1 / span 1; }
 .col-span-2 { grid-column: span 2 / span 2; }
 .col-span-3 { grid-column: span 3 / span 3; }