@telegraph/tag 0.0.62 → 0.0.64

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @telegraph/tag
 
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies [[`8cbd325`](https://github.com/knocklabs/telegraph/commit/8cbd325b8ccec7664be2649faa4a0bf6cf82c027)]:
+  - @telegraph/tooltip@0.0.33
+  - @telegraph/button@0.0.59
+  - @telegraph/layout@0.1.5
+  - @telegraph/typography@0.1.5
+  - @telegraph/icon@0.0.39
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @telegraph/button@0.0.58
+  - @telegraph/layout@0.1.4
+  - @telegraph/typography@0.1.4
+  - @telegraph/tooltip@0.0.32
+  - @telegraph/icon@0.0.38
+
 ## 0.0.62
 
 ### Patch Changes

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    \"0\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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","Tooltip","jsxs","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","textProps","children","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"0\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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","Tooltip","jsxs","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/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    \"0\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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","Tooltip","jsxs","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","textProps","children","Tag"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"0\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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","Tooltip","jsxs","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","textProps","children","Tag"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",
@@ -31,14 +31,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/button": "^0.0.57",
+    "@telegraph/button": "^0.0.59",
     "@telegraph/compose-refs": "^0.0.2",
     "@telegraph/helpers": "^0.0.7",
-    "@telegraph/icon": "^0.0.37",
-    "@telegraph/layout": "^0.1.3",
+    "@telegraph/icon": "^0.0.39",
+    "@telegraph/layout": "^0.1.5",
     "@telegraph/motion": "^0.0.3",
-    "@telegraph/tooltip": "^0.0.31",
-    "@telegraph/typography": "^0.1.3",
+    "@telegraph/tooltip": "^0.0.33",
+    "@telegraph/typography": "^0.1.5",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -52,7 +52,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4",
-    "vite": "^5.4.7"
+    "vite": "^6.0.11"
   },
   "peerDependencies": {
     "react": "^18.2.0",