elseware-ui 3.0.1 → 3.0.2

package/README.md

@@ -1,289 +1,289 @@
-# elseware-ui
-
-A modern, customizable React component library for building web and desktop user interfaces.
-
-`elseware-ui` provides reusable, production-ready UI components designed to speed up application development while maintaining consistency, accessibility, scalability, and a clean developer experience.
-
-## Features
-
-- TypeScript-first component development
-- React-based component architecture
-- Tailwind CSS integration
-- Customizable themes, variants, shapes, and styles
-- Shared design tokens, enums, animations, and SVG utilities
-- Modular barrel exports
-- Tree-shakable ESM build
-- Storybook-powered component development
-- Linting, formatting, type checking, and build validation
-- Web and desktop application support
-- Developer-friendly APIs
-
-## Installation
-
-Install the package:
-
-```bash
-npm install elseware-ui
-```
-
-Install required peer dependencies if they are not already installed:
-
-```bash
-npm install react react-dom tailwindcss
-```
-
-## Package Exports
-
-The package exposes the main component API and compiled styles:
-
-```json
-{
-  ".": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs"
-  },
-  "./styles.css": "./dist/index.css"
-}
-```
-
-Recommended usage:
-
-```tsx
-import { Button } from "elseware-ui";
-import "elseware-ui/styles.css";
-```
-
-## Component Import Structure
-
-Use the following import ordering convention when creating or updating components:
-
-```ts
-// External
-
-// Internal
-
-// Data
-
-// Types
-```
-
-Example:
-
-```ts
-// External
-import React from "react";
-
-// Internal
-import { cn } from "../../../utils";
-
-// Data
-import { Shape, Variant } from "../../../data/enums";
-import { shapes, variants } from "../../../data/styles";
-
-// Types
-import type { BaseComponentProps } from "../../../interfaces";
-```
-
-## Development
-
-Install dependencies:
-
-```bash
-npm install
-```
-
-Start Storybook:
-
-```bash
-npm run dev
-```
-
-Build the component library:
-
-```bash
-npm run build
-```
-
-Build Storybook:
-
-```bash
-npm run build:storybook
-```
-
-## Code Quality
-
-Run TypeScript checks:
-
-```bash
-npm run typecheck
-```
-
-Run ESLint:
-
-```bash
-npm run lint
-```
-
-Fix lint issues:
-
-```bash
-npm run lint:fix
-```
-
-Format files with Prettier:
-
-```bash
-npm run format
-```
-
-Check formatting:
-
-```bash
-npm run format:check
-```
-
-Check unused files, exports, and dependencies:
-
-```bash
-npm run deadcode
-```
-
-Run the full validation pipeline:
-
-```bash
-npm run validate
-```
-
-Run automatic lint fixes, formatting, and validation:
-
-```bash
-npm run full
-```
-
-## Git Hooks
-
-Initialize Husky:
-
-```bash
-npm run prepare:husky
-```
-
-Recommended pre-commit hook:
-
-```bash
-npx lint-staged
-```
-
-## Publishing
-
-Before publishing, update the package version:
-
-```bash
-npm version patch
-```
-
-or:
-
-```bash
-npm version minor
-```
-
-or:
-
-```bash
-npm version major
-```
-
-Then publish:
-
-```bash
-npm run release
-```
-
-The `release` script validates the package before publishing.
-
-## Component Guidelines
-
-When building components:
-
-- Keep components modular and focused
-- Move reusable enums to `src/data/enums.ts`
-- Move reusable style maps to `src/data/styles.tsx`
-- Move reusable animation class maps to `src/data/animations.tsx`
-- Move generic SVG icons to `src/data/svgs.tsx`
-- Keep component-specific state logic in hooks when possible
-- Keep public types in each component's `types.ts`
-- Export each component through its local `index.ts`
-- Avoid unnecessary dependencies between unrelated component groups
-
-## Barrel Export Pattern
-
-Each component should expose a local barrel file:
-
-```ts
-export * from "./Button";
-export * from "./types";
-```
-
-Component groups should also expose barrel exports:
-
-```ts
-export * from "./avatar";
-export * from "./badge";
-export * from "./toast";
-```
-
-The root entry point should expose the public package API:
-
-```ts
-export * from "./components";
-export * from "./compositions";
-export * from "./hooks";
-export * from "./layouts";
-export * from "./providers";
-export * from "./routing";
-export * from "./utils";
-export * from "./interfaces";
-export * from "./types";
-```
-
-## Styling
-
-`elseware-ui` uses Tailwind CSS and shared design tokens.
-
-Consumers should import the compiled stylesheet once in their application entry:
-
-```tsx
-import "elseware-ui/styles.css";
-```
-
-## Documentation
-
-Interactive component documentation and examples are available through Storybook.
-
-Start Storybook locally:
-
-```bash
-npm run dev
-```
-
-## About elseware Technology
-
-elseware Technology builds tools, frameworks, and solutions for software engineering, cloud computing, game development, and developer productivity.
-
-## Contributing
-
-Contributions, issues, and feature requests are welcome.
-
-Before opening a pull request, run:
-
-```bash
-npm run validate
-```
-
-## License
-
-This project is licensed under the MIT License.
-
-Copyright © 2026 elseware Technology.
+# elseware-ui
+
+A modern, customizable React component library for building web and desktop user interfaces.
+
+`elseware-ui` provides reusable, production-ready UI components designed to speed up application development while maintaining consistency, accessibility, scalability, and a clean developer experience.
+
+## Features
+
+- TypeScript-first component development
+- React-based component architecture
+- Tailwind CSS integration
+- Customizable themes, variants, shapes, and styles
+- Shared design tokens, enums, animations, and SVG utilities
+- Modular barrel exports
+- Tree-shakable ESM build
+- Storybook-powered component development
+- Linting, formatting, type checking, and build validation
+- Web and desktop application support
+- Developer-friendly APIs
+
+## Installation
+
+Install the package:
+
+```bash
+npm install elseware-ui
+```
+
+Install required peer dependencies if they are not already installed:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Package Exports
+
+The package exposes the main component API and compiled styles:
+
+```json
+{
+  ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "./styles.css": "./dist/index.css"
+}
+```
+
+Recommended usage:
+
+```tsx
+import { Button } from "elseware-ui";
+import "elseware-ui/styles.css";
+```
+
+## Component Import Structure
+
+Use the following import ordering convention when creating or updating components:
+
+```ts
+// External
+
+// Internal
+
+// Data
+
+// Types
+```
+
+Example:
+
+```ts
+// External
+import React from "react";
+
+// Internal
+import { cn } from "../../../utils";
+
+// Data
+import { Shape, Variant } from "../../../data/enums";
+import { shapes, variants } from "../../../data/styles";
+
+// Types
+import type { BaseComponentProps } from "../../../interfaces";
+```
+
+## Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start Storybook:
+
+```bash
+npm run dev
+```
+
+Build the component library:
+
+```bash
+npm run build
+```
+
+Build Storybook:
+
+```bash
+npm run build:storybook
+```
+
+## Code Quality
+
+Run TypeScript checks:
+
+```bash
+npm run typecheck
+```
+
+Run ESLint:
+
+```bash
+npm run lint
+```
+
+Fix lint issues:
+
+```bash
+npm run lint:fix
+```
+
+Format files with Prettier:
+
+```bash
+npm run format
+```
+
+Check formatting:
+
+```bash
+npm run format:check
+```
+
+Check unused files, exports, and dependencies:
+
+```bash
+npm run deadcode
+```
+
+Run the full validation pipeline:
+
+```bash
+npm run validate
+```
+
+Run automatic lint fixes, formatting, and validation:
+
+```bash
+npm run full
+```
+
+## Git Hooks
+
+Initialize Husky:
+
+```bash
+npm run prepare:husky
+```
+
+Recommended pre-commit hook:
+
+```bash
+npx lint-staged
+```
+
+## Publishing
+
+Before publishing, update the package version:
+
+```bash
+npm version patch
+```
+
+or:
+
+```bash
+npm version minor
+```
+
+or:
+
+```bash
+npm version major
+```
+
+Then publish:
+
+```bash
+npm run release
+```
+
+The `release` script validates the package before publishing.
+
+## Component Guidelines
+
+When building components:
+
+- Keep components modular and focused
+- Move reusable enums to `src/data/enums.ts`
+- Move reusable style maps to `src/data/styles.tsx`
+- Move reusable animation class maps to `src/data/animations.tsx`
+- Move generic SVG icons to `src/data/svgs.tsx`
+- Keep component-specific state logic in hooks when possible
+- Keep public types in each component's `types.ts`
+- Export each component through its local `index.ts`
+- Avoid unnecessary dependencies between unrelated component groups
+
+## Barrel Export Pattern
+
+Each component should expose a local barrel file:
+
+```ts
+export * from "./Button";
+export * from "./types";
+```
+
+Component groups should also expose barrel exports:
+
+```ts
+export * from "./avatar";
+export * from "./badge";
+export * from "./toast";
+```
+
+The root entry point should expose the public package API:
+
+```ts
+export * from "./components";
+export * from "./compositions";
+export * from "./hooks";
+export * from "./layouts";
+export * from "./providers";
+export * from "./routing";
+export * from "./utils";
+export * from "./interfaces";
+export * from "./types";
+```
+
+## Styling
+
+`elseware-ui` uses Tailwind CSS and shared design tokens.
+
+Consumers should import the compiled stylesheet once in their application entry:
+
+```tsx
+import "elseware-ui/styles.css";
+```
+
+## Documentation
+
+Interactive component documentation and examples are available through Storybook.
+
+Start Storybook locally:
+
+```bash
+npm run dev
+```
+
+## About elseware Technology
+
+elseware Technology builds tools, frameworks, and solutions for software engineering, cloud computing, game development, and developer productivity.
+
+## Contributing
+
+Contributions, issues, and feature requests are welcome.
+
+Before opening a pull request, run:
+
+```bash
+npm run validate
+```
+
+## License
+
+This project is licensed under the MIT License.
+
+Copyright © 2026 elseware Technology.

package/dist/index.css

@@ -1114,6 +1114,12 @@ video {
 .max-w-\[180px\] {
   max-width: 180px;
 }
+.max-w-\[360px\] {
+  max-width: 360px;
+}
+.max-w-\[400px\] {
+  max-width: 400px;
+}
 .max-w-\[500px\] {
   max-width: 500px;
 }
@@ -1879,10 +1885,6 @@ video {
 .border-red-500\/30 {
   border-color: rgba(239, 68, 68, .3);
 }
-.border-red-600 {
-  --tw-border-opacity:1;
-  border-color: rgb(220 38 38/var(--tw-border-opacity,1));
-}
 .border-slate-700 {
   --tw-border-opacity:1;
   border-color: rgb(51 65 85/var(--tw-border-opacity,1));
@@ -2223,10 +2225,6 @@ video {
 .bg-purple-600\/40 {
   background-color: rgba(147, 51, 234, .4);
 }
-.bg-red-100 {
-  --tw-bg-opacity:1;
-  background-color: rgb(254 226 226/var(--tw-bg-opacity,1));
-}
 .bg-red-50 {
   --tw-bg-opacity:1;
   background-color: rgb(254 242 242/var(--tw-bg-opacity,1));
@@ -2418,11 +2416,6 @@ video {
   --tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);
   --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
 }
-.from-green-600 {
-  --tw-gradient-from:#16a34a var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
-}
 .from-green-700\/10 {
   --tw-gradient-from:rgba(21,128,61,.1) var(--tw-gradient-from-position);
   --tw-gradient-to:rgba(21,128,61,0) var(--tw-gradient-to-position);
@@ -2538,9 +2531,6 @@ video {
 .to-indigo-600 {
   --tw-gradient-to:#4f46e5 var(--tw-gradient-to-position);
 }
-.to-lime-500 {
-  --tw-gradient-to:#84cc16 var(--tw-gradient-to-position);
-}
 .to-pink-500 {
   --tw-gradient-to:#ec4899 var(--tw-gradient-to-position);
 }
@@ -6270,6 +6260,12 @@ video {
 .max-w-\[180px\] {
   max-width: 180px;
 }
+.max-w-\[360px\] {
+  max-width: 360px;
+}
+.max-w-\[400px\] {
+  max-width: 400px;
+}
 .max-w-\[500px\] {
   max-width: 500px;
 }
@@ -7035,10 +7031,6 @@ video {
 .border-red-500\/30 {
   border-color: rgba(239, 68, 68, .3);
 }
-.border-red-600 {
-  --tw-border-opacity:1;
-  border-color: rgb(220 38 38/var(--tw-border-opacity,1));
-}
 .border-slate-700 {
   --tw-border-opacity:1;
   border-color: rgb(51 65 85/var(--tw-border-opacity,1));
@@ -7379,10 +7371,6 @@ video {
 .bg-purple-600\/40 {
   background-color: rgba(147, 51, 234, .4);
 }
-.bg-red-100 {
-  --tw-bg-opacity:1;
-  background-color: rgb(254 226 226/var(--tw-bg-opacity,1));
-}
 .bg-red-50 {
   --tw-bg-opacity:1;
   background-color: rgb(254 242 242/var(--tw-bg-opacity,1));
@@ -7574,11 +7562,6 @@ video {
   --tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);
   --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
 }
-.from-green-600 {
-  --tw-gradient-from:#16a34a var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
-}
 .from-green-700\/10 {
   --tw-gradient-from:rgba(21,128,61,.1) var(--tw-gradient-from-position);
   --tw-gradient-to:rgba(21,128,61,0) var(--tw-gradient-to-position);
@@ -7694,9 +7677,6 @@ video {
 .to-indigo-600 {
   --tw-gradient-to:#4f46e5 var(--tw-gradient-to-position);
 }
-.to-lime-500 {
-  --tw-gradient-to:#84cc16 var(--tw-gradient-to-position);
-}
 .to-pink-500 {
   --tw-gradient-to:#ec4899 var(--tw-gradient-to-position);
 }