@telegraph/tag 0.0.56 → 0.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/css/default.css +1 -1
  5. package/dist/esm/index.mjs +82 -72
  6. package/dist/esm/index.mjs.map +1 -1
  7. package/dist/types/Tag/Tag.d.ts +3 -2
  8. package/dist/types/Tag/Tag.d.ts.map +1 -1
  9. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @telegraph/tag
2
2
 
3
+ ## 0.0.58
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`7ef8fe2`](https://github.com/knocklabs/telegraph/commit/7ef8fe2df51b1f632163918095a5496322277cad), [`8f5a797`](https://github.com/knocklabs/telegraph/commit/8f5a797d9d4a02b7477ae8851057d92d09ff0fa3)]:
8
+ - @telegraph/typography@0.1.0
9
+ - @telegraph/button@0.0.54
10
+ - @telegraph/layout@0.1.0
11
+ - @telegraph/tooltip@0.0.27
12
+ - @telegraph/icon@0.0.34
13
+
14
+ ## 0.0.57
15
+
16
+ ### Patch Changes
17
+
18
+ - [#324](https://github.com/knocklabs/telegraph/pull/324) [`3f8386f`](https://github.com/knocklabs/telegraph/commit/3f8386f22691d19560a3c64a376eeca0bc0667a6) Thanks [@kylemcd](https://github.com/kylemcd)! - max width wrapping for tag
19
+
3
20
  ## 0.0.56
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("@telegraph/button"),u=require("@telegraph/icon"),v=require("@telegraph/layout"),C=require("@telegraph/tooltip"),B=require("@telegraph/typography"),x=require("clsx"),b=require("framer-motion"),c=require("react"),q={Root:{0:"h-5",1:"h-6",2:"h-8"}},f={Root:{0:"1",1:"2",2:"2"},Text:{0:"1",1:"2",2:"2"}},d={Root:{solid:{default:"bg-gray-12",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:"default",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"}}},g=c.createContext({size:"1",color:"default",variant:"soft"}),w=({as:n="span",size:t="1",color:e="default",variant:a="soft",className:l,...r})=>o.jsx(g.Provider,{value:{size:t,color:e,variant:a},children:o.jsx(v.Stack,{as:n,display:"inline-flex",align:"center",rounded:"2",pl:f.Root[t],className:x.clsx(q.Root[t],d.Root[a][e],l),...r,"data-tag":!0})}),h=({as:n="span",...t})=>{const e=c.useContext(g);return o.jsx(B.Text,{as:n,size:e.size,color:d.Text[e.variant][e.color],weight:"medium",mr:f.Text[e.size],...t})},m=({onClick:n,textToCopy:t,className:e,...a})=>{const l=c.useContext(g),[r,i]=c.useState(!1);return c.useEffect(()=>{if(r){const s=setTimeout(()=>i(!1),2e3);return()=>clearTimeout(s)}},[r]),o.jsx(b.AnimatePresence,{mode:"wait",initial:!1,children:o.jsx(C.Tooltip,{label:"Copy text",children:o.jsx(y.Button.Root,{onClick:s=>{var p;n==null||n(s),i(!0),t&&navigator.clipboard.writeText(t),(p=s.currentTarget)==null||p.blur()},size:l.size,color:d.Button[l.variant][l.color],variant:l.variant,className:x.clsx("overflow-hidden",e),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...a,children:r?o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Check,alt:"Copied text"},"check icon"):o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"-100%"},animate:{y:0},exit:{y:"-100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Copy,alt:"Copy text"},"copy icon")})})})},j=({className:n,...t})=>{const e=c.useContext(g);return o.jsx(y.Button,{size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:x.clsx("rounded-tl-0 rounded-bl-0",n),...t})},T=({icon:n,alt:t,"aria-hidden":e,className:a,...l})=>{const r=c.useContext(g),i=t?{alt:t}:{"aria-hidden":e};return o.jsx(u.Icon,{icon:n,size:r.size,color:d.Icon[r.variant][r.color],className:x.clsx("rounded-tl-0 rounded-bl-0 mr-1",a),...i,...l})},R=({color:n="default",size:t="1",variant:e="soft",icon:a,onRemove:l,onCopy:r,textToCopy:i,children:s,...p})=>o.jsxs(w,{color:n,size:t,variant:e,...p,children:[a&&o.jsx(T,{...a}),o.jsx(h,{as:"span",children:s}),l&&o.jsx(j,{onClick:l,icon:{icon:u.Lucide.X,alt:"Remove"}}),r&&o.jsx(m,{onClick:r,textToCopy:i})]});Object.assign(R,{Root:w,Button:j,Text:h,Icon:T,CopyButton:m});const z=R;exports.Tag=z;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("@telegraph/button"),u=require("@telegraph/icon"),C=require("@telegraph/layout"),B=require("@telegraph/tooltip"),q=require("@telegraph/typography"),x=require("clsx"),b=require("framer-motion"),i=require("react"),z={Root:{0:"h-5",1:"h-6",2:"h-8"}},w={Root:{0:"1",1:"2",2:"2"},Text:{0:"1",1:"2",2:"2"}},d={Root:{solid:{default:"bg-gray-12",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:"default",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"}}},g=i.createContext({size:"1",color:"default",variant:"soft"}),f=({as:n="span",size:t="1",color:o="default",variant:a="soft",className:e,...l})=>r.jsx(g.Provider,{value:{size:t,color:o,variant:a},children:r.jsx(C.Stack,{as:n,display:"inline-flex",align:"center",rounded:"2",pl:w.Root[t],className:x.clsx(z.Root[t],d.Root[a][o],e),...l,"data-tag":!0})}),h=({as:n="span",maxW:t="40",style:o,...a})=>{const e=i.useContext(g);return r.jsx(q.Text,{as:n,size:e.size,color:d.Text[e.variant][e.color],weight:"medium",mr:w.Text[e.size],maxW:t,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",...o},...a})},m=({onClick:n,textToCopy:t,className:o,...a})=>{const e=i.useContext(g),[l,c]=i.useState(!1);return i.useEffect(()=>{if(l){const s=setTimeout(()=>c(!1),2e3);return()=>clearTimeout(s)}},[l]),r.jsx(b.AnimatePresence,{mode:"wait",initial:!1,children:r.jsx(B.Tooltip,{label:"Copy text",children:r.jsx(y.Button.Root,{onClick:s=>{var p;n==null||n(s),c(!0),t&&navigator.clipboard.writeText(t),(p=s.currentTarget)==null||p.blur()},size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,className:x.clsx("overflow-hidden",o),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...a,children:l?r.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Check,alt:"Copied text"},"check icon"):r.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"-100%"},animate:{y:0},exit:{y:"-100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Copy,alt:"Copy text"},"copy icon")})})})},j=({className:n,...t})=>{const o=i.useContext(g);return r.jsx(y.Button,{size:o.size,color:d.Button[o.variant][o.color],variant:o.variant,icon:{icon:u.Lucide.X,alt:"close"},className:x.clsx("rounded-tl-0 rounded-bl-0",n),...t})},T=({icon:n,alt:t,"aria-hidden":o,className:a,...e})=>{const l=i.useContext(g),c=t?{alt:t}:{"aria-hidden":o};return r.jsx(u.Icon,{icon:n,size:l.size,color:d.Icon[l.variant][l.color],className:x.clsx("rounded-tl-0 rounded-bl-0 mr-1",a),...c,...e})},v=({color:n="default",size:t="1",variant:o="soft",icon:a,onRemove:e,onCopy:l,textToCopy:c,textProps:s={maxW:"40"},children:p,...R})=>r.jsxs(f,{color:n,size:t,variant:o,...R,children:[a&&r.jsx(T,{...a}),r.jsx(h,{as:"span",...s,children:p}),e&&r.jsx(j,{onClick:e,icon:{icon:u.Lucide.X,alt:"Remove"}}),l&&r.jsx(m,{onClick:l,textToCopy:c})]});Object.assign(v,{Root:f,Button:j,Text:h,Icon:T,CopyButton:m});const I=v;exports.Tag=I;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n Root: {\n \"0\": \"h-5\",\n \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const SPACING = {\n Root: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n Text: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-12\",\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: \"default\",\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, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"0\" | \"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=\"2\"\n pl={SPACING.Root[size]}\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 weight=\"medium\"\n mr={SPACING.Text[context.size]}\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: React.MouseEvent<HTMLButtonElement>) => {\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.currentTarget?.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<T>> & {\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":["SIZE","SPACING","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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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n Root: {\n \"0\": \"h-5\",\n \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const SPACING = {\n Root: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n Text: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-12\",\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: \"default\",\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, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"0\" | \"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=\"2\"\n pl={SPACING.Root[size]}\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 maxW = \"40\",\n style,\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 weight=\"medium\"\n mr={SPACING.Text[context.size]}\n maxW={maxW}\n style={{\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n ...style,\n }}\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: React.MouseEvent<HTMLButtonElement>) => {\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.currentTarget?.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<T>> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n textProps?: React.ComponentProps<typeof Text>;\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 textProps = { maxW: \"40\" },\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\" {...textProps}>\n {children}\n </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":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","maxW","style","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","textProps","children","Tag"],"mappings":"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"}
package/dist/css/default.css CHANGED
@@ -1 +1 @@
1
- .tgph .mr-1{margin-right:var(--tgph-spacing-1)}.tgph .inline-flex{display:inline-flex}.tgph .h-5{height:var(--tgph-spacing-5)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .overflow-hidden{overflow:hidden}.tgph .rounded-bl-0{border-bottom-left-radius:var(--tgph-rounded-0)}.tgph .rounded-tl-0{border-top-left-radius:var(--tgph-rounded-0)}.tgph .bg-accent-3{background-color:var(--tgph-accent-3)}.tgph .bg-accent-9{background-color:var(--tgph-accent-9)}.tgph .bg-blue-3{background-color:var(--tgph-blue-3)}.tgph .bg-blue-9{background-color:var(--tgph-blue-9)}.tgph .bg-gray-12{background-color:var(--tgph-gray-12)}.tgph .bg-gray-3{background-color:var(--tgph-gray-3)}.tgph .bg-gray-9{background-color:var(--tgph-gray-9)}.tgph .bg-green-3{background-color:var(--tgph-green-3)}.tgph .bg-green-9{background-color:var(--tgph-green-9)}.tgph .bg-purple-3{background-color:var(--tgph-purple-3)}.tgph .bg-purple-9{background-color:var(--tgph-purple-9)}.tgph .bg-red-3{background-color:var(--tgph-red-3)}.tgph .bg-red-9{background-color:var(--tgph-red-9)}.tgph .bg-yellow-3{background-color:var(--tgph-yellow-3)}.tgph .bg-yellow-9{background-color:var(--tgph-yellow-9)}.tgph .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 .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}
1
+ .tgph .mr-1{margin-right:var(--tgph-spacing-1)}.tgph .inline-flex{display:inline-flex}.tgph .hidden{display:none}.tgph .h-5{height:var(--tgph-spacing-5)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .overflow-hidden{overflow:hidden}.tgph .rounded-bl-0{border-bottom-left-radius:var(--tgph-rounded-0)}.tgph .rounded-tl-0{border-top-left-radius:var(--tgph-rounded-0)}.tgph .bg-accent-3{background-color:var(--tgph-accent-3)}.tgph .bg-accent-9{background-color:var(--tgph-accent-9)}.tgph .bg-blue-3{background-color:var(--tgph-blue-3)}.tgph .bg-blue-9{background-color:var(--tgph-blue-9)}.tgph .bg-gray-12{background-color:var(--tgph-gray-12)}.tgph .bg-gray-3{background-color:var(--tgph-gray-3)}.tgph .bg-gray-9{background-color:var(--tgph-gray-9)}.tgph .bg-green-3{background-color:var(--tgph-green-3)}.tgph .bg-green-9{background-color:var(--tgph-green-9)}.tgph .bg-purple-3{background-color:var(--tgph-purple-3)}.tgph .bg-purple-9{background-color:var(--tgph-purple-9)}.tgph .bg-red-3{background-color:var(--tgph-red-3)}.tgph .bg-red-9{background-color:var(--tgph-red-9)}.tgph .bg-yellow-3{background-color:var(--tgph-yellow-3)}.tgph .bg-yellow-9{background-color:var(--tgph-yellow-9)}.tgph .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 .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 CHANGED
@@ -1,19 +1,19 @@
1
- import { jsx as o, jsxs as v } from "react/jsx-runtime";
1
+ import { jsx as r, jsxs as B } from "react/jsx-runtime";
2
2
  import { Button as g } from "@telegraph/button";
3
- import { Lucide as y, Icon as B } from "@telegraph/icon";
4
- import { Stack as I } from "@telegraph/layout";
5
- import { Tooltip as z } from "@telegraph/tooltip";
6
- import { Text as N } from "@telegraph/typography";
3
+ import { Lucide as y, Icon as I } from "@telegraph/icon";
4
+ import { Stack as z } from "@telegraph/layout";
5
+ import { Tooltip as N } from "@telegraph/tooltip";
6
+ import { Text as S } from "@telegraph/typography";
7
7
  import { clsx as f } from "clsx";
8
8
  import { AnimatePresence as L, motion as b } from "framer-motion";
9
9
  import i from "react";
10
- const P = {
10
+ const O = {
11
11
  Root: {
12
12
  0: "h-5",
13
13
  1: "h-6",
14
14
  2: "h-8"
15
15
  }
16
- }, m = {
16
+ }, w = {
17
17
  Root: {
18
18
  0: "1",
19
19
  1: "2",
@@ -117,70 +117,79 @@ const P = {
117
117
  size: "1",
118
118
  color: "default",
119
119
  variant: "soft"
120
- }), w = ({
121
- as: r = "span",
120
+ }), m = ({
121
+ as: n = "span",
122
122
  size: t = "1",
123
- color: e = "default",
123
+ color: o = "default",
124
124
  variant: l = "soft",
125
- className: a,
126
- ...n
127
- }) => /* @__PURE__ */ o(d.Provider, { value: { size: t, color: e, variant: l }, children: /* @__PURE__ */ o(
128
- I,
125
+ className: e,
126
+ ...a
127
+ }) => /* @__PURE__ */ r(d.Provider, { value: { size: t, color: o, variant: l }, children: /* @__PURE__ */ r(
128
+ z,
129
129
  {
130
- as: r,
130
+ as: n,
131
131
  display: "inline-flex",
132
132
  align: "center",
133
133
  rounded: "2",
134
- pl: m.Root[t],
135
- className: f(P.Root[t], s.Root[l][e], a),
136
- ...n,
134
+ pl: w.Root[t],
135
+ className: f(O.Root[t], s.Root[l][o], e),
136
+ ...a,
137
137
  "data-tag": !0
138
138
  }
139
139
  ) }), h = ({
140
- as: r = "span",
141
- ...t
140
+ as: n = "span",
141
+ maxW: t = "40",
142
+ style: o,
143
+ ...l
142
144
  }) => {
143
145
  const e = i.useContext(d);
144
- return /* @__PURE__ */ o(
145
- N,
146
+ return /* @__PURE__ */ r(
147
+ S,
146
148
  {
147
- as: r,
149
+ as: n,
148
150
  size: e.size,
149
151
  color: s.Text[e.variant][e.color],
150
152
  weight: "medium",
151
- mr: m.Text[e.size],
152
- ...t
153
+ mr: w.Text[e.size],
154
+ maxW: t,
155
+ style: {
156
+ whiteSpace: "nowrap",
157
+ textOverflow: "ellipsis",
158
+ overflow: "hidden",
159
+ ...o
160
+ },
161
+ ...l
153
162
  }
154
163
  );
155
164
  }, x = ({
156
- onClick: r,
165
+ onClick: n,
157
166
  textToCopy: t,
158
- className: e,
167
+ className: o,
159
168
  ...l
160
169
  }) => {
161
- const a = i.useContext(d), [n, c] = i.useState(!1);
170
+ const e = i.useContext(d), [a, c] = i.useState(!1);
162
171
  return i.useEffect(() => {
163
- if (n) {
172
+ if (a) {
164
173
  const u = setTimeout(() => c(!1), 2e3);
165
174
  return () => clearTimeout(u);
166
175
  }
167
- }, [n]), /* @__PURE__ */ o(L, { mode: "wait", initial: !1, children: /* @__PURE__ */ o(z, { label: "Copy text", children: /* @__PURE__ */ o(
176
+ }, [a]), /* @__PURE__ */ r(L, { mode: "wait", initial: !1, children: /* @__PURE__ */ r(N, { label: "Copy text", children: /* @__PURE__ */ r(
168
177
  g.Root,
169
178
  {
170
179
  onClick: (u) => {
171
180
  var p;
172
- r == null || r(u), c(!0), t && navigator.clipboard.writeText(t), (p = u.currentTarget) == null || p.blur();
181
+ n == null || n(u), c(!0), t && navigator.clipboard.writeText(t), (p = u.currentTarget) == null || p.blur();
173
182
  },
174
- size: a.size,
175
- color: s.Button[a.variant][a.color],
176
- variant: a.variant,
177
- className: f("overflow-hidden", e),
183
+ size: e.size,
184
+ color: s.Button[e.variant][e.color],
185
+ variant: e.variant,
186
+ className: f("overflow-hidden", o),
178
187
  roundedTopRight: "3",
179
188
  roundedBottomRight: "3",
180
189
  roundedTopLeft: "0",
181
190
  roundedBottomLeft: "0",
182
191
  ...l,
183
- children: n ? /* @__PURE__ */ o(
192
+ children: a ? /* @__PURE__ */ r(
184
193
  g.Icon,
185
194
  {
186
195
  as: b.span,
@@ -192,7 +201,7 @@ const P = {
192
201
  alt: "Copied text"
193
202
  },
194
203
  "check icon"
195
- ) : /* @__PURE__ */ o(
204
+ ) : /* @__PURE__ */ r(
196
205
  g.Icon,
197
206
  {
198
207
  as: b.span,
@@ -208,65 +217,66 @@ const P = {
208
217
  }
209
218
  ) }) });
210
219
  }, T = ({
211
- className: r,
220
+ className: n,
212
221
  ...t
213
222
  }) => {
214
- const e = i.useContext(d);
215
- return /* @__PURE__ */ o(
223
+ const o = i.useContext(d);
224
+ return /* @__PURE__ */ r(
216
225
  g,
217
226
  {
218
- size: e.size,
219
- color: s.Button[e.variant][e.color],
220
- variant: e.variant,
227
+ size: o.size,
228
+ color: s.Button[o.variant][o.color],
229
+ variant: o.variant,
221
230
  icon: { icon: y.X, alt: "close" },
222
- className: f("rounded-tl-0 rounded-bl-0", r),
231
+ className: f("rounded-tl-0 rounded-bl-0", n),
223
232
  ...t
224
233
  }
225
234
  );
226
- }, C = ({
227
- icon: r,
235
+ }, v = ({
236
+ icon: n,
228
237
  alt: t,
229
- "aria-hidden": e,
238
+ "aria-hidden": o,
230
239
  className: l,
231
- ...a
240
+ ...e
232
241
  }) => {
233
- const n = i.useContext(d), c = t ? { alt: t } : { "aria-hidden": e };
234
- return /* @__PURE__ */ o(
235
- B,
242
+ const a = i.useContext(d), c = t ? { alt: t } : { "aria-hidden": o };
243
+ return /* @__PURE__ */ r(
244
+ I,
236
245
  {
237
- icon: r,
238
- size: n.size,
239
- color: s.Icon[n.variant][n.color],
246
+ icon: n,
247
+ size: a.size,
248
+ color: s.Icon[a.variant][a.color],
240
249
  className: f("rounded-tl-0 rounded-bl-0 mr-1", l),
241
250
  ...c,
242
- ...a
251
+ ...e
243
252
  }
244
253
  );
245
- }, R = ({
246
- color: r = "default",
254
+ }, C = ({
255
+ color: n = "default",
247
256
  size: t = "1",
248
- variant: e = "soft",
257
+ variant: o = "soft",
249
258
  icon: l,
250
- onRemove: a,
251
- onCopy: n,
259
+ onRemove: e,
260
+ onCopy: a,
252
261
  textToCopy: c,
253
- children: u,
254
- ...p
255
- }) => /* @__PURE__ */ v(w, { color: r, size: t, variant: e, ...p, children: [
256
- l && /* @__PURE__ */ o(C, { ...l }),
257
- /* @__PURE__ */ o(h, { as: "span", children: u }),
258
- a && /* @__PURE__ */ o(T, { onClick: a, icon: { icon: y.X, alt: "Remove" } }),
259
- n && /* @__PURE__ */ o(x, { onClick: n, textToCopy: c })
262
+ textProps: u = { maxW: "40" },
263
+ children: p,
264
+ ...R
265
+ }) => /* @__PURE__ */ B(m, { color: n, size: t, variant: o, ...R, children: [
266
+ l && /* @__PURE__ */ r(v, { ...l }),
267
+ /* @__PURE__ */ r(h, { as: "span", ...u, children: p }),
268
+ e && /* @__PURE__ */ r(T, { onClick: e, icon: { icon: y.X, alt: "Remove" } }),
269
+ a && /* @__PURE__ */ r(x, { onClick: a, textToCopy: c })
260
270
  ] });
261
- Object.assign(R, {
262
- Root: w,
271
+ Object.assign(C, {
272
+ Root: m,
263
273
  Button: T,
264
274
  Text: h,
265
- Icon: C,
275
+ Icon: v,
266
276
  CopyButton: x
267
277
  });
268
- const G = R;
278
+ const W = C;
269
279
  export {
270
- G as Tag
280
+ W as Tag
271
281
  };
272
282
  //# sourceMappingURL=index.mjs.map
package/dist/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n Root: {\n \"0\": \"h-5\",\n \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const SPACING = {\n Root: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n Text: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-12\",\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: \"default\",\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, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"0\" | \"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=\"2\"\n pl={SPACING.Root[size]}\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 weight=\"medium\"\n mr={SPACING.Text[context.size]}\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: React.MouseEvent<HTMLButtonElement>) => {\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.currentTarget?.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<T>> & {\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":["SIZE","SPACING","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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"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n Root: {\n \"0\": \"h-5\",\n \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const SPACING = {\n Root: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n Text: {\n \"0\": \"1\",\n \"1\": \"2\",\n \"2\": \"2\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-12\",\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: \"default\",\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, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"0\" | \"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=\"2\"\n pl={SPACING.Root[size]}\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 maxW = \"40\",\n style,\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 weight=\"medium\"\n mr={SPACING.Text[context.size]}\n maxW={maxW}\n style={{\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n ...style,\n }}\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: React.MouseEvent<HTMLButtonElement>) => {\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.currentTarget?.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<T>> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n textProps?: React.ComponentProps<typeof Text>;\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 textProps = { maxW: \"40\" },\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\" {...textProps}>\n {children}\n </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":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","maxW","style","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","textProps","children","Tag"],"mappings":"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"}
package/dist/types/Tag/Tag.d.ts CHANGED
@@ -16,7 +16,7 @@ declare const Root: <T extends TgphElement>({ as, size, color, variant, classNam
16
16
  type TextProps<T extends TgphElement> = Omit<TgphComponentProps<typeof TelegraphText<T>>, "as"> & {
17
17
  as?: T;
18
18
  };
19
- declare const Text: <T extends TgphElement>({ as, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
19
+ declare const Text: <T extends TgphElement>({ as, maxW, style, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
20
20
  type ButtonProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphButton<T>>;
21
21
  type CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {
22
22
  textToCopy?: string;
@@ -27,6 +27,7 @@ type IconProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphIcon<
27
27
  declare const Icon: <T extends TgphElement>({ icon, alt, "aria-hidden": ariaHidden, className, ...props }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;
28
28
  type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root<T>> & {
29
29
  icon?: React.ComponentProps<typeof TelegraphIcon>;
30
+ textProps?: React.ComponentProps<typeof Text>;
30
31
  onRemove?: () => void;
31
32
  } & ({
32
33
  onCopy: () => void;
@@ -35,7 +36,7 @@ type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentPr
35
36
  onCopy?: never;
36
37
  textToCopy?: never;
37
38
  });
38
- declare const Default: <T extends TgphElement>({ color, size, variant, icon, onRemove, onCopy, textToCopy, children, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element;
39
+ declare const Default: <T extends TgphElement>({ color, size, variant, icon, onRemove, onCopy, textToCopy, textProps, children, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element;
39
40
  declare const Tag: typeof Default & {
40
41
  Root: typeof Root;
41
42
  Button: typeof Button;
package/dist/types/Tag/Tag.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/tag",
3
- "version": "0.0.56",
3
+ "version": "0.0.58",
4
4
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
5
5
  "author": "@knocklabs",
6
6
  "license": "MIT",
@@ -31,13 +31,13 @@
31
31
  "preview": "vite preview"
32
32
  },
33
33
  "dependencies": {
34
- "@telegraph/button": "^0.0.53",
34
+ "@telegraph/button": "^0.0.54",
35
35
  "@telegraph/compose-refs": "^0.0.2",
36
36
  "@telegraph/helpers": "^0.0.7",
37
- "@telegraph/icon": "^0.0.33",
38
- "@telegraph/layout": "^0.0.30",
39
- "@telegraph/tooltip": "^0.0.26",
40
- "@telegraph/typography": "^0.0.30",
37
+ "@telegraph/icon": "^0.0.34",
38
+ "@telegraph/layout": "^0.1.0",
39
+ "@telegraph/tooltip": "^0.0.27",
40
+ "@telegraph/typography": "^0.1.0",
41
41
  "clsx": "^2.1.1",
42
42
  "framer-motion": "^11.1.9"
43
43
  },