@studiotoolkit/color-palette 1.0.2 → 1.0.3

package/dist/ColorPalette.d.ts

@@ -26,6 +26,6 @@ interface ColorPaletteProps {
     /** 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 default function ColorPalette({ paletteData, showCopyButton, displayType, width, boxBorderSize, boxBorderColor, displayTitle, fontColor, fontSize, backgroundColor, displayHexcode, parts, saturation1, brightness1, saturation2, brightness2, }: ColorPaletteProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=ColorPalette.d.ts.map

package/dist/ColorPalette.d.ts.map

@@ -1 +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"}
+{"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,sCAgJnB"}

package/dist/color-palette.css

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

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiotoolkit/color-palette",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "React component for displaying and managing color palettes with multiple display modes and customization options",
   "author": "StudioToolkit",
@@ -50,17 +50,6 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0 || ^19.0.0",
-    "@types/react-dom": "^18.2.0 || ^19.0.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.0"
-  },
   "scripts": {
     "build": "npx tsc --project tsconfig.json && vite build && cp src/ColorPalette.css dist/style.css",
     "dev": "vite build --watch",
@@ -69,6 +58,20 @@
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:ui": "vitest --ui"
+    "test:ui": "vitest --ui",
+    "prepublishOnly": "pnpm run build && pnpm test"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.6"
   }
-}
+}