@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITAvatar from "./avatar";
+import { FaCircle } from "react-icons/fa";
+
+const meta: Meta<typeof ITAvatar> = {
+  title: "Components/Data Display/ITAvatar",
+  component: ITAvatar,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITAvatar>;
+
+export const WithImage: Story = {
+  args: {
+    src: "https://i.pravatar.cc/150?u=test",
+    alt: "User",
+    size: "md",
+  },
+};
+
+export const WithInitials: Story = {
+  args: {
+    initials: "JD",
+    size: "md",
+    color: "bg-primary-500",
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    initials: "AG",
+    size: "lg",
+    badge: <FaCircle className="text-emerald-500 text-[10px]" />,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-4">
+      {(["xs", "sm", "md", "lg", "xl"] as const).map((s) => (
+        <ITAvatar key={s} initials="A" size={s} />
+      ))}
+    </div>
+  ),
+};

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { ITAvatarProps, AvatarSize } from "./avatar.props";
+import ITText from "@/components/text/text";
+
+const sizeMap: Record<AvatarSize, { container: string; text: string }> = {
+  xs: { container: "w-6 h-6", text: "text-[10px]" },
+  sm: { container: "w-8 h-8", text: "text-xs" },
+  md: { container: "w-10 h-10", text: "text-sm" },
+  lg: { container: "w-12 h-12", text: "text-base" },
+  xl: { container: "w-16 h-16", text: "text-xl" },
+};
+
+export default function ITAvatar({
+  src,
+  alt = "",
+  initials,
+  size = "md",
+  color = "bg-primary-500",
+  className,
+  badge,
+  onClick,
+}: ITAvatarProps) {
+  const { container, text } = sizeMap[size];
+
+  return (
+    <div
+      className={clsx("relative inline-flex items-center justify-center rounded-full flex-shrink-0", container, className)}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          className="w-full h-full rounded-full object-cover"
+          onError={(e) => {
+            e.currentTarget.style.display = "none";
+          }}
+        />
+      ) : (
+        <div className={clsx("w-full h-full rounded-full flex items-center justify-center text-white font-semibold", text, color)}>
+          <ITText as="span">{initials || alt.charAt(0).toUpperCase() || "?"}</ITText>
+        </div>
+      )}
+      {badge && (
+        <div className="absolute -bottom-0.5 -right-0.5">
+          {badge}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/badget/badget.props.ts

@@ -0,0 +1,12 @@
+import { badgeVariants } from "@/types/badget.types";
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+
+export interface ITBadgetProps {
+  label?: string;
+  children?: React.ReactNode;
+  color?: ColorsTypes;
+  size?: SizesTypes;
+  variant?: keyof typeof badgeVariants;
+  className?: string;
+}

package/src/components/badget/badget.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITBadget from './badget';
+
+const meta = {
+  title: 'Components/Data Display/ITBadge',
+  component: ITBadget,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'],
+    },
+    variant: {
+        control: 'select',
+        options: ['filled', 'outlined'],
+    },
+    size: {
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+    },
+  },
+} satisfies Meta<typeof ITBadget>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 1. Filled (Default)
+export const Filled: Story = {
+  args: {
+    label: 'Filled Badge',
+    color: 'primary',
+    variant: 'filled',
+  },
+};
+
+// 2. Outlined
+export const Outlined: Story = {
+  args: {
+    label: 'Outlined Badge',
+    color: 'primary',
+    variant: 'outlined',
+  },
+};
+
+// 3. All Combinations (Matrix)
+export const AllCombinations: Story = {
+  render: (args) => {
+    const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'];
+    const variants = ['filled', 'outlined'];
+
+    return (
+      <div className="flex flex-col gap-8">
+        {variants.map((variant) => (
+          <div key={variant} className="flex flex-col gap-2">
+            <h3 className="text-sm font-bold uppercase text-gray-400">{variant}</h3>
+            <div className="flex flex-wrap gap-4 items-center">
+              {colors.map((color) => (
+                <ITBadget
+                  key={`${variant}-${color}`}
+                  {...args}
+                  color={color as any}
+                  variant={variant as any}
+                  label={color.charAt(0).toUpperCase() + color.slice(1)}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+  args: {},
+};

package/src/components/badget/badget.tsx

@@ -0,0 +1,61 @@
+// components/ITBadge.tsx
+import clsx from "clsx";
+import { ITBadgetProps } from "./badget.props";
+import {
+  badgeSizes,
+} from "@/types/badget.types";
+import { theme } from "@/theme/theme";
+import ITText from "@/components/text/text";
+
+export default function ITBadget({
+  children,
+  label,
+  color = "primary",
+  size = "medium",
+  variant = "filled",
+  className,
+}: ITBadgetProps) {
+  // Access theme configuration
+  const themeBadge = (theme as any).badge || {};
+  const config = themeBadge[color] || themeBadge.primary || {};
+
+  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',
+      borderColor: 'transparent', // Default transparent
+      transition: 'all 0.2s',
+    };
+
+    if (variant === "filled") {
+      style.backgroundColor = config.backgroundColor;
+      style.color = config.color;
+      style.borderColor = config.borderColor || 'transparent'; // Some filled badges might have subtle borders
+    } else if (variant === "outlined") {
+      style.backgroundColor = "transparent";
+      // Use the dark text color for both text and border to ensure high contrast
+      style.color = config.color; 
+      style.borderColor = config.color;
+    }
+
+    return style;
+  };
+
+  return (
+    <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] : "", 
+        className
+      )}
+      style={getStyle()}
+    >
+      {children || <ITText as="span" className={clsx("font-semibold")}>{label}</ITText>}
+    </span>
+  );
+}

package/src/components/breadcrumbs/breadcrumbs.props.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface ITBreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface ITBreadcrumbsProps {
+  items: ITBreadcrumbItem[];
+  separator?: ReactNode;
+  className?: string;
+}

package/src/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITBreadcrumbs from "./breadcrumbs";
+
+const meta: Meta<typeof ITBreadcrumbs> = {
+  title: "Components/Navigation/ITBreadcrumbs",
+  component: ITBreadcrumbs,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITBreadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: "Inicio", href: "#" },
+      { label: "Usuarios", href: "#" },
+      { label: "Editar Perfil" },
+    ],
+  },
+};

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { ITBreadcrumbsProps } from "./breadcrumbs.props";
+import { FaChevronRight } from "react-icons/fa";
+import ITText from "@/components/text/text";
+
+export default function ITBreadcrumbs({
+  items,
+  separator = <FaChevronRight size={10} />,
+  className,
+}: ITBreadcrumbsProps) {
+  return (
+    <nav className={clsx("flex items-center gap-1.5 text-sm", className)} aria-label="Breadcrumb">
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        return (
+          <span key={i} className="flex items-center gap-1.5">
+            {i > 0 && <span className="text-slate-300 dark:text-slate-600">{separator}</span>}
+            {isLast ? (
+              <ITText as="span" className="text-slate-800 dark:text-white font-semibold">{item.label}</ITText>
+            ) : item.href ? (
+              <a href={item.href} className="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors">
+                <ITText as="span">{item.label}</ITText>
+              </a>
+            ) : (
+              <button onClick={item.onClick} className="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors">
+                <ITText as="span">{item.label}</ITText>
+              </button>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/button/button.props.ts

@@ -0,0 +1,18 @@
+import { buttonVariants } from "@/types/button.types";
+import { ColorsTypes } from "@app/types/colors.types";
+import { SizesTypes } from "@app/types/sizes.types";
+
+export interface ITButtonProps {
+  label?: string
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  color?: ColorsTypes;
+  size?: SizesTypes;
+  variant?: keyof typeof buttonVariants;
+  disabled?: boolean;
+  className?: string;
+  type?: "submit" | "reset" | "button" | undefined;
+  ariaLabel?: string;
+  title?: string;
+}

package/src/components/button/button.stories.tsx

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITButton from './button';
+
+const meta = {
+  title: 'Components/Actions/ITButton',
+  component: ITButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'],
+      description: 'The semantic color of the button',
+    },
+    variant: {
+        control: 'select',
+        options: ['filled', 'outlined', 'raised', 'rounded', 'text', 'raised-text', 'icon-only', 'link'],
+        description: 'The visual style variant',
+    },
+    size: {
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+        description: 'Button size (padding/font)',
+    },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ITButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 1. Filled (Default)
+export const Filled: Story = {
+  args: {
+    label: 'Filled Button',
+    color: 'primary',
+    variant: 'filled',
+  },
+};
+
+// 2. Outlined
+export const Outlined: Story = {
+  args: {
+    label: 'Outlined Button',
+    color: 'primary',
+    variant: 'outlined',
+  },
+};
+
+// 3. Raised (Shadow)
+export const Raised: Story = {
+  args: {
+    label: 'Raised Button',
+    color: 'primary',
+    variant: 'raised',
+  },
+};
+
+// 4. Rounded (Pill)
+export const Rounded: Story = {
+  args: {
+    label: 'Rounded Button',
+    color: 'success',
+    variant: 'rounded',
+  },
+};
+
+// 5. Text (Ghost)
+export const Text: Story = {
+  args: {
+    label: 'Text Button',
+    color: 'info',
+    variant: 'text',
+  },
+};
+
+// 6. Raised Text (Elevated White)
+export const RaisedText: Story = {
+  args: {
+    label: 'Raised Text',
+    color: 'warning',
+    variant: 'raised-text',
+  },
+};
+
+// 7. With Icon (icon prop + label)
+export const WithIcon: Story = {
+  args: {
+    label: 'Guardar',
+    color: 'primary',
+    variant: 'filled',
+    icon: <span style={{ fontSize: '1em' }}>💾</span>,
+  },
+};
+
+// 8. Icon Only
+export const IconOnly: Story = {
+  args: {
+    color: 'danger',
+    variant: 'icon-only',
+    children: <span style={{ fontSize: '1.2em' }}>★</span>,
+    ariaLabel: 'Favorite',
+  },
+};
+
+// 8. Link
+export const Link: Story = {
+  args: {
+    label: 'Link Button',
+    color: 'primary',
+    variant: 'link',
+  },
+};
+
+// 9. All Colors Showcase (Kitchen Sink for colors)
+export const AllColors: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap gap-4">
+      {['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'].map((color) => (
+        <ITButton key={color} {...args} color={color as any} label={color.charAt(0).toUpperCase() + color.slice(1)} />
+      ))}
+    </div>
+  ),
+  args: {
+    variant: 'filled',
+  },
+};
+
+// 9. Disabled
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Button',
+    disabled: true,
+    color: 'primary',
+    variant: 'filled',
+  },
+};
+
+// 10. All Combinations (Matrix)
+export const AllCombinations: Story = {
+  render: (args) => {
+    const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'];
+    const variants = ['filled', 'outlined', 'raised', 'rounded', 'text', 'raised-text', 'icon-only', 'link'];
+
+    return (
+      <div className="flex flex-col gap-8">
+        {variants.map((variant) => (
+          <div key={variant} className="flex flex-col gap-2">
+            <h3 className="text-sm font-bold uppercase text-gray-400">{variant}</h3>
+            <div className="flex flex-wrap gap-4 items-center">
+              {colors.map((color) => (
+                <ITButton
+                  key={`${variant}-${color}`}
+                  {...args}
+                  color={color as any}
+                  variant={variant as any}
+                  label={variant === 'icon-only' ? undefined : (color.charAt(0).toUpperCase() + color.slice(1))}
+                  ariaLabel={variant === 'icon-only' ? color : undefined}
+                >
+                  {variant === 'icon-only' ? <span style={{ fontSize: '1.2em' }}>★</span> : undefined}
+                </ITButton>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+  args: {},
+};
+

package/src/components/button/button.tsx

@@ -0,0 +1,117 @@
+import {
+  buttonSizes,
+  buttonVariants,
+} from "@app/types/button.types";
+import clsx from "clsx";
+import { useState } from "react";
+import { theme } from "@/theme/theme";
+import { ITButtonProps } from "./button.props";
+import ITText from "@/components/text/text";
+
+export default function ITButton({
+  children,
+  label,
+  icon,
+  onClick,
+  type = "button",
+  color = "primary",
+  size = "medium",
+  disabled = false,
+  className,
+  variant = "filled",
+  ariaLabel,
+  title,
+}: ITButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  
+  // Get specific button config from theme
+  const themeBtn = theme.button as any;
+  const themeConfig = themeBtn[color] || themeBtn.primary;
+  
+  // Determine if the button should look "filled" (solid bg) or "outlined/text" (transparent/white bg)
+  const isSolid = ["filled", "raised", "rounded", "icon-only"].includes(variant || "filled");
+  const isOutlined = variant === "outlined";
+  const isText = variant === "text" || variant === "link";
+  const isRaisedText = variant === "raised-text";
+
+  const getStyle = () => {
+    // if (disabled) return {}; // Removed to allow styles to render with opacity
+
+    const mainColor = themeConfig.backgroundColor; // The vibrant color
+    const textColor = themeConfig.color; // Usually white for filled
+
+    let style: React.CSSProperties = {
+      // fontSize: themeConfig.fontSize, // Removed to allow size prop to control font size
+      fontWeight: themeConfig.fontWeight,
+      // padding: themeConfig.padding, // Removed to allow size prop to control padding
+      borderRadius: themeConfig.borderRadius, // Default from theme
+      transition: themeConfig.transition || 'all 0.2s',
+    };
+
+    if (variant === "rounded") {
+      style.borderRadius = "9999px";
+    }
+
+    if (variant === "icon-only") {
+      style.padding = "0.5rem"; // Square padding override
+    }
+
+    if (isSolid) {
+      style.backgroundColor = (isHovered && !disabled) ? themeConfig.hover : mainColor;
+      style.color = textColor;
+    } else if (isOutlined) {
+      style.backgroundColor = "transparent";
+      style.color = mainColor;
+      style.borderColor = mainColor;
+      if (isHovered && !disabled) {
+         style.backgroundColor = `${mainColor}10`; // 10% opacity
+      }
+    } else if (isText) {
+      style.backgroundColor = (isHovered && !disabled) ? `${mainColor}10` : "transparent";
+      style.color = mainColor;
+    } else if (isRaisedText) {
+      style.backgroundColor = "var(--card-bg, #ffffff)";
+      style.color = mainColor;
+      if (isHovered && !disabled) style.backgroundColor = "var(--card-header-bg, #f8fafc)"; 
+    }
+
+    // Apply focus style from theme (box-shadow ring)
+    if (isFocused && themeConfig.focus && !disabled) {
+        style.boxShadow = themeConfig.focus;
+    }
+
+    return style;
+  };
+
+  return (
+    <button
+      type={type}
+      className={clsx(
+        "focus:outline-none", // Removed focus:ring-2 focus:ring-offset-2 to use theme style
+        // Apply variant base styles (border, shadow, rounded-full)
+        buttonVariants[variant || "filled"],
+        // Apply size classes (padding/font-size)
+        buttonSizes[size],
+        className,
+        { "opacity-50 cursor-not-allowed": disabled }
+      )}
+      style={getStyle()}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel || label}
+      title={title || ariaLabel || label}
+    >
+      {children || (
+        <span className={clsx("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled })}>
+          {icon && <span className="flex-shrink-0">{icon}</span>}
+          <ITText as="span">{label}</ITText>
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/calendar/calendar.props.ts

@@ -0,0 +1,33 @@
+import { ColorsTypes } from "@/types/colors.types";
+
+export interface CalendarEvent {
+  id: string;
+  title: string;
+  start: Date | string; // Date object or ISO string
+  end: Date | string;
+  color?: string; // Hex or tailwind class
+  data?: any; // Extra data for callbacks
+}
+
+export interface ITCalendarProps {
+  // Scheduler Props
+  events?: CalendarEvent[];
+  mode?: 'week' | 'day' | 'month'; // 'month' for picker
+  onEventClick?: (event: CalendarEvent) => void;
+  onSlotClick?: (date: Date) => void;
+  onSlotHover?: (date: Date) => void;
+  onSelectRange?: (start: Date, end: Date) => void;
+  
+  // Picker Props (Legacy/DatePicker support)
+  value?: Date;
+  onChange?: (date: Date) => void;
+  selectionMode?: 'single' | 'range';
+  startDate?: Date;
+  endDate?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+
+  className?: string;
+  disabled?: boolean;
+  variant?: ColorsTypes;
+}