@new-black/lyra 1.1.2 → 1.1.3-next.2

package/README.md

@@ -66,7 +66,13 @@ For the icons used in Lyra we use an SVG sprite.
 To copy the SVG sprite to your public folder, execute the following command in your terminal:
 
 ```bash
-cp node_modules/@new-black/lyra/dist/icons public
+cp -r node_modules/@new-black/lyra/dist/icons public
+```
+
+### Add a link prefetch tag to prefetch the icons to your base template
+
+```html
+<link rel="prefetch" href="/icons/icon-defs.svg" as="image" type="image/svg+xml" />
 ```
 
 SVG sprites are a convenient way to use icons in web development. Here's why they are nice to use:
@@ -103,41 +109,35 @@ import { Button, Accordion } from "@new-black/lyra";
 
 Check out the documentation (not yet available) for a detailed guide on using and customizing Lyra.
 
-## Roadmap
+## Development & Releases
+
+This package uses semantic-release for automated versioning and publishing. The release process differs based on the branch:
+
+### Main Branch
 
-Our future plans for Lyra include:
+Pushes to `main` trigger releases of stable versions to npm under the `latest` tag. These are production-ready releases following semantic versioning (e.g., 1.0.0, 1.1.0, etc.).
 
-- Adding more components and design elements.
-- Enhancing documentation with usage examples and guidelines.
+### Develop Branch
+
+Pushes to `develop` create pre-releases under the `next` tag on npm. These versions are suffixed with `-next.X` (e.g., 1.0.0-next.1). Install pre-releases using:
+
+```bash
+npm install @new-black/lyra@next
+```
 
-Please note that this roadmap is subject to change as the project evolves.
+### Commit Messages
 
-## How to Publish Changes to @new-black/lyra
-Follow these steps to publish updates to the @new-black/lyra package:
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages to determine version bumps:
 
-### Step 1: Create a Feature Branch
-1.	Checkout the develop branch: `git checkout develop`
-2.	`git pull origin develop`
-3.	Create a new branch for your changes: `git checkout -b feature/your-feature-name`
-4.	Make your changes in the newly created branch
-5.	When done, test if the package can still build by running `npm run build`
+- `fix:` - Patches (0.0.X)
 
-### Step 2: Bump the Version
-Update the package version: `npm version patch`
-This will increment the patch version (e.g., from 1.0.0 to 1.0.1).
+  - Example: `fix: button hover state color`
+  - With scope: `fix(button): hover state color`
 
-### Step 3: Create a Release Pull Request
-1. Push your changes to the remote repository: `git push origin feature/your-feature-name`
-2. Create a pull request with the following naming convention: `release/{new version}`
+- `feat:` - Minor releases (0.X.0)
+  - Example: `feat: add new toast component`
+  - With scope: `feat(toast): add new component`
 
-### Step 4: Merge the Pull Request
-1. Merge the PR into the main branch through the GitHub interface.
-   
-### Step 5: Prepare for Publishing
-1. Checkout the main branch: `git checkout main`
-2. Pull the latest changes: `git pull origin main`
-3. Install dependencies and build the package: `npm install` and `npm run build`
+Other common types are: build, chore, ci, docs, style, refactor, perf, test
 
-### Step 6: Publish the Package
-Publish the package to npm: `npm publish`. Ensure the build was successful before running this command.
-By following these steps, you can ensure that your changes are correctly implemented and published to the @new-black/lyra package.
+Common scopes in this project include component names (`button`, `modal`, `toast`), systems (`theme`, `icons`), or areas (`docs`, `build`).

package/dist/components/button-indicator/button-indicator.d.ts

@@ -1,4 +1,609 @@
 /// <reference types="react" />
-import { ButtonIndicatorProps } from "./button-indicator.types";
-export declare const ButtonIndicator: (props: ButtonIndicatorProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const ButtonIndicator: (props: Omit<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}, {
+    outerCircle: string[];
+    innerCircle: string[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}, {
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}>, {
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}, {
+    outerCircle: string[];
+    innerCircle: string[];
+}, import("tailwind-variants").TVReturnType<{
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}, {
+    outerCircle: string[];
+    innerCircle: string[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}, {
+    isAnimated: {
+        true: {
+            outerCircle: string;
+        };
+    };
+    hasContent: {
+        true: {
+            outerCircle: string[];
+            innerCircle: string[];
+        };
+    };
+    isIcon: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    large: {
+        true: {
+            innerCircle: string[];
+        };
+    };
+    color: {
+        blue: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        green: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        yellow: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        orange: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        red: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        gray: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        transparent: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        purple: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        lime: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        teal: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        brown: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        pink: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        indigo: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        cyan: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+        mint: {
+            innerCircle: string;
+            outerCircle: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>, "hasContent" | "isIcon"> & {
+    className?: {
+        outerCircle?: string | undefined;
+        innerCircle?: string | undefined;
+    } | undefined;
+    style?: import("react").CSSProperties | undefined;
+    disableAnimation?: boolean | undefined;
+    icon?: "search" | "add-multiple-values" | "alert-error" | "alert-information" | "alert-success" | "alert-warning" | "allocation" | "api-user" | "app-settings" | "arrow-down" | "arrow-down-up" | "arrow-turn-down" | "arrow-up" | "assortments" | "async-requests" | "audit-files" | "auto-format-phone-number" | "autocomplete" | "availability" | "basic-editor" | "block" | "calculator" | "calendar" | "campaigns" | "case-management" | "case-settings" | "cash-corrections" | "checkmark" | "checkout-options" | "chevron-down" | "chevron-first-page" | "chevron-last-page" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-up-down" | "clear" | "clipboard" | "cloud" | "code-editor" | "company" | "consumers" | "control-documents" | "cookbook" | "cookbook-events" | "copy" | "crown" | "cultures" | "currencies" | "current-user-organization-unit" | "custom-field" | "custom-order-statuses" | "custom-order-types" | "cycle-count-zone-groups" | "cycle-count-zones" | "dark-mode" | "delete" | "diff-editor" | "document" | "document-light" | "done" | "download" | "drag-handle" | "e-invoices" | "edit" | "email" | "employees" | "endpoint" | "eraser" | "error-queue" | "escape" | "event-export" | "event-ledger" | "excel" | "exit-fullscreen" | "export-logs" | "filter" | "financial-periods" | "folder" | "full-stock-count" | "fullscreen" | "general-ledger-accounts" | "general-ledgers" | "giftcards" | "hamburger" | "hand" | "heart" | "heart-filled" | "history" | "images" | "income-and-expense" | "incoming-shipment" | "information" | "infrastructure" | "inquiries" | "invoices" | "knowledge" | "layers" | "light-mode" | "lightning" | "lock" | "lock-open" | "loyalty-programs" | "manual-invoices" | "minus" | "monitors" | "more" | "new-chat" | "open-financial-period" | "open-in-new-tab" | "opening-hours-templates" | "opening-hours-types" | "orchestration" | "order-fulfillment" | "order-intervention" | "orders" | "organization-unit" | "organization-unit-sets" | "overview-and-mutations" | "paper-plane" | "paperclip" | "password-hidden" | "password-visible" | "pause" | "payment-methods" | "pdf" | "personalized-promotions" | "play-sheet" | "plugin" | "plus" | "pos" | "preview" | "price-lists" | "print" | "product-bundles" | "product-capacity-plans" | "product-information" | "product-properties" | "product-relations" | "product-sets" | "products" | "profile" | "promotion-engine" | "promotion-templates" | "proposal" | "purchase-orders" | "qr" | "questionmark" | "radio" | "reasons" | "receive-goods" | "recount" | "repairs" | "replenishments" | "reservation-cleanup" | "reservations" | "retry" | "return" | "revisions" | "role-sets" | "roles-and-rights" | "scheduled-tasks" | "serial-number" | "settings" | "settlements" | "ship-from-store" | "shipping" | "sidebar-left" | "sidebar-left-collapsed" | "sidebar-right" | "sidebar-right-collapsed" | "sign-out" | "single-sign-on" | "skip-logic" | "sort" | "sparkles" | "speech-bubble" | "star" | "star-filled" | "stencil" | "stock-locations" | "store" | "subscriptions" | "sun" | "synchronization" | "tax-management" | "terminal" | "thumbs-down" | "thumbs-up" | "ticket" | "translations" | "units-of-measure" | "upload" | "user-requirement-sets" | "verified-checkmark" | "view-simple" | "view-table" | "visibility-groups" | "warning" | "watchtower" | "workspaces" | "zoned-cycle-counts" | "zoned-cycle-counts-schedules" | undefined;
+    value?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=button-indicator.d.ts.map

package/dist/components/button-indicator/button-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/button-indicator/button-indicator.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAqBhE,eAAO,MAAM,eAAe,yKAAoC,CAAC"}
+{"version":3,"file":"button-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/button-indicator/button-indicator.tsx"],"names":[],"mappings":";AA4DA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4IAAoC,CAAC"}

package/dist/components/button-indicator/button-indicator.stories.d.ts

@@ -8,4 +8,6 @@ export declare const WithDifferentButtonVariants: Story;
 export declare const WithDisabledButtons: Story;
 export declare const WithLoadingButtons: Story;
 export declare const WithoutAnimation: Story;
+export declare const WithCustomColors: Story;
+export declare const WithContent: Story;
 //# sourceMappingURL=button-indicator.stories.d.ts.map