chiperos-ai-components-library 0.1.8 → 0.2.1

package/dist/components/ComposedChart/ComposedChart.stories.d.ts

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComposedChart } from './index';
+
+declare const meta: Meta<typeof ComposedChart>;
+export default meta;
+type Story = StoryObj<typeof ComposedChart>;
+/**
+ * Default example showing a mixed chart with bars and a line
+ */
+export declare const Default: Story;
+/**
+ * Chart with Area, Bar, and Line combined
+ */
+export declare const WithArea: Story;
+/**
+ * Multiple bars chart
+ */
+export declare const BarsOnly: Story;
+/**
+ * Multiple lines chart
+ */
+export declare const LinesOnly: Story;
+/**
+ * Stacked bars example
+ */
+export declare const StackedBars: Story;
+/**
+ * Full composed example with all three types
+ */
+export declare const FullComposed: Story;
+/**
+ * Chart with dual Y-axis
+ */
+export declare const DualYAxis: Story;
+/**
+ * Minimal chart without grid and legend
+ */
+export declare const Minimal: Story;

package/dist/components/ComposedChart/index.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+/**
+ * Configuration for a single data series in the chart
+ */
+export interface ComposedChartSeries {
+    /**
+     * Type of visualization for this series
+     */
+    type: 'bar' | 'line' | 'area';
+    /**
+     * Key in the data objects for this series values
+     */
+    dataKey: string;
+    /**
+     * Display name for this series (used in legend and tooltip)
+     */
+    name?: string;
+    /**
+     * Color for this series
+     * @default Auto-assigned from palette
+     */
+    color?: string;
+    /**
+     * Stack ID for grouping stacked bars/areas
+     */
+    stackId?: string;
+    /**
+     * Y-axis ID to use for this series
+     * @default "left"
+     */
+    yAxisId?: 'left' | 'right';
+}
+export interface ComposedChartProps {
+    /**
+     * Array of data objects to display
+     */
+    data: Record<string, unknown>[];
+    /**
+     * Configuration for each data series
+     */
+    series: ComposedChartSeries[];
+    /**
+     * Key in the data objects for the X-axis values
+     */
+    xAxisKey: string;
+    /**
+     * Height of the chart in pixels
+     * @default 400
+     */
+    height?: number;
+    /**
+     * Whether to show the grid lines
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Whether to show the legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show tooltips on hover
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Whether to show a secondary Y-axis on the right
+     * @default false
+     */
+    showRightYAxis?: boolean;
+    /**
+     * Custom margin for the chart
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Bar gap in pixels
+     * @default 4
+     */
+    barGap?: number;
+    /**
+     * Bar size in pixels
+     */
+    barSize?: number;
+}
+/**
+ * ComposedChart Component
+ *
+ * A flexible chart component that can display bars, lines, and areas together.
+ * Built on top of recharts library.
+ *
+ * @example
+ * ```tsx
+ * <ComposedChart
+ *   data={[
+ *     { month: 'Jan', sales: 400, revenue: 2400 },
+ *     { month: 'Feb', sales: 300, revenue: 1398 },
+ *   ]}
+ *   xAxisKey="month"
+ *   series={[
+ *     { type: 'bar', dataKey: 'sales', name: 'Sales', color: '#00995a' },
+ *     { type: 'line', dataKey: 'revenue', name: 'Revenue', color: '#312e4d' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ComposedChart: React.FC<ComposedChartProps>;

package/dist/components/FilterContainer/FilterContainer.stories.d.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FilterContainer } from './index';
+
+declare const meta: Meta<typeof FilterContainer>;
+export default meta;
+type Story = StoryObj<typeof FilterContainer>;
+/**
+ * Basic usage with a few filters
+ */
+export declare const Default: Story;
+/**
+ * Multiple filters demonstrating flex-wrap behavior
+ */
+export declare const ManyFilters: Story;
+/**
+ * Single filter
+ */
+export declare const SingleFilter: Story;
+/**
+ * With disabled buttons
+ */
+export declare const DisabledButtons: Story;
+/**
+ * Controlled example with state management
+ */
+export declare const Controlled: Story;

package/dist/components/FilterContainer/index.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { SelectOption } from '../Select';
+
+export interface FilterContainerFilter {
+    /**
+     * Unique key for the filter
+     */
+    key: string;
+    /**
+     * Label for the filter
+     */
+    label: string;
+    /**
+     * Placeholder text shown when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Options for dropdown filter
+     */
+    options: SelectOption[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Callback when filter changes
+     */
+    onChange?: (value: string) => void;
+}
+export interface FilterContainerProps {
+    /**
+     * Array of filters to display
+     */
+    filters: FilterContainerFilter[];
+    /**
+     * Callback when Apply button is clicked
+     */
+    onApply?: () => void;
+    /**
+     * Callback when Download button is clicked
+     */
+    onDownload?: () => void;
+    /**
+     * Callback when Restart button is clicked
+     */
+    onRestart?: () => void;
+    /**
+     * Custom label for Apply button
+     * @default "Apply"
+     */
+    applyLabel?: string;
+    /**
+     * Disable Apply button
+     */
+    applyDisabled?: boolean;
+    /**
+     * Disable Download button
+     */
+    downloadDisabled?: boolean;
+    /**
+     * Disable Restart button
+     */
+    restartDisabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const FilterContainer: React.FC<FilterContainerProps>;
+export default FilterContainer;

package/dist/components/ProgressBarInfo/ProgressBarInfo.stories.d.ts

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressBarInfo } from './index';
+
+declare const meta: Meta<typeof ProgressBarInfo>;
+export default meta;
+type Story = StoryObj<typeof ProgressBarInfo>;
+/**
+ * Default example matching the Product Category Breakdown design
+ */
+export declare const Default: Story;
+/**
+ * Single column legend layout
+ */
+export declare const SingleColumnLegend: Story;
+/**
+ * Three segments example
+ */
+export declare const ThreeSegments: Story;
+/**
+ * Without change indicators
+ */
+export declare const WithoutChange: Story;
+/**
+ * Custom colors example
+ */
+export declare const CustomColors: Story;
+/**
+ * Taller bar variant
+ */
+export declare const TallBar: Story;
+/**
+ * Thin bar variant
+ */
+export declare const ThinBar: Story;
+/**
+ * Without legend
+ */
+export declare const WithoutLegend: Story;
+/**
+ * Three column legend
+ */
+export declare const ThreeColumnLegend: Story;

package/dist/components/ProgressBarInfo/index.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+/**
+ * A single segment in the progress bar
+ */
+export interface ProgressBarSegment {
+    /**
+     * Unique identifier for the segment
+     */
+    id: string;
+    /**
+     * Display label for this segment
+     */
+    label: string;
+    /**
+     * Percentage value (0-100) for this segment
+     */
+    percentage: number;
+    /**
+     * Change indicator (e.g., +5.9%, -2.3%)
+     */
+    change?: string;
+    /**
+     * Custom color for this segment (optional - uses palette if not provided)
+     */
+    color?: string;
+}
+export interface ProgressBarInfoProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of segments to display
+     */
+    segments: ProgressBarSegment[];
+    /**
+     * Height of the progress bar in pixels
+     * @default 24
+     */
+    barHeight?: number;
+    /**
+     * Border radius of the progress bar
+     * @default 8
+     */
+    borderRadius?: number;
+    /**
+     * Number of columns for the legend grid
+     * @default 2
+     */
+    legendColumns?: number;
+    /**
+     * Whether to show the legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Gap between legend items
+     * @default 16
+     */
+    legendGap?: number;
+}
+/**
+ * ProgressBarInfo Component
+ *
+ * A stacked horizontal progress bar with a legend showing category breakdown.
+ * Width is 100% of its container.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBarInfo
+ *   segments={[
+ *     { id: '1', label: 'Bebidas no Alcohólicas', percentage: 41.2, change: '+5.9%' },
+ *     { id: '2', label: 'Despensa', percentage: 12.3, change: '+1.7%' },
+ *     { id: '3', label: 'Pide tu bulto aquí', percentage: 8, change: '+23.2%' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ProgressBarInfo: React.ForwardRefExoticComponent<ProgressBarInfoProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/index.d.ts

@@ -16,3 +16,6 @@ export * from './Switcher';
 export * from './Table';
 export * from './TableHeader';
 export * from './Toasts';
+export * from './FilterContainer';
+export * from './ComposedChart';
+export * from './ProgressBarInfo';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chiperos-ai-components-library",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.2.1",
   "description": "Chiperos AI Components Library - A modern React component library built with Vite, TypeScript and Tailwind CSS.",
   "type": "module",
   "main": "./dist/chiperos-ai-components-library.cjs",
@@ -29,16 +29,17 @@
     "class-variance-authority": "^0.7.1",
     "libphonenumber-js": "^1.12.31",
     "lucide-react": "^0.534.0",
+    "recharts": "^3.6.0",
     "zod": "^4.1.13"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "next-intl": "^4.3.4",
-    "radix-ui": "^1.4.3"
+    "radix-ui": "^1.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependenciesMeta": {
     "@radix-ui/react-radio-group": {
@@ -58,13 +59,10 @@
     }
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
-    "lucide-react": "^0.534.0",
-    "next-intl": "^4.3.4",
-    "radix-ui": "^1.4.3",
-    "@chromatic-com/storybook": "^1.5.0",
     "@storybook/addon-essentials": "^8.1.10",
     "@storybook/addon-interactions": "^8.1.10",
     "@storybook/addon-links": "^8.1.10",
@@ -81,6 +79,9 @@
     "@vitejs/plugin-react": "^4.3.1",
     "clsx": "^2.1.1",
     "jsdom": "^24.1.0",
+    "lucide-react": "^0.534.0",
+    "next-intl": "^4.3.4",
+    "radix-ui": "^1.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^8.1.10",