@axzydev/axzy_ui_system 1.2.16 → 1.3.1

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.16",
+  "version": "1.3.1",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -18,6 +18,7 @@ import {
   CardShowcase,
   LayoutShowcase,
   TextShowcase,
+  AccordionShowcase,
 } from "./showcases/StructureShowcases";
 import {
   StackShowcase,
@@ -41,18 +42,25 @@ import {
   SlideToggleShowcase,
   DropfileShowcase,
   FormBuilderShowcase,
+  WysiwygShowcase,
+  FieldShowcase,
+  MaskedInputShowcase,
+  MultiSelectShowcase,
+  ChipInputShowcase,
 } from "./showcases/FormShowcases";
 import {
   TableShowcase,
   DataTableShowcase,
   BadgetShowcase,
   ImageShowcase,
+  ChipShowcase,
 } from "./showcases/DataShowcases";
 import {
   TabsShowcase,
   StepperShowcase,
   PaginationShowcase,
   TripleFilterShowcase,
+  DropdownMenuShowcase,
 } from "./showcases/NavigationShowcases";
 import {
   DialogShowcase,
@@ -86,6 +94,7 @@ const categories = [
       { id: "grid", label: "ITGrid" },
       { id: "card", label: "ITCard" },
       { id: "text", label: "ITText" },
+      { id: "accordion", label: "ITAccordion" },
       { id: "pageheader", label: "ITPageHeader" },
       { id: "page", label: "ITPage" },
       { id: "screen-dashboard", label: "Dashboard Ejemplo" },
@@ -101,11 +110,16 @@ const categories = [
       { id: "input", label: "ITInput" },
       { id: "select", label: "ITSelect" },
       { id: "searchselect", label: "ITSearchSelect" },
+      { id: "multiselect", label: "ITMultiSelect" },
+      { id: "chipinput", label: "ITChipInput" },
+      { id: "field", label: "ITField" },
       { id: "datepicker", label: "ITDatePicker" },
       { id: "timepicker", label: "ITTimePicker" },
+      { id: "maskedinput", label: "ITMaskedInput" },
       { id: "calendar", label: "ITCalendar" },
       { id: "slidetoggle", label: "ITSlideToggle" },
       { id: "dropfile", label: "ITDropfile" },
+      { id: "wysiwyg", label: "ITWysiwyg" },
       { id: "formbuilder", label: "ITFormBuilder" },
     ],
   },
@@ -117,6 +131,7 @@ const categories = [
       { id: "table", label: "ITTable" },
       { id: "datatable", label: "ITDataTable" },
       { id: "badget", label: "ITBadget" },
+      { id: "chip", label: "ITChip" },
       { id: "image", label: "ITImage" },
     ],
   },
@@ -129,6 +144,7 @@ const categories = [
       { id: "stepper", label: "ITStepper" },
       { id: "pagination", label: "ITPagination" },
       { id: "triplefilter", label: "ITTripleFilter" },
+      { id: "dropdownmenu", label: "ITDropdownMenu" },
     ],
   },
   {
@@ -249,6 +265,8 @@ function App() {
         return <CardShowcase />;
       case "text":
         return <TextShowcase />;
+      case "accordion":
+        return <AccordionShowcase />;
       case "pageheader":
         return <PageHeaderShowcase />;
       case "page":
@@ -268,16 +286,26 @@ function App() {
         return <SelectShowcase />;
       case "searchselect":
         return <SearchSelectShowcase />;
+      case "multiselect":
+        return <MultiSelectShowcase />;
+      case "chipinput":
+        return <ChipInputShowcase />;
+      case "field":
+        return <FieldShowcase />;
       case "datepicker":
         return <DatePickerShowcase />;
       case "timepicker":
         return <TimePickerShowcase />;
+      case "maskedinput":
+        return <MaskedInputShowcase />;
       case "calendar":
         return <CalendarShowcase />;
       case "slidetoggle":
         return <SlideToggleShowcase />;
       case "dropfile":
         return <DropfileShowcase />;
+      case "wysiwyg":
+        return <WysiwygShowcase />;
       case "formbuilder":
         return <FormBuilderShowcase />;
       // Data
@@ -287,6 +315,8 @@ function App() {
         return <DataTableShowcase />;
       case "badget":
         return <BadgetShowcase />;
+      case "chip":
+        return <ChipShowcase />;
       case "image":
         return <ImageShowcase />;
       // Navigation
@@ -298,6 +328,8 @@ function App() {
         return <PaginationShowcase />;
       case "triplefilter":
         return <TripleFilterShowcase />;
+      case "dropdownmenu":
+        return <DropdownMenuShowcase />;
       // Feedback
       case "dialog":
         return <DialogShowcase />;

package/src/components/atoms/badget/badget.tsx

@@ -32,9 +32,7 @@ export default function ITBadget({
 
   const getStyle = () => {
     const style: React.CSSProperties = {
-      fontSize: config.fontSize,
       fontWeight: config.fontWeight,
-      padding: config.padding,
       borderRadius: config.borderRadius, // '9999px' in theme
       borderWidth: '1px', // Default border width for consistency
       borderStyle: 'solid',
@@ -60,8 +58,8 @@ export default function ITBadget({
     <span
       className={clsx(
         "inline-flex items-center justify-center",
-        // Fallback size if theme doesn't have it (though theme does have it for primary)
-        !config.padding ? badgeSizes[size] : "", 
+        // Apply size classes (padding/font-size)
+        badgeSizes[size],
         className
       )}
       style={getStyle()}

package/src/components/atoms/chip/chip.doc.mdx

@@ -0,0 +1,47 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './chip.stories';
+
+<Meta of={StoriesData} />
+
+# ITChip
+
+Compact tag / pill for labels, active filters, and multi-value selections.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Text label. Overridden by `children`. |
+| `children` | `ReactNode` | — | Custom content inside the chip. |
+| `color` | semantic color key | `"secondary"` | Palette color. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Chip size. |
+| `variant` | `"soft" \| "filled" \| "outlined"` | `"soft"` | Visual style. |
+| `icon` | `ReactNode` | — | Icon before the label. |
+| `removable` | `boolean` | `false` | Shows an (X) button. |
+| `onRemove` | `() => void` | — | Fired when the remove button is pressed. |
+| `onClick` | `() => void` | — | Makes the chip clickable (filter/toggle). |
+| `selected` | `boolean` | `false` | Highlights the chip as selected. |
+| `disabled` | `boolean` | `false` | Disables interactions. |
+| `className` | `string` | — | Extra CSS classes. |
+
+## Usage
+
+```tsx
+import { ITChip } from '@axzydev/axzy_ui_system';
+
+<ITChip label="React" color="primary" />
+<ITChip label="México" color="success" variant="outlined" removable onRemove={remove} />
+<ITChip label="Activos" selected onClick={toggle} />
+```
+
+## Notes
+
+- Colors come from `theme.colors`, so they follow the active theme/dark mode.
+- Interactive chips (`onClick`) expose `role="button"` and keyboard support (Enter/Space).
+- The remove button is a nested `<button>`; keep `onClick` on the chip for selection toggles.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/atoms/chip/chip.props.ts

@@ -0,0 +1,32 @@
+import { chipVariants } from "@/types/chip.types";
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+import { ReactNode } from "react";
+
+/** Props for the ITChip tag/pill component. */
+export interface ITChipProps {
+  /** Text label displayed inside the chip. Overridden if `children` is provided. */
+  label?: string;
+  /** Custom content rendered inside the chip. Takes precedence over `label`. */
+  children?: ReactNode;
+  /** Color theme key from the semantic palette (e.g. `"primary"`, `"success"`, `"danger"`). @default "secondary" */
+  color?: ColorsTypes;
+  /** Chip size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+  size?: SizesTypes;
+  /** Visual style. Valid values: `"soft"`, `"filled"`, `"outlined"`. @default "soft" */
+  variant?: keyof typeof chipVariants;
+  /** Icon rendered before the label. */
+  icon?: ReactNode;
+  /** Shows a remove (X) button at the end of the chip. @default false */
+  removable?: boolean;
+  /** Callback fired when the remove button is pressed. */
+  onRemove?: () => void;
+  /** Makes the chip clickable (filter/toggle usage). */
+  onClick?: () => void;
+  /** Highlights the chip as selected, using the `color` palette. @default false */
+  selected?: boolean;
+  /** Disables all chip interactions and reduces opacity. @default false */
+  disabled?: boolean;
+  /** Additional CSS classes for the chip element. */
+  className?: string;
+}

package/src/components/atoms/chip/chip.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITChip from "@/components/atoms/chip/chip";
+
+const meta: Meta<typeof ITChip> = {
+  title: "Components/Data Display/ITChip",
+  component: ITChip,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
+    },
+    size: { control: "select", options: ["sm", "md", "lg"] },
+    variant: { control: "select", options: ["soft", "filled", "outlined"] },
+    selected: { control: "boolean" },
+    disabled: { control: "boolean" },
+    removable: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITChip>;
+
+export const Default: Story = {
+  args: { label: "React", color: "primary" },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <ITChip label="Soft" variant="soft" color="primary" />
+      <ITChip label="Filled" variant="filled" color="primary" />
+      <ITChip label="Outlined" variant="outlined" color="primary" />
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      {["primary", "secondary", "success", "danger", "warning", "info", "purple"].map((c) => (
+        <ITChip key={c} label={c} color={c as never} />
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <ITChip label="Small" size="sm" />
+      <ITChip label="Medium" size="md" />
+      <ITChip label="Large" size="lg" />
+    </div>
+  ),
+};
+
+export const Removable: Story = {
+  args: { label: "México", color: "success", removable: true },
+};
+
+export const Selected: Story = {
+  args: { label: "Activos", color: "primary", selected: true, onClick: () => {} },
+};

package/src/components/atoms/chip/chip.tsx

@@ -0,0 +1,112 @@
+import clsx from "clsx";
+import { ITChipProps } from "./chip.props";
+import { chipSizes } from "@/types/chip.types";
+import { theme } from "@/theme/theme";
+import { FaTimes } from "react-icons/fa";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Compact tag / pill used for labels, active filters, and multi-value selections.
+ *
+ * Supports soft, filled, and outlined variants, an optional leading icon,
+ * a removable (X) affordance, and a selected state for filter toggles.
+ *
+ * @example
+ * <ITChip label="React" color="primary" />
+ *
+ * @example
+ * <ITChip label="México" color="success" variant="outlined" removable onRemove={() => remove("MX")} />
+ *
+ * @example
+ * <ITChip label="Activos" selected onClick={() => toggle()} />
+ */
+export default function ITChip({
+  label,
+  children,
+  color = "secondary",
+  size = "md",
+  variant = "soft",
+  icon,
+  removable = false,
+  onRemove,
+  onClick,
+  selected = false,
+  disabled = false,
+  className,
+}: ITChipProps) {
+  const palette = (theme.colors as Record<string, Record<number, string>>)[color]
+    || theme.colors.secondary;
+
+  const style: React.CSSProperties = {
+    borderWidth: "1px",
+    borderStyle: "solid",
+    transition: "all 0.15s",
+  };
+
+  if (variant === "filled") {
+    style.backgroundColor = palette[500];
+    style.color = "#ffffff";
+    style.borderColor = palette[500];
+  } else if (variant === "outlined") {
+    style.backgroundColor = "transparent";
+    style.color = palette[700];
+    style.borderColor = palette[400];
+  } else {
+    style.backgroundColor = palette[100];
+    style.color = palette[700];
+    style.borderColor = palette[200];
+  }
+
+  if (selected) {
+    style.backgroundColor = palette[500];
+    style.color = "#ffffff";
+    style.borderColor = palette[500];
+  }
+
+  const interactive = Boolean(onClick) && !disabled;
+
+  return (
+    <span
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      aria-pressed={interactive ? selected : undefined}
+      aria-disabled={disabled || undefined}
+      onClick={interactive ? onClick : undefined}
+      onKeyDown={
+        interactive
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.();
+              }
+            }
+          : undefined
+      }
+      className={clsx(
+        "inline-flex items-center justify-center rounded-full font-medium whitespace-nowrap align-middle",
+        chipSizes[size],
+        interactive && "cursor-pointer hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-300",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      style={style}
+    >
+      {icon && <span className="inline-flex items-center shrink-0">{icon}</span>}
+      {children ?? <ITText as="span" className="truncate">{label}</ITText>}
+      {removable && (
+        <button
+          type="button"
+          aria-label={label ? `Quitar ${label}` : "Quitar"}
+          disabled={disabled}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove?.();
+          }}
+          className="inline-flex items-center justify-center rounded-full opacity-70 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current -mr-0.5 shrink-0"
+        >
+          <FaTimes size={10} />
+        </button>
+      )}
+    </span>
+  );
+}

package/src/components/atoms/grid/grid.tsx

@@ -70,8 +70,7 @@ export default function ITGrid({
     return (
       <Component
         className={clsx(
-          "col-span-full",
-          colSpanClass(xs ?? sm, columns),
+          colSpanClass(xs ?? sm, columns) ?? "col-span-full",
           sm !== undefined && breakpointSpan(sm, "sm", columns),
           md !== undefined && breakpointSpan(md, "md", columns),
           lg !== undefined && breakpointSpan(lg, "lg", columns),

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

@@ -0,0 +1,47 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as StoriesData from './accordion.stories';
+
+<Meta of={StoriesData} />
+
+# ITAccordion
+
+Collapsible sections for FAQs, settings panels, and long content.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `ITAccordionItem[]` | — | Sections to render: `{ id, title, content, icon?, disabled? }`. |
+| `allowMultiple` | `boolean` | `false` | Allows several sections open at once. |
+| `defaultOpenIds` | `string[]` | `[]` | Open ids on first render (uncontrolled). |
+| `openIds` | `string[]` | — | Controlled open ids. |
+| `onChange` | `(openIds: string[]) => void` | — | Fired with the next open ids. |
+| `variant` | `"default" \| "separated" \| "bordered"` | `"separated"` | Visual style. |
+| `className` | `string` | — | Extra CSS classes for the wrapper. |
+| `itemClassName` | `string` | — | Extra CSS classes per item. |
+
+## Usage
+
+```tsx
+import { ITAccordion } from '@axzydev/axzy_ui_system';
+
+<ITAccordion
+  items={[
+    { id: "a", title: "¿Qué es AXZY?", content: "Un sistema de componentes." },
+    { id: "b", title: "¿Cómo instalo?", content: "pnpm add @axzydev/axzy_ui_system" },
+  ]}
+  defaultOpenIds={["a"]}
+/>
+```
+
+## Notes
+
+- Controlled via `openIds` + `onChange`; uncontrolled via `defaultOpenIds`.
+- Single-open by default; pass `allowMultiple` to open several.
+- Header buttons expose `aria-expanded` / `aria-controls`; the body is a labelled `region`.
+
+## Stories
+
+<Primary />
+<Controls />
+<Stories />

package/src/components/molecules/accordion/accordion.props.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+/** A single collapsible section inside {@link ITAccordionProps}. */
+export interface ITAccordionItem {
+  /** Unique identifier for the item. */
+  id: string;
+  /** Header content (usually text). */
+  title: ReactNode;
+  /** Body content revealed when the item is open. */
+  content: ReactNode;
+  /** Optional icon rendered before the title. */
+  icon?: ReactNode;
+  /** Disables toggling for this item. @default false */
+  disabled?: boolean;
+}
+
+/** Props for the ITAccordion component. */
+export interface ITAccordionProps {
+  /** Sections to render. */
+  items: ITAccordionItem[];
+  /** Allows more than one section open at the same time. @default false */
+  allowMultiple?: boolean;
+  /** Ids open on first render (uncontrolled mode). */
+  defaultOpenIds?: string[];
+  /** Controlled list of open ids. When provided, the component is controlled. */
+  openIds?: string[];
+  /** Fired with the next list of open ids whenever a section toggles. */
+  onChange?: (openIds: string[]) => void;
+  /** Visual style. Valid values: `"default"`, `"separated"`, `"bordered"`. @default "separated" */
+  variant?: "default" | "separated" | "bordered";
+  /** Additional CSS classes for the wrapper. */
+  className?: string;
+  /** Additional CSS classes applied to every item. */
+  itemClassName?: string;
+}

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITAccordion from "@/components/molecules/accordion/accordion";
+import ITBadget from "@/components/atoms/badget/badget";
+
+const meta: Meta<typeof ITAccordion> = {
+  title: "Components/Structure/ITAccordion",
+  component: ITAccordion,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITAccordion>;
+
+const items = [
+  {
+    id: "what",
+    title: "¿Qué es AXZY UI System?",
+    content: "Una librería de componentes React + TypeScript con Tailwind CSS v4.",
+  },
+  {
+    id: "install",
+    title: "¿Cómo lo instalo?",
+    content: "pnpm add @axzydev/axzy_ui_system",
+  },
+  {
+    id: "theme",
+    title: "¿Puedo personalizar el tema?",
+    content: "Sí, usa ITThemeProvider para definir la paleta y tokens.",
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <ITAccordion items={items} defaultOpenIds={["what"]} />
+    </div>
+  ),
+};
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <ITAccordion items={items} allowMultiple defaultOpenIds={["what", "install"]} />
+    </div>
+  ),
+};
+
+export const Bordered: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <ITAccordion items={items} variant="bordered" defaultOpenIds={["install"]} />
+    </div>
+  ),
+};
+
+export const WithIconAndBadge: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <ITAccordion
+        items={[
+          { id: "1", title: "Novedades", icon: <span>✨</span>, content: "3 componentes nuevos." },
+          { id: "2", title: "Pendientes", content: <ITBadget label="2" color="warning" size="sm" /> },
+        ]}
+        defaultOpenIds={["1"]}
+      />
+    </div>
+  ),
+};