@carbonbits/sixr 1.0.4 → 1.1.0

package/README.md

@@ -1,7 +1,152 @@
-## Sixr
+# Sixr
 
-Component library for carbonbits.
+E-commerce geared React component library for [carbonbits](https://carbonbits.co.ke/sixr).
 
-Contributing Guide
----
-Local machine shuld support nodejs
+Ships ESM + CJS builds with type declarations, and a prebuilt stylesheet. Components
+are React Server Component safe, so they work in the Next.js App Router without a
+`"use client"` boundary.
+
+## Install
+
+```sh
+pnpm add @carbonbits/sixr
+```
+
+`react` and `react-dom` are peer dependencies (`^19.0.0`).
+
+## Usage
+
+```tsx
+// app/layout.tsx
+import "@carbonbits/sixr/styles.css";
+```
+
+Each component has its own subpath. Import from there:
+
+```tsx
+// app/cart/page.tsx
+import { Cart, type CartProduct } from "@carbonbits/sixr/cart";
+
+const products: CartProduct[] = [
+  { name: "Stovetop kettle", price: 1500 },
+  { name: "Enamel mug", price: 500 },
+];
+
+export default function Page() {
+  return <Cart products={products} currency="KES" locale="en-KE" />;
+}
+```
+
+The root barrel (`@carbonbits/sixr`) re-exports everything and works too, but the
+subpath is the one to reach for.
+
+`dist/styles.css` is compiled by Tailwind 4 and contains only the utilities the
+library itself uses, so it is safe to load alongside a consumer's own Tailwind build.
+
+## Contributing
+
+Requires Node.js >= 20.19 and pnpm (see the `packageManager` field; `corepack enable`
+picks up the right version).
+
+```sh
+pnpm install
+pnpm storybook        # component workbench on :6006
+pnpm test             # vitest
+pnpm run lint         # biome: lint + format check
+pnpm run lint:fix     # biome: apply safe fixes
+pnpm run typecheck
+pnpm run build        # dist/ — JS, .d.ts and styles.css
+pnpm run build-storybook
+```
+
+Linting and formatting are both [Biome](https://biomejs.dev/) (`biome.json`); there
+is no ESLint or Prettier. It runs strict: every rule group is on at `error`, `style`
+and `performance` use the full `all` preset, and `--error-on-warnings` means a
+warning fails CI too. The handful of disabled rules each carry a reason in
+`biome.json`, and stories, tests and config files get narrow overrides where a tool
+mandates something the rules forbid (Storybook's `export default meta`, for one).
+
+`biome check` also fails on unformatted files, so run `pnpm run lint:fix` before
+pushing. Most editors have a Biome extension that formats on save.
+
+### Adding a component
+
+Add it under `src/components/`, then wire it up in three places:
+
+1. an entry in `tsup.config.ts`, so it gets its own bundle
+2. a matching subpath in the package.json `exports` map
+3. a re-export from `src/index.ts`, for the barrel
+
+Give it a `*.stories.tsx` file too, so Chromatic picks it up.
+
+Client components (anything on Radix, or using hooks) need a `"use client"` banner
+on their tsup entry — a directive in the source file does not survive bundling. Not
+wired up yet; there are no client components in the library so far.
+
+## Releasing
+
+Releases are automated by [semantic-release](https://semantic-release.gitbook.io/)
+on every push to `master`, driven by
+[conventional commits](https://www.conventionalcommits.org/):
+
+| Commit prefix                    | Release |
+| -------------------------------- | ------- |
+| `fix:`                           | patch   |
+| `feat:`                          | minor   |
+| `feat!:` / `BREAKING CHANGE:`    | major   |
+| `chore:`, `ci:`, `docs:`, `test:`| none    |
+
+The pipeline works out the version, writes `CHANGELOG.md`, builds `dist/`, commits
+the bump back to `master`, tags it, and opens a GitHub release.
+
+### Staged publishing
+
+npm is moving publishing behind a human approval step, so CI does **not** push the
+package live. It runs `npm stage publish`, which uploads the tarball and parks it.
+A maintainer then approves it with 2FA:
+
+```sh
+npm stage list @carbonbits/sixr
+npm stage view <stage-id>       # inspect before approving
+npm stage approve <stage-id>    # prompts for 2FA, goes live
+npm stage reject <stage-id>     # discard instead
+```
+
+Until approval the version does not appear in `npm view @carbonbits/sixr versions`,
+even though the GitHub release and tag already exist. Staging needs npm >= 11.15.0
+and Node >= 22.14, which CI pins.
+
+### Required secrets
+
+| Secret                     | Used by                                              |
+| -------------------------- | ---------------------------------------------------- |
+| `NPM_STAGING_TOKEN`        | `npm stage publish` — a *Read and write (stage only)* granular token |
+| `GH_APP_ID`                | the release GitHub App                               |
+| `GH_APP_PRIVATE_KEY`       | that App's private key, **base64-encoded**           |
+| `CHROMATIC_PROJECT_TOKEN`  | Chromatic publish                                    |
+
+Granular tokens lose the ability to publish new versions directly in January 2027,
+which is why the release token is stage-only.
+
+`master` carries a ruleset that blocks direct writes, so the release commit and tag
+cannot be pushed with the default `GITHUB_TOKEN`. The workflow mints a short-lived
+installation token from a GitHub App instead, and **that App must be listed in the
+ruleset's bypass list** or the push still fails. The App needs `contents: write` and
+`pull_requests: write` on this repo, nothing more.
+
+That installation token is handed to semantic-release as `GITHUB_TOKEN`, and this
+is not interchangeable with `GH_TOKEN`. semantic-release builds its push URL as
+`https://<GH_TOKEN>@github.com/...`, but as
+`https://x-access-token:<GITHUB_TOKEN>@github.com/...` when it detects Actions.
+An App installation token is only accepted in the second form — via `GH_TOKEN` it
+fails on `git ls-remote` with `Invalid username or token`.
+
+There is deliberately no `GH_TOKEN` secret. `@semantic-release/github` resolves
+`GH_TOKEN || GITHUB_TOKEN`, so a leftover expired PAT in `GH_TOKEN` silently
+shadows any working token and fails with `EINVALIDGHTOKEN`. If that secret still
+exists in repo settings, delete it.
+
+## Visual review
+
+Every push and pull request publishes Storybook to
+[Chromatic](https://www.chromatic.com/) for visual regression review.

package/dist/cart.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/cart/index.tsx
+function formatPrice(value, currency, locale) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(
+    value
+  );
+}
+function Cart({
+  products = [],
+  currency = "KES",
+  locale = "en-KE"
+}) {
+  const total = products.reduce((sum, product) => sum + product.price, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Cart" }),
+    products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Your cart is empty." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col divide-y divide-gray-100", children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-baseline justify-between gap-4 py-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800", children: product.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm tabular-nums text-gray-600", children: formatPrice(product.price, currency, locale) })
+          ]
+        },
+        product.id ?? product.name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: formatPrice(total, currency, locale) })
+      ] })
+    ] })
+  ] });
+}
+
+exports.Cart = Cart;
+//# sourceMappingURL=cart.cjs.map
+//# sourceMappingURL=cart.cjs.map

package/dist/cart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart/index.tsx"],"names":["jsxs","jsx","Fragment"],"mappings":";;;;;AAkBA,SAAS,WAAA,CAAY,KAAA,EAAe,QAAA,EAAkB,MAAA,EAAgB;AACpE,EAAA,OAAO,IAAI,KAAK,YAAA,CAAa,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,CAAA,CAAE,MAAA;AAAA,IACpE;AAAA,GACF;AACF;AAEO,SAAS,IAAA,CAAK;AAAA,EACnB,WAAW,EAAC;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,EAAc;AACZ,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yFAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAEvD,QAAA,CAAS,WAAW,CAAA,mBACnBA,cAAA,CAAC,OAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,qBAAA,EAAmB,CAAA,mBAExDD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,QAAG,SAAA,EAAU,wCAAA,EACX,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,qBACbD,eAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,gDAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAK,CAAA;AAAA,4BACtDA,cAAA,CAAC,UAAK,SAAA,EAAU,oCAAA,EACb,sBAAY,OAAA,CAAQ,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EAC9C;AAAA;AAAA,SAAA;AAAA,QANK,OAAA,CAAQ,MAAM,OAAA,CAAQ;AAAA,OAQ9B,CAAA,EACH,CAAA;AAAA,sBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAoC,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBACzDA,cAAA,CAAC,UAAK,SAAA,EAAU,kDAAA,EACb,sBAAY,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EACtC;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"cart.cjs","sourcesContent":["export type CartProduct = {\n  /**\n   * Stable identity for this line, used as the React key. Falls back to `name`,\n   * so pass an `id` whenever a cart can hold two lines with the same name.\n   */\n  id?: string;\n  name: string;\n  price: number;\n};\n\nexport type CartProps = {\n  products?: CartProduct[];\n  /** ISO 4217 code used to format prices. */\n  currency?: string;\n  /** BCP 47 locale used to format prices. */\n  locale?: string;\n};\n\nfunction formatPrice(value: number, currency: string, locale: string) {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(\n    value,\n  );\n}\n\nexport function Cart({\n  products = [],\n  currency = \"KES\",\n  locale = \"en-KE\",\n}: CartProps) {\n  const total = products.reduce((sum, product) => sum + product.price, 0);\n\n  return (\n    <div className=\"cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4\">\n      <h1 className=\"text-xl font-semibold text-gray-900\">Cart</h1>\n\n      {products.length === 0 ? (\n        <p className=\"text-sm text-gray-500\">Your cart is empty.</p>\n      ) : (\n        <>\n          <ul className=\"flex flex-col divide-y divide-gray-100\">\n            {products.map((product) => (\n              <li\n                key={product.id ?? product.name}\n                className=\"flex items-baseline justify-between gap-4 py-2\"\n              >\n                <span className=\"text-sm text-gray-800\">{product.name}</span>\n                <span className=\"text-sm tabular-nums text-gray-600\">\n                  {formatPrice(product.price, currency, locale)}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2\">\n            <span className=\"text-sm font-medium text-gray-900\">Total</span>\n            <span className=\"text-sm font-semibold tabular-nums text-gray-900\">\n              {formatPrice(total, currency, locale)}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/cart.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+
+type CartProduct = {
+    /**
+     * Stable identity for this line, used as the React key. Falls back to `name`,
+     * so pass an `id` whenever a cart can hold two lines with the same name.
+     */
+    id?: string;
+    name: string;
+    price: number;
+};
+type CartProps = {
+    products?: CartProduct[];
+    /** ISO 4217 code used to format prices. */
+    currency?: string;
+    /** BCP 47 locale used to format prices. */
+    locale?: string;
+};
+declare function Cart({ products, currency, locale, }: CartProps): react.JSX.Element;
+
+export { Cart, type CartProduct, type CartProps };

package/dist/cart.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+
+type CartProduct = {
+    /**
+     * Stable identity for this line, used as the React key. Falls back to `name`,
+     * so pass an `id` whenever a cart can hold two lines with the same name.
+     */
+    id?: string;
+    name: string;
+    price: number;
+};
+type CartProps = {
+    products?: CartProduct[];
+    /** ISO 4217 code used to format prices. */
+    currency?: string;
+    /** BCP 47 locale used to format prices. */
+    locale?: string;
+};
+declare function Cart({ products, currency, locale, }: CartProps): react.JSX.Element;
+
+export { Cart, type CartProduct, type CartProps };

package/dist/cart.js

@@ -0,0 +1,3 @@
+export { Cart } from './chunk-BHSOSXTU.js';
+//# sourceMappingURL=cart.js.map
+//# sourceMappingURL=cart.js.map

package/dist/cart.js.map

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

package/dist/chunk-BHSOSXTU.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/cart/index.tsx
+function formatPrice(value, currency, locale) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(
+    value
+  );
+}
+function Cart({
+  products = [],
+  currency = "KES",
+  locale = "en-KE"
+}) {
+  const total = products.reduce((sum, product) => sum + product.price, 0);
+  return /* @__PURE__ */ jsxs("div", { className: "cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Cart" }),
+    products.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Your cart is empty." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col divide-y divide-gray-100", children: products.map((product) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-baseline justify-between gap-4 py-2",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-800", children: product.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-gray-600", children: formatPrice(product.price, currency, locale) })
+          ]
+        },
+        product.id ?? product.name
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: "Total" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: formatPrice(total, currency, locale) })
+      ] })
+    ] })
+  ] });
+}
+
+export { Cart };
+//# sourceMappingURL=chunk-BHSOSXTU.js.map
+//# sourceMappingURL=chunk-BHSOSXTU.js.map

package/dist/chunk-BHSOSXTU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart/index.tsx"],"names":[],"mappings":";;;AAkBA,SAAS,WAAA,CAAY,KAAA,EAAe,QAAA,EAAkB,MAAA,EAAgB;AACpE,EAAA,OAAO,IAAI,KAAK,YAAA,CAAa,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,CAAA,CAAE,MAAA;AAAA,IACpE;AAAA,GACF;AACF;AAEO,SAAS,IAAA,CAAK;AAAA,EACnB,WAAW,EAAC;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,EAAc;AACZ,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yFAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAEvD,QAAA,CAAS,WAAW,CAAA,mBACnB,GAAA,CAAC,OAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,qBAAA,EAAmB,CAAA,mBAExD,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAG,SAAA,EAAU,wCAAA,EACX,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,qBACb,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,gDAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAK,CAAA;AAAA,4BACtD,GAAA,CAAC,UAAK,SAAA,EAAU,oCAAA,EACb,sBAAY,OAAA,CAAQ,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EAC9C;AAAA;AAAA,SAAA;AAAA,QANK,OAAA,CAAQ,MAAM,OAAA,CAAQ;AAAA,OAQ9B,CAAA,EACH,CAAA;AAAA,sBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAoC,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBACzD,GAAA,CAAC,UAAK,SAAA,EAAU,kDAAA,EACb,sBAAY,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EACtC;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-BHSOSXTU.js","sourcesContent":["export type CartProduct = {\n  /**\n   * Stable identity for this line, used as the React key. Falls back to `name`,\n   * so pass an `id` whenever a cart can hold two lines with the same name.\n   */\n  id?: string;\n  name: string;\n  price: number;\n};\n\nexport type CartProps = {\n  products?: CartProduct[];\n  /** ISO 4217 code used to format prices. */\n  currency?: string;\n  /** BCP 47 locale used to format prices. */\n  locale?: string;\n};\n\nfunction formatPrice(value: number, currency: string, locale: string) {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(\n    value,\n  );\n}\n\nexport function Cart({\n  products = [],\n  currency = \"KES\",\n  locale = \"en-KE\",\n}: CartProps) {\n  const total = products.reduce((sum, product) => sum + product.price, 0);\n\n  return (\n    <div className=\"cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4\">\n      <h1 className=\"text-xl font-semibold text-gray-900\">Cart</h1>\n\n      {products.length === 0 ? (\n        <p className=\"text-sm text-gray-500\">Your cart is empty.</p>\n      ) : (\n        <>\n          <ul className=\"flex flex-col divide-y divide-gray-100\">\n            {products.map((product) => (\n              <li\n                key={product.id ?? product.name}\n                className=\"flex items-baseline justify-between gap-4 py-2\"\n              >\n                <span className=\"text-sm text-gray-800\">{product.name}</span>\n                <span className=\"text-sm tabular-nums text-gray-600\">\n                  {formatPrice(product.price, currency, locale)}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2\">\n            <span className=\"text-sm font-medium text-gray-900\">Total</span>\n            <span className=\"text-sm font-semibold tabular-nums text-gray-900\">\n              {formatPrice(total, currency, locale)}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/index.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/cart/index.tsx
+function formatPrice(value, currency, locale) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(
+    value
+  );
+}
+function Cart({
+  products = [],
+  currency = "KES",
+  locale = "en-KE"
+}) {
+  const total = products.reduce((sum, product) => sum + product.price, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: "Cart" }),
+    products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Your cart is empty." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col divide-y divide-gray-100", children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-baseline justify-between gap-4 py-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-800", children: product.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm tabular-nums text-gray-600", children: formatPrice(product.price, currency, locale) })
+          ]
+        },
+        product.id ?? product.name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: formatPrice(total, currency, locale) })
+      ] })
+    ] })
+  ] });
+}
+
+exports.Cart = Cart;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart/index.tsx"],"names":["jsxs","jsx","Fragment"],"mappings":";;;;;AAkBA,SAAS,WAAA,CAAY,KAAA,EAAe,QAAA,EAAkB,MAAA,EAAgB;AACpE,EAAA,OAAO,IAAI,KAAK,YAAA,CAAa,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,CAAA,CAAE,MAAA;AAAA,IACpE;AAAA,GACF;AACF;AAEO,SAAS,IAAA,CAAK;AAAA,EACnB,WAAW,EAAC;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,EAAc;AACZ,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yFAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,IAEvD,QAAA,CAAS,WAAW,CAAA,mBACnBA,cAAA,CAAC,OAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,qBAAA,EAAmB,CAAA,mBAExDD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,QAAG,SAAA,EAAU,wCAAA,EACX,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,qBACbD,eAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,gDAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAK,CAAA;AAAA,4BACtDA,cAAA,CAAC,UAAK,SAAA,EAAU,oCAAA,EACb,sBAAY,OAAA,CAAQ,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EAC9C;AAAA;AAAA,SAAA;AAAA,QANK,OAAA,CAAQ,MAAM,OAAA,CAAQ;AAAA,OAQ9B,CAAA,EACH,CAAA;AAAA,sBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAoC,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBACzDA,cAAA,CAAC,UAAK,SAAA,EAAU,kDAAA,EACb,sBAAY,KAAA,EAAO,QAAA,EAAU,MAAM,CAAA,EACtC;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"index.cjs","sourcesContent":["export type CartProduct = {\n  /**\n   * Stable identity for this line, used as the React key. Falls back to `name`,\n   * so pass an `id` whenever a cart can hold two lines with the same name.\n   */\n  id?: string;\n  name: string;\n  price: number;\n};\n\nexport type CartProps = {\n  products?: CartProduct[];\n  /** ISO 4217 code used to format prices. */\n  currency?: string;\n  /** BCP 47 locale used to format prices. */\n  locale?: string;\n};\n\nfunction formatPrice(value: number, currency: string, locale: string) {\n  return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(\n    value,\n  );\n}\n\nexport function Cart({\n  products = [],\n  currency = \"KES\",\n  locale = \"en-KE\",\n}: CartProps) {\n  const total = products.reduce((sum, product) => sum + product.price, 0);\n\n  return (\n    <div className=\"cart flex w-full max-w-md flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4\">\n      <h1 className=\"text-xl font-semibold text-gray-900\">Cart</h1>\n\n      {products.length === 0 ? (\n        <p className=\"text-sm text-gray-500\">Your cart is empty.</p>\n      ) : (\n        <>\n          <ul className=\"flex flex-col divide-y divide-gray-100\">\n            {products.map((product) => (\n              <li\n                key={product.id ?? product.name}\n                className=\"flex items-baseline justify-between gap-4 py-2\"\n              >\n                <span className=\"text-sm text-gray-800\">{product.name}</span>\n                <span className=\"text-sm tabular-nums text-gray-600\">\n                  {formatPrice(product.price, currency, locale)}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"flex items-baseline justify-between gap-4 border-t border-gray-200 pt-2\">\n            <span className=\"text-sm font-medium text-gray-900\">Total</span>\n            <span className=\"text-sm font-semibold tabular-nums text-gray-900\">\n              {formatPrice(total, currency, locale)}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,2 @@
+export { Cart, CartProduct, CartProps } from './cart.cjs';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Cart, CartProduct, CartProps } from './cart.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Cart } from './chunk-BHSOSXTU.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.contents{display:contents}.flex{display:flex}.w-full{width:100%}.max-w-md{max-width:var(--container-md)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.gap-4{gap:calc(var(--spacing) * 4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/package.json

@@ -1,82 +1,106 @@
 {
   "name": "@carbonbits/sixr",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "e-commerce geared component library",
   "homepage": "https://carbonbits.co.ke/sixr",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/carbonbits/sixr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/carbonbits/sixr/issues"
+  },
   "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
-    "dist/**"
+    "dist"
   ],
-  "main": "dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./cart": {
+      "import": {
+        "types": "./dist/cart.d.ts",
+        "default": "./dist/cart.js"
+      },
+      "require": {
+        "types": "./dist/cart.d.cts",
+        "default": "./dist/cart.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+  "engines": {
+    "node": ">=20.19.0"
   },
+  "packageManager": "pnpm@12.4.2",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "build": "pnpm run build:js && pnpm run build:css",
+    "build:js": "tsup",
+    "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check --error-on-warnings",
+    "lint:fix": "biome check --write --error-on-warnings",
+    "format": "biome format --write",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.0.5",
-    "@storybook/addon-interactions": "^7.0.5",
-    "@storybook/addon-links": "^7.0.5",
-    "@storybook/blocks": "^7.0.5",
-    "@storybook/preset-create-react-app": "^7.0.5",
-    "@storybook/react": "^7.0.5",
-    "@storybook/react-webpack5": "^7.0.5",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^6.17.4",
-    "prop-types": "^15.8.1",
-    "semantic-release": "^21.0.1",
-    "storybook": "^7.0.5",
-    "webpack": "^5.79.0"
-  },
-  "readme": "ERROR: No README data found!"
+    "@biomejs/biome": "^2.5.14",
+    "@semantic-release/changelog": "^7.0.0",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^11.0.1",
+    "@semantic-release/github": "^12.0.9",
+    "@semantic-release/npm": "^13.1.5",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "chromatic": "^18.9.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "jsdom": "^30.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "semantic-release": "^25.0.9",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.1"
+  }
 }