@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/molecules/search-select/search-select.doc.mdx

@@ -1,77 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './search-select.stories';
-
-<Meta of={StoriesData} />
-
-# ITSearchSelect
-
-Searchable dropdown select with support for local client-side filtering and remote API search. Includes validation error display, label support, and customizable field mapping.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | — | Name attribute for form integrations. |
-| `label` | `string` | — | Label displayed above the select input. |
-| `placeholder` | `string` | — | Placeholder text shown when no value is selected. |
-| `value` | `string \| number` | — | Currently selected value (controlled). |
-| `options` | `ITSearchSelectOption[]` | — | Array of options for static or remote data. `{ label, value, ...custom }`. |
-| `valueField` | `string` | `"value"` | Field used as the option value. |
-| `labelField` | `string` | `"label"` | Field used as the option display label. |
-| `onChange` | `(value: string \| number, option?: ITSearchSelectOption) => void` | — | Callback fired when selection changes. |
-| `onBlur` | `(e: FocusEvent<any>) => void` | — | Callback fired when input loses focus. |
-| `disabled` | `boolean` | `false` | Whether the component is disabled. |
-| `className` | `string` | — | Additional CSS classes for the container. |
-| `touched` | `boolean` | — | Whether the field has been touched (for form validation). |
-| `required` | `boolean` | `false` | Whether the field is required. Shows a red asterisk. |
-| `error` | `string \| boolean` | — | Error message or boolean indicating an error state. |
-| `readOnly` | `boolean` | `false` | Whether the field is read-only. |
-| `onSearch` | `(query: string) => void` | — | Callback for server-side search. Receives the search query string. |
-| `isLoading` | `boolean` | `false` | Whether options are being loaded from an external API. |
-| `noResultsMessage` | `string` | `"No se encontraron resultados"` | Message displayed when no results match the search. |
-| `renderOption` | `(option, state: { isSelected, searchTerm }) => ReactNode` | — | Custom template for each dropdown option. |
-| `clearable` | `boolean` | `true` | Shows a clear (X) button inside the input. |
-| `onClear` | `() => void` | — | Callback fired when the clear button is pressed. |
-
-## Usage
-
-```tsx
-import { ITSearchSelect } from '@axzydev/axzy_ui_system';
-
-<ITSearchSelect
-  name="user"
-  label="Select User"
-  placeholder="Search user..."
-  options={users}
-  value={selected}
-  onChange={(val) => setSelected(val)}
-/>
-
-<ITSearchSelect
-  name="remote"
-  label="API Search"
-  placeholder="Type to search..."
-  options={remoteOptions}
-  isLoading={loading}
-  onSearch={(query) => fetchResults(query)}
-  value={selected}
-  onChange={(val) => setSelected(val)}
-/>
-```
-
-## Notes
-
-- **Static mode**: provide an `options` array and the component filters client-side as the user types.
-- **Remote mode**: provide an `onSearch` callback and manage `options`/`isLoading` externally for API-driven searches.
-- `valueField` and `labelField` allow custom option object structures beyond `{ value, label }`.
-- Validation states: `error` string displays inline, `touched` gates error visibility, `required` adds a red asterisk.
-- `readOnly` mode renders the selected value as non-interactive text.
-- Supports `className` for style overrides and width control.
-- **Custom options**: `renderOption` replaces the default option rendering and receives `{ isSelected, searchTerm }`.
-- **Clear button**: an (X) button appears inside the input when there is a search term or a selected value; `clearable={false}` disables it. Clearing resets the search and selection, and calls `onSearch("")` / `onClear()`.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/search-select/search-select.stories.tsx

@@ -1,146 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSearchSelect from "@/components/molecules/search-select/search-select";
-import { useState } from "react";
-import { ITSearchSelectOption } from "./search-select.props";
-
-const meta: Meta<typeof ITSearchSelect> = {
-  title: "Components/Form Elements/ITSearchSelect",
-  component: ITSearchSelect,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    disabled: { control: "boolean" },
-    required: { control: "boolean" },
-    error: { control: "text" },
-    isLoading: { control: "boolean" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSearchSelect>;
-
-const options: ITSearchSelectOption[] = [
-  { value: 1, label: "Juan Pérez" },
-  { value: 2, label: "María García" },
-  { value: 3, label: "Carlos Rodríguez" },
-  { value: 4, label: "Ana Martínez" },
-  { value: 5, label: "Luis López" },
-  { value: 6, label: "Elena Sánchez" },
-  { value: 7, label: "Roberto Díaz" },
-  { value: 8, label: "Marta Castro" },
-];
-
-const SearchSelectWrapper = (args: any) => {
-  const [value, setValue] = useState(args.value || "");
-  const [touched, setTouched] = useState(false);
-
-  return (
-    <div className="w-[400px]">
-      <ITSearchSelect
-        {...args}
-        value={value}
-        onChange={(val) => setValue(val)}
-        onBlur={() => setTouched(true)}
-        touched={touched}
-      />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <SearchSelectWrapper {...args} />,
-  args: {
-    name: "search-select",
-    options: options,
-    placeholder: "Busca un usuario...",
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => <SearchSelectWrapper {...args} />,
-  args: {
-    name: "search-select",
-    label: "Seleccionar Usuario",
-    options: options,
-    placeholder: "Busca un usuario...",
-    required: true,
-  },
-};
-
-export const RemoteAPI: Story = {
-  render: (args) => {
-    const [remoteOptions, setRemoteOptions] = useState<ITSearchSelectOption[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [val, setVal] = useState<string | number>("");
-
-    const handleSearch = (query: string) => {
-      setLoading(true);
-      // Simular llamada a API
-      setTimeout(() => {
-        const results = options.filter(o => 
-          o.label.toLowerCase().includes(query.toLowerCase())
-        );
-        setRemoteOptions(results);
-        setLoading(false);
-      }, 1000);
-    };
-
-    return (
-      <div className="w-[400px]">
-        <ITSearchSelect
-          {...args}
-          value={val}
-          options={remoteOptions}
-          isLoading={loading}
-          onSearch={handleSearch}
-          onChange={(v) => setVal(v)}
-        />
-      </div>
-    );
-  },
-  args: {
-    name: "remote-search",
-    label: "Búsqueda en API (Simulada)",
-    placeholder: "Escribe para buscar...",
-  },
-};
-
-export const CustomOptionTemplate: Story = {
-  render: (args) => <SearchSelectWrapper {...args} />,
-  args: {
-    name: "search-select",
-    label: "Usuario (template personalizado)",
-    options: options,
-    placeholder: "Busca un usuario...",
-    renderOption: (option, { isSelected, searchTerm }) => (
-      <div className="flex items-center justify-between gap-2">
-        <span className={isSelected ? "font-semibold" : ""}>{option.label}</span>
-        {searchTerm && (
-          <span className="text-xs text-secondary-400">{option.label}</span>
-        )}
-      </div>
-    ),
-  },
-};
-
-export const WithError: Story = {
-  render: (args) => <SearchSelectWrapper {...args} />,
-  args: {
-    name: "search-select",
-    label: "Campo con Error",
-    options: options,
-    error: "Este campo es obligatorio",
-    touched: true,
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <SearchSelectWrapper {...args} />,
-  args: {
-    name: "search-select",
-    label: "Campo Deshabilitado",
-    options: options,
-    disabled: true,
-  },
-};

package/src/components/molecules/select/select.doc.mdx

@@ -1,75 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './select.stories';
-
-<Meta of={StoriesData} />
-
-# ITSelect
-
-Native-like dropdown select with validation error display, label support, and read-only mode. Styled consistently with ITInput for seamless form integration.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | — | Name attribute for the underlying `<select>` element. |
-| `options` | `OptionType[]` | — | Array of option objects with value/label key-value pairs. `{ [key: string]: string }`. |
-| `valueField` | `string` | `"value"` | Key in each option object used as the option value. |
-| `labelField` | `string` | `"label"` | Key in each option object used as the display label. |
-| `label` | `string` | — | Label text rendered above the select. |
-| `placeholder` | `string` | — | Placeholder text for the default empty option. |
-| `value` | `string` | — | Currently selected value (controlled). |
-| `onChange` | `(event: ChangeEvent<HTMLSelectElement>) => void` | — | Callback fired on selection change. |
-| `onBlur` | `(event: FocusEvent<HTMLSelectElement>) => void` | — | Callback fired on blur. |
-| `variant` | `ColorsTypes` | — | Theme color variant for the select border and focus ring. |
-| `size` | `SizesTypes` | — | Control size: `"sm"`, `"md"`, or `"lg"`. |
-| `disabled` | `boolean` | `false` | Whether the select is disabled. |
-| `className` | `string` | — | Additional CSS classes on the `<select>` element. |
-| `touched` | `boolean` | — | Marks the field as touched (for validation error display). |
-| `error` | `string \| boolean` | — | Error message string, or `true` for a default required error message. |
-| `required` | `boolean` | `false` | Whether the field is required. Shows a red asterisk on the label. |
-| `autoFocus` | `boolean` | `false` | Autofocus the select on mount. |
-| `readOnly` | `boolean` | `false` | Read-only mode: shows the current value as a single disabled option. |
-
-## Usage
-
-```tsx
-import { ITSelect } from '@axzydev/axzy_ui_system';
-
-<ITSelect
-  name="country"
-  label="Country"
-  placeholder="Select a country"
-  options={[
-    { value: "mx", label: "Mexico" },
-    { value: "us", label: "United States" },
-  ]}
-  value={selected}
-  onChange={(e) => setSelected(e.target.value)}
-/>
-
-<ITSelect
-  name="status"
-  label="Status"
-  options={statusOptions}
-  value={status}
-  onChange={(e) => setStatus(e.target.value)}
-  required
-  error={touched && !status ? "This field is required" : undefined}
-/>
-```
-
-## Notes
-
-- Custom `valueField` and `labelField` support option objects with arbitrary key names.
-- Error state: provides a red border and inline error message when `touched` is true and `error` is set.
-- `required` adds a red asterisk on the label and shows a default required error if no custom error is given.
-- `readOnly` renders the selected value as a single non-interactive option.
-- Arrow-down icon rendered via `FaAngleDown` from react-icons.
-- Styles inherited from the theme's `input` configuration for visual consistency with ITInput.
-- The `variant` prop maps to theme color tokens for border and focus ring colors.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/select/select.stories.tsx

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITSelect from "@/components/molecules/select/select";
-import { useState } from "react";
-
-const meta: Meta<typeof ITSelect> = {
-  title: "Components/Form Elements/ITSelect",
-  component: ITSelect,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    disabled: { control: "boolean" },
-    required: { control: "boolean" },
-    error: { control: "text" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITSelect>;
-
-const options = [
-  { value: "option1", label: "Option 1" },
-  { value: "option2", label: "Option 2" },
-  { value: "option3", label: "Option 3" },
-  { value: "option4", label: "Option 4" },
-];
-
-const SelectWrapper = (args: any) => {
-  const [value, setValue] = useState(args.value || "");
-  const [touched, setTouched] = useState(false);
-
-  return (
-    <div className="w-[300px]">
-      <ITSelect
-        {...args}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={() => setTouched(true)}
-        touched={touched}
-      />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    name: "select",
-    options: options,
-    placeholder: "Select an option",
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    name: "select",
-    label: "Select Label",
-    options: options,
-    placeholder: "Select an option",
-  },
-};
-
-export const WithError: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    name: "select",
-    label: "Select with Error",
-    options: options,
-    placeholder: "Select an option",
-    error: "This field is required",
-    touched: true, // Force touched to show error immediately
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    name: "select",
-    label: "Disabled Select",
-    options: options,
-    placeholder: "Select an option",
-    disabled: true,
-  },
-};

package/src/components/molecules/stat-card/stat-card.doc.mdx

@@ -1,48 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './stat-card.stories';
-
-<Meta of={StoriesData} />
-
-# ITStatCard
-
-Metric card displaying a label, value, and optional trend indicator with color theme.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | — | Card label |
-| `value` | `string \| number` | — | Primary metric value |
-| `trend` | `'up' \| 'down' \| 'neutral'` | — | Trend direction |
-| `trendValue` | `string \| number` | — | Trend percentage or value |
-| `icon` | `ReactNode` | — | Icon displayed on the card |
-| `color` | `string` | — | Color theme |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Card size variant |
-| `subtitle` | `string` | — | Secondary descriptive text |
-| `loading` | `boolean` | `false` | Show loading skeleton |
-| `onClick` | `() => void` | — | Click handler |
-
-## Usage
-
-```tsx
-import { ITStatCard } from '@axzydev/axzy_ui_system';
-
-<ITStatCard label="Revenue" value="$12,430" trend="up" trendValue="12.5%" color="success" />
-<ITStatCard label="Users" value="1,024" icon={<UsersIcon />} size="lg" />
-<ITStatCard label="Bounce Rate" value="42%" trend="down" trendValue="3.1%" color="danger" subtitle="vs last week" />
-<ITStatCard label="Loading" loading />
-```
-
-## Notes
-
-- `trend` direction renders an arrow indicator with formatted `trendValue`
-- `loading` shows a skeleton placeholder for async data
-- Three sizes: sm, md, lg
-- Clickable via `onClick` for drill-down dashboards
-- `subtitle` provides supporting context below the value
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/stat-card/stat-card.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITStatCard from "@/components/molecules/stat-card/stat-card";
-import { FaArrowUp } from "react-icons/fa";
-
-const meta: Meta<typeof ITStatCard> = {
-  title: "Components/Data Display/ITStatCard",
-  component: ITStatCard,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITStatCard>;
-
-export const Default: Story = {
-  args: {
-    label: "Usuarios Activos",
-    value: "1,245",
-    trend: "+12.5%",
-    trendDirection: "up",
-  },
-};
-
-export const Negative: Story = {
-  args: {
-    label: "Tickets Abiertos",
-    value: "23",
-    trend: "-8.2%",
-    trendDirection: "down",
-    color: "bg-rose-50 dark:bg-rose-950/20",
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    label: "Ventas Hoy",
-    value: "$4,320",
-    trend: "+5.4%",
-    trendDirection: "up",
-    icon: <FaArrowUp size={12} />,
-  },
-};

package/src/components/molecules/stepper/stepper.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './stepper.stories';
-
-<Meta of={StoriesData} />
-
-# ITStepper
-
-Step-by-step wizard indicator for multi-step workflows with configurable layout and icons.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `steps` | `{ label: string; description?: string; icon?: ReactNode }[]` | — | Step definitions |
-| `activeStep` | `number` | `0` | Zero-indexed active step |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation |
-| `variant` | `'default' \| 'dot' \| 'icon'` | `'default'` | Visual style variant |
-| `clickable` | `boolean` | `false` | Allow clicking steps to navigate |
-| `onStepClick` | `(index: number) => void` | — | Click handler for step navigation |
-| `color` | `string` | — | Color theme |
-
-## Usage
-
-```tsx
-import { ITStepper } from '@axzydev/axzy_ui_system';
-
-const steps = [
-  { label: 'Details', description: 'Enter your info' },
-  { label: 'Payment', description: 'Choose method' },
-  { label: 'Confirm', description: 'Review and submit' },
-];
-
-<ITStepper steps={steps} activeStep={0} />
-<ITStepper steps={steps} activeStep={1} variant="dot" orientation="vertical" />
-<ITStepper steps={[
-  { label: 'Upload', icon: <UploadIcon /> },
-  { label: 'Review', icon: <CheckIcon /> },
-]} variant="icon" />
-<ITStepper steps={steps} clickable onStepClick={(i) => console.log(i)} />
-```
-
-## Notes
-
-- `variant="default"` shows numbered step circles
-- `variant="dot"` shows minimal dot indicators
-- `variant="icon"` uses custom icons per step instead of numbers
-- `clickable` + `onStepClick` enables step-based navigation
-- Optional `description` renders below each step label
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/molecules/stepper/stepper.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITStepper from "@/components/molecules/stepper/stepper";
-import { useState } from "react";
-import { FaUser, FaIdCard, FaCheckCircle } from "react-icons/fa";
-
-const meta: Meta<typeof ITStepper> = {
-  title: "Components/Layout & Navigation/ITStepper",
-  component: ITStepper,
-  parameters: {
-    layout: "padded", // Gives the stepper breathing room
-  },
-  argTypes: {
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-    },
-    currentStep: {
-      control: { type: "number", min: 0, max: 2 },
-    },
-    allowClickToJump: {
-      control: "boolean",
-    },
-    useIcons: {
-      control: "boolean",
-    },
-    scrollableContent: {
-      control: "boolean",
-    },
-    disableNext: {
-      control: "boolean",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ITStepper>;
-
-// --- MOCK CONTENT ---
-
-const step1Content = (
-  <div className="flex flex-col gap-4">
-    <h3 className="text-lg font-bold">Personal Information</h3>
-    <p className="text-gray-600">Please provide your basic details to get started.</p>
-    <div className="grid grid-cols-2 gap-4 mt-4">
-      <div className="bg-gray-100 h-10 rounded animate-pulse"></div>
-      <div className="bg-gray-100 h-10 rounded animate-pulse"></div>
-      <div className="bg-gray-100 h-10 rounded animate-pulse col-span-2"></div>
-    </div>
-  </div>
-);
-
-const step2Content = (
-  <div className="flex flex-col gap-4">
-    <h3 className="text-lg font-bold">Address Details</h3>
-    <p className="text-gray-600">Where should we send your documents?</p>
-    <div className="grid grid-cols-3 gap-4 mt-4">
-      <div className="bg-gray-100 h-10 rounded animate-pulse col-span-3"></div>
-      <div className="bg-gray-100 h-10 rounded animate-pulse col-span-2"></div>
-      <div className="bg-gray-100 h-10 rounded animate-pulse"></div>
-    </div>
-  </div>
-);
-
-const step3Content = (
-  <div className="flex flex-col gap-4 items-center justify-center h-full text-center py-8">
-    <FaCheckCircle className="w-16 h-16 text-success-500 mb-4" />
-    <h3 className="text-2xl font-bold">You're all set!</h3>
-    <p className="text-gray-600 max-w-sm">Review your information before final submission. If everything looks good, click Finish.</p>
-  </div>
-);
-
-const longScrollableContent = (
-  <div className="flex flex-col gap-4">
-    <h3 className="text-lg font-bold">Terms and Conditions</h3>
-    {Array.from({ length: 15 }).map((_, i) => (
-      <p key={i} className="text-gray-600">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-    ))}
-  </div>
-);
-
-const basicSteps = [
-  { label: "Personal Info", content: step1Content },
-  { label: "Address", content: step2Content },
-  { label: "Confirmation", content: step3Content },
-];
-
-const iconSteps = [
-  { label: "Account", icon: <FaUser />, content: step1Content },
-  { label: "Identity", icon: <FaIdCard />, content: step2Content },
-  { label: "Complete", icon: <FaCheckCircle />, content: step3Content },
-];
-
-const scrollableSteps = [
-  { label: "Terms", content: longScrollableContent },
-  { label: "Privacy Policy", content: longScrollableContent },
-];
-
-
-// --- INTERACTIVE WRAPPERS ---
-
-const StepperWrapper = (args: any) => {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  return (
-    <ITStepper
-      {...args}
-      currentStep={currentStep}
-      onStepChange={setCurrentStep}
-      onFinish={() => alert("Stepper Finished!")}
-    />
-  );
-};
-
-
-// --- STORIES ---
-
-export const Default: Story = {
-  render: (args) => <StepperWrapper {...args} />,
-  args: {
-    steps: basicSteps,
-    color: "primary",
-    allowClickToJump: true,
-  },
-};
-
-export const WithIcons: Story = {
-  render: (args) => <StepperWrapper {...args} />,
-  args: {
-    steps: iconSteps,
-    color: "purple",
-    useIcons: true,
-  },
-};
-
-export const StrictSequential: Story = {
-  render: (args) => <StepperWrapper {...args} />,
-  args: {
-    steps: basicSteps,
-    color: "danger",
-    allowClickToJump: false, // User must use Next/Back buttons
-  },
-};
-
-export const ScrollableContent: Story = {
-  render: (args) => <StepperWrapper {...args} />,
-  args: {
-    steps: scrollableSteps,
-    color: "info",
-    scrollableContent: true,
-    maxContentHeight: "300px", // Restricts height to demonstrate scrolling
-  },
-};