@wrdagency/blockout 0.1.1 → 0.1.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/dist/Circle.es-B6Ug9Tpf.js +30 -0
- package/dist/IconBase.es-rM5tt24D.js +48 -0
- package/dist/assets/index.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index17.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index5.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/assets/style.css +1 -1
- package/dist/components/controls/base-control/index.js +33 -23
- package/dist/components/controls/choice-control/choice.js +65 -31
- package/dist/components/controls/password-control/index.js +1 -1
- package/dist/components/controls/recurrence-control/index.js +70 -94
- package/dist/components/controls/select-control/component.js +491 -483
- package/dist/components/filesystem/icon.js +120 -163
- package/dist/components/form/components/step.js +24 -21
- package/dist/components/menu/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as e from "react";
|
|
2
|
+
const t = /* @__PURE__ */ new Map([
|
|
3
|
+
[
|
|
4
|
+
"bold",
|
|
5
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Z" }))
|
|
6
|
+
],
|
|
7
|
+
[
|
|
8
|
+
"duotone",
|
|
9
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ e.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z" }))
|
|
10
|
+
],
|
|
11
|
+
[
|
|
12
|
+
"fill",
|
|
13
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z" }))
|
|
14
|
+
],
|
|
15
|
+
[
|
|
16
|
+
"light",
|
|
17
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Z" }))
|
|
18
|
+
],
|
|
19
|
+
[
|
|
20
|
+
"regular",
|
|
21
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z" }))
|
|
22
|
+
],
|
|
23
|
+
[
|
|
24
|
+
"thin",
|
|
25
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Z" }))
|
|
26
|
+
]
|
|
27
|
+
]);
|
|
28
|
+
export {
|
|
29
|
+
t
|
|
30
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as r from "react";
|
|
2
|
+
import { createContext as h } from "react";
|
|
3
|
+
const p = h({
|
|
4
|
+
color: "currentColor",
|
|
5
|
+
size: "1em",
|
|
6
|
+
weight: "regular",
|
|
7
|
+
mirrored: !1
|
|
8
|
+
}), x = r.forwardRef(
|
|
9
|
+
(n, s) => {
|
|
10
|
+
const {
|
|
11
|
+
alt: t,
|
|
12
|
+
color: o,
|
|
13
|
+
size: e,
|
|
14
|
+
weight: l,
|
|
15
|
+
mirrored: a,
|
|
16
|
+
children: c,
|
|
17
|
+
weights: m,
|
|
18
|
+
...g
|
|
19
|
+
} = n, {
|
|
20
|
+
color: w = "currentColor",
|
|
21
|
+
size: i,
|
|
22
|
+
weight: u = "regular",
|
|
23
|
+
mirrored: f = !1,
|
|
24
|
+
...d
|
|
25
|
+
} = r.useContext(p);
|
|
26
|
+
return /* @__PURE__ */ r.createElement(
|
|
27
|
+
"svg",
|
|
28
|
+
{
|
|
29
|
+
ref: s,
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
+
width: e ?? i,
|
|
32
|
+
height: e ?? i,
|
|
33
|
+
fill: o ?? w,
|
|
34
|
+
viewBox: "0 0 256 256",
|
|
35
|
+
transform: a || f ? "scale(-1, 1)" : void 0,
|
|
36
|
+
...d,
|
|
37
|
+
...g
|
|
38
|
+
},
|
|
39
|
+
!!t && /* @__PURE__ */ r.createElement("title", null, t),
|
|
40
|
+
c,
|
|
41
|
+
m.get(l ?? u)
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
x.displayName = "IconBase";
|
|
46
|
+
export {
|
|
47
|
+
x as p
|
|
48
|
+
};
|
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-colour-scheme=light],[data-colour-scheme=dark] [data-colour-scheme=invert]{--blockout__colours__surface--0: #ffffff;--blockout__colours__surface--50: #fafaf9;--blockout__colours__surface--100: #f5f5f4;--blockout__colours__surface--200: #e7e5e4;--blockout__colours__surface--300: #d6d3d1;--blockout__colours__surface--400: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--600: #57534e;--blockout__colours__surface--700: #44403c;--blockout__colours__surface--800: #292524;--blockout__colours__surface--900: #1c1917;--blockout__colours__surface--950: #0c0a09;--blockout__colours__primary--50: #fffbeb;--blockout__colours__primary--100: #fef3c6;--blockout__colours__primary--200: #fee685;--blockout__colours__primary--300: #ffd230;--blockout__colours__primary--400: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--600: #e17100;--blockout__colours__primary--700: #bb4d00;--blockout__colours__primary--800: #973c00;--blockout__colours__primary--900: #7a3306;--blockout__colours__primary--950: #461901;color-scheme:light;color:var(--blockout__colours__surface--950)}[data-colour-scheme=dark],:root [data-colour-scheme=invert]{--blockout__colours__surface--950: #fafaf9;--blockout__colours__surface--900: #f5f5f4;--blockout__colours__surface--800: #e7e5e4;--blockout__colours__surface--700: #d6d3d1;--blockout__colours__surface--600: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--400: #57534e;--blockout__colours__surface--300: #44403c;--blockout__colours__surface--200: #292524;--blockout__colours__surface--100: #1c1917;--blockout__colours__surface--50: #0c0a09;--blockout__colours__surface--0: #000000;--blockout__colours__primary--950: #fffbeb;--blockout__colours__primary--900: #fef3c6;--blockout__colours__primary--800: #fee685;--blockout__colours__primary--700: #ffd230;--blockout__colours__primary--600: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--400: #e17100;--blockout__colours__primary--300: #bb4d00;--blockout__colours__primary--200: #973c00;--blockout__colours__primary--100: #7a3306;--blockout__colours__primary--50: #461901;color-scheme:dark;color:var(--blockout__colours__surface--950)}:root
|
|
1
|
+
:root,[data-colour-scheme=light],[data-colour-scheme=dark] [data-colour-scheme=invert]{--blockout__colours__surface--0: #ffffff;--blockout__colours__surface--50: #fafaf9;--blockout__colours__surface--100: #f5f5f4;--blockout__colours__surface--200: #e7e5e4;--blockout__colours__surface--300: #d6d3d1;--blockout__colours__surface--400: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--600: #57534e;--blockout__colours__surface--700: #44403c;--blockout__colours__surface--800: #292524;--blockout__colours__surface--900: #1c1917;--blockout__colours__surface--950: #0c0a09;--blockout__colours__primary--50: #fffbeb;--blockout__colours__primary--100: #fef3c6;--blockout__colours__primary--200: #fee685;--blockout__colours__primary--300: #ffd230;--blockout__colours__primary--400: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--600: #e17100;--blockout__colours__primary--700: #bb4d00;--blockout__colours__primary--800: #973c00;--blockout__colours__primary--900: #7a3306;--blockout__colours__primary--950: #461901;color-scheme:light;color:var(--blockout__colours__surface--950)}[data-colour-scheme=dark],:root [data-colour-scheme=invert]{--blockout__colours__surface--950: #fafaf9;--blockout__colours__surface--900: #f5f5f4;--blockout__colours__surface--800: #e7e5e4;--blockout__colours__surface--700: #d6d3d1;--blockout__colours__surface--600: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--400: #57534e;--blockout__colours__surface--300: #44403c;--blockout__colours__surface--200: #292524;--blockout__colours__surface--100: #1c1917;--blockout__colours__surface--50: #0c0a09;--blockout__colours__surface--0: #000000;--blockout__colours__primary--950: #fffbeb;--blockout__colours__primary--900: #fef3c6;--blockout__colours__primary--800: #fee685;--blockout__colours__primary--700: #ffd230;--blockout__colours__primary--600: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--400: #e17100;--blockout__colours__primary--300: #bb4d00;--blockout__colours__primary--200: #973c00;--blockout__colours__primary--100: #7a3306;--blockout__colours__primary--50: #461901;color-scheme:dark;color:var(--blockout__colours__surface--950)}:root{--blockout__radius--xxs: .25rem;--blockout__radius--xs: .375rem;--blockout__radius--sm: .675rem;--blockout__radius--md: .75rem;--blockout__radius--lg: 1rem;--blockout__radius--2xl: 1.275rem;--blockout__colours__outline: var(--blockout__colours__primary--500)}:root,body{background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950)}
|
package/dist/assets/index16.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-
|
|
1
|
+
.component-recurrence-control__fieldset{display:flex;flex-direction:column;gap:1rem}.component-recurrence-control__frequency_type{display:flex;align-items:baseline;gap:1ch;margin-top:1rem;margin-bottom:.5rem}.component-recurrence-control__radio{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;cursor:pointer;border-radius:var(--blockout__radius--xs);outline-offset:0px;outline:0px solid transparent;transition:outline .25s ease,outline-offset .25s ease,background-color .25s ease}.component-recurrence-control__radio>svg{width:1rem;height:1rem}.component-recurrence-control__radio:hover{background-color:var(--blockout__colours__surface--300)}.component-recurrence-control__radio:focus{outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-recurrence-control__row{display:flex;align-items:baseline;gap:1rem;flex-grow:1}.component-recurrence-control__row .component-base-control{flex-grow:1}
|
package/dist/assets/index17.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-
|
|
1
|
+
.component-menu__button{outline:0px solid transparent;outline-offset:0px;cursor:pointer;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-menu__button:hover{background-color:var(--blockout__colours__surface--50)}.component-menu__button:focus-visible{background-color:transparent;outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-menu__menu-wrapper{z-index:9999!important}.component-menu{display:flex;flex-direction:column;background-color:var(--blockout__colours__surface--50);border:1px solid var(--blockout__colours__surface--300);min-width:8rem;gap:.325rem;padding:.325rem;box-shadow:0 .175rem .375rem #0000001a}.component-menu__arrow>svg{fill:var(--blockout__colours__surface--0)!important;stroke:var(--blockout__colours__surface--300)!important}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item[data-active-item=true]{background-color:var(--blockout__colours__surface--100)}.component-menu__item:focus-visible{outline:none}.component-menu__item[data-active-item=true] .component-menu__item__label{color:var(--blockout__colours__surface--950)}.component-menu__item[data-active-item=true] .component-menu__item__description{color:var(--blockout__colours__surface--700)}.component-menu__item__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400)}.component-menu__item__icon--pictoral{transform:translateY(.25rem)}.component-menu__item__text{flex-grow:1}.component-menu__item__text__header{display:flex;align-items:center;gap:2rem;justify-content:space-between;width:100%}.component-menu__item__text__header+.component-menu__item__description{margin-top:.25rem}.component-menu__item__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-menu__item__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;padding-right:.375rem;transition:color .25s ease,opacity .25s ease}.component-menu__item--toggle--checked .component-menu__item__icon--checkbox{fill:var(--blockout__colours__surface--950)}.component-menu__separator{margin:0 -.325rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:none}
|
package/dist/assets/index18.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-
|
|
1
|
+
.component-password-control__btn{width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s ease;border-top-right-radius:var(--blockout__radius--md);border-bottom-right-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);transition:outline .25s ease,outline-offset .25s ease,background-color .25s ease}.component-password-control__btn:hover{background-color:var(--blockout__colours__surface--200)}.component-password-control__btn:focus{background-color:var(--blockout__colours__surface--200);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-password-control__btn>svg{width:1rem;height:1rem;fill:currentColor}
|
package/dist/assets/index3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-base-control{display:flex;flex-direction:column}.component-base-control__label{display:block;font-weight:400;color:var(--blockout__colours__surface--950);font-size:.875rem;padding-bottom:.5rem}.component-base-control__label__required{color:#df1414;padding-left:.25rem}.component-base-control__box{cursor:text;display:flex;flex-direction:row;border-radius:var(--blockout__radius--md);border:1px solid var(--blockout__colours__surface--100);background-color:var(--blockout__colours__surface--100);outline-offset:0px;outline:0px solid transparent;transition:outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,background-color .25s ease}.component-base-control__box:focus-within:not(:has(button:focus)):not(:has(:disabled)){background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-base-control__box:hover:not(:has(button:hover)):not(:focus-within):not(:has(:disabled)){background-color:var(--blockout__colours__surface--200);border-color:var(--blockout__colours__surface--100)}.component-base-control__box:has(:disabled){background-color:var(--blockout__colours__surface--300);border-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-base-control__box:has(:disabled) .component-base-control__affix{color:var(--blockout__colours__surface--500)}.component-base-control__box:has(:disabled) .component-base-control__control>input,.component-base-control__box:has(:disabled) .component-base-control__control>select,.component-base-control__box:has(:disabled) .component-base-control__control>textarea,.component-base-control__box:has(:disabled) .component-base-control__control>.component-base-control__input{color:var(--blockout__colours__surface--600)}.component-base-control__control{flex-grow:1}.component-base-control__control>input,.component-base-control__control>select,.component-base-control__control>textarea,.component-base-control__control>.component-base-control__input{display:block;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;background-color:transparent;transition:background-color .25s ease}.component-base-control__control>input:focus,.component-base-control__control>select:focus,.component-base-control__control>textarea:focus,.component-base-control__control>.component-base-control__input:focus{outline:none}.component-base-control__help{margin-top:.25rem;max-width:65ch;font-size:.75rem;font-weight:400;color:var(--blockout__colours__surface--600)}fieldset.component-base-control .component-base-
|
|
1
|
+
.component-base-control{display:flex;flex-direction:column}.component-base-control__label{display:block;font-weight:400;color:var(--blockout__colours__surface--950);font-size:.875rem;padding-bottom:.5rem}.component-base-control__label__required{color:#df1414;padding-left:.25rem}.component-base-control__box{cursor:text;display:flex;flex-direction:row;border-radius:var(--blockout__radius--md);border:1px solid var(--blockout__colours__surface--100);background-color:var(--blockout__colours__surface--100);outline-offset:0px;outline:0px solid transparent;transition:outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,background-color .25s ease}.component-base-control--fieldset .component-base-control__box{background-color:transparent;border:none}.component-base-control__box:focus-within:not(:has(button:focus),.component-base-control--fieldset .component-base-control__box):not(:has(:disabled)){background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-base-control__box:hover:not(:has(button:hover),.component-base-control--fieldset .component-base-control__box):not(:focus-within):not(:has(:disabled)){background-color:var(--blockout__colours__surface--200);border-color:var(--blockout__colours__surface--100)}.component-base-control__box:has(:disabled){background-color:var(--blockout__colours__surface--300);border-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-base-control__box:has(:disabled) .component-base-control__affix{color:var(--blockout__colours__surface--500)}.component-base-control__box:has(:disabled) .component-base-control__control>input,.component-base-control__box:has(:disabled) .component-base-control__control>select,.component-base-control__box:has(:disabled) .component-base-control__control>textarea,.component-base-control__box:has(:disabled) .component-base-control__control>.component-base-control__input{color:var(--blockout__colours__surface--600)}.component-base-control__control{flex-grow:1}.component-base-control__control>input,.component-base-control__control>select,.component-base-control__control>textarea,.component-base-control__control>.component-base-control__input{display:block;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;background-color:transparent;transition:background-color .25s ease}.component-base-control__control>input:focus,.component-base-control__control>select:focus,.component-base-control__control>textarea:focus,.component-base-control__control>.component-base-control__input:focus{outline:none}.component-base-control__help{margin-top:.25rem;max-width:65ch;font-size:.75rem;font-weight:400;color:var(--blockout__colours__surface--600)}fieldset.component-base-control .component-base-control__help{order:-1;margin-top:0;margin-bottom:.75rem}.component-base-control__affix{flex-grow:1;color:var(--blockout__colours__surface--600);padding:.75rem;min-height:40px;min-width:max-content}.component-base-control__affix--prefix{padding-right:0}.component-base-control__affix--suffix{padding-left:0}.component-base-control__box:has(.component-base-control__affix) .component-base-control__control{flex-grow:0}.component-base-control__box:has(.component-base-control__affix) .component-base-control__control>input,.component-base-control__box:has(.component-base-control__affix) .component-base-control__control>select,.component-base-control__box:has(.component-base-control__affix) .component-base-control__control>textarea{field-sizing:content;width:unset}
|
package/dist/assets/index5.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-choice-control__choices{display:grid;gap:1.5rem}@media (min-width: 768px){.component-choice-control__choices{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.component-choice-control__choices{grid-template-columns:repeat(3,minmax(0,1fr))}}.component-choice-control__choice{padding:.325rem;border:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0);cursor:pointer;transition:outline .25s ease,outline-offset .25s ease}.component-choice-control__choice__body{display:flex;flex-direction:row;align-items:baseline;gap:.75rem;padding:.675rem;height:100%}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__body{background-color:var(--blockout__colours__surface--100)}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__description{color:var(--blockout__colours__surface--700)}.component-choice-control__choice:focus-within{outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-choice-control__choice:has(input:disabled){background-color:var(--blockout__colours__surface--200)}.component-choice-control__choice:has(input:disabled) .component-choice-control__choice__label,.component-choice-control__choice:has(input:disabled) .component-choice-control__choice__description{color:var(--blockout__colours__surface--400)}.component-choice-control__choice__icon{
|
|
1
|
+
.component-choice-control__choices{display:grid;gap:1.5rem}@media (min-width: 768px){.component-choice-control__choices{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.component-choice-control__choices{grid-template-columns:repeat(3,minmax(0,1fr))}}.component-choice-control__choice{padding:.325rem;border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--0);cursor:pointer;transition:outline .25s ease,outline-offset .25s ease}.component-choice-control__choice__body{display:flex;flex-direction:row;align-items:baseline;gap:.75rem;padding:.675rem;height:100%}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__body{background-color:var(--blockout__colours__surface--100)}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__description{color:var(--blockout__colours__surface--700)}.component-choice-control__choice:focus-within{outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-choice-control__choice:has(input:disabled){background-color:var(--blockout__colours__surface--200)}.component-choice-control__choice:has(input:disabled) .component-choice-control__choice__label,.component-choice-control__choice:has(input:disabled) .component-choice-control__choice__description{color:var(--blockout__colours__surface--400)}.component-choice-control__choice__icon{fill:var(--blockout__colours__surface--300);width:1.375rem;height:1.375rem;flex-shrink:0;transform:translateY(.25rem);transition:fill .25s ease}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__icon{fill:var(--blockout__colours__primary--500)}.component-choice-control__choice__label{font-weight:500;color:var(--blockout__colours__surface--600);transition:color .25s ease}.component-choice-control__choice__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-choice-control__choice:has(input:checked) .component-choice-control__choice__label{color:var(--blockout__colours__surface--950)}
|
package/dist/assets/index9.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-toggle-group-control .component-base-control__box{background:none;border:none}.component-toggle-group-control__options{display:flex;overflow:hidden;border-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);padding:.25rem;gap:.25rem}.component-toggle-group-control__option{display:flex;flex-direction:column;padding:.625rem .75rem;min-height:40px;width:100%;color:var(--blockout__colours__surface--800);border-radius:calc(var(--blockout__radius--md) - .25rem);font-size:1rem;font-weight:500;flex-basis:50%;cursor:pointer;position:relative;transition:color .25s ease,background-color .25s ease;background-color:var(--blockout__colours__surface--100);color:var(--blockout__colours__surface--500);box-shadow:none}.component-toggle-group-control__option__label{display:flex;align-items:center;justify-content:
|
|
1
|
+
.component-toggle-group-control .component-base-control__box{background:none;border:none}.component-toggle-group-control__options{display:flex;overflow:hidden;border-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);padding:.25rem;gap:.25rem}.component-toggle-group-control__option{display:flex;flex-direction:column;padding:.625rem .75rem;min-height:40px;width:100%;color:var(--blockout__colours__surface--800);border-radius:calc(var(--blockout__radius--md) - .25rem);font-size:1rem;font-weight:500;flex-basis:50%;cursor:pointer;position:relative;transition:color .25s ease,background-color .25s ease;background-color:var(--blockout__colours__surface--100);color:var(--blockout__colours__surface--500);box-shadow:none}.component-toggle-group-control__option__label{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem;font-weight:500}.component-toggle-group-control__option__label>svg{width:1.25rem;height:1.25rem}.component-toggle-group-control__option__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem}.component-toggle-group-control__option:has(:checked){background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950);box-shadow:0 .1rem .25rem #0000001a;z-index:2}.component-toggle-group-control__option:has(:disabled){background-color:var(--blockout__colours__surface--200);color:var(--blockout__colours__surface--400);box-shadow:none;cursor:default}.component-toggle-group-control__option:has(:checked:disabled){background-color:var(--blockout__colours__surface--50);color:var(--blockout__colours__surface--400)}
|
package/dist/assets/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.component-select-control__input{cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__input:disabled .component-select-control__value{background-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-select-control__input:disabled .component-select-control__caret{background-color:var(--blockout__colours__surface--300)}.component-select-control__input:disabled .component-select-control__caret>svg{fill:var(--blockout__colours__surface--500)}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret{flex-shrink:0;width:2rem;display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--blockout__radius--md);border-bottom-right-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:var(--blockout__colours__surface--700)}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select-control__list:focus{outline:none}.component-select-control__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select-control__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select-control__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:40px}.component-select-control__popover__search:focus{outline:none}.component-select-control__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;border-radius:var(--blockout__radius--sm);min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:focus{outline:none}.component-select-control__option:first-child{border-top:none}.component-select-control__option[aria-disabled=true] .component-select-control__option__label{color:var(--blockout__colours__surface--400)}.component-select-control__option[aria-disabled=true] .component-select-control__option__description{color:var(--blockout__colours__surface--300)}.component-select-control__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease}.component-select-control__option__label>svg{width:1.25rem;height:1.25rem}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--
|
|
1
|
+
.component-select-control__input{cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__value--placeholder{color:var(--blockout__colours__surface--400)}.component-select-control__input:disabled .component-select-control__value{background-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-select-control__input:disabled .component-select-control__caret{background-color:var(--blockout__colours__surface--300)}.component-select-control__input:disabled .component-select-control__caret>svg{fill:var(--blockout__colours__surface--500)}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret{flex-shrink:0;width:2rem;display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--blockout__radius--md);border-bottom-right-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:var(--blockout__colours__surface--700)}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select-control__list:focus{outline:none}.component-select-control__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select-control__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select-control__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:40px}.component-select-control__popover__search:focus{outline:none}.component-select-control__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;border-radius:var(--blockout__radius--sm);min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:focus{outline:none}.component-select-control__option:first-child{border-top:none}.component-select-control__option[aria-disabled=true] .component-select-control__option__label{color:var(--blockout__colours__surface--400)}.component-select-control__option[aria-disabled=true] .component-select-control__option__description{color:var(--blockout__colours__surface--300)}.component-select-control__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease}.component-select-control__option__label>svg{width:1.25rem;height:1.25rem}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select-control__option[data-active-item=true]{background-color:var(--blockout__colours__surface--50)}.component-select-control__option[data-active-item=true] .component-select-control__option__label{color:var(--blockout__colours__surface--900)}.component-select-control__option[data-active-item=true] .component-select-control__option__description{color:var(--blockout__colours__surface--700)}
|
|
@@ -1,35 +1,45 @@
|
|
|
1
1
|
import { jsxs as e, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { cn as
|
|
2
|
+
import { cn as u } from "../../../utils/css.js";
|
|
3
3
|
import "react";
|
|
4
|
-
import { Affix as
|
|
5
|
-
import '../../../assets/index3.css';const
|
|
4
|
+
import { Affix as a } from "./affix.js";
|
|
5
|
+
import '../../../assets/index3.css';const g = ({
|
|
6
6
|
as: n = "div",
|
|
7
7
|
label: c,
|
|
8
|
-
className:
|
|
8
|
+
className: i,
|
|
9
9
|
id: l,
|
|
10
10
|
help: s,
|
|
11
11
|
children: m,
|
|
12
|
-
prefix:
|
|
13
|
-
suffix:
|
|
14
|
-
required:
|
|
12
|
+
prefix: d,
|
|
13
|
+
suffix: p,
|
|
14
|
+
required: _
|
|
15
15
|
}) => {
|
|
16
|
-
const
|
|
17
|
-
var
|
|
18
|
-
(
|
|
16
|
+
const b = n, t = n === "fieldset", f = t ? "legend" : "label", h = () => {
|
|
17
|
+
var r;
|
|
18
|
+
(r = document.getElementById(l)) == null || r.focus();
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */ e(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
return /* @__PURE__ */ e(
|
|
21
|
+
b,
|
|
22
|
+
{
|
|
23
|
+
className: u(
|
|
24
|
+
"component-base-control",
|
|
25
|
+
t && "component-base-control--fieldset",
|
|
26
|
+
i
|
|
27
|
+
),
|
|
28
|
+
children: [
|
|
29
|
+
c && /* @__PURE__ */ e(f, { className: "component-base-control__label", htmlFor: l, children: [
|
|
30
|
+
c,
|
|
31
|
+
_ && /* @__PURE__ */ o("span", { className: "component-base-control__label__required", children: "*" })
|
|
32
|
+
] }),
|
|
33
|
+
/* @__PURE__ */ e("div", { className: "component-base-control__box", onClick: h, children: [
|
|
34
|
+
/* @__PURE__ */ o(a, { children: d }),
|
|
35
|
+
/* @__PURE__ */ o("div", { className: "component-base-control__control", children: m }),
|
|
36
|
+
/* @__PURE__ */ o(a, { suffix: !0, children: p })
|
|
37
|
+
] }),
|
|
38
|
+
s && /* @__PURE__ */ o("div", { className: "component-base-control__help", children: s })
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
);
|
|
32
42
|
};
|
|
33
43
|
export {
|
|
34
|
-
|
|
44
|
+
g as BaseControl
|
|
35
45
|
};
|
|
@@ -1,56 +1,90 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { cn as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as o, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { cn as _ } from "../../../utils/css.js";
|
|
3
|
+
import * as e from "react";
|
|
4
|
+
import { useId as f } from "react";
|
|
4
5
|
import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';/* empty css */
|
|
5
6
|
/* empty css */
|
|
6
7
|
/* empty css */
|
|
7
|
-
import { VisuallyHidden as
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
import { VisuallyHidden as Z } from "../../../primitives/visually-hidden/index.js";
|
|
9
|
+
import { w as A } from "../../../SSRBase.es-BUXS72ra.js";
|
|
10
|
+
import { r as E, a as g } from "../../../Square.es-KJLdY11q.js";
|
|
11
|
+
import { p as M } from "../../../IconBase.es-rM5tt24D.js";
|
|
12
|
+
import { t as u } from "../../../Circle.es-B6Ug9Tpf.js";
|
|
13
|
+
const N = /* @__PURE__ */ new Map([
|
|
14
|
+
[
|
|
15
|
+
"bold",
|
|
16
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z" }))
|
|
17
|
+
],
|
|
18
|
+
[
|
|
19
|
+
"duotone",
|
|
20
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
|
|
21
|
+
],
|
|
22
|
+
[
|
|
23
|
+
"fill",
|
|
24
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" }))
|
|
25
|
+
],
|
|
26
|
+
[
|
|
27
|
+
"light",
|
|
28
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76ZM230,128A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z" }))
|
|
29
|
+
],
|
|
30
|
+
[
|
|
31
|
+
"regular",
|
|
32
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
|
|
33
|
+
],
|
|
34
|
+
[
|
|
35
|
+
"thin",
|
|
36
|
+
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M170.83,101.17a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17ZM228,128A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
|
|
37
|
+
]
|
|
38
|
+
]), m = e.forwardRef((c, t) => /* @__PURE__ */ e.createElement(A, { ref: t, ...c, weights: N }));
|
|
39
|
+
m.displayName = "CheckCircleIcon";
|
|
40
|
+
const i = e.forwardRef((c, t) => /* @__PURE__ */ e.createElement(M, { ref: t, ...c, weights: u }));
|
|
41
|
+
i.displayName = "CircleIcon";
|
|
42
|
+
const R = ({
|
|
43
|
+
value: c,
|
|
44
|
+
label: t,
|
|
45
|
+
description: l,
|
|
46
|
+
disabled: h,
|
|
47
|
+
multiple: a = !1,
|
|
48
|
+
className: p,
|
|
49
|
+
...s
|
|
16
50
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
return /* @__PURE__ */
|
|
51
|
+
const r = f(), d = a ? c ? E : g : c ? m : i;
|
|
52
|
+
return /* @__PURE__ */ o(
|
|
19
53
|
"label",
|
|
20
54
|
{
|
|
21
|
-
className:
|
|
55
|
+
className: _(
|
|
22
56
|
"component-choice-control__choice",
|
|
23
|
-
`component-choice-control__choice--${
|
|
24
|
-
|
|
57
|
+
`component-choice-control__choice--${a ? "multiple" : "single"}`,
|
|
58
|
+
p
|
|
25
59
|
),
|
|
26
|
-
htmlFor:
|
|
60
|
+
htmlFor: r,
|
|
27
61
|
children: /* @__PURE__ */ n("div", { className: "component-choice-control__choice__body", children: [
|
|
28
|
-
/* @__PURE__ */
|
|
62
|
+
/* @__PURE__ */ o(Z, { children: /* @__PURE__ */ o(
|
|
29
63
|
"input",
|
|
30
64
|
{
|
|
31
|
-
...
|
|
65
|
+
...s,
|
|
32
66
|
className: "component-choice-control__choice__input",
|
|
33
|
-
id:
|
|
34
|
-
type:
|
|
35
|
-
value:
|
|
36
|
-
disabled:
|
|
67
|
+
id: r,
|
|
68
|
+
type: a ? "checkbox" : "radio",
|
|
69
|
+
value: c,
|
|
70
|
+
disabled: h
|
|
37
71
|
}
|
|
38
72
|
) }),
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
|
|
73
|
+
/* @__PURE__ */ o(
|
|
74
|
+
d,
|
|
41
75
|
{
|
|
42
|
-
|
|
43
|
-
|
|
76
|
+
className: "component-choice-control__choice__icon",
|
|
77
|
+
weight: c ? "fill" : "regular"
|
|
44
78
|
}
|
|
45
79
|
),
|
|
46
80
|
/* @__PURE__ */ n("div", { className: "component-choice-control__choice__text", children: [
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
81
|
+
/* @__PURE__ */ o("div", { className: "component-choice-control__choice__label", children: t }),
|
|
82
|
+
l && /* @__PURE__ */ o("p", { className: "component-choice-control__choice__description", children: l })
|
|
49
83
|
] })
|
|
50
84
|
] })
|
|
51
85
|
}
|
|
52
86
|
);
|
|
53
87
|
};
|
|
54
88
|
export {
|
|
55
|
-
|
|
89
|
+
R as Choice
|
|
56
90
|
};
|
|
@@ -5,7 +5,7 @@ import { useState as E, useRef as g } from "react";
|
|
|
5
5
|
import { w as o } from "../../../SSRBase.es-BUXS72ra.js";
|
|
6
6
|
import { BaseControl as f } from "../base-control/index.js";
|
|
7
7
|
import { useBaseControlProps as M } from "../base-control/props.js";
|
|
8
|
-
import '../../../assets/
|
|
8
|
+
import '../../../assets/index18.css';const L = /* @__PURE__ */ new Map([
|
|
9
9
|
[
|
|
10
10
|
"bold",
|
|
11
11
|
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M251,123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63,57.67,164,44,128,44S59.37,57.67,33.51,83.52C14.16,102.87,5.4,122.32,5,123.13a12.08,12.08,0,0,0,0,9.75c.37.82,9.13,20.26,28.49,39.61C59.37,198.34,92,212,128,212s68.63-13.66,94.48-39.51c19.36-19.35,28.12-38.79,28.49-39.61A12.08,12.08,0,0,0,251,123.13Zm-46.06,33C183.47,177.27,157.59,188,128,188s-55.47-10.73-76.91-31.88A130.36,130.36,0,0,1,29.52,128,130.45,130.45,0,0,1,51.09,99.89C72.54,78.73,98.41,68,128,68s55.46,10.73,76.91,31.89A130.36,130.36,0,0,1,226.48,128,130.45,130.45,0,0,1,204.91,156.12ZM128,84a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,84Zm0,64a20,20,0,1,1,20-20A20,20,0,0,1,128,148Z" }))
|