@app-studio/web 0.8.76 → 0.8.77

package/README.md

@@ -0,0 +1,171 @@
+# App Studio Web Component Library
+
+![App Studio Web](https://img.shields.io/badge/App%20Studio-Web-blue)
+![React](https://img.shields.io/badge/React-18.x-61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-4.9.x-3178C6)
+![License](https://img.shields.io/badge/License-MIT-green)
+
+A comprehensive, accessible, and customizable React component library built with TypeScript and App Studio. This library provides a wide range of UI components designed to help you build beautiful and functional web applications quickly and efficiently.
+
+## Features
+
+- **40+ UI Components**: From basic elements to complex interactive components
+- **Fully Typed**: Built with TypeScript for better developer experience
+- **Accessible**: Follows WCAG guidelines for accessibility
+- **Customizable**: Easily theme and style components to match your brand
+- **Responsive**: Works across all device sizes
+- **Form Integration**: Seamless integration with Formik for form handling
+- **Modern Design**: Clean, consistent design following best practices
+
+## Installation
+
+```bash
+npm install @app-studio/web
+# or
+yarn add @app-studio/web
+```
+
+## Quick Start
+
+```jsx
+import React from 'react';
+import { Button, Text } from '@app-studio/web';
+
+function App() {
+  return (
+    <div>
+      <Text>Hello, world!</Text>
+      <Button onClick={() => alert('Clicked!')}>Click me</Button>
+    </div>
+  );
+}
+```
+
+## Component Categories
+
+### Layout Components
+- View
+- Center
+- Horizontal
+- Vertical
+- AspectRatio
+- Separator
+- Resizable
+
+### Form Components
+- Checkbox
+- Radio
+- Select
+- Switch
+- TextArea
+- TextField
+- OTPInput
+
+### Navigation Components
+- Accordion
+- Menubar
+- NavigationMenu
+- Pagination
+- Sidebar
+- Tabs
+
+### Feedback Components
+- Alert
+- Modal
+- Toast
+- Tooltip
+
+### Data Display Components
+- Avatar
+- Badge
+- Card
+- Table
+- Chart
+
+### Utility Components
+- Button
+- Gradient
+- Loader
+- Text
+
+### Interactive Components
+- Carousel
+- ContextMenu
+- DropdownMenu
+- HoverCard
+- Slider
+- Toggle
+- ToggleGroup
+
+## Design System
+
+All components follow a consistent design system with:
+
+- **Typography**: Inter/Geist font, specific sizes/weights
+- **Spacing**: 4px grid system
+- **Colors**: Neutral palette with semantic colors
+- **Rounded corners**: Consistent border radius
+- **Transitions**: Subtle animations
+
+## Development
+
+### Prerequisites
+
+- Node.js (>= 10.x)
+- npm or yarn
+
+### Setup
+
+1. Clone the repository
+   ```bash
+   git clone https://github.com/your-org/app-studio-web.git
+   cd app-studio-web
+   ```
+
+2. Install dependencies
+   ```bash
+   npm install
+   # or
+   yarn
+   ```
+
+3. Start the development server
+   ```bash
+   npm start
+   # or
+   yarn start
+   ```
+
+### Available Scripts
+
+- `npm start` - Start the development server
+- `npm run build` - Build the library for production
+- `npm test` - Run tests
+- `npm run storybook` - Start Storybook for component development
+- `npm run lint` - Run ESLint
+- `npm run lint:fix` - Fix ESLint issues
+- `npm run prettier` - Run Prettier
+- `npm run prettier:fix` - Fix Prettier issues
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
+
+### Creating New Components
+
+Use our component creation script to scaffold new components:
+
+```bash
+npm run create-structure -- --name=YourComponentName
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgements
+
+- Built with [React](https://reactjs.org/)
+- Styled with [App Studio](https://app-studio.dev/)
+- Form handling with [Formik](https://formik.org/)
+- State management with [Zustand](https://github.com/pmndrs/zustand)

package/dist/components/Chart/Chart/ChartColors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Chart Colors
+ *
+ * Defines a consistent color scheme for all chart examples.
+ * These colors should be used in the same order across all chart types
+ * to ensure consistency between the charts and their legends.
+ */
+export declare const CHART_COLORS: {
+    blue: string;
+    green: string;
+    purple: string;
+    orange: string;
+    red: string;
+    teal: string;
+    pink: string;
+    indigo: string;
+    yellow: string;
+    cyan: string;
+};
+export declare const DEFAULT_CHART_COLORS: string[];

package/dist/components/Separator/Separator.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { SeparatorProps } from './Separator/Separator.props';
 export declare const Separator: React.FC<SeparatorProps>;
+export declare const Divider: React.FC<SeparatorProps>;

package/dist/web.cjs.development.js

@@ -29,7 +29,6 @@ require('core-js/modules/web.url.js');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.url-search-params.js');
 var zustand = require('zustand');
-require('src/components/Badge/Badge');
 require('core-js/modules/es.string.ends-with.js');
 require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
@@ -4755,8 +4754,32 @@ Carousel.Item = CarouselItemComponent; // Compound component pattern
 Carousel.Previous = CarouselPreviousComponent; // Compound component pattern
 Carousel.Next = CarouselNextComponent; // Compound component pattern
 
+/**
+ * Chart Colors
+ *
+ * Defines a consistent color scheme for all chart examples.
+ * These colors should be used in the same order across all chart types
+ * to ensure consistency between the charts and their legends.
+ */
+var CHART_COLORS = {
+  // Primary colors for all charts
+  blue: 'color.blue.500',
+  green: 'color.green.500',
+  purple: 'color.purple.500',
+  orange: 'color.orange.500',
+  red: 'color.red.500',
+  // Additional colors if needed
+  teal: 'color.teal.500',
+  pink: 'color.pink.500',
+  indigo: 'color.indigo.500',
+  yellow: 'color.yellow.500',
+  cyan: 'color.cyan.500'
+};
+// Default color array for consistent ordering
+var DEFAULT_CHART_COLORS = [CHART_COLORS.blue, CHART_COLORS.green, CHART_COLORS.purple, CHART_COLORS.orange, CHART_COLORS.red, CHART_COLORS.teal, CHART_COLORS.pink, CHART_COLORS.indigo, CHART_COLORS.yellow, CHART_COLORS.cyan];
+
 // Default colors for chart series
-var DEFAULT_COLORS = ['color.blue.500', 'color.green.500', 'color.purple.500', 'color.orange.500', 'color.red.500', 'color.teal.500', 'color.pink.500', 'color.indigo.500', 'color.yellow.500', 'color.cyan.500'];
+var DEFAULT_COLORS = DEFAULT_CHART_COLORS;
 // Default styles for chart container
 var ChartContainerStyles = {
   width: '100%',
@@ -5000,6 +5023,9 @@ var BarChart = _ref => {
     hideTooltip,
     views
   } = _ref;
+  var {
+    getColor
+  } = appStudio.useTheme();
   // Calculate chart dimensions
   var padding = {
     top: 20,
@@ -5093,7 +5119,7 @@ var BarChart = _ref => {
       y: y,
       width: barWidth,
       height: barHeight,
-      fill: series.color,
+      fill: series.color ? getColor(series.color) : 'black',
       onMouseEnter: handleMouseEnter,
       onMouseLeave: hideTooltip,
       onClick: handleClick
@@ -5114,6 +5140,9 @@ var LineChart = _ref => {
     views
   } = _ref;
   // Calculate chart dimensions
+  var {
+    getColor
+  } = appStudio.useTheme();
   var padding = {
     top: 20,
     right: 20,
@@ -5204,11 +5233,11 @@ var LineChart = _ref => {
     key: "series-" + seriesIndex
   }, /*#__PURE__*/React__default.createElement("path", Object.assign({
     d: generateAreaPath(series.data),
-    fill: series.color,
+    fill: series.color ? getColor(series.color) : 'black',
     opacity: 0.1
   }, views == null ? void 0 : views.area)), /*#__PURE__*/React__default.createElement("path", Object.assign({
     d: generatePath(series.data),
-    stroke: series.color
+    stroke: series.color ? getColor(series.color) : 'black'
   }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
     var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
     var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
@@ -15242,6 +15271,7 @@ var SeparatorComponent = props => {
   return /*#__PURE__*/React__default.createElement(SeparatorView, Object.assign({}, props));
 };
 var Separator = SeparatorComponent;
+var Divider = SeparatorComponent;
 
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
@@ -17841,6 +17871,7 @@ exports.CountryPicker = CountryPicker;
 exports.CropIcon = CropIcon;
 exports.DatePicker = DatePicker;
 exports.DeleteIcon = DeleteIcon;
+exports.Divider = Divider;
 exports.DocumentIcon = DocumentIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragAndDrop = DragAndDrop;