storybook-addon-css-properties
Version:
Edit CSS properties defined in your component to see how stories react
386 lines (350 loc) • 22.3 kB
JavaScript
import i,{memo,useRef,useState,useMemo,useEffect,useCallback}from'react';import {useParameter,useChannel,addons,types,useStorybookApi}from'storybook/manager-api';import {AddonPanel,Badge}from'storybook/internal/components';import {styled}from'storybook/theming';var H="storybook-addon-css-properties",D=`${H}/panel`,j="cssVars",S={REQUEST:`${H}/request`};var yr=styled.div`
padding: 0;
font-family: ${({theme:r})=>r.typography.fonts.base};
background-color: ${({theme:r})=>r.background.content};
height: 100%;
overflow-y: auto;
`,$r=styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: .625rem .9375rem;
border-bottom: 1px solid ${({theme:r})=>r.appBorderColor};
background: ${({theme:r})=>r.background.content};
position: sticky;
top: 0;
z-index: 1;
`,Cr=styled.div`
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
color: ${({theme:r})=>r.color.mediumdark};
`,X=styled.div`
display: flex;
gap: .375rem;
`,G=styled.button`
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
font-weight: ${({theme:r})=>r.typography.weight.regular};
padding: .375rem .75rem;
border: 1px solid ${({theme:r})=>r.appBorderColor};
border-radius: ${({theme:r})=>r.appBorderRadius/16}rem;
background-color: ${({theme:r})=>r.background.content};
color: ${({theme:r})=>r.color.defaultText};
cursor: pointer;
@media (prefers-reduced-motion: no-preference) {
transition: all 0.15s ease-out;
}
&:hover {
border-color: ${({theme:r})=>r.color.secondary};
background-color: ${({theme:r})=>r.background.hoverable};
}
&:focus {
outline: none;
border-color: ${({theme:r})=>r.color.secondary};
box-shadow: 0 0 0 .0625rem ${({theme:r})=>r.color.secondary};
}
&:active {
background-color: ${({theme:r})=>r.background.app};
}
`,xr=styled.table`
width: 100%;
border-collapse: collapse;
border: 1px solid ${({theme:r})=>r.appBorderColor};
border-radius: .25rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
`,wr=styled.thead`
background: ${({theme:r})=>r.background.app};
`,vr=styled.tr`
/* No additional styles needed */
`,N=styled.th`
padding: .5rem .9375rem;
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
font-weight: ${({theme:r})=>r.typography.weight.bold};
color: ${({theme:r})=>r.color.dark};
text-align: left;
border-bottom: 1px solid ${({theme:r})=>r.appBorderColor};
&:first-child {
width: 30%;
}
&:nth-child(2) {
width: 20%;
}
&:nth-child(3) {
width: auto;
}
&:last-child {
width: 1%;
white-space: nowrap;
}
`,Pr=styled.tbody`
/* No additional styles needed */
`,Tr=styled.tr`
background: ${({theme:r})=>r.background.app};
`,Sr=styled.th`
padding: .75rem .9375rem;
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s2/16}rem;
font-weight: ${({theme:r})=>r.typography.weight.bold};
color: ${({theme:r})=>r.color.defaultText};
text-align: left;
border-block: 1px solid ${({theme:r})=>r.appBorderColor};
position: relative;
`,Er=styled.tr`
@media (prefers-reduced-motion: no-preference) {
transition: background-color 0.15s ease;
}
&:hover {
background-color: ${({theme:r})=>r.background.hoverable};
}
&:last-child td {
border-bottom: none;
}
&:focus-within {
background-color: ${({theme:r})=>r.background.hoverable};
outline: 2px solid ${({theme:r})=>r.color.secondary};
outline-offset: -2px;
}
`,V=styled.td`
padding: .625rem .9375rem;
vertical-align: middle;
border-bottom: 1px solid ${({theme:r})=>r.appBorderColor};
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s2/16}rem;
`,Ir=styled.div`
font-family: ${({theme:r})=>r.typography.fonts.mono};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
font-weight: ${({theme:r})=>r.typography.weight.bold};
color: ${({theme:r})=>r.color.secondary};
margin-bottom: .25rem;
user-select: all;
background: ${({theme:r})=>r.background.app};
padding: .125rem .25rem;
border-radius: .125rem;
display: inline-block;
`,Ar=styled.div`
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
color: ${({theme:r})=>r.color.mediumdark};
line-height: 1.4;
`,zr=styled.div`
font-family: ${({theme:r})=>r.typography.fonts.mono};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
color: ${({theme:r})=>r.color.mediumdark};
&.has-value {
color: ${({theme:r})=>r.color.defaultText};
background: ${({theme:r})=>r.background.app};
padding: .25rem .375rem;
border-radius: .1875rem;
border: 1px solid ${({theme:r})=>r.appBorderColor};
display: inline-flex;
user-select: all;
}
`,kr=styled.div`
height: 1.25rem;
width: 1.25rem;
border-radius: .25rem;
background-color: ${({color:r})=>r};
`,Mr=styled.div`
display: flex;
align-items: center;
gap: .5rem;
`,Hr=styled.div`
width: 2rem;
height: 2rem;
border-radius: .25rem;
border: 1px solid ${({theme:r})=>r.appBorderColor};
background: ${({color:r})=>r};
cursor: pointer;
position: relative;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
@media (prefers-reduced-motion: no-preference) {
transition: all 0.15s ease-out;
}
&:hover {
border-color: ${({theme:r})=>r.color.secondary};
transform: scale(1.05);
}
&:focus-within,
&:focus {
outline: 2px solid ${({theme:r})=>r.color.secondary};
outline-offset: 2px;
border-color: ${({theme:r})=>r.color.secondary};
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
&:focus:not(:focus-visible) {
outline: none;
}
/* Checkered background for transparency */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: .5rem .5rem;
background-position: 0 0, 0 .25rem, .25rem -.25rem, -.25rem 0rem;
border-radius: calc(.25rem - 1px);
z-index: -1;
}
`,Br=styled.input`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
`,Or=styled.div`
display: flex;
flex-direction: column;
gap: .5rem;
`,_=styled.div`
display: flex;
align-items: center;
gap: .5rem;
`,Y=styled.input`
font-family: ${({theme:r})=>r.typography.fonts.mono};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
padding: .375rem .5rem;
border: 1px solid ${({theme:r})=>r.appBorderColor};
border-radius: ${({theme:r})=>r.appBorderRadius/16}rem;
background-color: ${({theme:r})=>r.background.content};
color: ${({theme:r})=>r.color.defaultText};
flex: 1;
min-width: 0;
max-width: 13rem;
transition: border-color 0.15s ease-out;
&:focus {
outline: none;
border-color: ${({theme:r})=>r.color.secondary};
}
&:hover {
border-color: ${({theme:r})=>r.color.mediumdark};
}
&[type="color"] {
width: 2rem;
height: 2rem;
padding: .125rem;
cursor: pointer;
&::-webkit-color-swatch-wrapper {
padding: 0;
border: none;
border-radius: .125rem;
overflow: hidden;
}
&::-webkit-color-swatch {
border: none;
border-radius: .125rem;
}
}
&[type="range"] {
padding: 0;
height: 1.25rem;
background: transparent;
cursor: pointer;
appearance: none;
max-width: 9.5rem;
&::-webkit-slider-track {
width: 100%;
height: .25rem;
background: ${({theme:r})=>r.appBorderColor};
border-radius: .125rem;
}
&::-webkit-slider-thumb {
appearance: none;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: ${({theme:r})=>r.color.secondary};
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease-out;
&:hover {
transform: scale(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
}
&::-moz-range-track {
width: 100%;
height: .25rem;
background: ${({theme:r})=>r.appBorderColor};
border-radius: .125rem;
border: none;
}
&::-moz-range-thumb {
height: 1rem;
width: 1rem;
border-radius: 50%;
background: ${({theme:r})=>r.color.secondary};
cursor: pointer;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease-out;
&:hover {
transform: scale(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
}
&:focus {
outline: none;
&::-webkit-slider-thumb {
box-shadow: 0 0 0 .125rem ${({theme:r})=>r.color.secondary}33, 0 1px 2px rgba(0, 0, 0, 0.1);
}
&::-moz-range-thumb {
box-shadow: 0 0 0 .125rem ${({theme:r})=>r.color.secondary}33, 0 1px 2px rgba(0, 0, 0, 0.1);
}
}
}
&::placeholder {
color: ${({theme:r})=>r.color.mediumdark};
font-style: italic;
}
`,Dr=styled(Y)`
font-family: ${({theme:r})=>r.typography.fonts.mono};
min-width: 8rem;
flex: 1;
`,jr=styled.label`
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
color: ${({theme:r})=>r.color.mediumdark};
white-space: nowrap;
`,Nr=styled.span`
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
color: ${({theme:r})=>r.color.defaultText};
font-family: ${({theme:r})=>r.typography.fonts.mono};
min-width: 2.5rem;
text-align: right;
`,Z=styled(G)`
padding: .25rem .5rem;
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
`,Vr=styled.div`
padding: 2.5rem 1.25rem;
text-align: center;
color: ${({theme:r})=>r.color.mediumdark};
h3 {
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
font-weight: ${({theme:r})=>r.typography.weight.regular};
margin: 0 0 .5rem 0;
color: ${({theme:r})=>r.color.defaultText};
}
p {
font-family: ${({theme:r})=>r.typography.fonts.base};
font-size: ${({theme:r})=>r.typography.size.s2/16}rem;
margin: 0;
line-height: 1.4;
}
code {
font-family: ${({theme:r})=>r.typography.fonts.mono};
background: ${({theme:r})=>r.background.app};
padding: .125rem .25rem;
border-radius: .1875rem;
font-size: ${({theme:r})=>r.typography.size.s1/16}rem;
}
`;function L(r){return r.startsWith("--")}function Lr(r){let b={};return Object.entries(r).forEach(([C,f])=>{L(C)?b[C]=f:Object.entries(f).forEach(([x,P])=>{L(x)&&(b[x]=P);});}),b}function Ur(r){let b=[],C=[],f=new Map;return Object.entries(r).forEach(([$,x])=>{if(L($))C.push({key:$,value:x});else {let P=[];Object.entries(x).forEach(([T,I])=>{L(T)&&P.push({key:T,value:I});}),P.length>0&&f.set($,P);}}),C.length>0&&b.push({category:null,properties:C}),f.forEach(($,x)=>{b.push({category:x,properties:$});}),b}var R=memo(function(b){let C=useParameter(j,{}),f=useChannel({}),$=useRef({}),x=useRef({}),P=useRef({}),U=useRef({}),T=useRef({}),[I,E]=useState({}),w=useMemo(()=>Lr(C),[C]),er=useMemo(()=>Ur(C),[C]);useEffect(()=>{let o={};Object.entries(w).forEach(([n,t])=>{let s=t.value||"";o[n]=s,f(S.REQUEST,{[n]:s});}),E(o);},[w,f]),useEffect(()=>{Object.entries(I).forEach(([o,n])=>{let t=T.current[o],s=w[o];t&&s?.control==="color"&&(t.style.backgroundColor=n||"#000000");});},[I,w]);let z=useCallback(o=>{if(!o)return {color:"#000000",opacity:1};let n=o.trim().toLowerCase(),t=n.match(/^#([0-9a-f]{4})$/);if(t&&t[1]&&t[1].length===4){let a=t[1],u=a.charAt(0)+a.charAt(0),g=a.charAt(1)+a.charAt(1),d=a.charAt(2)+a.charAt(2),e=a.charAt(3)+a.charAt(3),h=parseInt(e,16)/255;return {color:`#${u}${g}${d}`,opacity:h}}let s=n.match(/^#([0-9a-f]{8})$/);if(s&&s[1]&&s[1].length===8){let a=s[1],u=a.substring(0,2),g=a.substring(2,4),d=a.substring(4,6),e=a.substring(6,8),h=parseInt(e,16)/255;return {color:`#${u}${g}${d}`,opacity:h}}let c=n.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/);if(c&&c[1]&&c[2]&&c[3]&&c[4]){let a=parseInt(c[1],10),u=parseInt(c[2],10),g=parseInt(c[3],10),d=parseFloat(c[4]);if(a<=255&&u<=255&&g<=255&&d>=0&&d<=1){let e=h=>h.toString(16).padStart(2,"0");return {color:`#${e(a)}${e(u)}${e(g)}`,opacity:d}}}let l=n.match(/^hsla\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*,\s*([\d.]+)\s*\)$/);if(l&&l[1]&&l[2]&&l[3]&&l[4]){let a=parseInt(l[1],10),u=parseInt(l[2],10),g=parseInt(l[3],10),d=parseFloat(l[4]);if(a<=360&&u<=100&&g<=100&&d>=0&&d<=1){let e=W(a,u,g);if(e)return {color:e,opacity:d}}}let p=dr(o);return p&&A(p)?{color:p,opacity:1}:{color:o,opacity:1}},[]),k=useCallback((o,n)=>{if(n===1)return o;let t=o.match(/^#([0-9a-fA-F]{6})$/);if(t&&t[1]){let s=t[1],c=parseInt(s.substring(0,2),16),l=parseInt(s.substring(2,4),16),p=parseInt(s.substring(4,6),16);return `rgba(${c}, ${l}, ${p}, ${n})`}return o},[]),O=useCallback(o=>{let n=document.createElement("div");if(n.style.color=o,n.style.color){document.body.appendChild(n);let t=window.getComputedStyle(n).color;document.body.removeChild(n);let s=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(s&&s[1]&&s[2]&&s[3]){let c=parseInt(s[1],10),l=parseInt(s[2],10),p=parseInt(s[3],10),a=u=>u.toString(16).padStart(2,"0");return `#${a(c)}${a(l)}${a(p)}`}}return null},[]),nr=useCallback((o,n)=>{E(t=>({...t,[o]:n})),f(S.REQUEST,{[o]:n});},[f]),sr=useCallback((o,n)=>{E(g=>({...g,[o]:n}));let{color:t,opacity:s}=z(n),c=$.current[o];c&&A(t)&&(c.value=t);let l=x.current[o],p=P.current[o],a=A(t)||O(n);l&&a&&(l.value=s.toString()),p&&(p.textContent=`${Math.round(s*100)}%`);let u=T.current[o];u&&(u.style.backgroundColor=n),f(S.REQUEST,{[o]:n});},[f,z,O]),ar=useCallback((o,n)=>{let t=x.current[o],s=t?parseFloat(t.value):1,c=k(n,s);E(p=>({...p,[o]:c}));let l=T.current[o];l&&(l.style.backgroundColor=c),f(S.REQUEST,{[o]:c});},[f,k]),ir=useCallback((o,n)=>{let t=$.current[o],s=t?t.value:"#000000",c;if(n===1)c=s;else if(c=k(s,n),c===s&&n!==1){let a=U.current[o],u=a?a.value:s,g=document.createElement("div");if(g.style.color=u,g.style.color){document.body.appendChild(g);let d=window.getComputedStyle(g).color;document.body.removeChild(g);let e=d.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);if(e&&e[1]&&e[2]&&e[3]){let h=parseInt(e[1],10),y=parseInt(e[2],10),M=parseInt(e[3],10);c=`rgba(${h}, ${y}, ${M}, ${n})`;}}}E(a=>({...a,[o]:c}));let l=P.current[o];l&&(l.textContent=`${Math.round(n*100)}%`);let p=T.current[o];p&&(p.style.backgroundColor=c),f(S.REQUEST,{[o]:c});},[f,k]),F=useCallback(o=>{let n=$.current[o],t=x.current[o],s=P.current[o],c=T.current[o];E(l=>({...l,[o]:""})),n&&n.type==="color"&&(n.value="#000000"),t&&(t.value="1"),s&&(s.textContent="100%"),c&&(c.style.backgroundColor="#000000"),f(S.REQUEST,{[o]:""});},[f]),cr=useCallback(()=>{Object.keys(w).forEach(o=>{F(o);});},[w,F]),Q=useCallback(o=>{let n=$.current[o],t=x.current[o],s=P.current[o],c=T.current[o],l=w[o]?.value||"",p=w[o]?.control;if(E(a=>({...a,[o]:l})),p==="color"){let{color:a,opacity:u}=z(l);n&&n.type==="color"&&(n.value=A(a)?a:"#000000"),t&&(t.value=u.toString()),s&&(s.textContent=`${Math.round(u*100)}%`),c&&(c.style.backgroundColor=l||"#000000");}f(S.REQUEST,{[o]:l});},[w,f,z]),lr=useCallback(()=>{Object.entries(w).forEach(([o,n])=>{Q(o);});},[w,Q]),W=useCallback((o,n,t)=>{let s=o/360,c=n/100,l=t/100,p=(e,h,y)=>(y<0&&(y+=1),y>1&&(y-=1),y<1/6?e+(h-e)*6*y:y<1/2?h:y<2/3?e+(h-e)*(2/3-y)*6:e),a,u,g;if(c===0)a=u=g=l;else {let e=l<.5?l*(1+c):l+c-l*c,h=2*l-e;a=p(h,e,s+1/3),u=p(h,e,s),g=p(h,e,s-1/3);}let d=e=>Math.round(e*255).toString(16).padStart(2,"0");return `#${d(a)}${d(u)}${d(g)}`},[]);function dr(o){let n=o.trim().toLowerCase(),t=n.match(/^#([0-9a-f]{3})$/);if(t&&t[1]){let d=t[1];return `#${d.charAt(0)}${d.charAt(0)}${d.charAt(1)}${d.charAt(1)}${d.charAt(2)}${d.charAt(2)}`}let s=n.match(/^#([0-9a-f]{4})$/);if(s&&s[1]&&s[1].length===4){let d=s[1];return `#${d.charAt(0)}${d.charAt(0)}${d.charAt(1)}${d.charAt(1)}${d.charAt(2)}${d.charAt(2)}`}let c=n.match(/^#([0-9a-f]{6})$/);if(c&&c[1])return n;let l=n.match(/^#([0-9a-f]{8})$/);if(l&&l[1]&&l[1].length===8)return `#${l[1].substring(0,6)}`;let p=n.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);if(p&&p[1]&&p[2]&&p[3]){let d=parseInt(p[1],10),e=parseInt(p[2],10),h=parseInt(p[3],10);if(d>255||e>255||h>255)return null;let y=M=>M.toString(16).padStart(2,"0");return `#${y(d)}${y(e)}${y(h)}`}let a=n.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*[\d.]+\s*\)$/);if(a&&a[1]&&a[2]&&a[3]){let d=parseInt(a[1],10),e=parseInt(a[2],10),h=parseInt(a[3],10);if(d>255||e>255||h>255)return null;let y=M=>M.toString(16).padStart(2,"0");return `#${y(d)}${y(e)}${y(h)}`}let u=n.match(/^hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/);if(u&&u[1]&&u[2]&&u[3]){let d=parseInt(u[1],10),e=parseInt(u[2],10),h=parseInt(u[3],10);return d>360||e>100||h>100?null:W(d,e,h)}let g=n.match(/^hsla\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*,\s*[\d.]+\s*\)$/);if(g&&g[1]&&g[2]&&g[3]){let d=parseInt(g[1],10),e=parseInt(g[2],10),h=parseInt(g[3],10);return d>360||e>100||h>100?null:W(d,e,h)}return null}function A(o){return o?o.match(/^#([0-9a-fA-F]{6})$/)!==null:false}function pr(o){if(!o)return false;let n=o.trim().toLowerCase(),t=n.match(/^#([0-9a-f]{4})$/),s=n.match(/^#([0-9a-f]{8})$/),c=n.match(/^rgba\(/),l=n.match(/^hsla\(/);return !!(t||s||c||l)}function ur(o){return o.startsWith("#")||o.startsWith("rgb(")||o.startsWith("rgba(")||o.startsWith("hsl(")||o.startsWith("hsla(")||O(o)!==null}return i.createElement(AddonPanel,{...b},i.createElement(yr,null,i.createElement($r,null,i.createElement(Cr,null,i.createElement("span",{id:"clear-label"},"Clear uses component defaults")," \u2022 ",i.createElement("span",{id:"reset-label"},"Reset uses story defaults")),i.createElement(X,null,i.createElement(G,{onClick:cr,title:"Use the component's default values","aria-controls":Object.keys(w).join(" "),"aria-describedby":"clear-label"},"Clear all"),i.createElement(G,{onClick:lr,title:"Use the story's default values","aria-controls":Object.keys(w).join(" "),"aria-describedby":"reset-label"},"Reset all"))),Object.keys(w).length===0?i.createElement(Vr,null,i.createElement("h3",null,"No CSS Properties configured"),i.createElement("p",null,"Add CSS variables to your story using the ",i.createElement("code",null,"cssVars")," parameter.")):i.createElement(xr,{role:"table","aria-label":"CSS Properties Configuration"},i.createElement(wr,null,i.createElement(vr,null,i.createElement(N,{scope:"col"},"Name"),i.createElement(N,{scope:"col"},"Default"),i.createElement(N,{scope:"col"},"Control"),i.createElement(N,{scope:"col"},"Actions"))),i.createElement(Pr,null,er.map(({category:o,properties:n})=>i.createElement(i.Fragment,{key:o||"uncategorized"},o&&i.createElement(Tr,null,i.createElement(Sr,{colSpan:4,scope:"colgroup"},o)),n.map(({key:t,value:s})=>{let c=s.control||"text",l=c==="color",p=I[t]!==void 0?I[t]:s.value||"",{color:a,opacity:u}=l?z(p):{color:"",opacity:1},g=l&&A(a),d=l&&(A(a)||O(p||"")||pr(p||""));return i.createElement(Er,{key:t},i.createElement(V,null,i.createElement(Ir,null,t),s.description&&i.createElement(Ar,{id:`${t}-description`},s.description)),i.createElement(V,null,i.createElement("div",{style:{display:"flex",alignItems:"center",gap:"0.25rem"}},i.createElement(zr,{className:s.default?"has-value":""},s.default||"\u2013"),s.default&&ur(s.default)&&i.createElement(kr,{color:s.default}))),i.createElement(V,null,i.createElement(Or,null,l?i.createElement(i.Fragment,null,i.createElement(_,null,i.createElement(Mr,null,i.createElement(Hr,{ref:e=>{T.current[t]=e;},color:g?k(a,u):p||"#000000",role:"button",tabIndex:0,"aria-label":`Color swatch for ${t}. Current color: ${p||"not set"}. Click to open color picker.`,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();let h=$.current[t];h&&h.click();}}},i.createElement(Br,{ref:e=>{$.current[t]=e;},id:t,type:"color",value:g?a:"#000000",onChange:e=>ar(t,e.target.value),"aria-label":`Color picker for ${t}`,"aria-describedby":s.description?`${t}-description`:void 0})),i.createElement(Dr,{ref:e=>{U.current[t]=e;},type:"text",value:p,onChange:e=>sr(t,e.target.value),placeholder:"Enter color","aria-label":`Color value for ${t}`,"aria-describedby":s.description?`${t}-description`:void 0}))),d&&i.createElement(_,null,i.createElement(jr,{htmlFor:`${t}-opacity`},"Opacity:"),i.createElement(Y,{ref:e=>{x.current[t]=e;},id:`${t}-opacity`,type:"range",min:"0",max:"1",step:"0.01",value:u.toString(),onChange:e=>ir(t,parseFloat(e.target.value)),"aria-label":`Opacity for ${t}`,"aria-valuetext":`${Math.round(u*100)} percent`,"aria-describedby":`${t}-opacity-value`}),i.createElement(Nr,{ref:e=>{P.current[t]=e;},id:`${t}-opacity-value`},Math.round(u*100),"%"))):i.createElement(_,null,i.createElement(Y,{ref:e=>{$.current[t]=e;},id:t,type:c,value:p,onChange:e=>nr(t,e.target.value),placeholder:`Enter ${c}`,step:c==="number"?1:void 0,"aria-label":`${c} input for ${t}`,"aria-describedby":s.description?`${t}-description`:void 0})))),i.createElement(V,null,i.createElement(X,null,i.createElement(Z,{onClick:()=>F(t),title:"Use component default","aria-controls":t,"aria-describedby":"clear-label"},"Clear"),i.createElement(Z,{onClick:()=>Q(t),title:"Use story default","aria-controls":t,"aria-describedby":"reset-label"},"Reset"))))})))))))});function rr(r){return r.startsWith("--")}function _r(r){let b=0;return Object.entries(r).forEach(([C,f])=>{rr(C)?b++:Object.keys(f).forEach(x=>{rr(x)&&b++;});}),b}function or(){let b=useStorybookApi().getSelectedPanel(),C=useParameter(j,{}),f=_r(C);return i.createElement("div",{style:{display:"flex",alignItems:"center",gap:6}},i.createElement("span",null,"CSS Properties"),f===0?null:i.createElement(Badge,{compact:true,status:b===D?"active":"neutral"},f))}addons.register(H,r=>{addons.add(D,{type:types.PANEL,title:or,match:({viewMode:b})=>b==="story",render:({active:b})=>i.createElement(R,{active:b??false})});});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map