squarex-ui-component-lib 1.0.0 → 1.0.2

package/README.md

@@ -18,22 +18,29 @@ A modern, comprehensive React component library featuring beautiful charts and U
 ## Installation
 
 ```bash
-npm install @squarex/ui-component-lib
+npm install squarex-ui-component-lib
 ```
 
 or
 
 ```bash
-yarn add @squarex/ui-component-lib
+yarn add squarex-ui-component-lib
 ```
 
 ## Quick Start
 
-### Basic Usage
+### 1. Import Styles
+To use the component library, you **must** import the global CSS in your application's entry point (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import 'squarex-ui-component-lib/dist/index.esm.css';
+```
+
+### 2. Basic Usage
 
 ```jsx
 import React from 'react';
-import { Button, Card, BarChart, PieChart } from '@squarex/ui-component-lib';
+import { Button, Card, BarChart, PieChart } from 'squarex-ui-component-lib';
 
 function App() {
   const chartData = [
@@ -64,12 +71,34 @@ function App() {
 }
 ```
 
+#### Icon
+A flexible icon component that supports over 300+ vectors.
+
+```jsx
+import { Icon } from 'squarex-ui-component-lib';
+
+// Basic usage
+<Icon name="app-window" size="medium" />
+
+// With variant and custom size
+<Icon 
+  name="arrow-right" 
+  variant="primary" 
+  size={24} 
+/>
+
+// All icons list can be found in src/components/data/iconList.ts
+```
+
+### 3. Icon Setup (Optional)
+Icons are automatically loaded from a CDN (JSDelivr) as a fallback, so they will work out of the box in projects like Vite, Create React App, or Codesandbox.
+
 ### 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';
+import { Button } from 'squarex-ui-component-lib/ui';
+import { BarChart } from 'squarex-ui-component-lib/charts';
 ```
 
 ## Components
@@ -80,7 +109,7 @@ import { BarChart } from '@squarex/ui-component-lib/charts';
 A versatile button component with multiple variants and states.
 
 ```jsx
-import { Button } from '@squarex/ui-component-lib';
+import { Button } from 'squarex-ui-component-lib';
 
 <Button variant="primary" size="md" color="primary">
   Click me
@@ -91,7 +120,7 @@ import { Button } from '@squarex/ui-component-lib';
 A flexible container component for grouping related content.
 
 ```jsx
-import { Card } from '@squarex/ui-component-lib';
+import { Card } from 'squarex-ui-component-lib';
 
 <Card variant="elevated" padding="lg">
   <h3>Card Title</h3>
@@ -105,7 +134,7 @@ import { Card } from '@squarex/ui-component-lib';
 Interactive bar charts with customizable styling and animations.
 
 ```jsx
-import { BarChart } from '@squarex/ui-component-lib';
+import { BarChart } from 'squarex-ui-component-lib';
 
 const data = [
   { category: 'Q1', value: 120, color: '#0ea5e9' },
@@ -126,7 +155,7 @@ const data = [
 Beautiful pie charts with interactive tooltips and legends.
 
 ```jsx
-import { PieChart } from '@squarex/ui-component-lib';
+import { PieChart } from 'squarex-ui-component-lib';
 
 const data = [
   { label: 'Desktop', value: 45, color: '#0ea5e9' },
@@ -153,7 +182,7 @@ Add the SquareX design system to your Tailwind config:
 module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@squarex/ui-component-lib/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/squarex-ui-component-lib/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -178,10 +207,10 @@ module.exports = {
 
 ### CSS Import
 
-Import the global styles in your main CSS file:
+Import the global styles in your main entry file:
 
-```css
-@import '@squarex/ui-component-lib/styles';
+```tsx
+import 'squarex-ui-component-lib/dist/index.esm.css';
 ```
 
 ## Development

package/dist/charts/components/icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}