@telegraph/tag 0.0.1 → 0.0.3
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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +11 -11
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Tag/Tag.d.ts +8 -4
- package/dist/types/Tag/Tag.d.ts.map +1 -1
- package/dist/types/Tag/Tag.stories.d.ts +7 -0
- package/dist/types/Tag/Tag.stories.d.ts.map +1 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @telegraph/tag
|
|
2
2
|
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`94c879e`](https://github.com/knocklabs/telegraph/commit/94c879ed645a7b9b1385c2232dfc0d182d20dad2)]:
|
|
8
|
+
- @telegraph/button@0.0.7
|
|
9
|
+
- @telegraph/icon@0.0.6
|
|
10
|
+
- @telegraph/typography@0.0.8
|
|
11
|
+
|
|
12
|
+
## 0.0.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [[`ee35abc`](https://github.com/knocklabs/telegraph/commit/ee35abcb229f15cca8ebac6418c9abddcf2dc97c)]:
|
|
17
|
+
- @telegraph/icon@0.0.5
|
|
18
|
+
- @telegraph/button@0.0.6
|
|
19
|
+
|
|
3
20
|
## 0.0.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
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;
|
|
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 {\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?:
|
|
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 {\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 Required<T> = {\n [P in keyof T]-?: T[P];\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 = Omit<React.ComponentProps<typeof TelegraphText>, \"as\"> & {\n as: React.ComponentProps<typeof TelegraphText>[\"as\"];\n};\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 text: string;\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/esm/index.mjs
CHANGED
|
@@ -2,14 +2,14 @@ import { jsx as l, jsxs as p } 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
|
|
5
|
+
import { clsx as s } 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
|
-
},
|
|
12
|
+
}, d = {
|
|
13
13
|
Root: {
|
|
14
14
|
solid: {
|
|
15
15
|
default: "bg-gray-9",
|
|
@@ -98,10 +98,10 @@ const z = {
|
|
|
98
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(
|
|
99
99
|
"span",
|
|
100
100
|
{
|
|
101
|
-
className:
|
|
101
|
+
className: s(
|
|
102
102
|
"inline-flex items-center rounded-3 pl-2",
|
|
103
103
|
z.Root[t],
|
|
104
|
-
|
|
104
|
+
d.Root[r][o],
|
|
105
105
|
e
|
|
106
106
|
),
|
|
107
107
|
...a,
|
|
@@ -117,8 +117,8 @@ const z = {
|
|
|
117
117
|
{
|
|
118
118
|
as: t,
|
|
119
119
|
size: a.size,
|
|
120
|
-
color:
|
|
121
|
-
className:
|
|
120
|
+
color: d.Text[a.variant][a.color],
|
|
121
|
+
className: s("rounded-tl-0 rounded-bl-0 mr-2", o),
|
|
122
122
|
...r,
|
|
123
123
|
ref: e
|
|
124
124
|
}
|
|
@@ -131,10 +131,10 @@ const z = {
|
|
|
131
131
|
R,
|
|
132
132
|
{
|
|
133
133
|
size: e.size,
|
|
134
|
-
color:
|
|
134
|
+
color: d.Button[e.variant][e.color],
|
|
135
135
|
variant: e.variant,
|
|
136
136
|
icon: { icon: i, alt: "close" },
|
|
137
|
-
className:
|
|
137
|
+
className: s("rounded-tl-0 rounded-bl-0", t),
|
|
138
138
|
...o,
|
|
139
139
|
ref: r
|
|
140
140
|
}
|
|
@@ -147,8 +147,8 @@ const z = {
|
|
|
147
147
|
C,
|
|
148
148
|
{
|
|
149
149
|
size: e.size,
|
|
150
|
-
color:
|
|
151
|
-
className:
|
|
150
|
+
color: d.Icon[e.variant][e.color],
|
|
151
|
+
className: s("rounded-tl-0 rounded-bl-0 mr-1", t),
|
|
152
152
|
...o,
|
|
153
153
|
ref: r
|
|
154
154
|
}
|
|
@@ -166,7 +166,7 @@ const z = {
|
|
|
166
166
|
...m
|
|
167
167
|
}, x) => /* @__PURE__ */ p(f, { color: t, size: o, variant: r, ...m, ref: x, children: [
|
|
168
168
|
e && /* @__PURE__ */ l(y, { ...e }),
|
|
169
|
-
/* @__PURE__ */ l(w, { children: h }),
|
|
169
|
+
/* @__PURE__ */ l(w, { as: "span", children: h }),
|
|
170
170
|
a && /* @__PURE__ */ l(
|
|
171
171
|
g,
|
|
172
172
|
{
|
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 {\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?: React.ComponentProps<typeof TelegraphButton>[\"color\"] & \"default\";\n variant?: \"soft\" | \"solid\";\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<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 = Omit<React.ComponentProps<typeof TelegraphText>, \"as\"> & {\n as: React.ComponentProps<typeof TelegraphText>[\"as\"];\n};\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 text: string;\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>{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 },\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 {\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 Required<T> = {\n [P in keyof T]-?: T[P];\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 = Omit<React.ComponentProps<typeof TelegraphText>, \"as\"> & {\n as: React.ComponentProps<typeof TelegraphText>[\"as\"];\n};\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 text: string;\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.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Button as TelegraphButton } from "@telegraph/button";
|
|
2
1
|
import { Icon as TelegraphIcon } from "@telegraph/icon";
|
|
3
2
|
import { Text as TelegraphText } from "@telegraph/typography";
|
|
4
3
|
import React from "react";
|
|
4
|
+
import { COLOR } from "./Tag.constants";
|
|
5
5
|
type RootBaseProps = {
|
|
6
6
|
size?: "1" | "2";
|
|
7
|
-
color?:
|
|
8
|
-
variant?:
|
|
7
|
+
color?: keyof (typeof COLOR.Root)["soft"];
|
|
8
|
+
variant?: keyof typeof COLOR.Root;
|
|
9
9
|
};
|
|
10
10
|
declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & RootBaseProps & React.RefAttributes<HTMLSpanElement>>;
|
|
11
11
|
type TextProps = Omit<React.ComponentProps<typeof TelegraphText>, "as"> & {
|
|
@@ -13,11 +13,15 @@ type TextProps = Omit<React.ComponentProps<typeof TelegraphText>, "as"> & {
|
|
|
13
13
|
};
|
|
14
14
|
declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>>;
|
|
15
15
|
declare const Button: React.ForwardRefExoticComponent<Omit<{
|
|
16
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
17
|
+
} & Omit<any, "as"> & {
|
|
16
18
|
variant?: "soft" | "solid" | "outline" | "ghost" | undefined;
|
|
17
19
|
size?: "1" | "2" | "3" | undefined;
|
|
18
20
|
color?: "gray" | "accent" | "red" | "blue" | "green" | "yellow" | undefined;
|
|
19
21
|
state?: "default" | "disabled" | "loading" | "error" | "success" | "warning" | undefined;
|
|
20
|
-
} &
|
|
22
|
+
} & {
|
|
23
|
+
ref?: (string | React.Ref<HTMLButtonElement>) | undefined;
|
|
24
|
+
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
25
|
declare const Icon: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement> & {
|
|
22
26
|
icon: string;
|
|
23
27
|
alt: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,IAAI,IAAI,aAAa,EAGtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAQ,MAAM,iBAAiB,CAAC;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;CACnC,CAAC;AAgBF,QAAA,MAAM,IAAI,+HAqBT,CAAC;AAEF,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG;IACxE,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;CACtD,CAAC;AAIF,QAAA,MAAM,IAAI,4KAcT,CAAC;AAKF,QAAA,MAAM,MAAM;;;;;;;;;mDAeX,CAAC;AAKF,QAAA,MAAM,IAAI;;;;;;wFAaT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA6CF,QAAA,MAAM,GAAG;UACD,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Tag as TelegraphTag } from "./Tag";
|
|
3
|
+
declare const meta: Meta<typeof TelegraphTag>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof TelegraphTag>;
|
|
6
|
+
export declare const Tag: Story;
|
|
7
|
+
//# sourceMappingURL=Tag.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,GAAG,IAAI,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAwCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,GAAG,EAAE,KAgBjB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/tag",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
|
|
5
5
|
"author": "@knocklabs",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"preview": "vite preview"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@telegraph/button": "^0.0.
|
|
38
|
-
"@telegraph/icon": "^0.0.
|
|
37
|
+
"@telegraph/button": "^0.0.7",
|
|
38
|
+
"@telegraph/icon": "^0.0.6",
|
|
39
39
|
"@telegraph/typography": "^0.0.8",
|
|
40
40
|
"clsx": "^2.1.0"
|
|
41
41
|
},
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@knocklabs/eslint-config": "^0.0.3",
|
|
44
44
|
"@knocklabs/prettier-config": "^0.0.1",
|
|
45
45
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
46
|
-
"@telegraph/postcss-config": "^0.0.
|
|
46
|
+
"@telegraph/postcss-config": "^0.0.10",
|
|
47
47
|
"@telegraph/tailwind-config": "^0.0.10",
|
|
48
48
|
"@telegraph/vite-config": "^0.0.8",
|
|
49
49
|
"@telegraph/vitest-config": "^0.0.6",
|