@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Logician Design System
+
+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,234 @@
+# Logician Design System
+
+A comprehensive React design system built on Chakra UI, providing a complete set of reusable UI components for building modern web applications.
+
+## Features
+
+- 🎨 **70+ Components** - Comprehensive set of UI components
+- 🎭 **Built on Chakra UI** - Leverages the power and flexibility of Chakra UI
+- 📱 **Responsive Design** - All components are mobile-first and responsive
+- 🦾 **TypeScript First** - Full TypeScript support with comprehensive type definitions
+- 📚 **Storybook 8.6** - Interactive component documentation and development
+- 🎯 **Accessible** - WAI-ARIA compliant components
+- ⚡ **Performance Optimized** - Tree-shakable exports and optimized bundle size
+
+## Installation
+
+### As an NPM Package
+
+Install the design system as an NPM package in your project:
+
+```bash
+yarn add logician-ui
+# or
+npm install logician-ui
+```
+
+### Prerequisites
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+yarn add react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion
+```
+
+### As a Git Submodule (Legacy)
+
+> **Note**: Submodule usage is legacy. We recommend using the NPM package for better dependency management and easier updates.
+
+If you need to use as a submodule:
+
+```bash
+# Add as submodule
+git submodule add https://github.com/yourusername/logician-ui.git src/components/design-system
+
+# Initialize and update
+git submodule update --init --recursive
+```
+
+## Usage
+
+### Basic Setup
+
+Wrap your application with Chakra UI's `ChakraProvider`:
+
+```tsx
+import { ChakraProvider } from "@chakra-ui/react";
+import { Button, Input, Card } from "logician-ui";
+
+function App() {
+  return (
+    <ChakraProvider>
+      <Card>
+        <Input placeholder="Enter your name" />
+        <Button variant="primary">Submit</Button>
+      </Card>
+    </ChakraProvider>
+  );
+}
+```
+
+### Component Categories
+
+#### Core Components
+
+- **Button** - Primary, secondary, tertiary, and danger variants
+- **Card** - Container component for grouping content
+- **Badge** - Status indicators and labels
+- **Tag** - Interactive tags with various styles
+
+#### Form Components
+
+- **Input** - Text input with validation support
+- **Textarea** - Multi-line text input
+- **Select** - Dropdown selection component
+- **Checkbox** - Multi-select checkboxes
+- **Radio** - Single-select radio buttons
+- **Switch** - Toggle switches
+- **Slider** - Range selection component
+
+#### Navigation
+
+- **Breadcrumb** - Navigation breadcrumbs
+- **Pagination** - Page navigation component
+- **Menu** - Dropdown and context menus
+- **Tabs** - Tab navigation component
+
+#### Feedback
+
+- **Alert** - Status messages and notifications
+- **Toast** - Toast notifications
+- **Modal** - Modal dialogs
+- **Tooltip** - Contextual help tooltips
+
+#### Data Display
+
+- **Table** - Data tables with sorting and filtering
+- **Avatar** - User profile pictures and initials
+- **Typography** - Text components with consistent styling
+- **Code** - Code syntax highlighting
+
+#### Media
+
+- **Icon** - Comprehensive icon system
+- **Logo** - Brand logo components
+
+## Development
+
+### Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Lint code
+yarn lint
+
+# Fix linting issues
+yarn lint:fix
+```
+
+### Storybook Development
+
+Run Storybook for interactive component development and documentation:
+
+```bash
+# Start Storybook development server
+yarn storybook
+
+# Build Storybook for deployment
+yarn build-storybook
+```
+
+Storybook will be available at [http://localhost:6006](http://localhost:6006) and provides an interactive environment to develop, test, and document your components.
+
+### Versioning & Releases
+
+This project uses [Changesets](https://github.com/changesets/changesets) for version management:
+
+```bash
+# Add a changeset for your changes
+yarn changeset
+
+# Version packages (updates CHANGELOG and package.json)
+yarn changeset:version
+
+# Check changeset status
+yarn changeset:status
+
+# Publish to npm (if configured)
+yarn changeset:publish
+```
+
+### Project Structure
+
+```
+├── .storybook/          # Storybook configuration
+│   ├── main.ts          # Main configuration
+│   └── preview.tsx      # Global decorators and parameters
+├── src/                 # Source code
+│   ├── components/      # All UI components
+│   │   ├── Button/
+│   │   │   ├── Button.tsx
+│   │   │   ├── Button.types.ts
+│   │   │   ├── Button.styles.ts
+│   │   │   ├── Button.stories.tsx
+│   │   │   └── index.tsx
+│   │   └── ...
+│   ├── utils/           # Utility functions
+│   ├── hooks/           # React hooks
+│   ├── theme/           # Chakra UI theme
+│   └── index.ts         # Main export file
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── README.md
+```
+
+### Adding New Components
+
+1. Create a new directory under `components/`
+2. Follow the established pattern:
+   - `ComponentName.tsx` - Main component
+   - `ComponentName.types.ts` - TypeScript types
+   - `ComponentName.styles.ts` - Styling (if needed)
+   - `ComponentName.stories.tsx` - Storybook stories
+   - `index.tsx` - Exports
+3. Add export to main `index.ts`
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes and ensure they pass linting (`yarn lint`)
+4. Add a changeset describing your changes (`yarn changeset`)
+5. Commit your changes (`git commit -m 'Add some amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
+
+### Changeset Guidelines
+
+When adding changesets, follow these guidelines:
+
+- **Major**: Breaking changes, component API changes, removing components
+- **Minor**: New components, new features, new props (non-breaking)
+- **Patch**: Bug fixes, internal improvements, documentation updates
+
+Example changeset workflow:
+
+```bash
+# After making changes
+yarn changeset
+
+# Select change type (major/minor/patch)
+# Write a clear description of your changes
+# Commit the changeset file along with your code changes
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a list of changes and version history.

package/USAGE.md

@@ -0,0 +1,299 @@
+# Usage Examples
+
+This document provides detailed examples of how to use the Logician Design System in your projects.
+
+## Installation & Setup
+
+### NPM Package Installation
+
+```bash
+# Install the package
+yarn add logician-ui
+# or
+npm install logician-ui
+
+# Install required peer dependencies
+yarn add react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion
+```
+
+### Basic Setup
+
+```tsx
+import { ChakraProvider } from "@chakra-ui/react";
+import { Button, Input, Card } from "logician-ui";
+
+function App() {
+  return <ChakraProvider>{/* Your app content */}</ChakraProvider>;
+}
+```
+
+## Example Implementations
+
+### Basic Form
+
+```tsx
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { Button, Input, FormLabel, Card } from "logician-ui";
+
+function LoginForm() {
+  return (
+    <ChakraProvider>
+      <Card maxWidth="400px" margin="auto" padding={6}>
+        <FormLabel>Email</FormLabel>
+        <Input type="email" placeholder="Enter your email" marginBottom={4} />
+
+        <FormLabel>Password</FormLabel>
+        <Input
+          type="password"
+          placeholder="Enter your password"
+          marginBottom={6}
+        />
+
+        <Button variant="primary" width="100%">
+          Sign In
+        </Button>
+      </Card>
+    </ChakraProvider>
+  );
+}
+```
+
+### Dashboard Layout
+
+```tsx
+import React from "react";
+import { ChakraProvider, Box, Grid, GridItem } from "@chakra-ui/react";
+import { Button, Card, Badge, Table, Avatar, Typography } from "logician-ui";
+
+function Dashboard() {
+  return (
+    <ChakraProvider>
+      <Box padding={6}>
+        <Typography variant="h1" marginBottom={6}>
+          Dashboard
+        </Typography>
+
+        <Grid templateColumns="repeat(3, 1fr)" gap={6} marginBottom={8}>
+          <GridItem>
+            <Card>
+              <Typography variant="h3">Total Users</Typography>
+              <Typography variant="h1" color="blue.500">
+                1,234
+              </Typography>
+              <Badge variant="success">+12%</Badge>
+            </Card>
+          </GridItem>
+
+          <GridItem>
+            <Card>
+              <Typography variant="h3">Revenue</Typography>
+              <Typography variant="h1" color="green.500">
+                $45,678
+              </Typography>
+              <Badge variant="success">+8%</Badge>
+            </Card>
+          </GridItem>
+
+          <GridItem>
+            <Card>
+              <Typography variant="h3">Orders</Typography>
+              <Typography variant="h1" color="purple.500">
+                892
+              </Typography>
+              <Badge variant="warning">-3%</Badge>
+            </Card>
+          </GridItem>
+        </Grid>
+
+        <Card>
+          <Typography variant="h2" marginBottom={4}>
+            Recent Users
+          </Typography>
+          <Table>{/* Table content */}</Table>
+        </Card>
+      </Box>
+    </ChakraProvider>
+  );
+}
+```
+
+### Modal Example
+
+```tsx
+import React, { useState } from "react";
+import { Button, Modal, Input, FormLabel } from "logician-ui";
+
+function UserSettingsModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Settings</Button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="User Settings"
+      >
+        <FormLabel>Display Name</FormLabel>
+        <Input placeholder="Enter display name" marginBottom={4} />
+
+        <FormLabel>Email Notifications</FormLabel>
+        <Switch defaultChecked marginBottom={6} />
+
+        <Button variant="primary" marginRight={3}>
+          Save Changes
+        </Button>
+        <Button variant="secondary" onClick={() => setIsOpen(false)}>
+          Cancel
+        </Button>
+      </Modal>
+    </>
+  );
+}
+```
+
+## TypeScript Configuration
+
+### Path Aliases (Optional)
+
+If you want to use shorter import paths, you can set up TypeScript path aliases in your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/ui/*": ["node_modules/logician-ui/src/*"]
+    }
+  }
+}
+```
+
+Then import like this:
+
+```tsx
+import { Button, Input } from "@/ui/components";
+```
+
+## Legacy: Git Submodule Usage
+
+> **⚠️ Deprecated**: The following instructions are for legacy submodule usage. We recommend using the NPM package instead.
+
+### Adding the Submodule
+
+```bash
+# Add as a submodule in your project
+git submodule add https://github.com/yourusername/logician-ui.git src/design-system
+
+# Initialize the submodule
+git submodule update --init --recursive
+```
+
+### Importing Components (Submodule)
+
+```tsx
+// Import specific components (submodule)
+import { Button, Input, Card } from "../design-system";
+
+// Or import from specific component directories (submodule)
+import { Button } from "../design-system/src/components/Button";
+```
+
+### Updating the Submodule
+
+```bash
+# Update to latest version
+git submodule update --remote
+
+# Commit the submodule update
+git add .
+git commit -m "Update design system to latest version"
+```
+
+### Path Aliases for Submodules
+
+If using submodules, update your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/design-system/*": ["src/design-system/*"],
+      "@/components/*": ["src/design-system/src/components/*"]
+    }
+  }
+}
+```
+
+Then import like this:
+
+```tsx
+import { Button, Input } from "@/design-system";
+import { Card } from "@/components/Card";
+```
+
+## Theme Customization
+
+You can extend the Chakra UI theme to customize the design system:
+
+```tsx
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+
+const customTheme = extendTheme({
+  colors: {
+    brand: {
+      50: "#E6FFFA",
+      500: "#38B2AC",
+      900: "#234E52",
+    },
+  },
+  fonts: {
+    heading: `'Open Sans', sans-serif`,
+    body: `'Raleway', sans-serif`,
+  },
+});
+
+function App() {
+  return <ChakraProvider theme={customTheme}>{/* Your app */}</ChakraProvider>;
+}
+```
+
+## Best Practices
+
+### 1. Component Organization
+
+- Group related components together
+- Use consistent naming conventions
+- Create wrapper components for complex patterns
+
+### 2. Performance
+
+- Import only the components you need
+- Use React.lazy() for code splitting when needed
+- Leverage Chakra UI's built-in optimization
+
+### 3. Accessibility
+
+- Always use semantic HTML elements
+- Provide proper ARIA labels
+- Test with screen readers
+- Ensure proper color contrast
+
+### 4. Responsive Design
+
+- Use Chakra UI's responsive props
+- Test on multiple device sizes
+- Consider mobile-first approach
+
+```tsx
+// Responsive example
+<Button
+  size={{ base: "sm", md: "md", lg: "lg" }}
+  width={{ base: "100%", md: "auto" }}
+>
+  Responsive Button
+</Button>
+```

package/dist/Markdown-2D5K42BY.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunk5FHXD7KR_js = require('./chunk-5FHXD7KR.js');
+
+
+
+Object.defineProperty(exports, "Markdown", {
+  enumerable: true,
+  get: function () { return chunk5FHXD7KR_js.Markdown; }
+});
+Object.defineProperty(exports, "baseMarkdownComponents", {
+  enumerable: true,
+  get: function () { return chunk5FHXD7KR_js.baseMarkdownComponents; }
+});
+//# sourceMappingURL=Markdown-2D5K42BY.js.map
+//# sourceMappingURL=Markdown-2D5K42BY.js.map

package/dist/Markdown-2D5K42BY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Markdown-2D5K42BY.js"}

package/dist/Markdown-AZBXO5ZP.css

@@ -0,0 +1,29 @@
+/* src/components/Markdown/Markdown.module.css */
+.markdownStyles {
+  color: black;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2em;
+}
+.markdownStyles > h1,
+.markdownStyles > h2,
+.markdownStyles > h3,
+.markdownStyles > h4 {
+  margin-bottom: 0.5em !important;
+}
+.markdownStyles > h1:not(:first-child),
+.markdownStyles > h2:not(:first-child),
+.markdownStyles > h3:not(:first-child),
+.markdownStyles > h4:not(:first-child) {
+  margin-top: 1em !important;
+}
+.markdownStyles ol,
+.markdownStyles ul {
+  margin-top: 8px;
+  padding-inline-start: 16px;
+}
+.markdownStyles li {
+  line-height: calc(16px * 1.5);
+  margin-bottom: 8px;
+}
+/*# sourceMappingURL=Markdown-AZBXO5ZP.css.map */

package/dist/Markdown-AZBXO5ZP.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Markdown/Markdown.module.css"],"sourcesContent":[".markdownStyles {\n  color: black;\n  display: flex;\n  flex-direction: column;\n  gap: 1.2em; /* Intended for longer form content like update modals */\n}\n\n.markdownStyles > h1,\n.markdownStyles > h2,\n.markdownStyles > h3,\n.markdownStyles > h4 {\n  margin-bottom: 0.5em !important;\n}\n.markdownStyles > h1:not(:first-child),\n.markdownStyles > h2:not(:first-child),\n.markdownStyles > h3:not(:first-child),\n.markdownStyles > h4:not(:first-child) {\n  margin-top: 1em !important;\n}\n\n.markdownStyles ol,\n.markdownStyles ul {\n  margin-top: 8px;\n  padding-inline-start: 16px;\n}\n.markdownStyles li {\n  /* 1.5x standard line height */\n  line-height: calc(16px * 1.5);\n  margin-bottom: 8px;\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAPC,eAOe,EAAE;AAClB,CARC,eAQe,EAAE;AAClB,CATC,eASe,EAAE;AAClB,CAVC,eAUe,EAAE;AAChB,iBAAe;AACjB;AACA,CAbC,eAae,EAAE,EAAE,KAAK;AACzB,CAdC,eAce,EAAE,EAAE,KAAK;AACzB,CAfC,eAee,EAAE,EAAE,KAAK;AACzB,CAhBC,eAgBe,EAAE,EAAE,KAAK;AACvB,cAAY;AACd;AAEA,CApBC,eAoBe;AAChB,CArBC,eAqBe;AACd,cAAY;AACZ,wBAAsB;AACxB;AACA,CAzBC,eAyBe;AAEd,eAAa,KAAK,KAAK,EAAE;AACzB,iBAAe;AACjB;","names":[]}

package/dist/Markdown-RJJEQN4R.mjs

@@ -0,0 +1,3 @@
+export { Markdown, baseMarkdownComponents } from './chunk-WSOHBA2C.mjs';
+//# sourceMappingURL=Markdown-RJJEQN4R.mjs.map
+//# sourceMappingURL=Markdown-RJJEQN4R.mjs.map

package/dist/Markdown-RJJEQN4R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Markdown-RJJEQN4R.mjs"}

package/dist/analytics-GNSHP7X3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M6 14v-2m4 2v-4m4 4V6M4 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2z"/></svg>

package/dist/bulb-24SQINQB.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M12.733 11.247a5.8 5.8 0 0 1-1.78 1.364v1.929a.643.643 0 0 1-.643.643H6.453a.643.643 0 0 1-.643-.643V12.61a5.786 5.786 0 0 1 4.955-10.454m-4.955 16.2h5.143"/><path d="M11.433 6.058c-.451-.078-.451-.726 0-.805a4.09 4.09 0 0 0 3.289-3.15l.027-.126c.098-.446.733-.449.835-.004l.033.146a4.1 4.1 0 0 0 3.298 3.13c.454.08.454.73 0 .81a4.1 4.1 0 0 0-3.297 3.131l-.033.145c-.102.445-.737.443-.835-.004l-.025-.124a4.09 4.09 0 0 0-3.292-3.149"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/dist/chat-TLRFEUAS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><g fill="currentColor" clip-path="url(#a)"><path d="M6.25 19.08c-.84 0-1.67-.2-2.42-.58l-1.8.33a.74.74 0 0 1-.67-.21.78.78 0 0 1-.21-.67l.34-1.8a5.4 5.4 0 0 1-.53-3.11 5.344 5.344 0 0 1 4.59-4.6c1.16-.15 2.35.08 3.36.67 1.01.58 1.81 1.5 2.26 2.58s.53 2.29.22 3.42c-.3 1.13-.98 2.14-1.9 2.85-.93.71-2.08 1.1-3.25 1.1zm-2.29-2.11c.13 0 .26.03.38.1 1.31.75 3.05.64 4.25-.28.67-.51 1.15-1.24 1.37-2.05s.16-1.68-.16-2.46-.9-1.43-1.62-1.85a3.85 3.85 0 0 0-2.42-.48c-.83.11-1.62.5-2.21 1.09s-.98 1.38-1.09 2.21.06 1.69.48 2.42c.09.16.12.34.09.51l-.18.99.99-.18s.09-.01.14-.01z"/><path d="M18.62 5.75a7.3 7.3 0 0 0-1.77-2.71 7.425 7.425 0 0 0-9.04-1.03c-.93.56-1.73 1.34-2.33 2.24-.59.88-.98 1.9-1.14 2.95.33-.1.67-.18 1.02-.22.19-.02.38-.03.57-.04.16-.66.44-1.3.81-1.87.48-.72 1.12-1.34 1.86-1.79a5.95 5.95 0 0 1 5.02-.54c.82.28 1.58.75 2.2 1.36.62.6 1.11 1.35 1.41 2.16s.42 1.7.35 2.56-.34 1.72-.77 2.46c-.09.16-.12.34-.09.51l.36 1.92-1.93-.36c-.18-.03-.36 0-.51.09-.49.28-1.02.47-1.57.6-.02.49-.08.98-.2 1.46-.01.05-.04.09-.05.14h.06c.8-.13 1.56-.39 2.27-.76l2.74.51c.24.04.49-.03.67-.21.17-.17.25-.42.21-.67l-.51-2.74c.46-.88.75-1.85.83-2.84.09-1.08-.06-2.19-.44-3.21z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>