@axzydev/axzy_ui_system 1.2.1 → 1.2.3

package/src/components/slider/slider.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITSlider from "./slider";
+import { useState } from "react";
+
+const meta: Meta<typeof ITSlider> = {
+  title: "Components/Inputs/ITSlider",
+  component: ITSlider,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITSlider>;
+
+export const Default: Story = {
+  render: () => {
+    const [val, setVal] = useState(50);
+    return <ITSlider value={val} onChange={setVal} min={0} max={100} label="Volume" />;
+  },
+};
+
+export const WithRange: Story = {
+  render: () => {
+    const [val, setVal] = useState(3);
+    return <ITSlider value={val} onChange={setVal} min={1} max={10} step={1} label="Items per page" />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <ITSlider value={40} onChange={() => {}} disabled label="Disabled" />,
+};

package/src/components/slider/slider.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import { ITSliderProps } from "./slider.props";
+import ITText from "@/components/text/text";
+
+export default function ITSlider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  disabled = false,
+  className,
+}: ITSliderProps) {
+  return (
+    <div className={clsx("flex flex-col gap-1.5", className)}>
+      {label && (
+        <ITText as="label" className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+          {label}: {value}
+        </ITText>
+      )}
+      <div className="relative w-full h-5 flex items-center">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          disabled={disabled}
+          className={clsx(
+            "w-full h-1.5 appearance-none rounded-full outline-none cursor-pointer",
+            "bg-gray-200 dark:bg-gray-700",
+            "accent-primary-500",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
+            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary-500",
+            "[&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white",
+            "[&::-webkit-slider-thumb]:hover:bg-primary-600 [&::-webkit-slider-thumb]:transition-colors",
+            "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full",
+            "[&::-moz-range-thumb]:bg-primary-500 [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white",
+            "[&::-moz-range-track]:bg-gray-200 dark:[&::-moz-range-track]:bg-gray-700",
+            "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5"
+          )}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/stack/stack.props.ts

@@ -0,0 +1,19 @@
+import { ReactNode, CSSProperties, ElementType } from "react";
+
+export type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type StackAlignment = "start" | "end" | "center" | "stretch" | "baseline";
+export type StackJustify = "start" | "end" | "center" | "between" | "around" | "evenly";
+export type StackWrap = "nowrap" | "wrap" | "wrap-reverse";
+
+export interface ITStackProps {
+  children?: ReactNode;
+  direction?: StackDirection;
+  spacing?: number;
+  alignItems?: StackAlignment;
+  justifyContent?: StackJustify;
+  flexWrap?: StackWrap;
+  divider?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  as?: ElementType;
+}

package/src/components/stack/stack.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITStack from "./stack";
+
+const meta: Meta<typeof ITStack> = {
+  title: "Layout/ITStack",
+  component: ITStack,
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["row", "column", "row-reverse", "column-reverse"],
+    },
+    spacing: { control: { type: "range", min: 0, max: 16, step: 1 } },
+    alignItems: {
+      control: "select",
+      options: [undefined, "start", "end", "center", "stretch", "baseline"],
+    },
+    justifyContent: {
+      control: "select",
+      options: [undefined, "start", "end", "center", "between", "around", "evenly"],
+    },
+    flexWrap: {
+      control: "select",
+      options: [undefined, "nowrap", "wrap", "wrap-reverse"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITStack>;
+
+const Box = ({ children, className = "" }: { children: string; className?: string }) => (
+  <div className={`bg-primary-100 text-primary-800 rounded-lg p-4 text-center font-medium ${className}`}>
+    {children}
+  </div>
+);
+
+export const Vertical: Story = {
+  args: { direction: "column", spacing: 2, children: null },
+  render: (args) => (
+    <ITStack {...args}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </ITStack>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: { direction: "row", spacing: 2, children: null },
+  render: (args) => (
+    <ITStack {...args}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </ITStack>
+  ),
+};
+
+export const WithDivider: Story = {
+  args: { direction: "row", spacing: 2, divider: <div className="w-px bg-gray-300 self-stretch" /> },
+  render: (args) => (
+    <ITStack {...args}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </ITStack>
+  ),
+};
+
+export const Centered: Story = {
+  args: { direction: "row", spacing: 4, alignItems: "center", justifyContent: "center", className: "h-40 bg-gray-50 rounded-xl" },
+  render: (args) => (
+    <ITStack {...args}>
+      <Box>Center</Box>
+      <Box>Middle</Box>
+    </ITStack>
+  ),
+};

package/src/components/stack/stack.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx";
+import { Children, cloneElement, isValidElement, Fragment } from "react";
+import { ITStackProps, StackDirection, StackAlignment, StackJustify, StackWrap } from "./stack.props";
+
+const directionMap: Record<StackDirection, string> = {
+  row: "flex-row",
+  column: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse",
+};
+
+const alignMap: Record<StackAlignment, string> = {
+  start: "items-start",
+  end: "items-end",
+  center: "items-center",
+  stretch: "items-stretch",
+  baseline: "items-baseline",
+};
+
+const justifyMap: Record<StackJustify, string> = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly",
+};
+
+const wrapMap: Record<StackWrap, string> = {
+  nowrap: "flex-nowrap",
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse",
+};
+
+export default function ITStack({
+  children,
+  direction = "column",
+  spacing = 0,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  divider,
+  className,
+  style,
+  as: Component = "div",
+}: ITStackProps) {
+  const hasDivider = divider !== undefined;
+  const items = Children.toArray(children);
+
+  const resolvedStyle: React.CSSProperties = {
+    gap: spacing > 0 ? `${spacing * 0.25}rem` : undefined,
+    ...style,
+  };
+
+  return (
+    <Component
+      className={clsx(
+        "flex",
+        directionMap[direction],
+        alignItems && alignMap[alignItems],
+        justifyContent && justifyMap[justifyContent],
+        flexWrap && wrapMap[flexWrap],
+        className
+      )}
+      style={resolvedStyle}
+    >
+      {hasDivider
+        ? items.map((child, index) => (
+            <Fragment key={index}>
+              {child}
+              {index < items.length - 1 && isValidElement(divider)
+                ? cloneElement(divider, { key: `divider-${index}` })
+                : null}
+            </Fragment>
+          ))
+        : children}
+    </Component>
+  );
+}

package/src/components/stat-card/stat-card.props.ts

@@ -0,0 +1,13 @@
+import { ReactNode, CSSProperties } from "react";
+
+export interface ITStatCardProps {
+  label: string;
+  value: string | number;
+  trend?: string;
+  trendDirection?: "up" | "down" | "neutral";
+  icon?: ReactNode;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: () => void;
+}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITStatCard from "./stat-card";
+import { FaArrowUp, FaArrowDown } from "react-icons/fa";
+
+const meta: Meta<typeof ITStatCard> = {
+  title: "Components/Data Display/ITStatCard",
+  component: ITStatCard,
+  tags: ["autodocs"],
+};
+
+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/stat-card/stat-card.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { ITStatCardProps } from "./stat-card.props";
+import ITText from "@/components/text/text";
+
+const trendColors = {
+  up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",
+  down: "text-rose-600 bg-rose-50 dark:text-rose-400 dark:bg-rose-950/30",
+  neutral: "text-slate-500 bg-slate-100 dark:text-slate-400 dark:bg-slate-800",
+};
+
+export default function ITStatCard({
+  label,
+  value,
+  trend,
+  trendDirection = trend && trend.startsWith("-") ? "down" : "neutral",
+  icon,
+  color = "bg-primary-50 dark:bg-primary-950/20",
+  className,
+  style,
+  onClick,
+}: ITStatCardProps) {
+  return (
+    <div
+      className={clsx("rounded-xl p-4 border border-slate-100 dark:border-slate-800", color, className)}
+      style={style}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      <div className="flex items-start justify-between mb-1">
+        <ITText as="span" className="text-xs font-medium text-slate-400 dark:text-slate-500">{label}</ITText>
+        {icon && <span className="text-slate-400">{icon}</span>}
+      </div>
+      <div className="flex items-baseline gap-2">
+        <ITText as="span" className="text-2xl font-bold text-slate-800 dark:text-white">{value}</ITText>
+        {trend && (
+          <ITText as="span" className={clsx("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection])}>
+            {trend}
+          </ITText>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/stepper/stepper.css

@@ -0,0 +1,26 @@
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.animate-slide-in-right {
+  animation: slideInRight 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.animate-slide-in-left {
+  animation: slideInLeft 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}

package/src/components/stepper/stepper.props.ts

@@ -0,0 +1,29 @@
+import React from "react";
+
+export type IconType = React.ReactNode;
+
+export interface Step {
+  label: string;
+  content: React.ReactNode;
+  icon?: IconType;
+}
+
+export interface ITStepperProps {
+  steps: Step[];
+  currentStep: number;
+  onFinish?: () => void;
+  onStepChange?: (step: number) => void;
+  allowClickToJump?: boolean;
+  useIcons?: boolean;
+  disableNext?: boolean;
+  containerClassName?: string;
+  stepClassName?: string;
+  scrollableContent?: boolean;
+  maxContentHeight?: string;
+  
+  /**
+   * Semantic theme color for active steps and buttons.
+   * Default: 'primary'
+   */
+  color?: string;
+}

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

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITStepper from "./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
+  },
+  tags: ["autodocs"],
+  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
+  },
+};