@opengovsg/oui-theme 0.0.5 → 0.0.6
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/dist/chunk-7Y2HFACM.js +84 -0
- package/dist/chunk-7Y2HFACM.js.map +1 -0
- package/dist/chunk-ARRSHAJG.mjs +1 -0
- package/dist/chunk-C7FUGWVY.mjs +84 -0
- package/dist/chunk-C7FUGWVY.mjs.map +1 -0
- package/dist/chunk-E7JBRLR5.mjs +283 -0
- package/dist/chunk-E7JBRLR5.mjs.map +1 -0
- package/dist/chunk-JSOQXC4Z.js +283 -0
- package/dist/chunk-JSOQXC4Z.js.map +1 -0
- package/dist/chunk-KUAGUN4H.js +1 -0
- package/dist/{chunk-MNY5DC4A.js.map → chunk-KUAGUN4H.js.map} +1 -1
- package/dist/{chunk-IAY272MS.mjs → chunk-LB4U4MBD.mjs} +23 -23
- package/dist/chunk-LB4U4MBD.mjs.map +1 -0
- package/dist/{chunk-677MPYSL.js → chunk-OHMUYFGR.js} +22 -22
- package/dist/chunk-OHMUYFGR.js.map +1 -0
- package/dist/components/badge.d.mts +404 -0
- package/dist/components/badge.d.ts +404 -0
- package/dist/components/badge.js +18 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/badge.mjs +18 -0
- package/dist/components/badge.mjs.map +1 -0
- package/dist/components/button.d.mts +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.js +3 -3
- package/dist/components/button.mjs +2 -2
- package/dist/components/index.d.mts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +29 -23
- package/dist/components/index.js.map +1 -1
- package/dist/components/index.mjs +30 -24
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +26 -20
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +38 -32
- package/dist/utils/variants.d.mts +68 -7
- package/dist/utils/variants.d.ts +68 -7
- package/dist/utils/variants.js +6 -2
- package/dist/utils/variants.js.map +1 -1
- package/dist/utils/variants.mjs +7 -3
- package/package.json +3 -1
- package/src/variants/base.css +1 -0
- package/dist/chunk-677MPYSL.js.map +0 -1
- package/dist/chunk-AHHCX72Y.mjs +0 -40
- package/dist/chunk-AHHCX72Y.mjs.map +0 -1
- package/dist/chunk-IAY272MS.mjs.map +0 -1
- package/dist/chunk-IG5PS6RH.mjs +0 -1
- package/dist/chunk-MNY5DC4A.js +0 -1
- package/dist/chunk-SNEPLJSL.js +0 -40
- package/dist/chunk-SNEPLJSL.js.map +0 -1
- /package/dist/{chunk-IG5PS6RH.mjs.map → chunk-ARRSHAJG.mjs.map} +0 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
var _chunkZIQLHX3Ujs = require('./chunk-ZIQLHX3U.js');
|
|
4
|
+
|
|
5
|
+
// src/utils/variants.ts
|
|
6
|
+
var _lodashes = require('lodash-es');
|
|
7
|
+
var base = {
|
|
8
|
+
solid: {
|
|
9
|
+
main: "bg-interaction-main-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
10
|
+
sub: "bg-interaction-sub-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
11
|
+
neutral: "bg-interaction-neutral-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
12
|
+
critical: "bg-interaction-critical-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
13
|
+
success: "bg-interaction-success-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
14
|
+
warning: "bg-interaction-warning-default text-base-content-default disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content"
|
|
15
|
+
},
|
|
16
|
+
reverse: {
|
|
17
|
+
main: "bg-utility-ui text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
18
|
+
critical: "bg-utility-ui text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
19
|
+
sub: "bg-utility-ui text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
20
|
+
neutral: "bg-utility-ui text-interaction-neutral-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui"
|
|
21
|
+
},
|
|
22
|
+
outline: {
|
|
23
|
+
main: "border border-interaction-main-default text-interaction-main-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
24
|
+
sub: "border border-interaction-sub-default text-interaction-sub-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
25
|
+
neutral: "border border-base-content-strong text-base-content-strong disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
26
|
+
critical: "border border-interaction-critical-default text-interaction-critical-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
27
|
+
warning: "border border-interaction-warning-default text-interaction-warning-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
28
|
+
inverse: "border border-base-content-inverse text-base-content-inverse disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear"
|
|
29
|
+
},
|
|
30
|
+
clear: {
|
|
31
|
+
main: "border border-utility-ui-clear text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
32
|
+
critical: "border border-utility-ui-clear text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
33
|
+
neutral: "border border-utility-ui-clear text-base-content-strong disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
34
|
+
sub: "border border-utility-ui-clear text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
35
|
+
inverse: "border border-utility-ui-clear text-base-content-inverse disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear"
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
var states = {
|
|
39
|
+
solid: {
|
|
40
|
+
main: "hover:bg-interaction-main-hover active:bg-interaction-main-active pressed:bg-interaction-main-active",
|
|
41
|
+
sub: "hover:bg-interaction-sub-hover active:bg-interaction-sub-active pressed:bg-interaction-sub-active",
|
|
42
|
+
neutral: "hover:bg-interaction-neutral-hover active:bg-interaction-neutral-active pressed:bg-interaction-neutral-active",
|
|
43
|
+
critical: "hover:bg-interaction-critical-hover active:bg-interaction-critical-active pressed:bg-interaction-critical-active",
|
|
44
|
+
success: "hover:bg-interaction-success-hover active:bg-interaction-success-active pressed:bg-interaction-success-active",
|
|
45
|
+
warning: "hover:bg-interaction-warning-hover active:bg-interaction-warning-active pressed:bg-interaction-warning-active"
|
|
46
|
+
},
|
|
47
|
+
reverse: {
|
|
48
|
+
main: "hover:bg-interaction-muted-main-hover active:bg-interaction-muted-main-active pressed:bg-interaction-muted-main-active",
|
|
49
|
+
critical: "hover:bg-interaction-muted-critical-hover active:bg-interaction-muted-critical-active pressed:bg-interaction-muted-critical-active",
|
|
50
|
+
sub: "hover:bg-interaction-muted-sub-hover active:bg-interaction-muted-sub-active pressed:bg-interaction-muted-sub-active",
|
|
51
|
+
neutral: "hover:bg-interaction-muted-neutral-hover active:bg-interaction-muted-neutral-active pressed:bg-interaction-muted-neutral-active"
|
|
52
|
+
},
|
|
53
|
+
outline: {
|
|
54
|
+
main: "hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active",
|
|
55
|
+
sub: "hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active",
|
|
56
|
+
neutral: "hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active",
|
|
57
|
+
critical: "hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active",
|
|
58
|
+
inverse: "hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active"
|
|
59
|
+
},
|
|
60
|
+
clear: {
|
|
61
|
+
main: "hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active",
|
|
62
|
+
critical: "hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active",
|
|
63
|
+
neutral: "hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active",
|
|
64
|
+
sub: "hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active",
|
|
65
|
+
inverse: "hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active"
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
var colorVariants = base;
|
|
69
|
+
var colorVariantsWithState = _lodashes.mergeWith.call(void 0,
|
|
70
|
+
{},
|
|
71
|
+
base,
|
|
72
|
+
states,
|
|
73
|
+
(objValue, srcValue) => {
|
|
74
|
+
if (typeof objValue === "string" && typeof srcValue === "string") {
|
|
75
|
+
return _chunkZIQLHX3Ujs.cn.call(void 0, objValue, srcValue);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
exports.colorVariants = colorVariants; exports.colorVariantsWithState = colorVariantsWithState;
|
|
84
|
+
//# sourceMappingURL=chunk-7Y2HFACM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-7Y2HFACM.js","../src/utils/variants.ts"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B;AACA;ACJA,qCAA0B;AAI1B,IAAM,KAAA,EAAO;AAAA,EACX,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mJAAA;AAAA,IACN,GAAA,EAAK,kJAAA;AAAA,IACL,OAAA,EACE,sJAAA;AAAA,IACF,QAAA,EACE,uJAAA;AAAA,IACF,OAAA,EACE,sJAAA;AAAA,IACF,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,uHAAA;AAAA,IACN,QAAA,EACE,2HAAA;AAAA,IACF,GAAA,EAAK,sHAAA;AAAA,IACL,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,2MAAA;AAAA,IACN,GAAA,EAAK,yMAAA;AAAA,IACL,OAAA,EACE,iMAAA;AAAA,IACF,QAAA,EACE,mNAAA;AAAA,IACF,OAAA,EACE,iNAAA;AAAA,IACF,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8IAAA;AAAA,IACN,QAAA,EACE,kJAAA;AAAA,IACF,OAAA,EACE,yIAAA;AAAA,IACF,GAAA,EAAK,6IAAA;AAAA,IACL,OAAA,EACE;AAAA,EACJ;AACF,CAAA;AAEA,IAAM,OAAA,EAAS;AAAA,EACb,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,sGAAA;AAAA,IACN,GAAA,EAAK,mGAAA;AAAA,IACL,OAAA,EACE,+GAAA;AAAA,IACF,QAAA,EACE,kHAAA;AAAA,IACF,OAAA,EACE,+GAAA;AAAA,IACF,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,wHAAA;AAAA,IACN,QAAA,EACE,oIAAA;AAAA,IACF,GAAA,EAAK,qHAAA;AAAA,IACL,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,2HAAA;AAAA,IACN,GAAA,EAAK,wHAAA;AAAA,IACL,OAAA,EACE,oIAAA;AAAA,IACF,QAAA,EACE,uIAAA;AAAA,IACF,OAAA,EACE;AAAA,EACJ,CAAA;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,2HAAA;AAAA,IACN,QAAA,EACE,uIAAA;AAAA,IACF,OAAA,EACE,oIAAA;AAAA,IACF,GAAA,EAAK,wHAAA;AAAA,IACL,OAAA,EACE;AAAA,EACJ;AACF,CAAA;AAEO,IAAM,cAAA,EAAgB,IAAA;AAEtB,IAAM,uBAAA,EAAyB,iCAAA;AAAA,EACpC,CAAC,CAAA;AAAA,EACD,IAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,QAAA,EAAU,QAAA,EAAA,GAAa;AACtB,IAAA,GAAA,CAAI,OAAO,SAAA,IAAa,SAAA,GAAY,OAAO,SAAA,IAAa,QAAA,EAAU;AAChE,MAAA,OAAO,iCAAA,QAAG,EAAU,QAAQ,CAAA;AAAA,IAC9B;AAAA,EACF;AACF,CAAA;ADzBA;AACA;AACE;AACA;AACF,+FAAC","file":"/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-7Y2HFACM.js","sourcesContent":[null,"import { mergeWith } from \"lodash-es\"\n\nimport { cn } from \"./cn\"\n\nconst base = {\n solid: {\n main: \"bg-interaction-main-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n sub: \"bg-interaction-sub-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n neutral:\n \"bg-interaction-neutral-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n critical:\n \"bg-interaction-critical-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n success:\n \"bg-interaction-success-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n warning:\n \"bg-interaction-warning-default text-base-content-default disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n },\n reverse: {\n main: \"bg-utility-ui text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n critical:\n \"bg-utility-ui text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n sub: \"bg-utility-ui text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n neutral:\n \"bg-utility-ui text-interaction-neutral-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n },\n outline: {\n main: \"border border-interaction-main-default text-interaction-main-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n sub: \"border border-interaction-sub-default text-interaction-sub-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n neutral:\n \"border border-base-content-strong text-base-content-strong disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n critical:\n \"border border-interaction-critical-default text-interaction-critical-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n warning:\n \"border border-interaction-warning-default text-interaction-warning-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n inverse:\n \"border border-base-content-inverse text-base-content-inverse disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n },\n clear: {\n main: \"border border-utility-ui-clear text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n critical:\n \"border border-utility-ui-clear text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n neutral:\n \"border border-utility-ui-clear text-base-content-strong disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n sub: \"border border-utility-ui-clear text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n inverse:\n \"border border-utility-ui-clear text-base-content-inverse disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n },\n}\n\nconst states = {\n solid: {\n main: \"hover:bg-interaction-main-hover active:bg-interaction-main-active pressed:bg-interaction-main-active\",\n sub: \"hover:bg-interaction-sub-hover active:bg-interaction-sub-active pressed:bg-interaction-sub-active\",\n neutral:\n \"hover:bg-interaction-neutral-hover active:bg-interaction-neutral-active pressed:bg-interaction-neutral-active\",\n critical:\n \"hover:bg-interaction-critical-hover active:bg-interaction-critical-active pressed:bg-interaction-critical-active\",\n success:\n \"hover:bg-interaction-success-hover active:bg-interaction-success-active pressed:bg-interaction-success-active\",\n warning:\n \"hover:bg-interaction-warning-hover active:bg-interaction-warning-active pressed:bg-interaction-warning-active\",\n },\n reverse: {\n main: \"hover:bg-interaction-muted-main-hover active:bg-interaction-muted-main-active pressed:bg-interaction-muted-main-active\",\n critical:\n \"hover:bg-interaction-muted-critical-hover active:bg-interaction-muted-critical-active pressed:bg-interaction-muted-critical-active\",\n sub: \"hover:bg-interaction-muted-sub-hover active:bg-interaction-muted-sub-active pressed:bg-interaction-muted-sub-active\",\n neutral:\n \"hover:bg-interaction-muted-neutral-hover active:bg-interaction-muted-neutral-active pressed:bg-interaction-muted-neutral-active\",\n },\n outline: {\n main: \"hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active\",\n sub: \"hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active\",\n neutral:\n \"hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active\",\n critical:\n \"hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active\",\n inverse:\n \"hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active\",\n },\n clear: {\n main: \"hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active\",\n critical:\n \"hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active\",\n neutral:\n \"hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active\",\n sub: \"hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active\",\n inverse:\n \"hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active\",\n },\n}\n\nexport const colorVariants = base\n\nexport const colorVariantsWithState = mergeWith(\n {},\n base,\n states,\n (objValue, srcValue) => {\n if (typeof objValue === \"string\" && typeof srcValue === \"string\") {\n return cn(objValue, srcValue)\n }\n },\n)\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-ARRSHAJG.mjs.map
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "./chunk-HAUMMW6T.mjs";
|
|
4
|
+
|
|
5
|
+
// src/utils/variants.ts
|
|
6
|
+
import { mergeWith } from "lodash-es";
|
|
7
|
+
var base = {
|
|
8
|
+
solid: {
|
|
9
|
+
main: "bg-interaction-main-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
10
|
+
sub: "bg-interaction-sub-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
11
|
+
neutral: "bg-interaction-neutral-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
12
|
+
critical: "bg-interaction-critical-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
13
|
+
success: "bg-interaction-success-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content",
|
|
14
|
+
warning: "bg-interaction-warning-default text-base-content-default disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content"
|
|
15
|
+
},
|
|
16
|
+
reverse: {
|
|
17
|
+
main: "bg-utility-ui text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
18
|
+
critical: "bg-utility-ui text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
19
|
+
sub: "bg-utility-ui text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui",
|
|
20
|
+
neutral: "bg-utility-ui text-interaction-neutral-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui"
|
|
21
|
+
},
|
|
22
|
+
outline: {
|
|
23
|
+
main: "border border-interaction-main-default text-interaction-main-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
24
|
+
sub: "border border-interaction-sub-default text-interaction-sub-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
25
|
+
neutral: "border border-base-content-strong text-base-content-strong disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
26
|
+
critical: "border border-interaction-critical-default text-interaction-critical-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
27
|
+
warning: "border border-interaction-warning-default text-interaction-warning-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
28
|
+
inverse: "border border-base-content-inverse text-base-content-inverse disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear"
|
|
29
|
+
},
|
|
30
|
+
clear: {
|
|
31
|
+
main: "border border-utility-ui-clear text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
32
|
+
critical: "border border-utility-ui-clear text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
33
|
+
neutral: "border border-utility-ui-clear text-base-content-strong disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
34
|
+
sub: "border border-utility-ui-clear text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear",
|
|
35
|
+
inverse: "border border-utility-ui-clear text-base-content-inverse disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear"
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
var states = {
|
|
39
|
+
solid: {
|
|
40
|
+
main: "hover:bg-interaction-main-hover active:bg-interaction-main-active pressed:bg-interaction-main-active",
|
|
41
|
+
sub: "hover:bg-interaction-sub-hover active:bg-interaction-sub-active pressed:bg-interaction-sub-active",
|
|
42
|
+
neutral: "hover:bg-interaction-neutral-hover active:bg-interaction-neutral-active pressed:bg-interaction-neutral-active",
|
|
43
|
+
critical: "hover:bg-interaction-critical-hover active:bg-interaction-critical-active pressed:bg-interaction-critical-active",
|
|
44
|
+
success: "hover:bg-interaction-success-hover active:bg-interaction-success-active pressed:bg-interaction-success-active",
|
|
45
|
+
warning: "hover:bg-interaction-warning-hover active:bg-interaction-warning-active pressed:bg-interaction-warning-active"
|
|
46
|
+
},
|
|
47
|
+
reverse: {
|
|
48
|
+
main: "hover:bg-interaction-muted-main-hover active:bg-interaction-muted-main-active pressed:bg-interaction-muted-main-active",
|
|
49
|
+
critical: "hover:bg-interaction-muted-critical-hover active:bg-interaction-muted-critical-active pressed:bg-interaction-muted-critical-active",
|
|
50
|
+
sub: "hover:bg-interaction-muted-sub-hover active:bg-interaction-muted-sub-active pressed:bg-interaction-muted-sub-active",
|
|
51
|
+
neutral: "hover:bg-interaction-muted-neutral-hover active:bg-interaction-muted-neutral-active pressed:bg-interaction-muted-neutral-active"
|
|
52
|
+
},
|
|
53
|
+
outline: {
|
|
54
|
+
main: "hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active",
|
|
55
|
+
sub: "hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active",
|
|
56
|
+
neutral: "hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active",
|
|
57
|
+
critical: "hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active",
|
|
58
|
+
inverse: "hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active"
|
|
59
|
+
},
|
|
60
|
+
clear: {
|
|
61
|
+
main: "hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active",
|
|
62
|
+
critical: "hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active",
|
|
63
|
+
neutral: "hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active",
|
|
64
|
+
sub: "hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active",
|
|
65
|
+
inverse: "hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active"
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
var colorVariants = base;
|
|
69
|
+
var colorVariantsWithState = mergeWith(
|
|
70
|
+
{},
|
|
71
|
+
base,
|
|
72
|
+
states,
|
|
73
|
+
(objValue, srcValue) => {
|
|
74
|
+
if (typeof objValue === "string" && typeof srcValue === "string") {
|
|
75
|
+
return cn(objValue, srcValue);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
export {
|
|
81
|
+
colorVariants,
|
|
82
|
+
colorVariantsWithState
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=chunk-C7FUGWVY.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/variants.ts"],"sourcesContent":["import { mergeWith } from \"lodash-es\"\n\nimport { cn } from \"./cn\"\n\nconst base = {\n solid: {\n main: \"bg-interaction-main-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n sub: \"bg-interaction-sub-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n neutral:\n \"bg-interaction-neutral-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n critical:\n \"bg-interaction-critical-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n success:\n \"bg-interaction-success-default text-base-content-inverse disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n warning:\n \"bg-interaction-warning-default text-base-content-default disabled:bg-interaction-support-disabled disabled:text-interaction-support-disabled-content\",\n },\n reverse: {\n main: \"bg-utility-ui text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n critical:\n \"bg-utility-ui text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n sub: \"bg-utility-ui text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n neutral:\n \"bg-utility-ui text-interaction-neutral-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui\",\n },\n outline: {\n main: \"border border-interaction-main-default text-interaction-main-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n sub: \"border border-interaction-sub-default text-interaction-sub-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n neutral:\n \"border border-base-content-strong text-base-content-strong disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n critical:\n \"border border-interaction-critical-default text-interaction-critical-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n warning:\n \"border border-interaction-warning-default text-interaction-warning-default disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n inverse:\n \"border border-base-content-inverse text-base-content-inverse disabled:border-interaction-support-disabled-content disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n },\n clear: {\n main: \"border border-utility-ui-clear text-interaction-main-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n critical:\n \"border border-utility-ui-clear text-interaction-critical-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n neutral:\n \"border border-utility-ui-clear text-base-content-strong disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n sub: \"border border-utility-ui-clear text-interaction-sub-default disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n inverse:\n \"border border-utility-ui-clear text-base-content-inverse disabled:text-interaction-support-disabled-content disabled:bg-utility-ui-clear\",\n },\n}\n\nconst states = {\n solid: {\n main: \"hover:bg-interaction-main-hover active:bg-interaction-main-active pressed:bg-interaction-main-active\",\n sub: \"hover:bg-interaction-sub-hover active:bg-interaction-sub-active pressed:bg-interaction-sub-active\",\n neutral:\n \"hover:bg-interaction-neutral-hover active:bg-interaction-neutral-active pressed:bg-interaction-neutral-active\",\n critical:\n \"hover:bg-interaction-critical-hover active:bg-interaction-critical-active pressed:bg-interaction-critical-active\",\n success:\n \"hover:bg-interaction-success-hover active:bg-interaction-success-active pressed:bg-interaction-success-active\",\n warning:\n \"hover:bg-interaction-warning-hover active:bg-interaction-warning-active pressed:bg-interaction-warning-active\",\n },\n reverse: {\n main: \"hover:bg-interaction-muted-main-hover active:bg-interaction-muted-main-active pressed:bg-interaction-muted-main-active\",\n critical:\n \"hover:bg-interaction-muted-critical-hover active:bg-interaction-muted-critical-active pressed:bg-interaction-muted-critical-active\",\n sub: \"hover:bg-interaction-muted-sub-hover active:bg-interaction-muted-sub-active pressed:bg-interaction-muted-sub-active\",\n neutral:\n \"hover:bg-interaction-muted-neutral-hover active:bg-interaction-muted-neutral-active pressed:bg-interaction-muted-neutral-active\",\n },\n outline: {\n main: \"hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active\",\n sub: \"hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active\",\n neutral:\n \"hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active\",\n critical:\n \"hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active\",\n inverse:\n \"hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active\",\n },\n clear: {\n main: \"hover:bg-interaction-tinted-main-hover active:bg-interaction-tinted-main-active pressed:bg-interaction-tinted-main-active\",\n critical:\n \"hover:bg-interaction-tinted-critical-hover active:bg-interaction-tinted-critical-active pressed:bg-interaction-tinted-critical-active\",\n neutral:\n \"hover:bg-interaction-tinted-neutral-hover active:bg-interaction-tinted-neutral-active pressed:bg-interaction-tinted-neutral-active\",\n sub: \"hover:bg-interaction-tinted-sub-hover active:bg-interaction-tinted-sub-active pressed:bg-interaction-tinted-sub-active\",\n inverse:\n \"hover:bg-interaction-tinted-inverse-hover active:bg-interaction-tinted-inverse-active pressed:bg-interaction-tinted-inverse-active\",\n },\n}\n\nexport const colorVariants = base\n\nexport const colorVariantsWithState = mergeWith(\n {},\n base,\n states,\n (objValue, srcValue) => {\n if (typeof objValue === \"string\" && typeof srcValue === \"string\") {\n return cn(objValue, srcValue)\n }\n },\n)\n"],"mappings":";;;;;AAAA,SAAS,iBAAiB;AAI1B,IAAM,OAAO;AAAA,EACX,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SACE;AAAA,IACF,UACE;AAAA,IACF,SACE;AAAA,IACF,SACE;AAAA,EACJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UACE;AAAA,IACF,KAAK;AAAA,IACL,SACE;AAAA,EACJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SACE;AAAA,IACF,UACE;AAAA,IACF,SACE;AAAA,IACF,SACE;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,UACE;AAAA,IACF,SACE;AAAA,IACF,KAAK;AAAA,IACL,SACE;AAAA,EACJ;AACF;AAEA,IAAM,SAAS;AAAA,EACb,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SACE;AAAA,IACF,UACE;AAAA,IACF,SACE;AAAA,IACF,SACE;AAAA,EACJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UACE;AAAA,IACF,KAAK;AAAA,IACL,SACE;AAAA,EACJ;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SACE;AAAA,IACF,UACE;AAAA,IACF,SACE;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,UACE;AAAA,IACF,SACE;AAAA,IACF,KAAK;AAAA,IACL,SACE;AAAA,EACJ;AACF;AAEO,IAAM,gBAAgB;AAEtB,IAAM,yBAAyB;AAAA,EACpC,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA,CAAC,UAAU,aAAa;AACtB,QAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,aAAO,GAAG,UAAU,QAAQ;AAAA,IAC9B;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colorVariants,
|
|
3
|
+
colorVariantsWithState
|
|
4
|
+
} from "./chunk-C7FUGWVY.mjs";
|
|
5
|
+
import {
|
|
6
|
+
racFocusRing
|
|
7
|
+
} from "./chunk-SFKXXWVK.mjs";
|
|
8
|
+
import {
|
|
9
|
+
cn
|
|
10
|
+
} from "./chunk-HAUMMW6T.mjs";
|
|
11
|
+
import {
|
|
12
|
+
tv
|
|
13
|
+
} from "./chunk-4JENAMGV.mjs";
|
|
14
|
+
|
|
15
|
+
// src/components/badge.ts
|
|
16
|
+
var badgeCloseButtonStyles = tv({
|
|
17
|
+
extend: racFocusRing,
|
|
18
|
+
base: cn(
|
|
19
|
+
colorVariantsWithState.clear.neutral,
|
|
20
|
+
"inline-flex cursor-pointer items-center justify-center rounded-full text-inherit transition"
|
|
21
|
+
),
|
|
22
|
+
variants: {
|
|
23
|
+
size: {
|
|
24
|
+
xs: "size-3",
|
|
25
|
+
sm: "size-4",
|
|
26
|
+
md: "size-4"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
size: "sm"
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
var badgeStyles = tv({
|
|
34
|
+
slots: {
|
|
35
|
+
base: "relative box-border inline-flex max-w-fit min-w-min items-center justify-between whitespace-nowrap",
|
|
36
|
+
dot: "",
|
|
37
|
+
content: "flex-1 text-inherit"
|
|
38
|
+
},
|
|
39
|
+
variants: {
|
|
40
|
+
isCloseable: {
|
|
41
|
+
true: ""
|
|
42
|
+
},
|
|
43
|
+
isDisabled: {
|
|
44
|
+
true: { base: "pointer-events-none opacity-60" }
|
|
45
|
+
},
|
|
46
|
+
variant: {
|
|
47
|
+
solid: {},
|
|
48
|
+
subtle: {},
|
|
49
|
+
outline: {
|
|
50
|
+
base: "border"
|
|
51
|
+
},
|
|
52
|
+
dot: {
|
|
53
|
+
base: "text-base-content-default",
|
|
54
|
+
dot: "mr-1 rounded-full"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
size: {
|
|
58
|
+
xs: {
|
|
59
|
+
base: "prose-legal h-5 gap-1 px-2 py-1",
|
|
60
|
+
dot: "size-1.5"
|
|
61
|
+
},
|
|
62
|
+
sm: {
|
|
63
|
+
base: "prose-caption-1 h-6 gap-1 px-2 py-1",
|
|
64
|
+
dot: "size-2"
|
|
65
|
+
},
|
|
66
|
+
md: {
|
|
67
|
+
base: "prose-body-2 h-7 gap-1 px-2.5 py-1",
|
|
68
|
+
dot: "size-2"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
color: {
|
|
72
|
+
main: "",
|
|
73
|
+
sub: "",
|
|
74
|
+
success: "",
|
|
75
|
+
neutral: "",
|
|
76
|
+
warning: "",
|
|
77
|
+
critical: ""
|
|
78
|
+
},
|
|
79
|
+
radius: {
|
|
80
|
+
none: {
|
|
81
|
+
base: "rounded-none"
|
|
82
|
+
},
|
|
83
|
+
sm: {
|
|
84
|
+
base: "rounded-sm"
|
|
85
|
+
},
|
|
86
|
+
md: {
|
|
87
|
+
base: "rounded-md"
|
|
88
|
+
},
|
|
89
|
+
lg: {
|
|
90
|
+
base: "rounded-lg"
|
|
91
|
+
},
|
|
92
|
+
full: {
|
|
93
|
+
base: "rounded-full"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
compoundVariants: [
|
|
98
|
+
// solid / color
|
|
99
|
+
{
|
|
100
|
+
variant: "solid",
|
|
101
|
+
color: "main",
|
|
102
|
+
className: {
|
|
103
|
+
base: colorVariants.solid.main
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
variant: "solid",
|
|
108
|
+
color: "sub",
|
|
109
|
+
className: {
|
|
110
|
+
base: colorVariants.solid.sub
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
variant: "solid",
|
|
115
|
+
color: "neutral",
|
|
116
|
+
className: {
|
|
117
|
+
base: colorVariants.solid.neutral
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
variant: "solid",
|
|
122
|
+
color: "critical",
|
|
123
|
+
className: {
|
|
124
|
+
base: colorVariants.solid.critical
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
variant: "solid",
|
|
129
|
+
color: "warning",
|
|
130
|
+
className: {
|
|
131
|
+
base: colorVariants.solid.warning
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
variant: "solid",
|
|
136
|
+
color: "success",
|
|
137
|
+
className: {
|
|
138
|
+
base: colorVariants.solid.success
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
// subtle / color
|
|
142
|
+
{
|
|
143
|
+
variant: "subtle",
|
|
144
|
+
color: "main",
|
|
145
|
+
className: {
|
|
146
|
+
base: "bg-interaction-main-subtle-default text-interaction-main-default"
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
variant: "subtle",
|
|
151
|
+
color: "sub",
|
|
152
|
+
className: {
|
|
153
|
+
base: "bg-interaction-sub-subtle-default text-interaction-sub-default"
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
variant: "subtle",
|
|
158
|
+
color: "neutral",
|
|
159
|
+
className: {
|
|
160
|
+
base: "bg-interaction-neutral-subtle-default text-base-content-default"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
variant: "subtle",
|
|
165
|
+
color: "success",
|
|
166
|
+
className: {
|
|
167
|
+
base: "bg-interaction-success-subtle-default text-interaction-success-active"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
variant: "subtle",
|
|
172
|
+
color: "warning",
|
|
173
|
+
className: {
|
|
174
|
+
base: "bg-interaction-warning-subtle-default text-utility-feedback-warning-strong"
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
variant: "subtle",
|
|
179
|
+
color: "critical",
|
|
180
|
+
className: {
|
|
181
|
+
base: "bg-interaction-critical-subtle-default text-interaction-critical-default"
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
// outline / color
|
|
185
|
+
{
|
|
186
|
+
variant: "outline",
|
|
187
|
+
color: "main",
|
|
188
|
+
className: {
|
|
189
|
+
base: "bg-interaction-main-subtle-default text-interaction-main-default border-interaction-main-subtle-hover"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
variant: "outline",
|
|
194
|
+
color: "sub",
|
|
195
|
+
className: {
|
|
196
|
+
base: "bg-interaction-sub-subtle-default text-interaction-sub-default border-interaction-sub-subtle-hover"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
variant: "outline",
|
|
201
|
+
color: "neutral",
|
|
202
|
+
className: {
|
|
203
|
+
base: "bg-interaction-neutral-subtle-default text-base-content-default border-interaction-neutral-subtle-hover"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
variant: "outline",
|
|
208
|
+
color: "success",
|
|
209
|
+
className: {
|
|
210
|
+
base: "bg-interaction-success-subtle-default text-interaction-success-active border-interaction-success-subtle-hover"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
variant: "outline",
|
|
215
|
+
color: "warning",
|
|
216
|
+
className: {
|
|
217
|
+
base: "bg-interaction-warning-subtle-default text-utility-feedback-warning-strong border-interaction-warning-hover"
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
variant: "outline",
|
|
222
|
+
color: "critical",
|
|
223
|
+
className: {
|
|
224
|
+
base: "bg-interaction-critical-subtle-default text-interaction-critical-default border-interaction-critical-subtle-hover"
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
// dot / color
|
|
228
|
+
{
|
|
229
|
+
variant: "dot",
|
|
230
|
+
color: "main",
|
|
231
|
+
className: {
|
|
232
|
+
dot: "bg-interaction-main-default"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
variant: "dot",
|
|
237
|
+
color: "sub",
|
|
238
|
+
className: {
|
|
239
|
+
dot: "bg-interaction-sub-default"
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
variant: "dot",
|
|
244
|
+
color: "neutral",
|
|
245
|
+
className: {
|
|
246
|
+
dot: "bg-interaction-neutral-default"
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
variant: "dot",
|
|
251
|
+
color: "critical",
|
|
252
|
+
className: {
|
|
253
|
+
dot: "bg-interaction-critical-default"
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
variant: "dot",
|
|
258
|
+
color: "warning",
|
|
259
|
+
className: {
|
|
260
|
+
dot: "bg-interaction-warning-default"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
variant: "dot",
|
|
265
|
+
color: "success",
|
|
266
|
+
className: {
|
|
267
|
+
dot: "bg-interaction-success-default"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
],
|
|
271
|
+
defaultVariants: {
|
|
272
|
+
variant: "solid",
|
|
273
|
+
color: "main",
|
|
274
|
+
size: "sm",
|
|
275
|
+
radius: "sm"
|
|
276
|
+
}
|
|
277
|
+
});
|
|
278
|
+
|
|
279
|
+
export {
|
|
280
|
+
badgeCloseButtonStyles,
|
|
281
|
+
badgeStyles
|
|
282
|
+
};
|
|
283
|
+
//# sourceMappingURL=chunk-E7JBRLR5.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/badge.ts"],"sourcesContent":["import type { VariantProps } from \"tailwind-variants\"\n\nimport { cn } from \"../utils\"\nimport { racFocusRing } from \"../utils/classes\"\nimport { tv } from \"../utils/tv\"\nimport { colorVariants, colorVariantsWithState } from \"../utils/variants\"\n\nexport const badgeCloseButtonStyles = tv({\n extend: racFocusRing,\n base: cn(\n colorVariantsWithState.clear.neutral,\n \"inline-flex cursor-pointer items-center justify-center rounded-full text-inherit transition\",\n ),\n variants: {\n size: {\n xs: \"size-3\",\n sm: \"size-4\",\n md: \"size-4\",\n },\n },\n defaultVariants: {\n size: \"sm\",\n },\n})\n\nexport const badgeStyles = tv({\n slots: {\n base: \"relative box-border inline-flex max-w-fit min-w-min items-center justify-between whitespace-nowrap\",\n dot: \"\",\n content: \"flex-1 text-inherit\",\n },\n variants: {\n isCloseable: {\n true: \"\",\n },\n isDisabled: {\n true: { base: \"pointer-events-none opacity-60\" },\n },\n variant: {\n solid: {},\n subtle: {},\n outline: {\n base: \"border\",\n },\n dot: {\n base: \"text-base-content-default\",\n dot: \"mr-1 rounded-full\",\n },\n },\n size: {\n xs: {\n base: \"prose-legal h-5 gap-1 px-2 py-1\",\n dot: \"size-1.5\",\n },\n sm: {\n base: \"prose-caption-1 h-6 gap-1 px-2 py-1\",\n dot: \"size-2\",\n },\n md: {\n base: \"prose-body-2 h-7 gap-1 px-2.5 py-1\",\n dot: \"size-2\",\n },\n },\n color: {\n main: \"\",\n sub: \"\",\n success: \"\",\n neutral: \"\",\n warning: \"\",\n critical: \"\",\n },\n radius: {\n none: {\n base: \"rounded-none\",\n },\n sm: {\n base: \"rounded-sm\",\n },\n md: {\n base: \"rounded-md\",\n },\n lg: {\n base: \"rounded-lg\",\n },\n full: {\n base: \"rounded-full\",\n },\n },\n },\n compoundVariants: [\n // solid / color\n {\n variant: \"solid\",\n color: \"main\",\n className: {\n base: colorVariants.solid.main,\n },\n },\n {\n variant: \"solid\",\n color: \"sub\",\n className: {\n base: colorVariants.solid.sub,\n },\n },\n {\n variant: \"solid\",\n color: \"neutral\",\n className: {\n base: colorVariants.solid.neutral,\n },\n },\n {\n variant: \"solid\",\n color: \"critical\",\n className: {\n base: colorVariants.solid.critical,\n },\n },\n {\n variant: \"solid\",\n color: \"warning\",\n className: {\n base: colorVariants.solid.warning,\n },\n },\n {\n variant: \"solid\",\n color: \"success\",\n className: {\n base: colorVariants.solid.success,\n },\n },\n // subtle / color\n {\n variant: \"subtle\",\n color: \"main\",\n className: {\n base: \"bg-interaction-main-subtle-default text-interaction-main-default\",\n },\n },\n {\n variant: \"subtle\",\n color: \"sub\",\n className: {\n base: \"bg-interaction-sub-subtle-default text-interaction-sub-default\",\n },\n },\n {\n variant: \"subtle\",\n color: \"neutral\",\n className: {\n base: \"bg-interaction-neutral-subtle-default text-base-content-default\",\n },\n },\n {\n variant: \"subtle\",\n color: \"success\",\n className: {\n base: \"bg-interaction-success-subtle-default text-interaction-success-active\",\n },\n },\n {\n variant: \"subtle\",\n color: \"warning\",\n className: {\n base: \"bg-interaction-warning-subtle-default text-utility-feedback-warning-strong\",\n },\n },\n {\n variant: \"subtle\",\n color: \"critical\",\n className: {\n base: \"bg-interaction-critical-subtle-default text-interaction-critical-default\",\n },\n },\n // outline / color\n {\n variant: \"outline\",\n color: \"main\",\n className: {\n base: \"bg-interaction-main-subtle-default text-interaction-main-default border-interaction-main-subtle-hover\",\n },\n },\n {\n variant: \"outline\",\n color: \"sub\",\n className: {\n base: \"bg-interaction-sub-subtle-default text-interaction-sub-default border-interaction-sub-subtle-hover\",\n },\n },\n {\n variant: \"outline\",\n color: \"neutral\",\n className: {\n base: \"bg-interaction-neutral-subtle-default text-base-content-default border-interaction-neutral-subtle-hover\",\n },\n },\n {\n variant: \"outline\",\n color: \"success\",\n className: {\n base: \"bg-interaction-success-subtle-default text-interaction-success-active border-interaction-success-subtle-hover\",\n },\n },\n {\n variant: \"outline\",\n color: \"warning\",\n className: {\n base: \"bg-interaction-warning-subtle-default text-utility-feedback-warning-strong border-interaction-warning-hover\",\n },\n },\n {\n variant: \"outline\",\n color: \"critical\",\n className: {\n base: \"bg-interaction-critical-subtle-default text-interaction-critical-default border-interaction-critical-subtle-hover\",\n },\n },\n // dot / color\n {\n variant: \"dot\",\n color: \"main\",\n className: {\n dot: \"bg-interaction-main-default\",\n },\n },\n {\n variant: \"dot\",\n color: \"sub\",\n className: {\n dot: \"bg-interaction-sub-default\",\n },\n },\n {\n variant: \"dot\",\n color: \"neutral\",\n className: {\n dot: \"bg-interaction-neutral-default\",\n },\n },\n {\n variant: \"dot\",\n color: \"critical\",\n className: {\n dot: \"bg-interaction-critical-default\",\n },\n },\n {\n variant: \"dot\",\n color: \"warning\",\n className: {\n dot: \"bg-interaction-warning-default\",\n },\n },\n {\n variant: \"dot\",\n color: \"success\",\n className: {\n dot: \"bg-interaction-success-default\",\n },\n },\n ],\n defaultVariants: {\n variant: \"solid\",\n color: \"main\",\n size: \"sm\",\n radius: \"sm\",\n },\n})\n\nexport type BadgeVariantProps = VariantProps<typeof badgeStyles>\nexport type BadgeSlots = keyof typeof badgeStyles.slots\n"],"mappings":"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","names":[]}
|