@telegraph/tag 0.0.6 → 0.0.8

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 (11) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +27 -23
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/css/default.css +1 -1
  6. package/dist/esm/index.mjs +51 -43
  7. package/dist/esm/index.mjs.map +1 -1
  8. package/dist/types/Tag/Tag.constants.d.ts +8 -0
  9. package/dist/types/Tag/Tag.constants.d.ts.map +1 -1
  10. package/dist/types/Tag/Tag.d.ts +4 -4
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @telegraph/tag
2
2
 
3
+ ## 0.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`ca299d0`](https://github.com/knocklabs/telegraph/commit/ca299d0868caad117e11b2dc2f880d86cbbd814e)]:
8
+ - @telegraph/button@0.0.11
9
+
10
+ ## 0.0.7
11
+
12
+ ### Patch Changes
13
+
14
+ - [#76](https://github.com/knocklabs/telegraph/pull/76) [`10a480f`](https://github.com/knocklabs/telegraph/commit/10a480f1013bcdfb1805012ce503f4bb7b52e724) Thanks [@connorlindsey](https://github.com/connorlindsey)! - feat: add purple color option
15
+
16
+ - Updated dependencies [[`10a480f`](https://github.com/knocklabs/telegraph/commit/10a480f1013bcdfb1805012ce503f4bb7b52e724)]:
17
+ - @telegraph/typography@0.0.9
18
+ - @telegraph/button@0.0.10
19
+ - @telegraph/icon@0.0.7
20
+
3
21
  ## 0.0.6
4
22
 
5
23
  ### Patch Changes
package/README.md CHANGED
@@ -3,8 +3,8 @@
3
3
  [![npm version](https://img.shields.io/npm/v/@telegraph/tag.svg)](https://www.npmjs.com/package/@telegraph/tag)
4
4
 
5
5
  # @telegraph/tag
6
- > A tag component with optional interactive button
7
6
 
7
+ > A tag component with optional interactive button
8
8
 
9
9
  ## Installation Instructions
10
10
 
@@ -12,16 +12,18 @@
12
12
  npm install @telegraph/tag
13
13
  ```
14
14
 
15
-
16
15
  ### Add stylesheet
16
+
17
17
  Pick one:
18
18
 
19
19
  Via CSS (preferred):
20
+
20
21
  ```
21
22
  @import "@telegraph/tag"
22
23
  ```
23
24
 
24
25
  Via Javascript:
26
+
25
27
  ```
26
28
  import "@telegraph/tag/default.css"
27
29
  ```
@@ -31,6 +33,7 @@ import "@telegraph/tag/default.css"
31
33
  ## Usage
32
34
 
33
35
  ### Basic Usage
36
+
34
37
  Shorthand tag component that adheres to the telegraph design system
35
38
 
36
39
  ```
@@ -43,20 +46,21 @@ import { Tag } from "@telegraph/tag"
43
46
 
44
47
  #### Props
45
48
 
46
- | Name | Type | Default | Options |
47
- | ---- | -----| ------- | ------- |
48
- | size | string | "1" | "1" "2" |
49
- | color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow" |
50
- | variant | string | "soft" | "soft", "solid"|
51
- | icon | [Icon Props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props) | `undefined` | |
52
- | onRemove | () => {} | `undefined` | |
53
- | onCopy | () => {} | `undefined` | |
54
-
49
+ | Name | Type | Default | Options |
50
+ | -------- | ---------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------- |
51
+ | size | string | "1" | "1" "2" |
52
+ | color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow", "purple" |
53
+ | variant | string | "soft" | "soft", "solid" |
54
+ | icon | [Icon Props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props) | `undefined` | |
55
+ | onRemove | () => {} | `undefined` | |
56
+ | onCopy | () => {} | `undefined` | |
55
57
 
56
58
  ### Advanced Usage
59
+
57
60
  Individual parts of the tag component that can be composed in configurations different from the default telegraph design system styles. This can be used to create modifications to one-off tag components without the need to modify the tag exported from this package.
58
61
 
59
62
  #### `<Tag.Root/>`
63
+
60
64
  Wraps the Tag children components and relays props to them.
61
65
 
62
66
  ```
@@ -69,15 +73,14 @@ import { Tag } from '@telegraph/tag'
69
73
 
70
74
  #### Props
71
75
 
72
- | Name | Type | Default | Options |
73
- | ---- | -----| ------- | ------- |
74
- | size | string | "1" | "1" "2" |
75
- | color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow" |
76
- | variant | string | "soft" | "soft", "solid"|
77
-
78
-
76
+ | Name | Type | Default | Options |
77
+ | ------- | ------ | --------- | ----------------------------------------------------------------------- |
78
+ | size | string | "1" | "1" "2" |
79
+ | color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow", "purple" |
80
+ | variant | string | "soft" | "soft", "solid" |
79
81
 
80
82
  #### `<Tag.Text/>`
83
+
81
84
  A component built on top of the Text component from [@telegraph/typography](https://github.com/knocklabs/telegraph/tree/main/packages/typography) with translated props to adhere to the telegraph design system
82
85
 
83
86
  ```
@@ -93,6 +96,7 @@ import { Tag } from '@telegraph/tag'
93
96
  > See [text props](https://github.com/knocklabs/telegraph/tree/main/packages/typography)
94
97
 
95
98
  #### `<Tag.Button/>`
99
+
96
100
  A component build on top of the Button component from [@telegraph/button](https://github.com/knocklabs/telegraph/tree/main/packages/button)
97
101
 
98
102
  ```
@@ -105,10 +109,10 @@ import { Tag } from '@telegraph/tag'
105
109
 
106
110
  #### Props
107
111
 
108
- > See [button props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props)
109
-
112
+ > See [button props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props)
110
113
 
111
114
  #### `<Tag.Text/>`
115
+
112
116
  A component built on top of the Text component from [@telegraph/typography](https://github.com/knocklabs/telegraph/tree/main/packages/typography) with translated props to adhere to the telegraph design system
113
117
 
114
118
  ```
@@ -124,6 +128,7 @@ import { Tag } from '@telegraph/tag'
124
128
  > See [text props](https://github.com/knocklabs/telegraph/tree/main/packages/typography)
125
129
 
126
130
  #### `<Tag.Icon/>`
131
+
127
132
  A component build on top of the Icon component from [@telegraph/icon](https://github.com/knocklabs/telegraph/tree/main/packages/icon)
128
133
 
129
134
  ```
@@ -136,9 +141,10 @@ import { Tag } from '@telegraph/tag'
136
141
 
137
142
  #### Props
138
143
 
139
- > See [icon props](https://github.com/knocklabs/telegraph/tree/main/packages/icon)
144
+ > See [icon props](https://github.com/knocklabs/telegraph/tree/main/packages/icon)
140
145
 
141
146
  #### An example of composing an advanced Tag
147
+
142
148
  ```
143
149
  import { Tag } from "@telegraph/tag"
144
150
  import { addSharp, closeSharp } from '@telegraph/icon'
@@ -149,5 +155,3 @@ import { addSharp, closeSharp } from '@telegraph/icon'
149
155
  <Tag.Button icon={{ icon: removeSharp, alt: "remove"}} onClick={() => {}}/>
150
156
  </Tag.Root>
151
157
  ```
152
-
153
-
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("@telegraph/button"),s=require("@telegraph/icon"),p=require("@telegraph/typography"),u=require("clsx"),l=require("react"),m={Root:{1:"h-6",2:"h-8"}},d={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9"},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"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow"}}},i=l.createContext({size:"1",color:"default",variant:"soft"}),f=l.forwardRef(({size:t="1",color:r="default",variant:o="soft",className:e,...a},c)=>n.jsx(i.Provider,{value:{size:t,color:r,variant:o},children:n.jsx("span",{className:u.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],d.Root[o][r],e),...a,ref:c,"data-tag":!0})})),y=l.forwardRef(({as:t="span",className:r,...o},e)=>{const a=l.useContext(i);return n.jsx(p.Text,{as:t,size:a.size,color:d.Text[a.variant][a.color],className:u.clsx("rounded-tl-0 rounded-bl-0 mr-2",r),...o,ref:e})}),g=l.forwardRef(({className:t,...r},o)=>{const e=l.useContext(i);return n.jsx(R.Button,{size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,icon:{icon:s.closeSharp,alt:"close"},className:u.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:o})}),b=l.forwardRef(({className:t,...r},o)=>{const e=l.useContext(i);return n.jsx(s.Icon,{size:e.size,color:d.Icon[e.variant][e.color],className:u.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:o})}),w=l.forwardRef(({color:t="default",size:r="1",variant:o="soft",icon:e,onRemove:a,onCopy:c,children:x,...h},j)=>n.jsxs(f,{color:t,size:r,variant:o,...h,ref:j,children:[e&&n.jsx(b,{...e}),n.jsx(y,{as:"span",children:x}),a&&n.jsx(g,{onClick:a,icon:{icon:s.closeSharp,alt:"Copy Text"}}),c&&n.jsx(g,{onClick:c,icon:{icon:s.copyOutline,alt:"Remove"}})]}));Object.assign(w,{Root:f,Button:g,Text:y,Icon:b});const T=w;exports.Tag=T;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),j=require("@telegraph/button"),s=require("@telegraph/icon"),R=require("@telegraph/typography"),u=require("clsx"),n=require("react"),m={Root:{1:"h-6",2:"h-8"}},i={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9",purple:"bg-purple-9"},soft:{default:"bg-gray-3",accent:"bg-accent-3",gray:"bg-gray-3",red:"bg-red-3",blue:"bg-blue-3",green:"bg-green-3",yellow:"bg-yellow-3",purple:"bg-purple-3"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}}},d=n.createContext({size:"1",color:"default",variant:"soft"}),p=n.forwardRef(({size:t="1",color:r="default",variant:l="soft",className:e,...a},c)=>o.jsx(d.Provider,{value:{size:t,color:r,variant:l},children:o.jsx("span",{className:u.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],i.Root[l][r],e),...a,ref:c,"data-tag":!0})})),b=n.forwardRef(({as:t="span",className:r,...l},e)=>{const a=n.useContext(d);return o.jsx(R.Text,{as:t,size:a.size,color:i.Text[a.variant][a.color],className:u.clsx("rounded-tl-0 rounded-bl-0 mr-2",r),...l,ref:e})}),g=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(j.Button,{size:e.size,color:i.Button[e.variant][e.color],variant:e.variant,icon:{icon:s.closeSharp,alt:"close"},className:u.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:l})}),f=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(s.Icon,{size:e.size,color:i.Icon[e.variant][e.color],className:u.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:l})}),y=n.forwardRef(({color:t="default",size:r="1",variant:l="soft",icon:e,onRemove:a,onCopy:c,children:w,...x},h)=>o.jsxs(p,{color:t,size:r,variant:l,...x,ref:h,children:[e&&o.jsx(f,{...e}),o.jsx(b,{as:"span",children:w}),a&&o.jsx(g,{onClick:a,icon:{icon:s.closeSharp,alt:"Copy Text"}}),c&&o.jsx(g,{onClick:c,icon:{icon:s.copyOutline,alt:"Remove"}})]}));Object.assign(y,{Root:p,Button:g,Text:b,Icon:f});const T=y;exports.Tag=T;
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 \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-9\",\n accent: \"bg-accent-9\",\n gray: \"bg-gray-9\",\n red: \"bg-red-9\",\n blue: \"bg-blue-9\",\n green: \"bg-green-9\",\n yellow: \"bg-yellow-9\",\n },\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 },\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 },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\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 },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n },\n Button: {\n solid: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n soft: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport {\n Icon as TelegraphIcon,\n closeSharp,\n copyOutline,\n} from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"1\" | \"2\";\n color?: keyof (typeof COLOR.Root)[\"soft\"];\n variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n size: \"1\",\n color: \"default\",\n variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n forwardedRef,\n ) => {\n return (\n <TagContext.Provider value={{ size, color, variant }}>\n <span\n className={clsx(\n \"inline-flex items-center rounded-3 pl-2\",\n SIZE.Root[size],\n COLOR.Root[variant][color],\n className,\n )}\n {...props}\n ref={forwardedRef}\n data-tag\n />\n </TagContext.Provider>\n );\n },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n ({ as = \"span\", className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphText\n as={as}\n size={context.size}\n color={COLOR.Text[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphButton\n size={context.size}\n color={COLOR.Button[context.variant][context.color]}\n variant={context.variant}\n icon={{ icon: closeSharp, alt: \"close\" }}\n className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphIcon\n size={context.size}\n color={COLOR.Icon[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n onCopy?: () => void;\n onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n (\n {\n color = \"default\",\n size = \"1\",\n variant = \"soft\",\n icon,\n onRemove,\n onCopy,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n {icon && <Icon {...icon} />}\n <Text as=\"span\">{children}</Text>\n {onRemove && (\n <Button\n onClick={onRemove}\n icon={{ icon: closeSharp, alt: \"Copy Text\" }}\n />\n )}\n {onCopy && (\n <Button\n onClick={onCopy}\n icon={{ icon: copyOutline, alt: \"Remove\" }}\n />\n )}\n </Root>\n );\n },\n);\n\nObject.assign(Default, {\n Root,\n Button,\n Text,\n Icon,\n});\n\nconst Tag = Default as typeof Default & {\n Root: typeof Root;\n Button: typeof Button;\n Text: typeof Text;\n Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","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 \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-9\",\n accent: \"bg-accent-9\",\n gray: \"bg-gray-9\",\n red: \"bg-red-9\",\n blue: \"bg-blue-9\",\n green: \"bg-green-9\",\n yellow: \"bg-yellow-9\",\n purple: \"bg-purple-9\",\n },\n soft: {\n default: \"bg-gray-3\",\n accent: \"bg-accent-3\",\n gray: \"bg-gray-3\",\n red: \"bg-red-3\",\n blue: \"bg-blue-3\",\n green: \"bg-green-3\",\n yellow: \"bg-yellow-3\",\n purple: \"bg-purple-3\",\n },\n },\n Icon: {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n blue: \"white\",\n green: \"white\",\n yellow: \"white\",\n purple: \"white\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n Text: {\n solid: {\n default: \"white\",\n gray: \"white\",\n accent: \"white\",\n red: \"white\",\n blue: \"white\",\n green: \"white\",\n yellow: \"white\",\n purple: \"white\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n Button: {\n solid: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n soft: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport {\n Icon as TelegraphIcon,\n closeSharp,\n copyOutline,\n} from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"1\" | \"2\";\n color?: keyof (typeof COLOR.Root)[\"soft\"];\n variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n size: \"1\",\n color: \"default\",\n variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n forwardedRef,\n ) => {\n return (\n <TagContext.Provider value={{ size, color, variant }}>\n <span\n className={clsx(\n \"inline-flex items-center rounded-3 pl-2\",\n SIZE.Root[size],\n COLOR.Root[variant][color],\n className,\n )}\n {...props}\n ref={forwardedRef}\n data-tag\n />\n </TagContext.Provider>\n );\n },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n ({ as = \"span\", className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphText\n as={as}\n size={context.size}\n color={COLOR.Text[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphButton\n size={context.size}\n color={COLOR.Button[context.variant][context.color]}\n variant={context.variant}\n icon={{ icon: closeSharp, alt: \"close\" }}\n className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphIcon\n size={context.size}\n color={COLOR.Icon[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n onCopy?: () => void;\n onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n (\n {\n color = \"default\",\n size = \"1\",\n variant = \"soft\",\n icon,\n onRemove,\n onCopy,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n {icon && <Icon {...icon} />}\n <Text as=\"span\">{children}</Text>\n {onRemove && (\n <Button\n onClick={onRemove}\n icon={{ icon: closeSharp, alt: \"Copy Text\" }}\n />\n )}\n {onCopy && (\n <Button\n onClick={onCopy}\n icon={{ icon: copyOutline, alt: \"Remove\" }}\n />\n )}\n </Root>\n );\n },\n);\n\nObject.assign(Default, {\n Root,\n Button,\n Text,\n Icon,\n});\n\nconst Tag = Default as typeof Default & {\n Root: typeof Root;\n Button: typeof Button;\n Text: typeof Text;\n Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","Tag"],"mappings":"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"}
package/dist/css/default.css CHANGED
@@ -1 +1 @@
1
- .tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.mr-2){margin-right:var(--tgph-spacing-2)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.items-center){align-items:center}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}
1
+ .tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.mr-2){margin-right:var(--tgph-spacing-2)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.items-center){align-items:center}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-purple-3){background-color:var(--tgph-purple-3)}.tgph :is(.bg-purple-9){background-color:var(--tgph-purple-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.pl-2){padding-left:var(--tgph-spacing-2)}
package/dist/esm/index.mjs CHANGED
@@ -1,15 +1,15 @@
1
- import { jsx as l, jsxs as p } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as x } from "react/jsx-runtime";
2
2
  import { Button as R } from "@telegraph/button";
3
3
  import { closeSharp as i, Icon as C, copyOutline as T } from "@telegraph/icon";
4
4
  import { Text as v } from "@telegraph/typography";
5
- import { clsx as s } from "clsx";
5
+ import { clsx as u } from "clsx";
6
6
  import n from "react";
7
7
  const z = {
8
8
  Root: {
9
9
  1: "h-6",
10
10
  2: "h-8"
11
11
  }
12
- }, d = {
12
+ }, s = {
13
13
  Root: {
14
14
  solid: {
15
15
  default: "bg-gray-9",
@@ -18,7 +18,8 @@ const z = {
18
18
  red: "bg-red-9",
19
19
  blue: "bg-blue-9",
20
20
  green: "bg-green-9",
21
- yellow: "bg-yellow-9"
21
+ yellow: "bg-yellow-9",
22
+ purple: "bg-purple-9"
22
23
  },
23
24
  soft: {
24
25
  default: "bg-gray-3",
@@ -27,7 +28,8 @@ const z = {
27
28
  red: "bg-red-3",
28
29
  blue: "bg-blue-3",
29
30
  green: "bg-green-3",
30
- yellow: "bg-yellow-3"
31
+ yellow: "bg-yellow-3",
32
+ purple: "bg-purple-3"
31
33
  }
32
34
  },
33
35
  Icon: {
@@ -38,7 +40,8 @@ const z = {
38
40
  accent: "white",
39
41
  blue: "white",
40
42
  green: "white",
41
- yellow: "white"
43
+ yellow: "white",
44
+ purple: "white"
42
45
  },
43
46
  soft: {
44
47
  default: "default",
@@ -47,7 +50,8 @@ const z = {
47
50
  red: "red",
48
51
  blue: "blue",
49
52
  green: "green",
50
- yellow: "yellow"
53
+ yellow: "yellow",
54
+ purple: "purple"
51
55
  }
52
56
  },
53
57
  Text: {
@@ -58,7 +62,8 @@ const z = {
58
62
  red: "white",
59
63
  blue: "white",
60
64
  green: "white",
61
- yellow: "white"
65
+ yellow: "white",
66
+ purple: "white"
62
67
  },
63
68
  soft: {
64
69
  default: "default",
@@ -67,7 +72,8 @@ const z = {
67
72
  red: "red",
68
73
  blue: "blue",
69
74
  green: "green",
70
- yellow: "yellow"
75
+ yellow: "yellow",
76
+ purple: "purple"
71
77
  }
72
78
  },
73
79
  Button: {
@@ -78,7 +84,8 @@ const z = {
78
84
  red: "red",
79
85
  blue: "blue",
80
86
  green: "green",
81
- yellow: "yellow"
87
+ yellow: "yellow",
88
+ purple: "purple"
82
89
  },
83
90
  soft: {
84
91
  default: "gray",
@@ -87,21 +94,22 @@ const z = {
87
94
  red: "red",
88
95
  blue: "blue",
89
96
  green: "green",
90
- yellow: "yellow"
97
+ yellow: "yellow",
98
+ purple: "purple"
91
99
  }
92
100
  }
93
- }, u = n.createContext({
101
+ }, d = n.createContext({
94
102
  size: "1",
95
103
  color: "default",
96
104
  variant: "soft"
97
105
  }), f = n.forwardRef(
98
- ({ size: t = "1", color: o = "default", variant: r = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(u.Provider, { value: { size: t, color: o, variant: r }, children: /* @__PURE__ */ l(
106
+ ({ size: t = "1", color: r = "default", variant: o = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(d.Provider, { value: { size: t, color: r, variant: o }, children: /* @__PURE__ */ l(
99
107
  "span",
100
108
  {
101
- className: s(
109
+ className: u(
102
110
  "inline-flex items-center rounded-3 pl-2",
103
111
  z.Root[t],
104
- d.Root[r][o],
112
+ s.Root[o][r],
105
113
  e
106
114
  ),
107
115
  ...a,
@@ -109,64 +117,64 @@ const z = {
109
117
  "data-tag": !0
110
118
  }
111
119
  ) })
112
- ), w = n.forwardRef(
113
- ({ as: t = "span", className: o, ...r }, e) => {
114
- const a = n.useContext(u);
120
+ ), p = n.forwardRef(
121
+ ({ as: t = "span", className: r, ...o }, e) => {
122
+ const a = n.useContext(d);
115
123
  return /* @__PURE__ */ l(
116
124
  v,
117
125
  {
118
126
  as: t,
119
127
  size: a.size,
120
- color: d.Text[a.variant][a.color],
121
- className: s("rounded-tl-0 rounded-bl-0 mr-2", o),
122
- ...r,
128
+ color: s.Text[a.variant][a.color],
129
+ className: u("rounded-tl-0 rounded-bl-0 mr-2", r),
130
+ ...o,
123
131
  ref: e
124
132
  }
125
133
  );
126
134
  }
127
135
  ), g = n.forwardRef(
128
- ({ className: t, ...o }, r) => {
129
- const e = n.useContext(u);
136
+ ({ className: t, ...r }, o) => {
137
+ const e = n.useContext(d);
130
138
  return /* @__PURE__ */ l(
131
139
  R,
132
140
  {
133
141
  size: e.size,
134
- color: d.Button[e.variant][e.color],
142
+ color: s.Button[e.variant][e.color],
135
143
  variant: e.variant,
136
144
  icon: { icon: i, alt: "close" },
137
- className: s("rounded-tl-0 rounded-bl-0", t),
138
- ...o,
139
- ref: r
145
+ className: u("rounded-tl-0 rounded-bl-0", t),
146
+ ...r,
147
+ ref: o
140
148
  }
141
149
  );
142
150
  }
143
- ), y = n.forwardRef(
144
- ({ className: t, ...o }, r) => {
145
- const e = n.useContext(u);
151
+ ), w = n.forwardRef(
152
+ ({ className: t, ...r }, o) => {
153
+ const e = n.useContext(d);
146
154
  return /* @__PURE__ */ l(
147
155
  C,
148
156
  {
149
157
  size: e.size,
150
- color: d.Icon[e.variant][e.color],
151
- className: s("rounded-tl-0 rounded-bl-0 mr-1", t),
152
- ...o,
153
- ref: r
158
+ color: s.Icon[e.variant][e.color],
159
+ className: u("rounded-tl-0 rounded-bl-0 mr-1", t),
160
+ ...r,
161
+ ref: o
154
162
  }
155
163
  );
156
164
  }
157
165
  ), b = n.forwardRef(
158
166
  ({
159
167
  color: t = "default",
160
- size: o = "1",
161
- variant: r = "soft",
168
+ size: r = "1",
169
+ variant: o = "soft",
162
170
  icon: e,
163
171
  onRemove: a,
164
172
  onCopy: c,
165
- children: h,
166
- ...m
167
- }, x) => /* @__PURE__ */ p(f, { color: t, size: o, variant: r, ...m, ref: x, children: [
168
- e && /* @__PURE__ */ l(y, { ...e }),
169
- /* @__PURE__ */ l(w, { as: "span", children: h }),
173
+ children: y,
174
+ ...h
175
+ }, m) => /* @__PURE__ */ x(f, { color: t, size: r, variant: o, ...h, ref: m, children: [
176
+ e && /* @__PURE__ */ l(w, { ...e }),
177
+ /* @__PURE__ */ l(p, { as: "span", children: y }),
170
178
  a && /* @__PURE__ */ l(
171
179
  g,
172
180
  {
@@ -186,8 +194,8 @@ const z = {
186
194
  Object.assign(b, {
187
195
  Root: f,
188
196
  Button: g,
189
- Text: w,
190
- Icon: y
197
+ Text: p,
198
+ Icon: w
191
199
  });
192
200
  const k = b;
193
201
  export {
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 \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-9\",\n accent: \"bg-accent-9\",\n gray: \"bg-gray-9\",\n red: \"bg-red-9\",\n blue: \"bg-blue-9\",\n green: \"bg-green-9\",\n yellow: \"bg-yellow-9\",\n },\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 },\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 },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\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 },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n },\n Button: {\n solid: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n soft: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n },\n },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport {\n Icon as TelegraphIcon,\n closeSharp,\n copyOutline,\n} from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"1\" | \"2\";\n color?: keyof (typeof COLOR.Root)[\"soft\"];\n variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n size: \"1\",\n color: \"default\",\n variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n forwardedRef,\n ) => {\n return (\n <TagContext.Provider value={{ size, color, variant }}>\n <span\n className={clsx(\n \"inline-flex items-center rounded-3 pl-2\",\n SIZE.Root[size],\n COLOR.Root[variant][color],\n className,\n )}\n {...props}\n ref={forwardedRef}\n data-tag\n />\n </TagContext.Provider>\n );\n },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n ({ as = \"span\", className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphText\n as={as}\n size={context.size}\n color={COLOR.Text[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphButton\n size={context.size}\n color={COLOR.Button[context.variant][context.color]}\n variant={context.variant}\n icon={{ icon: closeSharp, alt: \"close\" }}\n className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphIcon\n size={context.size}\n color={COLOR.Icon[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n onCopy?: () => void;\n onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n (\n {\n color = \"default\",\n size = \"1\",\n variant = \"soft\",\n icon,\n onRemove,\n onCopy,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n {icon && <Icon {...icon} />}\n <Text as=\"span\">{children}</Text>\n {onRemove && (\n <Button\n onClick={onRemove}\n icon={{ icon: closeSharp, alt: \"Copy Text\" }}\n />\n )}\n {onCopy && (\n <Button\n onClick={onCopy}\n icon={{ icon: copyOutline, alt: \"Remove\" }}\n />\n )}\n </Root>\n );\n },\n);\n\nObject.assign(Default, {\n Root,\n Button,\n Text,\n Icon,\n});\n\nconst Tag = Default as typeof Default & {\n Root: typeof Root;\n Button: typeof Button;\n Text: typeof Text;\n Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","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 \"1\": \"h-6\",\n \"2\": \"h-8\",\n },\n} as const;\n\nexport const COLOR = {\n Root: {\n solid: {\n default: \"bg-gray-9\",\n accent: \"bg-accent-9\",\n gray: \"bg-gray-9\",\n red: \"bg-red-9\",\n blue: \"bg-blue-9\",\n green: \"bg-green-9\",\n yellow: \"bg-yellow-9\",\n purple: \"bg-purple-9\",\n },\n soft: {\n default: \"bg-gray-3\",\n accent: \"bg-accent-3\",\n gray: \"bg-gray-3\",\n red: \"bg-red-3\",\n blue: \"bg-blue-3\",\n green: \"bg-green-3\",\n yellow: \"bg-yellow-3\",\n purple: \"bg-purple-3\",\n },\n },\n Icon: {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n blue: \"white\",\n green: \"white\",\n yellow: \"white\",\n purple: \"white\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n Text: {\n solid: {\n default: \"white\",\n gray: \"white\",\n accent: \"white\",\n red: \"white\",\n blue: \"white\",\n green: \"white\",\n yellow: \"white\",\n purple: \"white\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n Button: {\n solid: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n soft: {\n default: \"gray\",\n gray: \"gray\",\n accent: \"accent\",\n red: \"red\",\n blue: \"blue\",\n green: \"green\",\n yellow: \"yellow\",\n purple: \"purple\",\n },\n },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport {\n Icon as TelegraphIcon,\n closeSharp,\n copyOutline,\n} from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n size?: \"1\" | \"2\";\n color?: keyof (typeof COLOR.Root)[\"soft\"];\n variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n size: \"1\",\n color: \"default\",\n variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n (\n { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n forwardedRef,\n ) => {\n return (\n <TagContext.Provider value={{ size, color, variant }}>\n <span\n className={clsx(\n \"inline-flex items-center rounded-3 pl-2\",\n SIZE.Root[size],\n COLOR.Root[variant][color],\n className,\n )}\n {...props}\n ref={forwardedRef}\n data-tag\n />\n </TagContext.Provider>\n );\n },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n ({ as = \"span\", className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphText\n as={as}\n size={context.size}\n color={COLOR.Text[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphButton\n size={context.size}\n color={COLOR.Button[context.variant][context.color]}\n variant={context.variant}\n icon={{ icon: closeSharp, alt: \"close\" }}\n className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n ({ className, ...props }, forwardedRef) => {\n const context = React.useContext(TagContext);\n return (\n <TelegraphIcon\n size={context.size}\n color={COLOR.Icon[context.variant][context.color]}\n className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n {...props}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n icon?: React.ComponentProps<typeof TelegraphIcon>;\n onCopy?: () => void;\n onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n (\n {\n color = \"default\",\n size = \"1\",\n variant = \"soft\",\n icon,\n onRemove,\n onCopy,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n {icon && <Icon {...icon} />}\n <Text as=\"span\">{children}</Text>\n {onRemove && (\n <Button\n onClick={onRemove}\n icon={{ icon: closeSharp, alt: \"Copy Text\" }}\n />\n )}\n {onCopy && (\n <Button\n onClick={onCopy}\n icon={{ icon: copyOutline, alt: \"Remove\" }}\n />\n )}\n </Root>\n );\n },\n);\n\nObject.assign(Default, {\n Root,\n Button,\n Text,\n Icon,\n});\n\nconst Tag = Default as typeof Default & {\n Root: typeof Root;\n Button: typeof Button;\n Text: typeof Text;\n Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","Tag"],"mappings":"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"}
package/dist/types/Tag/Tag.constants.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare const COLOR: {
14
14
  readonly blue: "bg-blue-9";
15
15
  readonly green: "bg-green-9";
16
16
  readonly yellow: "bg-yellow-9";
17
+ readonly purple: "bg-purple-9";
17
18
  };
18
19
  readonly soft: {
19
20
  readonly default: "bg-gray-3";
@@ -23,6 +24,7 @@ export declare const COLOR: {
23
24
  readonly blue: "bg-blue-3";
24
25
  readonly green: "bg-green-3";
25
26
  readonly yellow: "bg-yellow-3";
27
+ readonly purple: "bg-purple-3";
26
28
  };
27
29
  };
28
30
  readonly Icon: {
@@ -34,6 +36,7 @@ export declare const COLOR: {
34
36
  readonly blue: "white";
35
37
  readonly green: "white";
36
38
  readonly yellow: "white";
39
+ readonly purple: "white";
37
40
  };
38
41
  readonly soft: {
39
42
  readonly default: "default";
@@ -43,6 +46,7 @@ export declare const COLOR: {
43
46
  readonly blue: "blue";
44
47
  readonly green: "green";
45
48
  readonly yellow: "yellow";
49
+ readonly purple: "purple";
46
50
  };
47
51
  };
48
52
  readonly Text: {
@@ -54,6 +58,7 @@ export declare const COLOR: {
54
58
  readonly blue: "white";
55
59
  readonly green: "white";
56
60
  readonly yellow: "white";
61
+ readonly purple: "white";
57
62
  };
58
63
  readonly soft: {
59
64
  readonly default: "default";
@@ -63,6 +68,7 @@ export declare const COLOR: {
63
68
  readonly blue: "blue";
64
69
  readonly green: "green";
65
70
  readonly yellow: "yellow";
71
+ readonly purple: "purple";
66
72
  };
67
73
  };
68
74
  readonly Button: {
@@ -74,6 +80,7 @@ export declare const COLOR: {
74
80
  readonly blue: "blue";
75
81
  readonly green: "green";
76
82
  readonly yellow: "yellow";
83
+ readonly purple: "purple";
77
84
  };
78
85
  readonly soft: {
79
86
  readonly default: "gray";
@@ -83,6 +90,7 @@ export declare const COLOR: {
83
90
  readonly blue: "blue";
84
91
  readonly green: "green";
85
92
  readonly yellow: "yellow";
93
+ readonly purple: "purple";
86
94
  };
87
95
  };
88
96
  };
package/dist/types/Tag/Tag.constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.constants.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFR,CAAC"}
1
+ {"version":3,"file":"Tag.constants.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFR,CAAC"}
package/dist/types/Tag/Tag.d.ts CHANGED
@@ -11,19 +11,19 @@ declare const Text: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttribut
11
11
  as: "b" | "code" | "div" | "em" | "i" | "label" | "p" | "pre" | "span" | "strong";
12
12
  align?: "center" | "left" | "right" | undefined;
13
13
  size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
14
- color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "beige" | "disabled" | undefined;
14
+ color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
15
15
  weight?: "regular" | "medium" | undefined;
16
16
  } & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>, "as"> & Partial<Pick<React.HTMLAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement> & {
17
17
  as: "b" | "code" | "div" | "em" | "i" | "label" | "p" | "pre" | "span" | "strong";
18
18
  align?: "center" | "left" | "right" | undefined;
19
19
  size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
20
- color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "beige" | "disabled" | undefined;
20
+ color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
21
21
  weight?: "regular" | "medium" | undefined;
22
22
  } & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>, "as">>, "ref"> & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>>;
23
23
  declare const Button: React.ForwardRefExoticComponent<Omit<import("@telegraph/helpers").AsProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>> & Omit<any, "as"> & {
24
24
  variant?: "soft" | "solid" | "outline" | "ghost" | undefined;
25
25
  size?: "1" | "2" | "3" | undefined;
26
- color?: "gray" | "accent" | "red" | "blue" | "green" | "yellow" | undefined;
26
+ color?: "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | undefined;
27
27
  state?: "default" | "disabled" | "loading" | "error" | "success" | "warning" | undefined;
28
28
  active?: boolean | undefined;
29
29
  } & {
@@ -34,7 +34,7 @@ declare const Icon: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HT
34
34
  alt: string;
35
35
  size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
36
36
  variant?: "primary" | "secondary" | undefined;
37
- color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "beige" | "disabled" | undefined;
37
+ color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
38
38
  } & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
39
39
  type DefaultProps = React.ComponentProps<typeof Root> & {
40
40
  icon?: React.ComponentProps<typeof TelegraphIcon>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/tag",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
5
5
  "author": "@knocklabs",
6
6
  "license": "MIT",
@@ -34,17 +34,17 @@
34
34
  "preview": "vite preview"
35
35
  },
36
36
  "dependencies": {
37
- "@telegraph/button": "^0.0.9",
37
+ "@telegraph/button": "^0.0.11",
38
38
  "@telegraph/helpers": "^0.0.1",
39
- "@telegraph/icon": "^0.0.6",
40
- "@telegraph/typography": "^0.0.8",
39
+ "@telegraph/icon": "^0.0.7",
40
+ "@telegraph/typography": "^0.0.9",
41
41
  "clsx": "^2.1.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@knocklabs/eslint-config": "^0.0.3",
45
45
  "@knocklabs/prettier-config": "^0.0.1",
46
46
  "@knocklabs/typescript-config": "^0.0.2",
47
- "@telegraph/postcss-config": "^0.0.10",
47
+ "@telegraph/postcss-config": "^0.0.11",
48
48
  "@telegraph/tailwind-config": "^0.0.10",
49
49
  "@telegraph/vite-config": "^0.0.8",
50
50
  "@telegraph/vitest-config": "^0.0.6",