@studiotoolkit/color-palette 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Studio Toolkit
+
+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,102 @@
+# Color Palette
+
+React component for displaying and managing color palettes with multiple display modes and customization options.
+
+**Play around and Generate component code here:**  
+https://studiotoolkit.github.io/build-color-palette
+
+**Complete Demo:**  
+https://studiotoolkit.github.io/demo-all
+
+## Features
+
+<table>
+<tr>
+<td align="center"><img src="assets/Box.png" width="600"/><br/>Box</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Circle.png" width="600"/><br/>Circle</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Square.png" width="600"/><br/>Square</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Triangle.png" width="600"/><br/>Triangle</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Single-Tone.png" width="600"/><br/>Single Tone</td>
+</tr>
+<tr>
+<td align="center"><img src="assets/Two-Tone.png" width="600"/><br/>Two Tone</td>
+</tr>
+<tr>
+<tr>
+<td align="center"><img src="assets/Settings.png" width="600"/><br/>Variation</td>
+</tr>
+<td align="center"><img src="assets/Parameters.png" width="600"/><br/>Parameters</td>
+</tr>
+
+</table>
+
+- Multiple display modes: square, table, circle, triangle, block
+- Multi-part color swatches (1, 2, or 3 parts) with saturation/brightness control
+- Customizable dimensions (`width`)
+- Border styling (`boxBorderSize`, `boxBorderColor`)
+- Typography options (`displayTitle`, `fontColor`, `fontSize`)
+- Background color customization (`backgroundColor`)
+- Hex code display toggle (`displayHexcode`)
+- Copy colors to clipboard (`showCopyButton`)
+- Transform colors with adjustable saturation and brightness per part
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @studiotoolkit/color-palette
+
+# Using npm
+npm install @studiotoolkit/color-palette
+
+# Using yarn
+yarn add @studiotoolkit/color-palette
+```
+
+**React Version:** `^18.0.0` or higher
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { ColorPalette } from '@studiotoolkit/color-palette';
+import '@studiotoolkit/color-palette/style.css';
+
+function App() {
+  const paletteData = {
+    primary: ['#FF5733', '#33FF57', '#3357FF'],
+    secondary: ['#FFC300', '#DAF7A6', '#C70039'],
+  };
+
+  return <ColorPalette paletteData={paletteData} displayType="square" showCopyButton={true} />;
+}
+```
+
+### Steps to Use
+
+1. Import the component and its styles
+2. Prepare palette data as an object with string arrays
+3. Add the `ColorPalette` component with desired display type
+4. Customize appearance with optional props
+5. Enable copy button to allow users to copy colors
+
+## Contributors
+
+[StudioToolkit](https://github.com/studiotoolkit)
+
+## License
+
+Licensed under the MIT License.
+
+## Keywords
+
+color-palette, color-display, color-swatches, palette-viewer, color-management, design-tools, react-component, color-visualization

package/dist/ColorPalette.d.ts

@@ -0,0 +1,31 @@
+import "./ColorPalette.css";
+type PaletteData = {
+    [key: string]: string[] | undefined;
+};
+type DisplayType = "square" | "table" | "circle" | "triangle" | "block";
+interface ColorPaletteProps {
+    paletteData: PaletteData | null;
+    showCopyButton?: boolean;
+    displayType?: DisplayType;
+    width?: number;
+    boxBorderSize?: number;
+    boxBorderColor?: string;
+    displayTitle?: boolean;
+    fontColor?: string;
+    fontSize?: number;
+    backgroundColor?: string;
+    displayHexcode?: boolean;
+    /** How many color parts to show per swatch. 1 = transformed. 2 = transformed + transformed. 3 = transformed + transformed + original. */
+    parts?: 1 | 2 | 3;
+    /** Saturation for Part 1 (top band) (0 = fully desaturated, 100 = fully saturated). Default 50. */
+    saturation1?: number;
+    /** Brightness for Part 1 (top band) (0 = black, 50 = mid-tone, 100 = white). Default 50. */
+    brightness1?: number;
+    /** Saturation for Part 2 (middle band) (0 = fully desaturated, 100 = fully saturated). Default 50. */
+    saturation2?: number;
+    /** Brightness for Part 2 (middle band) (0 = black, 50 = mid-tone, 100 = white). Default 50. */
+    brightness2?: number;
+}
+export default function ColorPalette({ paletteData, showCopyButton, displayType, width, boxBorderSize, boxBorderColor, displayTitle, fontColor, fontSize, backgroundColor, displayHexcode, parts, saturation1, brightness1, saturation2, brightness2, }: ColorPaletteProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ColorPalette.d.ts.map

package/dist/ColorPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette.d.ts","sourceRoot":"","sources":["../src/ColorPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,KAAK,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;CAAE,CAAC;AAC3D,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAExE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yIAAyI;IACzI,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,mGAAmG;IACnG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmMD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,cAAsB,EACtB,WAAqB,EACrB,KAAU,EACV,aAAiB,EACjB,cAAuB,EACvB,YAAmB,EACnB,SAAkB,EAClB,QAAa,EACb,eAA+B,EAC/B,cAAqB,EACrB,KAAS,EACT,WAAgB,EAChB,WAAgB,EAChB,WAAgB,EAChB,WAAgB,GACjB,EAAE,iBAAiB,kDAgJnB"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ColorPalette } from "./ColorPalette";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),O=e=>({r:parseInt(e.slice(1,3),16)/255,g:parseInt(e.slice(3,5),16)/255,b:parseInt(e.slice(5,7),16)/255}),z=({r:e,g:r,b:t})=>"#"+[e,r,t].map(s=>Math.round(Math.max(0,Math.min(1,s))*255).toString(16).padStart(2,"0")).join(""),C=({r:e,g:r,b:t})=>{const s=Math.max(e,r,t),o=Math.min(e,r,t),l=(s+o)/2;if(s===o)return{h:0,s:0,l};const c=s-o,a=l>.5?c/(2-s-o):c/(s+o);let n=0;return s===e?n=((r-t)/c+(r<t?6:0))/6:s===r?n=((t-e)/c+2)/6:n=((e-r)/c+4)/6,{h:n,s:a,l}},H=({h:e,s:r,l:t})=>{if(r===0)return{r:t,g:t,b:t};const s=t<.5?t*(1+r):t+r-t*r,o=2*t-s,l=(c,a,n)=>(n<0&&(n+=1),n>1&&(n-=1),n<1/6?c+(a-c)*6*n:n<1/2?a:n<2/3?c+(a-c)*(2/3-n)*6:c);return{r:l(o,s,e+1/3),g:l(o,s,e),b:l(o,s,e-1/3)}},h=(e,r,t)=>{const s=O(e),o=C(s),l=Math.max(0,Math.min(100,r)),c=Math.max(0,Math.min(100,t)),a=l/100,n=c/100;return z(H({h:o.h,s:a,l:n}))};function T({hex:e,parts:r,saturation1:t,brightness1:s,saturation2:o,brightness2:l,displayType:c,width:a,borderSize:n,borderColor:p}){const d=[];r===1?d.push(h(e,t,s)):r===2?(d.push(h(e,t,s)),d.push(h(e,o,l))):(d.push(h(e,t,s)),d.push(h(e,o,l)),d.push(e));const x={width:a,height:a,overflow:"hidden",flexShrink:0,position:"relative",border:`${n}px solid ${p}`,boxSizing:"border-box",...c==="circle"?{borderRadius:"50%"}:c==="square"?{borderRadius:0}:c==="triangle"?{borderRadius:0,clipPath:"polygon(50% 0%, 0% 100%, 100% 100%)",border:"none"}:{borderRadius:10}};if(r===1)return i.jsx("div",{style:{...x,background:h(e,t,s)}});const j=100/d.length;return i.jsx("div",{style:x,children:d.map((v,g)=>i.jsx("div",{style:{position:"absolute",left:0,right:0,top:`${g*j}%`,height:`${j}%`,background:v}},g))})}function k({paletteData:e,showCopyButton:r=!1,displayType:t="block",width:s=60,boxBorderSize:o=1,boxBorderColor:l="#ccc",displayTitle:c=!0,fontColor:a="#333",fontSize:n=11,backgroundColor:p="transparent",displayHexcode:d=!0,parts:x=1,saturation1:j=50,brightness1:v=50,saturation2:g=50,brightness2:w=50}){if(!e)return null;const A=async(u,m)=>{try{await navigator.clipboard.writeText(JSON.stringify({[u]:m},null,2))}catch{}},N=x,$=j,M=v,R=g,P=w;return i.jsx("div",{className:"color-palette-container",style:p!=="transparent"?{backgroundColor:p}:void 0,children:Object.keys(e).map(u=>{if(Array.isArray(e[u])&&e[u].length>0){const m=e[u];return i.jsxs("div",{className:"palette-section",children:[i.jsxs("div",{className:"palette-section-header",children:[c&&i.jsx("h3",{children:u}),r&&i.jsx("button",{onClick:()=>A(u,m),className:"copy-section-button",children:"Copy"})]}),t==="table"?i.jsx("table",{className:"palette-table",children:i.jsxs("tbody",{children:[Array.from({length:N}).map((b,f)=>i.jsx("tr",{children:m.map((S,B)=>{let y=S;return f===0?y=h(S,$,M):f===1&&(y=h(S,R,P)),i.jsx("td",{className:"color-cell",style:{background:y,width:`${s}px`,height:`${s}px`,borderWidth:`${o}px`,borderColor:l}},B)})},`part-${f}`)),d&&i.jsx("tr",{children:m.map((b,f)=>i.jsx("td",{className:"hex-cell",style:{...a!=="#333"&&{color:a},fontSize:`${n}px`},children:b},f))})]})}):i.jsx("div",{className:`colors display-${t}`,children:m.map((b,f)=>i.jsxs("div",{className:"swatchBox",children:[i.jsx(T,{hex:b,parts:N,saturation1:$,brightness1:M,saturation2:R,brightness2:P,displayType:t,width:s,borderSize:o,borderColor:l}),d&&i.jsx("span",{className:"hex-label",style:{...a!=="#333"&&{color:a},fontSize:`${n}px`},children:b})]},f))})]},u)}return null})})}exports.ColorPalette=k;

package/dist/index.mjs

@@ -0,0 +1,219 @@
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+const H = (e) => ({
+  r: parseInt(e.slice(1, 3), 16) / 255,
+  g: parseInt(e.slice(3, 5), 16) / 255,
+  b: parseInt(e.slice(5, 7), 16) / 255
+}), O = ({ r: e, g: n, b: t }) => "#" + [e, n, t].map(
+  (r) => Math.round(Math.max(0, Math.min(1, r)) * 255).toString(16).padStart(2, "0")
+).join(""), k = ({
+  r: e,
+  g: n,
+  b: t
+}) => {
+  const r = Math.max(e, n, t), i = Math.min(e, n, t), o = (r + i) / 2;
+  if (r === i) return { h: 0, s: 0, l: o };
+  const s = r - i, l = o > 0.5 ? s / (2 - r - i) : s / (r + i);
+  let c = 0;
+  return r === e ? c = ((n - t) / s + (n < t ? 6 : 0)) / 6 : r === n ? c = ((t - e) / s + 2) / 6 : c = ((e - n) / s + 4) / 6, { h: c, s: l, l: o };
+}, C = ({
+  h: e,
+  s: n,
+  l: t
+}) => {
+  if (n === 0) return { r: t, g: t, b: t };
+  const r = t < 0.5 ? t * (1 + n) : t + n - t * n, i = 2 * t - r, o = (s, l, c) => (c < 0 && (c += 1), c > 1 && (c -= 1), c < 1 / 6 ? s + (l - s) * 6 * c : c < 1 / 2 ? l : c < 2 / 3 ? s + (l - s) * (2 / 3 - c) * 6 : s);
+  return {
+    r: o(i, r, e + 1 / 3),
+    g: o(i, r, e),
+    b: o(i, r, e - 1 / 3)
+  };
+}, u = (e, n, t) => {
+  const r = H(e), i = k(r), o = Math.max(0, Math.min(100, n)), s = Math.max(0, Math.min(100, t)), l = o / 100, c = s / 100;
+  return O(C({ h: i.h, s: l, l: c }));
+};
+function I({
+  hex: e,
+  parts: n,
+  saturation1: t,
+  brightness1: r,
+  saturation2: i,
+  brightness2: o,
+  displayType: s,
+  width: l,
+  borderSize: c,
+  borderColor: b
+}) {
+  const d = [];
+  n === 1 ? d.push(u(e, t, r)) : n === 2 ? (d.push(u(e, t, r)), d.push(u(e, i, o))) : (d.push(u(e, t, r)), d.push(u(e, i, o)), d.push(e));
+  const g = {
+    width: l,
+    height: l,
+    overflow: "hidden",
+    flexShrink: 0,
+    position: "relative",
+    border: `${c}px solid ${b}`,
+    boxSizing: "border-box",
+    ...s === "circle" ? { borderRadius: "50%" } : s === "square" ? { borderRadius: 0 } : s === "triangle" ? {
+      borderRadius: 0,
+      clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+      border: "none"
+    } : { borderRadius: 10 }
+    // block default
+  };
+  if (n === 1)
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        style: {
+          ...g,
+          background: u(e, t, r)
+        }
+      }
+    );
+  const v = 100 / d.length;
+  return /* @__PURE__ */ a("div", { style: g, children: d.map(($, S) => /* @__PURE__ */ a(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: `${S * v}%`,
+        height: `${v}%`,
+        background: $
+      }
+    },
+    S
+  )) });
+}
+function L({
+  paletteData: e,
+  showCopyButton: n = !1,
+  displayType: t = "block",
+  width: r = 60,
+  boxBorderSize: i = 1,
+  boxBorderColor: o = "#ccc",
+  displayTitle: s = !0,
+  fontColor: l = "#333",
+  fontSize: c = 11,
+  backgroundColor: b = "transparent",
+  displayHexcode: d = !0,
+  parts: g = 1,
+  saturation1: v = 50,
+  brightness1: $ = 50,
+  saturation2: S = 50,
+  brightness2: A = 50
+}) {
+  if (!e) return null;
+  const B = async (h, m) => {
+    try {
+      await navigator.clipboard.writeText(
+        JSON.stringify({ [h]: m }, null, 2)
+      );
+    } catch {
+    }
+  }, x = g, R = v, w = $, j = S, P = A;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "color-palette-container",
+      style: b !== "transparent" ? { backgroundColor: b } : void 0,
+      children: Object.keys(e).map((h) => {
+        if (Array.isArray(e[h]) && e[h].length > 0) {
+          const m = e[h];
+          return /* @__PURE__ */ N("div", { className: "palette-section", children: [
+            /* @__PURE__ */ N("div", { className: "palette-section-header", children: [
+              s && /* @__PURE__ */ a("h3", { children: h }),
+              n && /* @__PURE__ */ a(
+                "button",
+                {
+                  onClick: () => B(h, m),
+                  className: "copy-section-button",
+                  children: "Copy"
+                }
+              )
+            ] }),
+            t === "table" ? (
+              /* ── Table layout ── */
+              /* @__PURE__ */ a("table", { className: "palette-table", children: /* @__PURE__ */ N("tbody", { children: [
+                Array.from({ length: x }).map(
+                  (p, f) => /* @__PURE__ */ a("tr", { children: m.map((y, z) => {
+                    let M = y;
+                    return f === 0 ? M = u(
+                      y,
+                      R,
+                      w
+                    ) : f === 1 && (M = u(
+                      y,
+                      j,
+                      P
+                    )), /* @__PURE__ */ a(
+                      "td",
+                      {
+                        className: "color-cell",
+                        style: {
+                          background: M,
+                          width: `${r}px`,
+                          height: `${r}px`,
+                          borderWidth: `${i}px`,
+                          borderColor: o
+                        }
+                      },
+                      z
+                    );
+                  }) }, `part-${f}`)
+                ),
+                d && /* @__PURE__ */ a("tr", { children: m.map((p, f) => /* @__PURE__ */ a(
+                  "td",
+                  {
+                    className: "hex-cell",
+                    style: {
+                      ...l !== "#333" && { color: l },
+                      fontSize: `${c}px`
+                    },
+                    children: p
+                  },
+                  f
+                )) })
+              ] }) })
+            ) : (
+              /* ── Swatch layout ── */
+              /* @__PURE__ */ a("div", { className: `colors display-${t}`, children: m.map((p, f) => /* @__PURE__ */ N("div", { className: "swatchBox", children: [
+                /* @__PURE__ */ a(
+                  I,
+                  {
+                    hex: p,
+                    parts: x,
+                    saturation1: R,
+                    brightness1: w,
+                    saturation2: j,
+                    brightness2: P,
+                    displayType: t,
+                    width: r,
+                    borderSize: i,
+                    borderColor: o
+                  }
+                ),
+                d && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: "hex-label",
+                    style: {
+                      ...l !== "#333" && { color: l },
+                      fontSize: `${c}px`
+                    },
+                    children: p
+                  }
+                )
+              ] }, f)) })
+            )
+          ] }, h);
+        }
+        return null;
+      })
+    }
+  );
+}
+export {
+  L as ColorPalette
+};

package/dist/style.css

@@ -0,0 +1 @@
+.color-palette-container{padding:5px;background-color:#fff}[data-theme=dark] .color-palette-container{background-color:#1a1a1a!important}.palette-section{margin-bottom:8px}.palette-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.palette-section h3{margin:0;font-size:16px}.copy-section-button{padding:4px 10px;background:#27ae60;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.copy-section-button:hover{background:#1e8449}.colors{display:flex;flex-wrap:wrap;gap:6px}.swatchBox{text-align:center;font-size:12px}.palette-table{border-collapse:collapse;border:1px solid #ddd}.palette-table .color-cell{padding:0;border:1px solid #ddd}.palette-table .hex-cell{text-align:center;font-family:monospace;font-size:11px;color:#333;padding:4px 2px;border:1px solid #ddd;background:#fff}.hex-label{display:block;font-family:monospace;font-size:11px;color:#333}[data-theme=dark] .palette-section h3{color:#e0e0e0}[data-theme=dark] .copy-section-button{background:#2ecc71}[data-theme=dark] .copy-section-button:hover{background:#27ae60}[data-theme=dark] .palette-table,[data-theme=dark] .palette-table .color-cell{border-color:#444}[data-theme=dark] .palette-table .hex-cell{color:#e0e0e0;border-color:#444;background:#2a2a2a}[data-theme=dark] .hex-label{color:#e0e0e0}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@studiotoolkit/color-palette",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "React component for displaying and managing color palettes with multiple display modes and customization options",
+  "author": "StudioToolkit",
+  "homepage": "https://studiotoolkit.github.io/build-color-palette",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/studiotoolkit/studiotoolkit",
+    "directory": "packages/color-palette"
+  },
+  "bugs": {
+    "url": "https://github.com/studiotoolkit/studiotoolkit/issues"
+  },
+  "keywords": [
+    "color-palette",
+    "color-display",
+    "color-swatches",
+    "palette-viewer",
+    "color-management",
+    "design-tools",
+    "react-component",
+    "color-visualization"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/ColorPalette.css",
+    "./src/ColorPalette.css": "./src/ColorPalette.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  },
+  "scripts": {
+    "build": "npx tsc --project tsconfig.json && vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  }
+}