@sirlund/mindset-ui 0.1.0

package/README.md

@@ -0,0 +1,307 @@
+# MindSet Design System# MindSet Design System
+
+
+
+A comprehensive Storybook documentation repository for the MindSet Design System, featuring components extracted from Figma with full specifications and interactive examples.A comprehensive Storybook documentation repository for the MindSet Design System, featuring components extracted from Figma with full specifications and interactive examples.
+
+
+
+**Figma Source:** [MindSet Design System](https://www.figma.com/design/XVdVpzEXk8FK4GaXgT1Gi8/%E2%9D%96-MindSet-Design-System)**Figma Source:** [MindSet Design System](https://www.figma.com/design/XVdVpzEXk8FK4GaXgT1Gi8/%E2%9D%96-MindSet-Design-System)
+
+
+
+## 📚 Overview## 📚 Overview
+
+
+
+This repository documents and implements the MindSet Design System components as defined in Figma. It serves as:This repository documents and implements the MindSet Design System components as defined in Figma. It serves as:
+
+
+
+- 🎨 **Component Documentation** - Interactive Storybook showcasing all component variants- 🎨 **Component Documentation** - Interactive Storybook showcasing all component variants
+
+- 📋 **Design Reference** - Direct mapping to Figma component specifications- 📋 **Design Reference** - Direct mapping to Figma component specifications
+
+- 🔧 **Implementation Guide** - Production-ready React components with TypeScript- 🔧 **Implementation Guide** - Production-ready React components with TypeScript
+
+- ♿ **Accessibility** - Built-in a11y testing and documentation- ♿ **Accessibility** - Built-in a11y testing and documentation
+
+
+
+## 🧩 Components## 🧩 Components
+
+
+
+### Button Components (140 Total Variants)### Button Components (140 Total Variants)
+
+
+
+#### 1. **Button** - 80 Variants#### 1. **Button** - 80 Variants
+
+- **Types**: Primary, Accent (Secondary), Ghost (Tertiary), Text- **Types**: Primary, Accent (Secondary), Ghost (Tertiary), Text
+
+- **Sizes**: XSmall, Small, Medium, Large- **Sizes**: XSmall, Small, Medium, Large
+
+- **States**: Default, Hover, Active, Focus, Disabled- **States**: Default, Hover, Active, Focus, Disabled
+
+- **Figma Node ID**: `90:1131`- **Figma Node ID**: `90:1131`
+
+
+
+#### 2. **IconButton** - 48 Variants#### 2. **IconButton** - 48 Variants
+
+- **Types**: Primary, Accent, Ghost, Text- **Types**: Primary, Accent, Ghost, Text
+
+- **Sizes**: Small, XSmall- **Sizes**: Small, XSmall
+
+- **Shapes**: Square, Circle- **Shapes**: Square, Circle
+
+- **Figma Node ID**: `90:2972`- **Figma Node ID**: `90:2972`
+
+
+
+#### 3. **ToggleButton** - 12 Variants#### 3. **ToggleButton** - 12 Variants
+
+- **Types**: Default, Icon Only- **Types**: Default, Icon Only
+
+- **Sizes**: Large, Small, XSmall- **Sizes**: Large, Small, XSmall
+
+- **Figma Node ID**: `454:8432`- **Figma Node ID**: `454:8432`
+
+
+
+### Additional Components### Additional Components
+
+- **Card** - Pricing card components with variants- **Card** - Pricing card components with variants
+
+- **Icon** - Icon system with multiple implementations- **Icon** - Icon system with multiple implementations
+
+
+
+## 🚀 Getting Started## 🚀 Getting Started
+
+
+
+### PrerequisitesCurrently, two official plugins are available:
+
+
+
+- Node.js 16+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+
+- npm or yarn- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+
+
+### Installation## Expanding the ESLint configuration
+
+
+
+```bashIf you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+# Clone the repository
+
+git clone <repository-url>```js
+
+cd MindsetDSexport default tseslint.config([
+
+  globalIgnores(['dist']),
+
+# Install dependencies  {
+
+npm install    files: ['**/*.{ts,tsx}'],
+
+```    extends: [
+
+      // Other configs...
+
+### Running Storybook
+
+      // Remove tseslint.configs.recommended and replace with this
+
+```bash      ...tseslint.configs.recommendedTypeChecked,
+
+# Start Storybook development server      // Alternatively, use this for stricter rules
+
+npm run storybook      ...tseslint.configs.strictTypeChecked,
+
+      // Optionally, add this for stylistic rules
+
+# Storybook will be available at http://localhost:6006      ...tseslint.configs.stylisticTypeChecked,
+
+```
+
+      // Other configs...
+
+### Building Storybook    ],
+
+    languageOptions: {
+
+```bash      parserOptions: {
+
+# Build static Storybook site        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+
+npm run build-storybook        tsconfigRootDir: import.meta.dirname,
+
+      },
+
+# Output will be in storybook-static/      // other options...
+
+```    },
+
+  },
+
+## 📦 Project Structure])
+
+```
+
+```
+
+mindset-design-system/You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+├── .storybook/              # Storybook configuration
+
+│   ├── main.ts              # Main config with addons```js
+
+│   ├── preview.ts           # Global decorators and parameters// eslint.config.js
+
+│   └── vitest.setup.ts      # Test configurationimport reactX from 'eslint-plugin-react-x'
+
+├── src/import reactDom from 'eslint-plugin-react-dom'
+
+│   └── components/          # Component library
+
+│       ├── Button/export default tseslint.config([
+
+│       │   ├── Button.tsx           # Main button component  globalIgnores(['dist']),
+
+│       │   ├── Button.css           # Button styles  {
+
+│       │   ├── Button.stories.tsx   # Button documentation (80 variants)    files: ['**/*.{ts,tsx}'],
+
+│       │   ├── IconButton.stories.tsx   # IconButton docs (48 variants)    extends: [
+
+│       │   ├── ToggleButton.stories.tsx # ToggleButton docs (12 variants)      // Other configs...
+
+│       │   └── index.ts             # Exports      // Enable lint rules for React
+
+│       ├── Card/      reactX.configs['recommended-typescript'],
+
+│       │   ├── Card.tsx      // Enable lint rules for React DOM
+
+│       │   ├── Card.css      reactDom.configs.recommended,
+
+│       │   ├── Card.stories.tsx    ],
+
+│       │   └── index.ts    languageOptions: {
+
+│       └── Icon/      parserOptions: {
+
+│           ├── Icon.tsx        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+
+│           ├── Icon.css        tsconfigRootDir: import.meta.dirname,
+
+│           ├── Icon.stories.tsx      },
+
+│           └── index.ts      // other options...
+
+├── MINDSET_DESIGN_SYSTEM.md # Complete design system documentation    },
+
+├── package.json  },
+
+└── README.md])
+
+``````
+
+
+## 📖 Documentation
+
+### Component Documentation
+
+Each component includes comprehensive Storybook stories with:
+- **Interactive controls** - Modify props in real-time
+- **Multiple examples** - All variants and use cases
+- **Design mapping** - Links to Figma node IDs
+- **Code examples** - Copy-paste ready implementations
+- **Accessibility notes** - a11y best practices
+
+### Design System Documentation
+
+See [MINDSET_DESIGN_SYSTEM.md](./MINDSET_DESIGN_SYSTEM.md) for:
+- Complete component specifications from Figma
+- Variant matrices and property tables
+- Figma node ID reference
+- Typography and color tokens
+- Implementation guidelines
+
+## 🛠️ Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run storybook` | Start Storybook dev server on port 6006 |
+| `npm run build-storybook` | Build static Storybook site |
+| `npm run lint` | Run ESLint on the codebase |
+| `npm run dev` | Alias for `npm run storybook` |
+| `npm run build` | Alias for `npm run build-storybook` |
+
+## 🧪 Testing
+
+Storybook includes the following testing addons:
+- **@storybook/addon-a11y** - Accessibility testing
+- **@storybook/addon-vitest** - Component testing with Vitest
+
+## 🎨 Design Tokens
+
+The design system uses the following design tokens:
+
+### Typography
+- **UI-Label/XS** - Extra small labels
+- **UI-Label/S** - Small labels  
+- **UI-Label/M** - Medium labels (default)
+- Each with Regular & Strong weights
+
+### Colors
+Defined in CSS variables, mapped from Figma:
+- Primary colors for main actions
+- Accent colors for secondary actions
+- Ghost/Tertiary for subtle interactions
+- Semantic colors (danger, success, warning)
+
+## 🔗 Figma Integration
+
+This repository is designed to work with the Figma design system:
+- Component names match Figma layer names
+- Props map to Figma component properties
+- Variants mirror Figma variant structure
+- Node IDs documented for programmatic access
+
+## 📝 Contributing
+
+When adding new components:
+1. Create component files in `src/components/[ComponentName]/`
+2. Include `.tsx`, `.css`, `.stories.tsx`, and `index.ts`
+3. Document Figma node IDs in stories
+4. Update `MINDSET_DESIGN_SYSTEM.md` with specifications
+5. Add comprehensive stories covering all variants
+
+## 🔧 Technology Stack
+
+- **React 19** - UI library
+- **TypeScript 5.8** - Type safety
+- **Storybook 9.1** - Component documentation
+- **Vite 7** - Build tool
+- **Vitest 3** - Testing framework
+- **ESLint** - Code linting
+
+## 📄 License
+
+[Add your license here]
+
+## 👥 Team
+
+MindSet Team
+
+---
+
+**Last Updated:** October 16, 2025  
+**Storybook Version:** 9.1.5  
+**Design System Version:** Based on Figma file 2025-10-15

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import './Button.css';
+export interface ButtonProps {
+    /**
+     * The content of the button
+     */
+    children: React.ReactNode;
+    /**
+     * The variant of the button
+     * - primary: Dark background (inverted)
+     * - accent: Blue background (secondary)
+     * - tertiary: Transparent with border (ghost)
+     * - text: No background or border
+     * - danger: Red for destructive actions
+     */
+    variant?: 'primary' | 'accent' | 'tertiary' | 'text' | 'danger';
+    /**
+     * The size of the button
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in loading state
+     */
+    loading?: boolean;
+    /**
+     * Whether the button takes full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display before the text
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Icon to display after the text
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * HTML button type
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChE;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwExC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Button, type ButtonProps } from './Button';
+export { default } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    /**
+     * The plan type
+     */
+    plan?: 'Starter' | 'Individual' | 'Teams';
+    /**
+     * The plan price
+     */
+    price?: number;
+    /**
+     * The plan price per period
+     */
+    pricePeriod?: string;
+    /**
+     * Number of seats/users
+     */
+    seats?: number;
+    /**
+     * Whether seats can be edited
+     */
+    canEditSeats?: boolean;
+    /**
+     * Next billing amount
+     */
+    nextBillingAmount?: number;
+    /**
+     * Renewal date
+     */
+    renewalDate?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Click handler for the action button
+     */
+    onActionClick?: () => void;
+}
+export declare const Card: React.FC<CardProps>;
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AA0CpB,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4IpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Card, type CardProps } from './Card';
+export { default } from './Card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Icon.css';
+export type IconName = 'add' | 'add-circle' | 'alert-circle' | 'alert-triangle' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'bell' | 'trash' | 'building' | 'calendar' | 'camera' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'close' | 'mail' | 'folder' | 'folder-open' | 'lock' | 'menu' | 'pencil' | 'question-circle' | 'remove' | 'search' | 'settings' | 'upload' | 'user' | 'view' | 'view-off';
+export type IconSize = 'XS' | 'S' | 'M' | 'L';
+export interface IconProps {
+    name: IconName;
+    size?: IconSize;
+    className?: string;
+    color?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,UAAU,GACV,MAAM,GACN,OAAO,GACP,UAAU,GACV,UAAU,GACV,QAAQ,GACR,OAAO,GACP,cAAc,GACd,cAAc,GACd,eAAe,GACf,YAAY,GACZ,OAAO,GACP,MAAM,GACN,QAAQ,GACR,aAAa,GACb,MAAM,GACN,MAAM,GACN,QAAQ,GACR,iBAAiB,GACjB,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgFpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Icon/IconSimple.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Icon.css';
+export type IconName = 'add' | 'edit' | 'trash' | 'settings';
+export interface IconProps {
+    name: IconName;
+    size?: 'XS' | 'S' | 'M' | 'L';
+    className?: string;
+    color?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const IconSimple: React.FC<IconProps>;
+export default IconSimple;
+//# sourceMappingURL=IconSimple.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSimple.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/IconSimple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkD1C,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Icon, type IconProps, type IconName, type IconSize } from './Icon';
+export { default } from './Icon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}