squarex-ui-component-lib 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Visulisation Library
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,282 @@
+# SquareX UI Component Library
+
+A modern, comprehensive React component library featuring beautiful charts and UI components built with TypeScript, Tailwind CSS, and D3.js.
+
+## Features
+
+- 🎨 **Beautiful Components**: Modern, accessible UI components with consistent design
+- 📊 **Interactive Charts**: D3.js-powered charts with smooth animations and interactions
+- 🔧 **Highly Customizable**: Extensive theming and customization options
+- 📱 **Responsive Design**: Mobile-first approach with responsive components
+- ⚡ **Lightweight**: Optimized bundle size with tree-shaking support
+- 🎯 **TypeScript First**: Full TypeScript support with comprehensive type definitions
+- 🚀 **React Ready**: Built for modern React applications
+- 🎭 **Storybook Integration**: Interactive documentation and component playground
+- ♿ **Accessible**: WCAG compliant components with proper ARIA support
+- 🎨 **Tailwind CSS**: Utility-first styling with custom SquareX design system
+
+## Installation
+
+```bash
+npm install @squarex/ui-component-lib
+```
+
+or
+
+```bash
+yarn add @squarex/ui-component-lib
+```
+
+## Quick Start
+
+### Basic Usage
+
+```jsx
+import React from 'react';
+import { Button, Card, BarChart, PieChart } from '@squarex/ui-component-lib';
+
+function App() {
+  const chartData = [
+    { category: 'Q1', value: 120, color: '#0ea5e9' },
+    { category: 'Q2', value: 190, color: '#0284c7' },
+    { category: 'Q3', value: 300, color: '#0369a1' },
+    { category: 'Q4', value: 280, color: '#075985' },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card>
+        <h2 className="text-xl font-semibold mb-4">Dashboard</h2>
+        <div className="space-y-4">
+          <Button variant="primary" size="lg">
+            Get Started
+          </Button>
+          <BarChart 
+            data={chartData}
+            title="Quarterly Sales"
+            width={600}
+            height={400}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}
+```
+
+### Import Specific Components
+
+```jsx
+// Import only what you need
+import { Button } from '@squarex/ui-component-lib/ui';
+import { BarChart } from '@squarex/ui-component-lib/charts';
+```
+
+## Components
+
+### UI Components
+
+#### Button
+A versatile button component with multiple variants and states.
+
+```jsx
+import { Button } from '@squarex/ui-component-lib';
+
+<Button variant="primary" size="md" color="primary">
+  Click me
+</Button>
+```
+
+#### Card
+A flexible container component for grouping related content.
+
+```jsx
+import { Card } from '@squarex/ui-component-lib';
+
+<Card variant="elevated" padding="lg">
+  <h3>Card Title</h3>
+  <p>Card content goes here</p>
+</Card>
+```
+
+### Chart Components
+
+#### BarChart
+Interactive bar charts with customizable styling and animations.
+
+```jsx
+import { BarChart } from '@squarex/ui-component-lib';
+
+const data = [
+  { category: 'Q1', value: 120, color: '#0ea5e9' },
+  { category: 'Q2', value: 190, color: '#0284c7' },
+];
+
+<BarChart 
+  data={data}
+  title="Quarterly Sales"
+  width={600}
+  height={400}
+  showTooltip={true}
+  animate={true}
+/>
+```
+
+#### PieChart
+Beautiful pie charts with interactive tooltips and legends.
+
+```jsx
+import { PieChart } from '@squarex/ui-component-lib';
+
+const data = [
+  { label: 'Desktop', value: 45, color: '#0ea5e9' },
+  { label: 'Mobile', value: 35, color: '#0284c7' },
+  { label: 'Tablet', value: 20, color: '#0369a1' },
+];
+
+<PieChart 
+  data={data}
+  title="Device Usage"
+  showLegend={true}
+  showTooltip={true}
+/>
+```
+
+## Configuration
+
+### Tailwind CSS Setup
+
+Add the SquareX design system to your Tailwind config:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@squarex/ui-component-lib/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        squarex: {
+          primary: {
+            50: '#f0f9ff',
+            500: '#0ea5e9',
+            900: '#0c4a6e',
+          },
+          // ... more colors
+        },
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+}
+```
+
+### CSS Import
+
+Import the global styles in your main CSS file:
+
+```css
+@import '@squarex/ui-component-lib/styles';
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 16+ 
+- npm or yarn
+- Git
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/SquareX/SquareXUIComponentLib.git
+cd SquareXUIComponentLib
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run Storybook
+npm run storybook
+
+# Run tests
+npm test
+
+# Build the library
+npm run build
+```
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── charts/         # Chart components (BarChart, PieChart, etc.)
+│   └── ui/             # UI components (Button, Card, etc.)
+├── types/              # TypeScript type definitions
+├── utils/              # Utility functions
+├── styles/             # Global styles and CSS
+└── index.ts           # Main export file
+```
+
+### Adding New Components
+
+1. Create component directory: `src/components/ui/NewComponent/`
+2. Add component files: `NewComponent.tsx`, `NewComponent.types.ts`, `index.ts`
+3. Create Storybook story: `NewComponent.stories.tsx`
+4. Add tests: `NewComponent.test.tsx`
+5. Export from main index files
+
+### Testing
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+```
+
+### Storybook
+
+```bash
+# Start Storybook development server
+npm run storybook
+
+# Build Storybook for production
+npm run build-storybook
+```
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Follow TypeScript best practices
+- Write comprehensive tests
+- Add Storybook stories for new components
+- Follow the existing code style
+- Update documentation as needed
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/charts/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BarChartProps } from './BarChart.types';
+declare const BarChart: React.FC<BarChartProps>;
+export default BarChart;
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/charts/components/charts/BarChart/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/BarChart/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA2BjD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6crC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/charts/components/charts/BarChart/BarChart.types.d.ts

@@ -0,0 +1,18 @@
+export type { BarChartProps, BarChartData } from '../../../types/charts';
+export interface BarChartConfig {
+    showGrid?: boolean;
+    showAxes?: boolean;
+    showLabels?: boolean;
+    showValues?: boolean;
+    barPadding?: number;
+    cornerRadius?: number;
+    orientation?: 'vertical' | 'horizontal';
+    stacked?: boolean;
+}
+export interface BarChartTooltip {
+    enabled?: boolean;
+    format?: (data: any) => string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    offset?: number;
+}
+//# sourceMappingURL=BarChart.types.d.ts.map

package/dist/charts/components/charts/BarChart/BarChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAGA,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGzE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/charts/components/charts/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart';
+export type { BarChartProps, BarChartData, BarChartConfig, BarChartTooltip } from './BarChart.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/components/charts/BarChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/BarChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/charts/components/charts/GaugeChart/GaugeChart.config.d.ts

@@ -0,0 +1,13 @@
+export declare const GAUGE_CONFIG: {
+    RADIUS: number;
+    STROKE_WIDTH: number;
+    ANIMATION_DURATION: number;
+    STEP_TIME: number;
+};
+export declare const calculateArcPath: (radius: number, strokeWidth: number) => string;
+export declare const formatTooltipContent: (segment: {
+    label: string;
+    value: number;
+    percentage: number;
+}) => string;
+//# sourceMappingURL=GaugeChart.config.d.ts.map

package/dist/charts/components/charts/GaugeChart/GaugeChart.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.config.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/GaugeChart/GaugeChart.config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;CAKxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,aAAa,MAAM,KAAG,MAGtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,KAAG,MAEpG,CAAC"}

package/dist/charts/components/charts/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { GaugeChartProps } from './GaugeChart.types';
+declare const GaugeChart: React.FC<GaugeChartProps>;
+export default GaugeChart;
+//# sourceMappingURL=GaugeChart.d.ts.map

package/dist/charts/components/charts/GaugeChart/GaugeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkKzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/charts/components/charts/GaugeChart/GaugeChart.hooks.d.ts

@@ -0,0 +1,28 @@
+import { GaugeSegment } from './GaugeChart.types';
+export declare const useGaugeAnimation: (total: number) => {
+    count: number;
+    animationProgress: number;
+};
+export declare const useTooltip: (containerRef: React.RefObject<HTMLDivElement>) => {
+    tooltip: {
+        show: boolean;
+        content: string;
+        x: number;
+        y: number;
+        type: string;
+    };
+    showTooltip: (e: React.MouseEvent, content: string, type: string) => void;
+    updateTooltip: (e: React.MouseEvent, content: string, type: string) => void;
+    hideTooltip: () => void;
+};
+export declare const useGaugeCalculations: (segments: GaugeSegment[]) => {
+    segmentData: {
+        percentage: number;
+        arcLength: number;
+        value: number;
+        color: string;
+        label: string;
+    }[];
+    total: number;
+};
+//# sourceMappingURL=GaugeChart.hooks.d.ts.map

package/dist/charts/components/charts/GaugeChart/GaugeChart.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/GaugeChart/GaugeChart.hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM;;;CAyB9C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,cAAc,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;;;;;;;;qBASlC,KAAK,CAAC,UAAU,WAAW,MAAM,QAAQ,MAAM;uBAiB7C,KAAK,CAAC,UAAU,WAAW,MAAM,QAAQ,MAAM;;CAmBtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,YAAY,EAAE;;;;;;;;;CAU5D,CAAC"}

package/dist/charts/components/charts/GaugeChart/GaugeChart.types.d.ts

@@ -0,0 +1,10 @@
+export interface GaugeSegment {
+    value: number;
+    color: string;
+    label: string;
+}
+export interface GaugeChartProps {
+    segments: GaugeSegment[];
+    title: string;
+}
+//# sourceMappingURL=GaugeChart.types.d.ts.map

package/dist/charts/components/charts/GaugeChart/GaugeChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/GaugeChart/GaugeChart.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/charts/components/charts/GaugeChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GaugeChart } from './GaugeChart';
+export type { GaugeSegment, GaugeChartProps } from './GaugeChart.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/components/charts/GaugeChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/GaugeChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/charts/components/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PieChartProps } from './PieChart.types';
+declare const PieChart: React.FC<PieChartProps>;
+export default PieChart;
+//# sourceMappingURL=PieChart.d.ts.map

package/dist/charts/components/charts/PieChart/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/PieChart/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAgB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6LrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/charts/components/charts/PieChart/PieChart.types.d.ts

@@ -0,0 +1,25 @@
+export type { PieChartProps, PieChartData } from '../../../types/charts';
+export interface PieChartConfig {
+    innerRadius?: number;
+    outerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+}
+export interface PieChartTooltip {
+    enabled?: boolean;
+    format?: (data: any) => string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    offset?: number;
+    showPercentage?: boolean;
+    showValue?: boolean;
+}
+export interface PieChartLegend {
+    enabled?: boolean;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    showValues?: boolean;
+    showPercentages?: boolean;
+    format?: (data: any) => string;
+}
+//# sourceMappingURL=PieChart.types.d.ts.map

package/dist/charts/components/charts/PieChart/PieChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/PieChart/PieChart.types.ts"],"names":[],"mappings":"AAGA,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGzE,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;CAChC"}

package/dist/charts/components/charts/PieChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PieChart } from './PieChart';
+export type { PieChartProps, PieChartData, PieChartConfig, PieChartTooltip, PieChartLegend } from './PieChart.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/components/charts/PieChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/PieChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/charts/components/charts/Sankey/Sankey.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SankeyVisualizationProps } from './Sankey.types';
+declare const SankeyVisualization: React.FC<SankeyVisualizationProps>;
+export default SankeyVisualization;
+//# sourceMappingURL=Sankey.d.ts.map

package/dist/charts/components/charts/Sankey/Sankey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sankey.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/Sankey/Sankey.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6hB3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/components/charts/Sankey/Sankey.types.d.ts

@@ -0,0 +1,50 @@
+export interface Node {
+    id: string;
+    name: string;
+    value: number;
+    type: "source" | "middle" | "target";
+    color: string;
+    x: number;
+    y: number;
+}
+export interface Link {
+    source: string;
+    target: string;
+    value: number;
+}
+export interface SankeyData {
+    nodes: Node[];
+    links: Link[];
+}
+export interface Statistics {
+    trendGoods: number;
+    shoppingViews: number;
+    storeDynamics: number;
+}
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface SankeyVisualizationProps {
+    data: SankeyData;
+    width?: number;
+    height?: number;
+    margin?: Margin;
+    backgroundColor?: string;
+    showTimeFilter?: boolean;
+    timeFilters?: string[];
+    activeFilter?: string;
+    onFilterChange?: (filter: string) => void;
+    filterButtonColor?: string;
+    filterButtonInactive?: string;
+    useCustomFlowWidth?: boolean;
+    customFlowWidth?: number;
+    minFlowWidth?: number;
+    maxFlowWidth?: number;
+    flowWidthMultiplier?: number;
+    showStatistics?: boolean;
+    statistics?: Statistics;
+}
+//# sourceMappingURL=Sankey.types.d.ts.map

package/dist/charts/components/charts/Sankey/Sankey.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sankey.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/Sankey/Sankey.types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAG9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB"}

package/dist/charts/components/charts/Sankey/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Sankey } from './Sankey';
+export * from './Sankey.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/components/charts/Sankey/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/Sankey/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,gBAAgB,CAAC"}

package/dist/charts/components/charts/SankeyFlow/SankeyFlow.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ShankyFlowProps } from './SankeyFlow.types';
+export declare const ShankyFlow: React.FC<ShankyFlowProps>;
+//# sourceMappingURL=SankeyFlow.d.ts.map

package/dist/charts/components/charts/SankeyFlow/SankeyFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyFlow.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/SankeyFlow/SankeyFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAgD,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAqCnG,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8gBhD,CAAC"}

package/dist/charts/components/charts/SankeyFlow/SankeyFlow.types.d.ts

@@ -0,0 +1,83 @@
+export interface Flow {
+    source: string;
+    sourceValue: number;
+    target: string;
+    targetValue: number;
+    thickness: number;
+}
+export interface ResponsiveBreakpoint {
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    fontSize: {
+        title: number;
+        subtitle: number;
+        label: number;
+        value: number;
+    };
+    nodeHeight: number;
+    flowScaleFactor: number;
+}
+export interface ResponsiveConfig {
+    desktop: ResponsiveBreakpoint;
+    tablet: ResponsiveBreakpoint;
+    mobile: ResponsiveBreakpoint;
+}
+export interface ShankyFlowProps {
+    flows: Flow[];
+    hoverColor?: string;
+    title?: string;
+    subtitle?: string;
+    showHeaders?: boolean;
+    showTitle?: boolean;
+    showSubtitle?: boolean;
+    showDebug?: boolean;
+    sourceHeader?: string;
+    targetHeader?: string;
+    labelColor?: string;
+    valueColor?: string;
+    headerColor?: string;
+    titleColor?: string;
+    subtitleColor?: string;
+    headerUnderlineColor?: string;
+    flowOpacity?: number;
+    hoverOpacity?: number;
+    curvature?: number;
+    valueFormatter?: (value: number) => string;
+    labelFormatter?: (label: string) => string;
+    tooltipRenderer?: (flow: Flow) => string;
+    gradientStops?: Array<{
+        offset: number | string;
+        color: string;
+        opacity?: number;
+    }>;
+    responsive?: boolean;
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    nodeHeight?: number;
+    flowScaleFactor?: number;
+    fontSize?: {
+        title: number;
+        subtitle: number;
+        label: number;
+        value: number;
+    };
+    responsiveConfig?: ResponsiveConfig;
+    breakpoints?: {
+        mobile: number;
+        tablet: number;
+        desktop: number;
+    };
+}
+//# sourceMappingURL=SankeyFlow.types.d.ts.map

package/dist/charts/components/charts/SankeyFlow/SankeyFlow.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyFlow.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/SankeyFlow/SankeyFlow.types.ts"],"names":[],"mappings":"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"}

package/dist/charts/components/charts/SankeyFlow/index.d.ts

@@ -0,0 +1,3 @@
+export { ShankyFlow } from './SankeyFlow';
+export * from './SankeyFlow.types';
+//# sourceMappingURL=index.d.ts.map