@telegraph/tag 0.0.17 → 0.0.19

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @telegraph/tag
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [[`0d709cc`](https://github.com/knocklabs/telegraph/commit/0d709cca3708aa976daa78added35260e9c02834)]:
+  - @telegraph/tooltip@0.0.2
+
+## 0.0.18
+
+### Patch Changes
+
+- [#127](https://github.com/knocklabs/telegraph/pull/127) [`04e1459`](https://github.com/knocklabs/telegraph/commit/04e14597ed2148354923023b3668f63387ce63c4) Thanks [@kylemcd](https://github.com/kylemcd)! - tooltip + better themeing support
+
+- [#124](https://github.com/knocklabs/telegraph/pull/124) [`def3d89`](https://github.com/knocklabs/telegraph/commit/def3d89056aa54c0d24f74e33bc04df8efc712d9) Thanks [@kylemcd](https://github.com/kylemcd)! - better ts support for as prop with custom tgphRef
+
+- [#126](https://github.com/knocklabs/telegraph/pull/126) [`790c5e0`](https://github.com/knocklabs/telegraph/commit/790c5e0626c9b99451214f892def9807165d9572) Thanks [@kylemcd](https://github.com/kylemcd)! - animation for tag component onCopy + utilize box in typography components
+
+- Updated dependencies [[`04e1459`](https://github.com/knocklabs/telegraph/commit/04e14597ed2148354923023b3668f63387ce63c4), [`def3d89`](https://github.com/knocklabs/telegraph/commit/def3d89056aa54c0d24f74e33bc04df8efc712d9), [`790c5e0`](https://github.com/knocklabs/telegraph/commit/790c5e0626c9b99451214f892def9807165d9572)]:
+  - @telegraph/typography@0.0.11
+  - @telegraph/button@0.0.20
+  - @telegraph/helpers@0.0.2
+  - @telegraph/icon@0.0.12
+
 ## 0.0.17
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),j=require("@telegraph/button"),u=require("@telegraph/icon"),R=require("@telegraph/typography"),s=require("clsx"),n=require("react"),m={Root:{1:"h-6",2:"h-8"}},i={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9",purple:"bg-purple-9"},soft:{default:"bg-gray-3",accent:"bg-accent-3",gray:"bg-gray-3",red:"bg-red-3",blue:"bg-blue-3",green:"bg-green-3",yellow:"bg-yellow-3",purple:"bg-purple-3"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}}},d=n.createContext({size:"1",color:"default",variant:"soft"}),b=n.forwardRef(({size:t="1",color:r="default",variant:l="soft",className:e,...a},c)=>o.jsx(d.Provider,{value:{size:t,color:r,variant:l},children:o.jsx("span",{className:s.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],i.Root[l][r],e),...a,ref:c,"data-tag":!0})})),f=n.forwardRef(({as:t="span",className:r,...l},e)=>{const a=n.useContext(d);return o.jsx(R.Text,{as:t,size:a.size,color:i.Text[a.variant][a.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-2",r),...l,ref:e})}),g=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(j.Button,{size:e.size,color:i.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:s.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:l})}),y=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(u.Icon,{size:e.size,color:i.Icon[e.variant][e.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:l})}),p=n.forwardRef(({color:t="default",size:r="1",variant:l="soft",icon:e,onRemove:a,onCopy:c,children:w,...x},h)=>o.jsxs(b,{color:t,size:r,variant:l,...x,ref:h,children:[e&&o.jsx(y,{...e}),o.jsx(f,{as:"span",children:w}),a&&o.jsx(g,{onClick:a,icon:{icon:u.Lucide.X,alt:"Remove"}}),c&&o.jsx(g,{onClick:c,icon:{icon:u.Lucide.Copy,alt:"Copy text"}})]}));Object.assign(p,{Root:b,Button:g,Text:f,Icon:y});const C=p;exports.Tag=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),w=require("@telegraph/button"),h=require("@telegraph/icon"),L=require("@telegraph/compose-refs"),y=require("clsx"),s=require("react"),I=require("@telegraph/tooltip"),M=require("@telegraph/typography"),R=require("framer-motion"),g=["sm","md","lg","xl","2xl"],S=o=>{const t=[];let e=null;for(let r=0;r<g.length;r++){const n=g[r];if(o[n])e=o[n],t.push(e);else if(e!==null)t.push(e);else{let l=null;for(let i=r+1;i<g.length;i++)if(o[g[i]]){l=o[g[i]];break}if(l!==null){for(let i=0;i<=r;i++)t.push(l);e=l}}}return t},P=o=>typeof o=="object"&&(o.sm||o.md||o.lg||o.xl||o["2xl"]),u=({value:o,prop:t})=>{if(!o)return"";if(t.valueType==="static")return o.toString();const e=t.type==="color"?"":`-${t.type}`;return o===!0?`var(--tgph${e}-${t.default})`:`var(--tgph${e}-${o})`},f={top:0,right:1,bottom:2,left:3},d={topLeft:0,topRight:1,bottomRight:2,bottomLeft:3},V=({cssVariables:o,value:t,prop:e,direction:r="all"})=>{const n=o[`--tgph-${e.rule}`]||"",l=n?n.split(" "):[],i=[(l==null?void 0:l[0])||0,(l==null?void 0:l[1])||0,(l==null?void 0:l[2])||0,(l==null?void 0:l[3])||0];return r==="all"?u({value:t,prop:e}):(e.ordering==="clockwise"?(r==="top"&&(i[d.topLeft]=u({value:t,prop:e}),i[d.topRight]=u({value:t,prop:e})),r==="right"&&(i[d.topRight]=u({value:t,prop:e}),i[d.bottomRight]=u({value:t,prop:e})),r==="bottom"&&(i[d.bottomRight]=u({value:t,prop:e}),i[d.bottomLeft]=u({value:t,prop:e})),r==="left"&&(i[d.bottomLeft]=u({value:t,prop:e}),i[d.topLeft]=u({value:t,prop:e})),(r==="topLeft"||r==="topRight"||r==="bottomRight"||r==="bottomLeft")&&(i[d[r]]=u({value:t,prop:e}))):(r==="x"&&(i[f.left]=u({value:t,prop:e}),i[f.right]=u({value:t,prop:e})),r==="y"&&(i[f.top]=u({value:t,prop:e}),i[f.bottom]=u({value:t,prop:e})),(r==="top"||r==="bottom"||r==="left"||r==="right")&&(i[f[r]]=u({value:t,prop:e}))),i.join(" "))},j=({prop:o,value:t,cssVariables:e})=>o.direction?V({cssVariables:e,prop:o,value:t,direction:o.direction,type:o.type}):u({value:t,prop:o}),C=({props:o,ref:t,propsMap:e})=>{if(!t.current)return;const r={};Object.entries(o).forEach(([n,l])=>{const i=e[n];i&&(typeof l=="string"||typeof l=="boolean"?r[`--tgph-${i.rule}`]=j({prop:i,key:n,value:l,cssVariables:r}):P(l)&&S(l).forEach((a,c)=>{a&&(r[`--tgph-${i.rule}-${g[c]}`]=j({prop:i,key:n,value:a,cssVariables:r}))})),Object.entries(r).forEach(([a,c])=>{t.current&&t.current.style.setProperty(a,c)})})},k={display:{rule:"display",type:"block-display",valueType:"static"},h:{rule:"height",type:"spacing"},w:{rule:"width",type:"spacing"},maxH:{rule:"max-height",type:"spacing"},maxW:{rule:"max-width",type:"spacing"},p:{rule:"padding",type:"spacing",direction:"all"},m:{rule:"margin",type:"spacing",direction:"all"},pt:{rule:"padding",type:"spacing",direction:"top"},pl:{rule:"padding",type:"spacing",direction:"left"},pb:{rule:"padding",type:"spacing",direction:"bottom"},pr:{rule:"padding",type:"spacing",direction:"right"},px:{rule:"padding",type:"spacing",direction:"x"},py:{rule:"padding",type:"spacing",direction:"y"},mt:{rule:"margin",type:"spacing",direction:"top"},ml:{rule:"margin",type:"spacing",direction:"left"},mb:{rule:"margin",type:"spacing",direction:"bottom"},mr:{rule:"margin",type:"spacing",direction:"right"},mx:{rule:"margin",type:"spacing",direction:"x"},my:{rule:"margin",type:"spacing",direction:"y"},bg:{rule:"background-color",type:"color"},rounded:{rule:"border-radius",type:"rounded",direction:"all"},roundedTopLeft:{rule:"border-radius",type:"rounded",direction:"topLeft",ordering:"clockwise"},roundedBottomLeft:{rule:"border-radius",type:"rounded",direction:"bottomLeft",ordering:"clockwise"},roundedBottomRight:{rule:"border-radius",type:"rounded",direction:"bottomRight",ordering:"clockwise"},roundedTopRight:{rule:"border-radius",type:"rounded",direction:"topRight",ordering:"clockwise"},roundedTop:{rule:"border-radius",type:"rounded",direction:"top",ordering:"clockwise"},roundedBottom:{rule:"border-radius",type:"rounded",direction:"bottom",ordering:"clockwise"},roundedLeft:{rule:"border-radius",type:"rounded",direction:"left",ordering:"clockwise"},roundedRight:{rule:"border-radius",type:"rounded",direction:"right",ordering:"clockwise"},border:{rule:"border-width",type:"spacing",direction:"all",default:"px"},borderTop:{rule:"border-width",type:"spacing",direction:"top",default:"px"},borderLeft:{rule:"border-width",type:"spacing",direction:"left",default:"px"},borderBottom:{rule:"border-width",type:"spacing",direction:"bottom",default:"px"},borderRight:{rule:"border-width",type:"spacing",direction:"right",default:"px"},borderX:{rule:"border-width",type:"spacing",direction:"x",default:"px"},borderY:{rule:"border-width",type:"spacing",direction:"y",default:"px"},borderColor:{rule:"border-color",type:"color",default:"gray-4"},borderStyle:{rule:"border-style",type:"border-style",default:"solid"}},X=({as:o,className:t,tgphRef:e,...r})=>{const n=o||"div",l=s.useRef(null),i=L.useComposedRefs(e,l),a=s.useMemo(()=>{const c={borderColor:!0,...r};return Object.keys(c).reduce((v,b)=>(Object.keys(k).some($=>$===b)?v.box[b]=c[b]:v.rest[b]=c[b],v),{box:{},rest:{}})},[r]);return s.useLayoutEffect(()=>{C({props:a.box,ref:l,propsMap:k})},[a.box]),p.jsx(n,{className:y("tgph-box",t),ref:i,...a.rest})},T={display:{rule:"display",type:"flex-display",valueType:"static"},direction:{rule:"flex-direction",type:"flex-direction",valueType:"static"},align:{rule:"align-items",type:"align-items",valueType:"static"},justify:{rule:"justify-content",type:"justify-content",valueType:"static"},wrap:{rule:"flex-wrap",type:"flex-wrap",valueType:"static"},gap:{rule:"gap",type:"spacing",valueType:"variable"}},A=({className:o,tgphRef:t,...e})=>{const r=s.useRef(null),n=L.useComposedRefs(t,r),l=s.useMemo(()=>Object.keys(e).reduce((i,a)=>(Object.keys(T).some(c=>c===a)?i.stack[a]=e[a]:i.rest[a]=e[a],i),{stack:{},rest:{}}),[e]);return s.useLayoutEffect(()=>{C({props:l.stack,ref:r,propsMap:T})},[l.stack,n]),p.jsx(X,{className:y("tgph-stack",o),tgphRef:n,...l.rest})},D={Root:{1:"h-6",2:"h-8"}},m={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9",purple:"bg-purple-9"},soft:{default:"bg-gray-3",accent:"bg-accent-3",gray:"bg-gray-3",red:"bg-red-3",blue:"bg-blue-3",green:"bg-green-3",yellow:"bg-yellow-3",purple:"bg-purple-3"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}}},x=s.createContext({size:"1",color:"default",variant:"soft"}),B=({as:o="span",size:t="1",color:e="default",variant:r="soft",className:n,...l})=>p.jsx(x.Provider,{value:{size:t,color:e,variant:r},children:p.jsx(A,{as:o,display:"inline-flex",align:"center",rounded:"3",pl:"2",className:y.clsx(D.Root[t],m.Root[r][e],n),...l,"data-tag":!0})}),O=({as:o="span",...t})=>{const e=s.useContext(x);return p.jsx(M.Text,{as:o,size:e.size,color:m.Text[e.variant][e.color],mr:"2",...t})},q=({onClick:o,textToCopy:t,className:e,...r})=>{const n=s.useContext(x),[l,i]=s.useState(!1);return s.useEffect(()=>{if(l){const a=setTimeout(()=>i(!1),2e3);return()=>clearTimeout(a)}},[l]),p.jsx(R.AnimatePresence,{mode:"wait",initial:!1,children:p.jsx(I.Tooltip,{label:"Copy text",children:p.jsx(w.Button.Root,{onClick:a=>{var c;o==null||o(a),i(!0),t&&navigator.clipboard.writeText(t),(c=a.target)==null||c.blur()},size:n.size,color:m.Button[n.variant][n.color],variant:n.variant,className:y.clsx("overflow-hidden",e),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...r,children:l?p.jsx(w.Button.Icon,{as:R.motion.span,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{duration:.2,type:"spring",bounce:0},icon:h.Lucide.Check,alt:"Copied text"},"check icon"):p.jsx(w.Button.Icon,{as:R.motion.span,initial:{y:"-100%"},animate:{y:0},exit:{y:"-100%"},transition:{duration:.2,type:"spring",bounce:0},icon:h.Lucide.Copy,alt:"Copy text"},"copy icon")})})})},z=({className:o,...t})=>{const e=s.useContext(x);return p.jsx(w.Button,{size:e.size,color:m.Button[e.variant][e.color],variant:e.variant,icon:{icon:h.Lucide.X,alt:"close"},className:y.clsx("rounded-tl-0 rounded-bl-0",o),...t})},E=({icon:o,alt:t,"aria-hidden":e,className:r,...n})=>{const l=s.useContext(x),i=t?{alt:t}:{"aria-hidden":e};return p.jsx(h.Icon,{icon:o,size:l.size,color:m.Icon[l.variant][l.color],className:y.clsx("rounded-tl-0 rounded-bl-0 mr-1",r),...i,...n})},N=({color:o="default",size:t="1",variant:e="soft",icon:r,onRemove:n,onCopy:l,textToCopy:i,children:a,...c})=>p.jsxs(B,{color:o,size:t,variant:e,...c,children:[r&&p.jsx(E,{...r}),p.jsx(O,{as:"span",children:a}),n&&p.jsx(z,{onClick:n,icon:{icon:h.Lucide.X,alt:"Remove"}}),l&&p.jsx(q,{onClick:l,textToCopy:i})]});Object.assign(N,{Root:B,Button:z,Text:O,Icon:E,CopyButton:q});const H=N;exports.Tag=H;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: Lucide.Copy, alt: \"Copy text\" }}\n          />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../layout/dist/esm/index.mjs","../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["import { jsx as x } from \"react/jsx-runtime\";\nimport { useComposedRefs as R } from \"@telegraph/compose-refs\";\nimport w from \"clsx\";\nimport a from \"react\";\nconst u = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"], j = (i) => {\n  const e = [];\n  let t = null;\n  for (let r = 0; r < u.length; r++) {\n    const d = u[r];\n    if (i[d])\n      t = i[d], e.push(t);\n    else if (t !== null)\n      e.push(t);\n    else {\n      let s = null;\n      for (let o = r + 1; o < u.length; o++)\n        if (i[u[o]]) {\n          s = i[u[o]];\n          break;\n        }\n      if (s !== null) {\n        for (let o = 0; o <= r; o++)\n          e.push(s);\n        t = s;\n      }\n    }\n  }\n  return e;\n}, k = (i) => typeof i == \"object\" && (i.sm || i.md || i.lg || i.xl || i[\"2xl\"]), n = ({\n  value: i,\n  prop: e\n}) => {\n  if (!i)\n    return \"\";\n  if (e.valueType === \"static\")\n    return i.toString();\n  const t = e.type === \"color\" ? \"\" : `-${e.type}`;\n  return i === !0 ? `var(--tgph${t}-${e.default})` : `var(--tgph${t}-${i})`;\n}, b = {\n  top: 0,\n  right: 1,\n  bottom: 2,\n  left: 3\n}, p = {\n  topLeft: 0,\n  topRight: 1,\n  bottomRight: 2,\n  bottomLeft: 3\n}, O = ({\n  cssVariables: i,\n  value: e,\n  prop: t,\n  direction: r = \"all\"\n}) => {\n  const d = i[`--tgph-${t.rule}`] || \"\", s = d ? d.split(\" \") : [], o = [\n    (s == null ? void 0 : s[0]) || 0,\n    (s == null ? void 0 : s[1]) || 0,\n    (s == null ? void 0 : s[2]) || 0,\n    (s == null ? void 0 : s[3]) || 0\n  ];\n  return r === \"all\" ? n({ value: e, prop: t }) : (t.ordering === \"clockwise\" ? (r === \"top\" && (o[p.topLeft] = n({\n    value: e,\n    prop: t\n  }), o[p.topRight] = n({\n    value: e,\n    prop: t\n  })), r === \"right\" && (o[p.topRight] = n({\n    value: e,\n    prop: t\n  }), o[p.bottomRight] = n({\n    value: e,\n    prop: t\n  })), r === \"bottom\" && (o[p.bottomRight] = n({\n    value: e,\n    prop: t\n  }), o[p.bottomLeft] = n({\n    value: e,\n    prop: t\n  })), r === \"left\" && (o[p.bottomLeft] = n({\n    value: e,\n    prop: t\n  }), o[p.topLeft] = n({\n    value: e,\n    prop: t\n  })), (r === \"topLeft\" || r === \"topRight\" || r === \"bottomRight\" || r === \"bottomLeft\") && (o[p[r]] = n({\n    value: e,\n    prop: t\n  }))) : (r === \"x\" && (o[b.left] = n({\n    value: e,\n    prop: t\n  }), o[b.right] = n({\n    value: e,\n    prop: t\n  })), r === \"y\" && (o[b.top] = n({\n    value: e,\n    prop: t\n  }), o[b.bottom] = n({\n    value: e,\n    prop: t\n  })), (r === \"top\" || r === \"bottom\" || r === \"left\" || r === \"right\") && (o[b[r]] = n({\n    value: e,\n    prop: t\n  }))), o.join(\" \"));\n}, y = ({\n  prop: i,\n  value: e,\n  cssVariables: t\n}) => i.direction ? O({\n  cssVariables: t,\n  prop: i,\n  value: e,\n  direction: i.direction,\n  type: i.type\n}) : n({ value: e, prop: i }), L = ({\n  props: i,\n  ref: e,\n  propsMap: t\n}) => {\n  if (!e.current)\n    return;\n  const r = {};\n  Object.entries(i).forEach(([d, s]) => {\n    const o = t[d];\n    o && (typeof s == \"string\" || typeof s == \"boolean\" ? r[`--tgph-${o.rule}`] = y({\n      prop: o,\n      key: d,\n      value: s,\n      cssVariables: r\n    }) : k(s) && j(s).forEach((c, f) => {\n      c && (r[`--tgph-${o.rule}-${u[f]}`] = y({\n        prop: o,\n        key: d,\n        value: c,\n        cssVariables: r\n      }));\n    })), Object.entries(r).forEach(([l, c]) => {\n      e.current && e.current.style.setProperty(l, c);\n    });\n  });\n}, m = {\n  display: {\n    rule: \"display\",\n    type: \"block-display\",\n    valueType: \"static\"\n  },\n  h: {\n    rule: \"height\",\n    type: \"spacing\"\n  },\n  w: {\n    rule: \"width\",\n    type: \"spacing\"\n  },\n  maxH: {\n    rule: \"max-height\",\n    type: \"spacing\"\n  },\n  maxW: {\n    rule: \"max-width\",\n    type: \"spacing\"\n  },\n  p: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"all\"\n  },\n  m: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"all\"\n  },\n  pt: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"top\"\n  },\n  pl: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"left\"\n  },\n  pb: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"bottom\"\n  },\n  pr: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"right\"\n  },\n  px: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"x\"\n  },\n  py: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"y\"\n  },\n  mt: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"top\"\n  },\n  ml: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"left\"\n  },\n  mb: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"bottom\"\n  },\n  mr: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"right\"\n  },\n  mx: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"x\"\n  },\n  my: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"y\"\n  },\n  bg: {\n    rule: \"background-color\",\n    type: \"color\"\n  },\n  rounded: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"all\"\n  },\n  roundedTopLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"topLeft\",\n    ordering: \"clockwise\"\n  },\n  roundedBottomLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottomLeft\",\n    ordering: \"clockwise\"\n  },\n  roundedBottomRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottomRight\",\n    ordering: \"clockwise\"\n  },\n  roundedTopRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"topRight\",\n    ordering: \"clockwise\"\n  },\n  roundedTop: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"top\",\n    ordering: \"clockwise\"\n  },\n  roundedBottom: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottom\",\n    ordering: \"clockwise\"\n  },\n  roundedLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"left\",\n    ordering: \"clockwise\"\n  },\n  roundedRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"right\",\n    ordering: \"clockwise\"\n  },\n  border: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"all\",\n    default: \"px\"\n  },\n  borderTop: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"top\",\n    default: \"px\"\n  },\n  borderLeft: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"left\",\n    default: \"px\"\n  },\n  borderBottom: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"bottom\",\n    default: \"px\"\n  },\n  borderRight: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"right\",\n    default: \"px\"\n  },\n  borderX: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"x\",\n    default: \"px\"\n  },\n  borderY: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"y\",\n    default: \"px\"\n  },\n  borderColor: {\n    rule: \"border-color\",\n    type: \"color\",\n    default: \"gray-4\"\n  },\n  borderStyle: {\n    rule: \"border-style\",\n    type: \"border-style\",\n    default: \"solid\"\n  }\n}, C = ({\n  as: i,\n  className: e,\n  tgphRef: t,\n  ...r\n}) => {\n  const d = i || \"div\", s = a.useRef(null), o = R(t, s), l = a.useMemo(() => {\n    const c = { borderColor: !0, ...r };\n    return Object.keys(c).reduce(\n      (f, g) => (Object.keys(m).some((T) => T === g) ? f.box[g] = c[g] : f.rest[g] = c[g], f),\n      { box: {}, rest: {} }\n    );\n  }, [r]);\n  return a.useLayoutEffect(() => {\n    L({\n      props: l.box,\n      ref: s,\n      propsMap: m\n    });\n  }, [l.box]), /* @__PURE__ */ x(\n    d,\n    {\n      className: w(\"tgph-box\", e),\n      ref: o,\n      ...l.rest\n    }\n  );\n}, h = {\n  display: {\n    rule: \"display\",\n    type: \"flex-display\",\n    valueType: \"static\"\n  },\n  direction: {\n    rule: \"flex-direction\",\n    type: \"flex-direction\",\n    valueType: \"static\"\n  },\n  align: {\n    rule: \"align-items\",\n    type: \"align-items\",\n    valueType: \"static\"\n  },\n  justify: {\n    rule: \"justify-content\",\n    type: \"justify-content\",\n    valueType: \"static\"\n  },\n  wrap: {\n    rule: \"flex-wrap\",\n    type: \"flex-wrap\",\n    valueType: \"static\"\n  },\n  gap: {\n    rule: \"gap\",\n    type: \"spacing\",\n    valueType: \"variable\"\n  }\n}, E = ({\n  className: i,\n  tgphRef: e,\n  ...t\n}) => {\n  const r = a.useRef(null), d = R(e, r), s = a.useMemo(\n    () => Object.keys(t).reduce(\n      (o, l) => (Object.keys(h).some((c) => c === l) ? o.stack[l] = t[l] : o.rest[l] = t[l], o),\n      { stack: {}, rest: {} }\n    ),\n    [t]\n  );\n  return a.useLayoutEffect(() => {\n    L({\n      props: s.stack,\n      ref: r,\n      propsMap: h\n    });\n  }, [s.stack, d]), /* @__PURE__ */ x(\n    C,\n    {\n      className: w(\"tgph-stack\", i),\n      tgphRef: d,\n      ...s.rest\n    }\n  );\n};\nexport {\n  C as Box,\n  E as Stack\n};\n//# sourceMappingURL=index.mjs.map\n","export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"3\"\n        pl=\"2\"\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(TagContext);\n  return (\n    <TelegraphText\n      as={as}\n      size={context.size}\n      color={COLOR.Text[context.variant][context.color]}\n      mr=\"2\"\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: MouseEvent) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.target?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\n  const context = React.useContext(TagContext);\n  return (\n    <TelegraphButton\n      size={context.size}\n      color={COLOR.Button[context.variant][context.color]}\n      variant={context.variant}\n      icon={{ icon: Lucide.X, alt: \"close\" }}\n      className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n      {...props}\n    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\n      size={context.size}\n      color={COLOR.Icon[context.variant][context.color]}\n      className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\n      {icon && <Icon {...icon} />}\n      <Text as=\"span\">{children}</Text>\n      {onRemove && (\n        <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n      )}\n      {onCopy && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["u","j","i","e","t","d","s","o","k","n","b","p","O","y","L","c","f","l","m","C","a","R","g","T","x","w","h","E","SIZE","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","Tag"],"mappings":"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AAM,SACN,KAAM,UACN,UAAW,KACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,KACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,MACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,QACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,OACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,GACZ,EACD,GAAI,CACF,KAAM,UACN,KAAM,UACN,UAAW,GACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,KACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,MACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,QACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,OACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,GACZ,EACD,GAAI,CACF,KAAM,SACN,KAAM,UACN,UAAW,GACZ,EACD,GAAI,CACF,KAAM,mBACN,KAAM,OACP,EACD,QAAS,CACP,KAAM,gBACN,KAAM,UACN,UAAW,KACZ,EACD,eAAgB,CACd,KAAM,gBACN,KAAM,UACN,UAAW,UACX,SAAU,WACX,EACD,kBAAmB,CACjB,KAAM,gBACN,KAAM,UACN,UAAW,aACX,SAAU,WACX,EACD,mBAAoB,CAClB,KAAM,gBACN,KAAM,UACN,UAAW,cACX,SAAU,WACX,EACD,gBAAiB,CACf,KAAM,gBACN,KAAM,UACN,UAAW,WACX,SAAU,WACX,EACD,WAAY,CACV,KAAM,gBACN,KAAM,UACN,UAAW,MACX,SAAU,WACX,EACD,cAAe,CACb,KAAM,gBACN,KAAM,UACN,UAAW,SACX,SAAU,WACX,EACD,YAAa,CACX,KAAM,gBACN,KAAM,UACN,UAAW,OACX,SAAU,WACX,EACD,aAAc,CACZ,KAAM,gBACN,KAAM,UACN,UAAW,QACX,SAAU,WACX,EACD,OAAQ,CACN,KAAM,eACN,KAAM,UACN,UAAW,MACX,QAAS,IACV,EACD,UAAW,CACT,KAAM,eACN,KAAM,UACN,UA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"}

package/dist/css/default.css

@@ -1 +1 @@
-.tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.mr-2){margin-right:var(--tgph-spacing-2)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.items-center){align-items:center}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-purple-3){background-color:var(--tgph-purple-3)}.tgph :is(.bg-purple-9){background-color:var(--tgph-purple-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}
+.tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.overflow-hidden){overflow:hidden}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-purple-3){background-color:var(--tgph-purple-3)}.tgph :is(.bg-purple-9){background-color:var(--tgph-purple-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.blur){--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

package/dist/esm/index.mjs

@@ -1,15 +1,438 @@
-import { jsx as l, jsxs as x } from "react/jsx-runtime";
-import { Button as R } from "@telegraph/button";
-import { Lucide as g, Icon as C } from "@telegraph/icon";
-import { Text as v } from "@telegraph/typography";
-import { clsx as u } from "clsx";
-import n from "react";
-const T = {
+import { jsx as d, jsxs as V } from "react/jsx-runtime";
+import { Button as h } from "@telegraph/button";
+import { Lucide as w, Icon as P } from "@telegraph/icon";
+import { useComposedRefs as j } from "@telegraph/compose-refs";
+import C, { clsx as x } from "clsx";
+import c from "react";
+import { Tooltip as S } from "@telegraph/tooltip";
+import { Text as X } from "@telegraph/typography";
+import { AnimatePresence as A, motion as R } from "framer-motion";
+const g = ["sm", "md", "lg", "xl", "2xl"], D = (o) => {
+  const t = [];
+  let e = null;
+  for (let r = 0; r < g.length; r++) {
+    const n = g[r];
+    if (o[n])
+      e = o[n], t.push(e);
+    else if (e !== null)
+      t.push(e);
+    else {
+      let l = null;
+      for (let i = r + 1; i < g.length; i++)
+        if (o[g[i]]) {
+          l = o[g[i]];
+          break;
+        }
+      if (l !== null) {
+        for (let i = 0; i <= r; i++)
+          t.push(l);
+        e = l;
+      }
+    }
+  }
+  return t;
+}, H = (o) => typeof o == "object" && (o.sm || o.md || o.lg || o.xl || o["2xl"]), p = ({
+  value: o,
+  prop: t
+}) => {
+  if (!o)
+    return "";
+  if (t.valueType === "static")
+    return o.toString();
+  const e = t.type === "color" ? "" : `-${t.type}`;
+  return o === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${o})`;
+}, b = {
+  top: 0,
+  right: 1,
+  bottom: 2,
+  left: 3
+}, s = {
+  topLeft: 0,
+  topRight: 1,
+  bottomRight: 2,
+  bottomLeft: 3
+}, W = ({
+  cssVariables: o,
+  value: t,
+  prop: e,
+  direction: r = "all"
+}) => {
+  const n = o[`--tgph-${e.rule}`] || "", l = n ? n.split(" ") : [], i = [
+    (l == null ? void 0 : l[0]) || 0,
+    (l == null ? void 0 : l[1]) || 0,
+    (l == null ? void 0 : l[2]) || 0,
+    (l == null ? void 0 : l[3]) || 0
+  ];
+  return r === "all" ? p({ value: t, prop: e }) : (e.ordering === "clockwise" ? (r === "top" && (i[s.topLeft] = p({
+    value: t,
+    prop: e
+  }), i[s.topRight] = p({
+    value: t,
+    prop: e
+  })), r === "right" && (i[s.topRight] = p({
+    value: t,
+    prop: e
+  }), i[s.bottomRight] = p({
+    value: t,
+    prop: e
+  })), r === "bottom" && (i[s.bottomRight] = p({
+    value: t,
+    prop: e
+  }), i[s.bottomLeft] = p({
+    value: t,
+    prop: e
+  })), r === "left" && (i[s.bottomLeft] = p({
+    value: t,
+    prop: e
+  }), i[s.topLeft] = p({
+    value: t,
+    prop: e
+  })), (r === "topLeft" || r === "topRight" || r === "bottomRight" || r === "bottomLeft") && (i[s[r]] = p({
+    value: t,
+    prop: e
+  }))) : (r === "x" && (i[b.left] = p({
+    value: t,
+    prop: e
+  }), i[b.right] = p({
+    value: t,
+    prop: e
+  })), r === "y" && (i[b.top] = p({
+    value: t,
+    prop: e
+  }), i[b.bottom] = p({
+    value: t,
+    prop: e
+  })), (r === "top" || r === "bottom" || r === "left" || r === "right") && (i[b[r]] = p({
+    value: t,
+    prop: e
+  }))), i.join(" "));
+}, k = ({
+  prop: o,
+  value: t,
+  cssVariables: e
+}) => o.direction ? W({
+  cssVariables: e,
+  prop: o,
+  value: t,
+  direction: o.direction,
+  type: o.type
+}) : p({ value: t, prop: o }), B = ({
+  props: o,
+  ref: t,
+  propsMap: e
+}) => {
+  if (!t.current)
+    return;
+  const r = {};
+  Object.entries(o).forEach(([n, l]) => {
+    const i = e[n];
+    i && (typeof l == "string" || typeof l == "boolean" ? r[`--tgph-${i.rule}`] = k({
+      prop: i,
+      key: n,
+      value: l,
+      cssVariables: r
+    }) : H(l) && D(l).forEach((a, u) => {
+      a && (r[`--tgph-${i.rule}-${g[u]}`] = k({
+        prop: i,
+        key: n,
+        value: a,
+        cssVariables: r
+      }));
+    })), Object.entries(r).forEach(([a, u]) => {
+      t.current && t.current.style.setProperty(a, u);
+    });
+  });
+}, T = {
+  display: {
+    rule: "display",
+    type: "block-display",
+    valueType: "static"
+  },
+  h: {
+    rule: "height",
+    type: "spacing"
+  },
+  w: {
+    rule: "width",
+    type: "spacing"
+  },
+  maxH: {
+    rule: "max-height",
+    type: "spacing"
+  },
+  maxW: {
+    rule: "max-width",
+    type: "spacing"
+  },
+  p: {
+    rule: "padding",
+    type: "spacing",
+    direction: "all"
+  },
+  m: {
+    rule: "margin",
+    type: "spacing",
+    direction: "all"
+  },
+  pt: {
+    rule: "padding",
+    type: "spacing",
+    direction: "top"
+  },
+  pl: {
+    rule: "padding",
+    type: "spacing",
+    direction: "left"
+  },
+  pb: {
+    rule: "padding",
+    type: "spacing",
+    direction: "bottom"
+  },
+  pr: {
+    rule: "padding",
+    type: "spacing",
+    direction: "right"
+  },
+  px: {
+    rule: "padding",
+    type: "spacing",
+    direction: "x"
+  },
+  py: {
+    rule: "padding",
+    type: "spacing",
+    direction: "y"
+  },
+  mt: {
+    rule: "margin",
+    type: "spacing",
+    direction: "top"
+  },
+  ml: {
+    rule: "margin",
+    type: "spacing",
+    direction: "left"
+  },
+  mb: {
+    rule: "margin",
+    type: "spacing",
+    direction: "bottom"
+  },
+  mr: {
+    rule: "margin",
+    type: "spacing",
+    direction: "right"
+  },
+  mx: {
+    rule: "margin",
+    type: "spacing",
+    direction: "x"
+  },
+  my: {
+    rule: "margin",
+    type: "spacing",
+    direction: "y"
+  },
+  bg: {
+    rule: "background-color",
+    type: "color"
+  },
+  rounded: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "all"
+  },
+  roundedTopLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomRight",
+    ordering: "clockwise"
+  },
+  roundedTopRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topRight",
+    ordering: "clockwise"
+  },
+  roundedTop: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "top",
+    ordering: "clockwise"
+  },
+  roundedBottom: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottom",
+    ordering: "clockwise"
+  },
+  roundedLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "left",
+    ordering: "clockwise"
+  },
+  roundedRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "right",
+    ordering: "clockwise"
+  },
+  border: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "all",
+    default: "px"
+  },
+  borderTop: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "top",
+    default: "px"
+  },
+  borderLeft: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "left",
+    default: "px"
+  },
+  borderBottom: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "bottom",
+    default: "px"
+  },
+  borderRight: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "right",
+    default: "px"
+  },
+  borderX: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "x",
+    default: "px"
+  },
+  borderY: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "y",
+    default: "px"
+  },
+  borderColor: {
+    rule: "border-color",
+    type: "color",
+    default: "gray-4"
+  },
+  borderStyle: {
+    rule: "border-style",
+    type: "border-style",
+    default: "solid"
+  }
+}, Y = ({
+  as: o,
+  className: t,
+  tgphRef: e,
+  ...r
+}) => {
+  const n = o || "div", l = c.useRef(null), i = j(e, l), a = c.useMemo(() => {
+    const u = { borderColor: !0, ...r };
+    return Object.keys(u).reduce(
+      (v, y) => (Object.keys(T).some((M) => M === y) ? v.box[y] = u[y] : v.rest[y] = u[y], v),
+      { box: {}, rest: {} }
+    );
+  }, [r]);
+  return c.useLayoutEffect(() => {
+    B({
+      props: a.box,
+      ref: l,
+      propsMap: T
+    });
+  }, [a.box]), /* @__PURE__ */ d(
+    n,
+    {
+      className: C("tgph-box", t),
+      ref: i,
+      ...a.rest
+    }
+  );
+}, L = {
+  display: {
+    rule: "display",
+    type: "flex-display",
+    valueType: "static"
+  },
+  direction: {
+    rule: "flex-direction",
+    type: "flex-direction",
+    valueType: "static"
+  },
+  align: {
+    rule: "align-items",
+    type: "align-items",
+    valueType: "static"
+  },
+  justify: {
+    rule: "justify-content",
+    type: "justify-content",
+    valueType: "static"
+  },
+  wrap: {
+    rule: "flex-wrap",
+    type: "flex-wrap",
+    valueType: "static"
+  },
+  gap: {
+    rule: "gap",
+    type: "spacing",
+    valueType: "variable"
+  }
+}, Z = ({
+  className: o,
+  tgphRef: t,
+  ...e
+}) => {
+  const r = c.useRef(null), n = j(t, r), l = c.useMemo(
+    () => Object.keys(e).reduce(
+      (i, a) => (Object.keys(L).some((u) => u === a) ? i.stack[a] = e[a] : i.rest[a] = e[a], i),
+      { stack: {}, rest: {} }
+    ),
+    [e]
+  );
+  return c.useLayoutEffect(() => {
+    B({
+      props: l.stack,
+      ref: r,
+      propsMap: L
+    });
+  }, [l.stack, n]), /* @__PURE__ */ d(
+    Y,
+    {
+      className: C("tgph-stack", o),
+      tgphRef: n,
+      ...l.rest
+    }
+  );
+}, q = {
   Root: {
     1: "h-6",
     2: "h-8"
   }
-}, d = {
+}, f = {
   Root: {
     solid: {
       default: "bg-gray-9",
@@ -98,101 +521,159 @@ const T = {
       purple: "purple"
     }
   }
-}, s = n.createContext({
+}, m = c.createContext({
   size: "1",
   color: "default",
   variant: "soft"
-}), f = n.forwardRef(
-  ({ size: t = "1", color: r = "default", variant: o = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(s.Provider, { value: { size: t, color: r, variant: o }, children: /* @__PURE__ */ l(
-    "span",
+}), $ = ({
+  as: o = "span",
+  size: t = "1",
+  color: e = "default",
+  variant: r = "soft",
+  className: n,
+  ...l
+}) => /* @__PURE__ */ d(m.Provider, { value: { size: t, color: e, variant: r }, children: /* @__PURE__ */ d(
+  Z,
+  {
+    as: o,
+    display: "inline-flex",
+    align: "center",
+    rounded: "3",
+    pl: "2",
+    className: x(q.Root[t], f.Root[r][e], n),
+    ...l,
+    "data-tag": !0
+  }
+) }), O = ({
+  as: o = "span",
+  ...t
+}) => {
+  const e = c.useContext(m);
+  return /* @__PURE__ */ d(
+    X,
     {
-      className: u(
-        "inline-flex items-center rounded-3 pl-2",
-        T.Root[t],
-        d.Root[o][r],
-        e
-      ),
-      ...a,
-      ref: c,
-      "data-tag": !0
+      as: o,
+      size: e.size,
+      color: f.Text[e.variant][e.color],
+      mr: "2",
+      ...t
     }
-  ) })
-), p = n.forwardRef(
-  ({ as: t = "span", className: r, ...o }, e) => {
-    const a = n.useContext(s);
-    return /* @__PURE__ */ l(
-      v,
-      {
-        as: t,
-        size: a.size,
-        color: d.Text[a.variant][a.color],
-        className: u("rounded-tl-0 rounded-bl-0 mr-2", r),
-        ...o,
-        ref: e
-      }
-    );
-  }
-), i = n.forwardRef(
-  ({ className: t, ...r }, o) => {
-    const e = n.useContext(s);
-    return /* @__PURE__ */ l(
-      R,
-      {
-        size: e.size,
-        color: d.Button[e.variant][e.color],
-        variant: e.variant,
-        icon: { icon: g.X, alt: "close" },
-        className: u("rounded-tl-0 rounded-bl-0", t),
-        ...r,
-        ref: o
-      }
-    );
-  }
-), w = n.forwardRef(
-  ({ className: t, ...r }, o) => {
-    const e = n.useContext(s);
-    return /* @__PURE__ */ l(
-      C,
-      {
-        size: e.size,
-        color: d.Icon[e.variant][e.color],
-        className: u("rounded-tl-0 rounded-bl-0 mr-1", t),
-        ...r,
-        ref: o
-      }
-    );
-  }
-), b = n.forwardRef(
-  ({
-    color: t = "default",
-    size: r = "1",
-    variant: o = "soft",
-    icon: e,
-    onRemove: a,
-    onCopy: c,
-    children: y,
-    ...h
-  }, m) => /* @__PURE__ */ x(f, { color: t, size: r, variant: o, ...h, ref: m, children: [
-    e && /* @__PURE__ */ l(w, { ...e }),
-    /* @__PURE__ */ l(p, { as: "span", children: y }),
-    a && /* @__PURE__ */ l(i, { onClick: a, icon: { icon: g.X, alt: "Remove" } }),
-    c && /* @__PURE__ */ l(
-      i,
-      {
-        onClick: c,
-        icon: { icon: g.Copy, alt: "Copy text" }
-      }
-    )
-  ] })
-);
-Object.assign(b, {
-  Root: f,
-  Button: i,
-  Text: p,
-  Icon: w
+  );
+}, z = ({
+  onClick: o,
+  textToCopy: t,
+  className: e,
+  ...r
+}) => {
+  const n = c.useContext(m), [l, i] = c.useState(!1);
+  return c.useEffect(() => {
+    if (l) {
+      const a = setTimeout(() => i(!1), 2e3);
+      return () => clearTimeout(a);
+    }
+  }, [l]), /* @__PURE__ */ d(A, { mode: "wait", initial: !1, children: /* @__PURE__ */ d(S, { label: "Copy text", children: /* @__PURE__ */ d(
+    h.Root,
+    {
+      onClick: (a) => {
+        var u;
+        o == null || o(a), i(!0), t && navigator.clipboard.writeText(t), (u = a.target) == null || u.blur();
+      },
+      size: n.size,
+      color: f.Button[n.variant][n.color],
+      variant: n.variant,
+      className: x("overflow-hidden", e),
+      roundedTopRight: "3",
+      roundedBottomRight: "3",
+      roundedTopLeft: "0",
+      roundedBottomLeft: "0",
+      ...r,
+      children: l ? /* @__PURE__ */ d(
+        h.Icon,
+        {
+          as: R.span,
+          initial: { y: "100%" },
+          animate: { y: 0 },
+          exit: { y: "100%" },
+          transition: { duration: 0.2, type: "spring", bounce: 0 },
+          icon: w.Check,
+          alt: "Copied text"
+        },
+        "check icon"
+      ) : /* @__PURE__ */ d(
+        h.Icon,
+        {
+          as: R.span,
+          initial: { y: "-100%" },
+          animate: { y: 0 },
+          exit: { y: "-100%" },
+          transition: { duration: 0.2, type: "spring", bounce: 0 },
+          icon: w.Copy,
+          alt: "Copy text"
+        },
+        "copy icon"
+      )
+    }
+  ) }) });
+}, E = ({
+  className: o,
+  ...t
+}) => {
+  const e = c.useContext(m);
+  return /* @__PURE__ */ d(
+    h,
+    {
+      size: e.size,
+      color: f.Button[e.variant][e.color],
+      variant: e.variant,
+      icon: { icon: w.X, alt: "close" },
+      className: x("rounded-tl-0 rounded-bl-0", o),
+      ...t
+    }
+  );
+}, I = ({
+  icon: o,
+  alt: t,
+  "aria-hidden": e,
+  className: r,
+  ...n
+}) => {
+  const l = c.useContext(m), i = t ? { alt: t } : { "aria-hidden": e };
+  return /* @__PURE__ */ d(
+    P,
+    {
+      icon: o,
+      size: l.size,
+      color: f.Icon[l.variant][l.color],
+      className: x("rounded-tl-0 rounded-bl-0 mr-1", r),
+      ...i,
+      ...n
+    }
+  );
+}, N = ({
+  color: o = "default",
+  size: t = "1",
+  variant: e = "soft",
+  icon: r,
+  onRemove: n,
+  onCopy: l,
+  textToCopy: i,
+  children: a,
+  ...u
+}) => /* @__PURE__ */ V($, { color: o, size: t, variant: e, ...u, children: [
+  r && /* @__PURE__ */ d(I, { ...r }),
+  /* @__PURE__ */ d(O, { as: "span", children: a }),
+  n && /* @__PURE__ */ d(E, { onClick: n, icon: { icon: w.X, alt: "Remove" } }),
+  l && /* @__PURE__ */ d(z, { onClick: l, textToCopy: i })
+] });
+Object.assign(N, {
+  Root: $,
+  Button: E,
+  Text: O,
+  Icon: I,
+  CopyButton: z
 });
-const $ = b;
+const re = N;
 export {
-  $ as Tag
+  re as Tag
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: Lucide.Copy, alt: \"Copy text\" }}\n          />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../layout/dist/esm/index.mjs","../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["import { jsx as x } from \"react/jsx-runtime\";\nimport { useComposedRefs as R } from \"@telegraph/compose-refs\";\nimport w from \"clsx\";\nimport a from \"react\";\nconst u = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"], j = (i) => {\n  const e = [];\n  let t = null;\n  for (let r = 0; r < u.length; r++) {\n    const d = u[r];\n    if (i[d])\n      t = i[d], e.push(t);\n    else if (t !== null)\n      e.push(t);\n    else {\n      let s = null;\n      for (let o = r + 1; o < u.length; o++)\n        if (i[u[o]]) {\n          s = i[u[o]];\n          break;\n        }\n      if (s !== null) {\n        for (let o = 0; o <= r; o++)\n          e.push(s);\n        t = s;\n      }\n    }\n  }\n  return e;\n}, k = (i) => typeof i == \"object\" && (i.sm || i.md || i.lg || i.xl || i[\"2xl\"]), n = ({\n  value: i,\n  prop: e\n}) => {\n  if (!i)\n    return \"\";\n  if (e.valueType === \"static\")\n    return i.toString();\n  const t = e.type === \"color\" ? \"\" : `-${e.type}`;\n  return i === !0 ? `var(--tgph${t}-${e.default})` : `var(--tgph${t}-${i})`;\n}, b = {\n  top: 0,\n  right: 1,\n  bottom: 2,\n  left: 3\n}, p = {\n  topLeft: 0,\n  topRight: 1,\n  bottomRight: 2,\n  bottomLeft: 3\n}, O = ({\n  cssVariables: i,\n  value: e,\n  prop: t,\n  direction: r = \"all\"\n}) => {\n  const d = i[`--tgph-${t.rule}`] || \"\", s = d ? d.split(\" \") : [], o = [\n    (s == null ? void 0 : s[0]) || 0,\n    (s == null ? void 0 : s[1]) || 0,\n    (s == null ? void 0 : s[2]) || 0,\n    (s == null ? void 0 : s[3]) || 0\n  ];\n  return r === \"all\" ? n({ value: e, prop: t }) : (t.ordering === \"clockwise\" ? (r === \"top\" && (o[p.topLeft] = n({\n    value: e,\n    prop: t\n  }), o[p.topRight] = n({\n    value: e,\n    prop: t\n  })), r === \"right\" && (o[p.topRight] = n({\n    value: e,\n    prop: t\n  }), o[p.bottomRight] = n({\n    value: e,\n    prop: t\n  })), r === \"bottom\" && (o[p.bottomRight] = n({\n    value: e,\n    prop: t\n  }), o[p.bottomLeft] = n({\n    value: e,\n    prop: t\n  })), r === \"left\" && (o[p.bottomLeft] = n({\n    value: e,\n    prop: t\n  }), o[p.topLeft] = n({\n    value: e,\n    prop: t\n  })), (r === \"topLeft\" || r === \"topRight\" || r === \"bottomRight\" || r === \"bottomLeft\") && (o[p[r]] = n({\n    value: e,\n    prop: t\n  }))) : (r === \"x\" && (o[b.left] = n({\n    value: e,\n    prop: t\n  }), o[b.right] = n({\n    value: e,\n    prop: t\n  })), r === \"y\" && (o[b.top] = n({\n    value: e,\n    prop: t\n  }), o[b.bottom] = n({\n    value: e,\n    prop: t\n  })), (r === \"top\" || r === \"bottom\" || r === \"left\" || r === \"right\") && (o[b[r]] = n({\n    value: e,\n    prop: t\n  }))), o.join(\" \"));\n}, y = ({\n  prop: i,\n  value: e,\n  cssVariables: t\n}) => i.direction ? O({\n  cssVariables: t,\n  prop: i,\n  value: e,\n  direction: i.direction,\n  type: i.type\n}) : n({ value: e, prop: i }), L = ({\n  props: i,\n  ref: e,\n  propsMap: t\n}) => {\n  if (!e.current)\n    return;\n  const r = {};\n  Object.entries(i).forEach(([d, s]) => {\n    const o = t[d];\n    o && (typeof s == \"string\" || typeof s == \"boolean\" ? r[`--tgph-${o.rule}`] = y({\n      prop: o,\n      key: d,\n      value: s,\n      cssVariables: r\n    }) : k(s) && j(s).forEach((c, f) => {\n      c && (r[`--tgph-${o.rule}-${u[f]}`] = y({\n        prop: o,\n        key: d,\n        value: c,\n        cssVariables: r\n      }));\n    })), Object.entries(r).forEach(([l, c]) => {\n      e.current && e.current.style.setProperty(l, c);\n    });\n  });\n}, m = {\n  display: {\n    rule: \"display\",\n    type: \"block-display\",\n    valueType: \"static\"\n  },\n  h: {\n    rule: \"height\",\n    type: \"spacing\"\n  },\n  w: {\n    rule: \"width\",\n    type: \"spacing\"\n  },\n  maxH: {\n    rule: \"max-height\",\n    type: \"spacing\"\n  },\n  maxW: {\n    rule: \"max-width\",\n    type: \"spacing\"\n  },\n  p: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"all\"\n  },\n  m: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"all\"\n  },\n  pt: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"top\"\n  },\n  pl: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"left\"\n  },\n  pb: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"bottom\"\n  },\n  pr: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"right\"\n  },\n  px: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"x\"\n  },\n  py: {\n    rule: \"padding\",\n    type: \"spacing\",\n    direction: \"y\"\n  },\n  mt: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"top\"\n  },\n  ml: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"left\"\n  },\n  mb: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"bottom\"\n  },\n  mr: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"right\"\n  },\n  mx: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"x\"\n  },\n  my: {\n    rule: \"margin\",\n    type: \"spacing\",\n    direction: \"y\"\n  },\n  bg: {\n    rule: \"background-color\",\n    type: \"color\"\n  },\n  rounded: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"all\"\n  },\n  roundedTopLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"topLeft\",\n    ordering: \"clockwise\"\n  },\n  roundedBottomLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottomLeft\",\n    ordering: \"clockwise\"\n  },\n  roundedBottomRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottomRight\",\n    ordering: \"clockwise\"\n  },\n  roundedTopRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"topRight\",\n    ordering: \"clockwise\"\n  },\n  roundedTop: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"top\",\n    ordering: \"clockwise\"\n  },\n  roundedBottom: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"bottom\",\n    ordering: \"clockwise\"\n  },\n  roundedLeft: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"left\",\n    ordering: \"clockwise\"\n  },\n  roundedRight: {\n    rule: \"border-radius\",\n    type: \"rounded\",\n    direction: \"right\",\n    ordering: \"clockwise\"\n  },\n  border: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"all\",\n    default: \"px\"\n  },\n  borderTop: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"top\",\n    default: \"px\"\n  },\n  borderLeft: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"left\",\n    default: \"px\"\n  },\n  borderBottom: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"bottom\",\n    default: \"px\"\n  },\n  borderRight: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"right\",\n    default: \"px\"\n  },\n  borderX: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"x\",\n    default: \"px\"\n  },\n  borderY: {\n    rule: \"border-width\",\n    type: \"spacing\",\n    direction: \"y\",\n    default: \"px\"\n  },\n  borderColor: {\n    rule: \"border-color\",\n    type: \"color\",\n    default: \"gray-4\"\n  },\n  borderStyle: {\n    rule: \"border-style\",\n    type: \"border-style\",\n    default: \"solid\"\n  }\n}, C = ({\n  as: i,\n  className: e,\n  tgphRef: t,\n  ...r\n}) => {\n  const d = i || \"div\", s = a.useRef(null), o = R(t, s), l = a.useMemo(() => {\n    const c = { borderColor: !0, ...r };\n    return Object.keys(c).reduce(\n      (f, g) => (Object.keys(m).some((T) => T === g) ? f.box[g] = c[g] : f.rest[g] = c[g], f),\n      { box: {}, rest: {} }\n    );\n  }, [r]);\n  return a.useLayoutEffect(() => {\n    L({\n      props: l.box,\n      ref: s,\n      propsMap: m\n    });\n  }, [l.box]), /* @__PURE__ */ x(\n    d,\n    {\n      className: w(\"tgph-box\", e),\n      ref: o,\n      ...l.rest\n    }\n  );\n}, h = {\n  display: {\n    rule: \"display\",\n    type: \"flex-display\",\n    valueType: \"static\"\n  },\n  direction: {\n    rule: \"flex-direction\",\n    type: \"flex-direction\",\n    valueType: \"static\"\n  },\n  align: {\n    rule: \"align-items\",\n    type: \"align-items\",\n    valueType: \"static\"\n  },\n  justify: {\n    rule: \"justify-content\",\n    type: \"justify-content\",\n    valueType: \"static\"\n  },\n  wrap: {\n    rule: \"flex-wrap\",\n    type: \"flex-wrap\",\n    valueType: \"static\"\n  },\n  gap: {\n    rule: \"gap\",\n    type: \"spacing\",\n    valueType: \"variable\"\n  }\n}, E = ({\n  className: i,\n  tgphRef: e,\n  ...t\n}) => {\n  const r = a.useRef(null), d = R(e, r), s = a.useMemo(\n    () => Object.keys(t).reduce(\n      (o, l) => (Object.keys(h).some((c) => c === l) ? o.stack[l] = t[l] : o.rest[l] = t[l], o),\n      { stack: {}, rest: {} }\n    ),\n    [t]\n  );\n  return a.useLayoutEffect(() => {\n    L({\n      props: s.stack,\n      ref: r,\n      propsMap: h\n    });\n  }, [s.stack, d]), /* @__PURE__ */ x(\n    C,\n    {\n      className: w(\"tgph-stack\", i),\n      tgphRef: d,\n      ...s.rest\n    }\n  );\n};\nexport {\n  C as Box,\n  E as Stack\n};\n//# sourceMappingURL=index.mjs.map\n","export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"3\"\n        pl=\"2\"\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(TagContext);\n  return (\n    <TelegraphText\n      as={as}\n      size={context.size}\n      color={COLOR.Text[context.variant][context.color]}\n      mr=\"2\"\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: MouseEvent) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.target?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\n  const context = React.useContext(TagContext);\n  return (\n    <TelegraphButton\n      size={context.size}\n      color={COLOR.Button[context.variant][context.color]}\n      variant={context.variant}\n      icon={{ icon: Lucide.X, alt: \"close\" }}\n      className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n      {...props}\n    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\n      size={context.size}\n      color={COLOR.Icon[context.variant][context.color]}\n      className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\n      {icon && <Icon {...icon} />}\n      <Text as=\"span\">{children}</Text>\n      {onRemove && (\n        <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n      )}\n      {onCopy && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["u","j","i","e","t","d","s","o","k","n","p","O","y","L","c","f","l","m","C","a","R","g","T","x","w","h","E","SIZE","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","Tag"],"mappings":"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"}

package/dist/types/Tag/Tag.d.ts

@@ -1,4 +1,8 @@
-import { Lucide, Icon as TelegraphIcon } from '@telegraph/icon';
+import { Button as TelegraphButton } from '@telegraph/button';
+import { PolymorphicProps, PolymorphicPropsWithTgphRef, TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { Icon as TelegraphIcon } from '@telegraph/icon';
+import { Stack } from '@telegraph/layout';
+import { Text as TelegraphText } from '@telegraph/typography';
 import { default as React } from 'react';
 import { COLOR } from './Tag.constants';
 
@@ -7,56 +11,36 @@ type RootBaseProps = {
     color?: keyof (typeof COLOR.Root)["soft"];
     variant?: keyof typeof COLOR.Root;
 };
-declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & RootBaseProps & React.RefAttributes<HTMLSpanElement>>;
-declare const Text: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement> & {
-    as: "b" | "code" | "div" | "em" | "i" | "label" | "p" | "pre" | "span" | "strong";
-    align?: "center" | "left" | "right" | undefined;
-    size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
-    color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
-    weight?: "regular" | "medium" | undefined;
-} & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>, "as"> & Partial<Pick<React.HTMLAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement> & {
-    as: "b" | "code" | "div" | "em" | "i" | "label" | "p" | "pre" | "span" | "strong";
-    align?: "center" | "left" | "right" | undefined;
-    size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
-    color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
-    weight?: "regular" | "medium" | undefined;
-} & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>, "as">>, "ref"> & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>>;
-declare const Button: React.ForwardRefExoticComponent<Omit<import('@telegraph/helpers').AsProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>> & Omit<any, "as"> & {
-    variant?: "soft" | "solid" | "outline" | "ghost" | undefined;
-    size?: "1" | "2" | "3" | undefined;
-    color?: "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | undefined;
-    state?: "default" | "disabled" | "loading" | "error" | "success" | "warning" | undefined;
-    active?: boolean | undefined;
-} & {
-    ref?: (string | React.Ref<HTMLButtonElement>) | undefined;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const Icon: React.ForwardRefExoticComponent<(Omit<{
-    icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-    size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
-} & {
-    alt: string;
-    "aria-hidden"?: boolean | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>, "ref"> | Omit<{
-    icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-    size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
-    variant?: "primary" | "secondary" | undefined;
-    color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
-} & {
-    alt?: string | undefined;
-    "aria-hidden": true;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>, "ref">) & React.RefAttributes<SVGSVGElement>>;
-type DefaultProps = React.ComponentProps<typeof Root> & {
+type RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<T, HTMLSpanElement> & TgphComponentProps<typeof Stack> & RootBaseProps;
+declare const Root: <T extends TgphElement>({ as, size, color, variant, className, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+type TextProps<T extends TgphElement> = Omit<TgphComponentProps<typeof TelegraphText<T>>, "as"> & {
+    as?: T;
+};
+declare const Text: <T extends TgphElement>({ as, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
+type ButtonProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphButton<T>>;
+type CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {
+    textToCopy?: string;
+};
+declare const CopyButton: ({ onClick, textToCopy, className, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: <T extends TgphElement>({ className, ...props }: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+type IconProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphIcon<T>>;
+declare const Icon: <T extends TgphElement>({ icon, alt, "aria-hidden": ariaHidden, className, ...props }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;
+type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root> & {
     icon?: React.ComponentProps<typeof TelegraphIcon>;
-    onCopy?: () => void;
     onRemove?: () => void;
-};
-declare const Tag: React.ForwardRefExoticComponent<Omit<DefaultProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
+} & ({
+    onCopy: () => void;
+    textToCopy?: string;
+} | {
+    onCopy?: never;
+    textToCopy?: never;
+});
+declare const Tag: (<T extends TgphElement>({ color, size, variant, icon, onRemove, onCopy, textToCopy, children, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     Root: typeof Root;
     Button: typeof Button;
     Text: typeof Text;
     Icon: typeof Icon;
+    CopyButton: typeof CopyButton;
 };
 export { Tag };
 //# sourceMappingURL=Tag.d.ts.map

package/dist/types/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAQ,MAAM,iBAAiB,CAAC;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;CACnC,CAAC;AAYF,QAAA,MAAM,IAAI,+HAqBT,CAAC;AAMF,QAAA,MAAM,IAAI;;;;;;;;;;;;wPAcT,CAAC;AAKF,QAAA,MAAM,MAAM;;;;;;;;mDAeX,CAAC;AAKF,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;4HAaT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA0CF,QAAA,MAAM,GAAG;UACD,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EACV,gBAAgB,EAChB,2BAA2B,EAE3B,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAU,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAQ,MAAM,iBAAiB,CAAC;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CACjE,CAAC,EACD,eAAe,CAChB,GACC,kBAAkB,CAAC,OAAO,KAAK,CAAC,GAChC,aAAa,CAAC;AAQhB,QAAA,MAAM,IAAI,6EAOP,UAAU,CAAC,CAAC,4CAed,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC1C,kBAAkB,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,EAC3C,IAAI,CACL,GAAG;IACF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,QAAA,MAAM,IAAI,4CAGP,UAAU,CAAC,CAAC,4CAWd,CAAC;AACF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAC1D,OAAO,eAAe,CAAC,CAAC,CAAC,CAC1B,CAAC;AAEF,KAAK,eAAe,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,iDAKb,eAAe,4CA4DjB,CAAC;AAEF,QAAA,MAAM,MAAM,mDAGT,YAAY,CAAC,CAAC,4CAYhB,CAAC;AACF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CACxD,OAAO,aAAa,CAAC,CAAC,CAAC,CACxB,CAAC;AAEF,QAAA,MAAM,IAAI,yFAMP,UAAU,CAAC,CAAC,4CAad,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,CACA;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CACJ,CAAC;AAiCJ,QAAA,MAAM,GAAG,6GArBN,aAAa,CAAC,CAAC;UAsBV,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;gBACL,iBAAiB;CAC9B,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",
@@ -34,17 +34,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/button": "^0.0.19",
-    "@telegraph/helpers": "^0.0.1",
-    "@telegraph/icon": "^0.0.11",
-    "@telegraph/typography": "^0.0.10",
-    "clsx": "^2.1.0"
+    "@telegraph/button": "^0.0.20",
+    "@telegraph/compose-refs": "^0.0.1",
+    "@telegraph/helpers": "^0.0.2",
+    "@telegraph/icon": "^0.0.12",
+    "@telegraph/tooltip": "^0.0.2",
+    "@telegraph/typography": "^0.0.11",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.1.9"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.3",
     "@knocklabs/prettier-config": "^0.0.1",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.0.15",
+    "@telegraph/postcss-config": "^0.0.16",
     "@telegraph/tailwind-config": "^0.0.11",
     "@telegraph/vite-config": "^0.0.9",
     "@telegraph/vitest-config": "^0.0.6",