@clickhouse/click-ui 0.6.0-rc1 → 0.6.1-rc1
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/cjs/click-ui.css +21 -6
- package/dist/cjs/components/Assets/Icons/Check.cjs +1 -1
- package/dist/cjs/components/Assets/Icons/Check.cjs.map +1 -1
- package/dist/cjs/components/Checkbox/index.cjs +1 -11
- package/dist/cjs/components/Checkbox/index.cjs.map +1 -1
- package/dist/cjs/components/Container/Container.css +21 -6
- package/dist/esm/click-ui.css +21 -6
- package/dist/esm/components/Assets/Icons/Check.js +1 -1
- package/dist/esm/components/Assets/Icons/Check.js.map +1 -1
- package/dist/esm/components/Checkbox/index.js +1 -11
- package/dist/esm/components/Checkbox/index.js.map +1 -1
- package/dist/esm/components/Container/Container.css +21 -6
- package/package.json +1 -1
package/dist/cjs/click-ui.css
CHANGED
|
@@ -165,17 +165,32 @@
|
|
|
165
165
|
font: var(--click-field-typography-label-disabled);
|
|
166
166
|
}
|
|
167
167
|
.container__JMoiT {
|
|
168
|
+
/* These props are only emitted as inline custom properties when the
|
|
169
|
+
matching Container prop is set (grow, shrink, fillHeight, minHeight,
|
|
170
|
+
maxHeight, overflow). Custom properties inherit by default, so without
|
|
171
|
+
this reset a nested Container would inherit an ancestor's value — e.g. a
|
|
172
|
+
parent with `fillHeight` would force `height: 100%` onto every descendant
|
|
173
|
+
Container, and a parent with `grow` would make children flex-grow too.
|
|
174
|
+
Resetting to the guaranteed-invalid `initial` value keeps each Container's
|
|
175
|
+
defaults isolated; the `var()` fallbacks below then resolve to the same
|
|
176
|
+
defaults the styled-components version produced when the prop was unset. */
|
|
177
|
+
--container-height: initial;
|
|
178
|
+
--container-min-height: initial;
|
|
179
|
+
--container-max-height: initial;
|
|
180
|
+
--container-overflow: initial;
|
|
181
|
+
--container-grow: initial;
|
|
182
|
+
--container-shrink: initial;
|
|
168
183
|
display: var(--container-display, flex);
|
|
169
184
|
width: var(--container-width, 100%);
|
|
170
185
|
min-width: var(--container-min-width, auto);
|
|
171
186
|
max-width: var(--container-max-width, none);
|
|
172
|
-
height: var(--container-height);
|
|
173
|
-
min-height: var(--container-min-height);
|
|
174
|
-
max-height: var(--container-max-height);
|
|
187
|
+
height: var(--container-height, auto);
|
|
188
|
+
min-height: var(--container-min-height, auto);
|
|
189
|
+
max-height: var(--container-max-height, none);
|
|
175
190
|
padding: var(--container-padding);
|
|
176
|
-
overflow: var(--container-overflow);
|
|
177
|
-
flex: var(--container-grow);
|
|
178
|
-
flex-shrink: var(--container-shrink);
|
|
191
|
+
overflow: var(--container-overflow, visible);
|
|
192
|
+
flex: var(--container-grow, 0 1 auto);
|
|
193
|
+
flex-shrink: var(--container-shrink, 1);
|
|
179
194
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
|
|
180
195
|
flex-direction: row;
|
|
181
196
|
flex-wrap: nowrap;
|
|
@@ -4,7 +4,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
const Check = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "
|
|
7
|
+
const Check = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6.5L9 17.5L4 12.5", stroke: "#161517", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
8
8
|
|
|
9
9
|
exports.default = Check;
|
|
10
10
|
//# sourceMappingURL=Check.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Check.cjs","sources":["../../../../../src/components/Assets/Icons/Check.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\n\nconst Check = (props: SVGAssetProps) => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"
|
|
1
|
+
{"version":3,"file":"Check.cjs","sources":["../../../../../src/components/Assets/Icons/Check.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\n\nconst Check = (props: SVGAssetProps) => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M20 6.5L9 17.5L4 12.5\"\n stroke=\"#161517\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\nexport default Check;\n"],"names":["Check","props","jsx"],"mappings":";;;;;;AAEA,MAAMA,KAAAA,GAAQA,CAACC,KAAAA,qBACbC,cAAA,CAAC,KAAA,EAAA,EACC,KAAA,EAAM,IAAA,EACN,MAAA,EAAO,IAAA,EACP,OAAA,EAAQ,WAAA,EACR,IAAA,EAAK,MAAA,EACL,KAAA,EAAM,4BAAA,EACN,GAAID,KAAAA,EAEJ,QAAA,kBAAAC,cAAA,CAAC,MAAA,EAAA,EACC,CAAA,EAAE,uBAAA,EACF,MAAA,EAAO,SAAA,EACP,WAAA,EAAY,GAAA,EACZ,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,SAAO,CAAA,EAE1B;;;;"}
|
|
@@ -64,17 +64,7 @@ const Checkbox = ({
|
|
|
64
64
|
return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, className: Checkbox_module.default.wrapper, children: [
|
|
65
65
|
/* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cva.cn(checkInputVariants({
|
|
66
66
|
variant
|
|
67
|
-
}), className), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: Checkbox_module.default.checkicon, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
|
-
Icon.Icon,
|
|
69
|
-
{
|
|
70
|
-
name: checked === "indeterminate" ? "minus" : "check",
|
|
71
|
-
size: "sm",
|
|
72
|
-
...checked === "indeterminate" ? {} : {
|
|
73
|
-
width: "0.8rem",
|
|
74
|
-
height: "0.8rem"
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
) }) }),
|
|
67
|
+
}), className), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: Checkbox_module.default.checkicon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
|
|
78
68
|
label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
|
|
79
69
|
] });
|
|
80
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n />\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label && (\n <GenericLabel\n htmlFor={id ?? defaultId}\n disabled={disabled}\n >\n {label}\n </GenericLabel>\n )}\n </FormRoot>\n );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","jsxs","FormRoot","wrapper","jsx","RadixCheckbox","cn","checkicon","Icon","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,uBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,wBAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,wBAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,wBAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,wBAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,wBAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,wBAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAACC,qBACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,wBAAOyB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,yBAAc,IAAA,EAAd,EACC,IAAId,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWQ,OAAG9B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,yCAACQ,wBAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAW3B,uBAAAA,CAAO6B,WACzC,QAAA,kBAAAH,cAAA,CAACI,SAAA,EAAA,EACC,MAAMZ,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACCY,cAAA,CAACK,yBAAA,EAAA,EACC,SAASlB,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -1,15 +1,30 @@
|
|
|
1
1
|
.container__JMoiT {
|
|
2
|
+
/* These props are only emitted as inline custom properties when the
|
|
3
|
+
matching Container prop is set (grow, shrink, fillHeight, minHeight,
|
|
4
|
+
maxHeight, overflow). Custom properties inherit by default, so without
|
|
5
|
+
this reset a nested Container would inherit an ancestor's value — e.g. a
|
|
6
|
+
parent with `fillHeight` would force `height: 100%` onto every descendant
|
|
7
|
+
Container, and a parent with `grow` would make children flex-grow too.
|
|
8
|
+
Resetting to the guaranteed-invalid `initial` value keeps each Container's
|
|
9
|
+
defaults isolated; the `var()` fallbacks below then resolve to the same
|
|
10
|
+
defaults the styled-components version produced when the prop was unset. */
|
|
11
|
+
--container-height: initial;
|
|
12
|
+
--container-min-height: initial;
|
|
13
|
+
--container-max-height: initial;
|
|
14
|
+
--container-overflow: initial;
|
|
15
|
+
--container-grow: initial;
|
|
16
|
+
--container-shrink: initial;
|
|
2
17
|
display: var(--container-display, flex);
|
|
3
18
|
width: var(--container-width, 100%);
|
|
4
19
|
min-width: var(--container-min-width, auto);
|
|
5
20
|
max-width: var(--container-max-width, none);
|
|
6
|
-
height: var(--container-height);
|
|
7
|
-
min-height: var(--container-min-height);
|
|
8
|
-
max-height: var(--container-max-height);
|
|
21
|
+
height: var(--container-height, auto);
|
|
22
|
+
min-height: var(--container-min-height, auto);
|
|
23
|
+
max-height: var(--container-max-height, none);
|
|
9
24
|
padding: var(--container-padding);
|
|
10
|
-
overflow: var(--container-overflow);
|
|
11
|
-
flex: var(--container-grow);
|
|
12
|
-
flex-shrink: var(--container-shrink);
|
|
25
|
+
overflow: var(--container-overflow, visible);
|
|
26
|
+
flex: var(--container-grow, 0 1 auto);
|
|
27
|
+
flex-shrink: var(--container-shrink, 1);
|
|
13
28
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
|
|
14
29
|
flex-direction: row;
|
|
15
30
|
flex-wrap: nowrap;
|
package/dist/esm/click-ui.css
CHANGED
|
@@ -165,17 +165,32 @@
|
|
|
165
165
|
font: var(--click-field-typography-label-disabled);
|
|
166
166
|
}
|
|
167
167
|
.container__JMoiT {
|
|
168
|
+
/* These props are only emitted as inline custom properties when the
|
|
169
|
+
matching Container prop is set (grow, shrink, fillHeight, minHeight,
|
|
170
|
+
maxHeight, overflow). Custom properties inherit by default, so without
|
|
171
|
+
this reset a nested Container would inherit an ancestor's value — e.g. a
|
|
172
|
+
parent with `fillHeight` would force `height: 100%` onto every descendant
|
|
173
|
+
Container, and a parent with `grow` would make children flex-grow too.
|
|
174
|
+
Resetting to the guaranteed-invalid `initial` value keeps each Container's
|
|
175
|
+
defaults isolated; the `var()` fallbacks below then resolve to the same
|
|
176
|
+
defaults the styled-components version produced when the prop was unset. */
|
|
177
|
+
--container-height: initial;
|
|
178
|
+
--container-min-height: initial;
|
|
179
|
+
--container-max-height: initial;
|
|
180
|
+
--container-overflow: initial;
|
|
181
|
+
--container-grow: initial;
|
|
182
|
+
--container-shrink: initial;
|
|
168
183
|
display: var(--container-display, flex);
|
|
169
184
|
width: var(--container-width, 100%);
|
|
170
185
|
min-width: var(--container-min-width, auto);
|
|
171
186
|
max-width: var(--container-max-width, none);
|
|
172
|
-
height: var(--container-height);
|
|
173
|
-
min-height: var(--container-min-height);
|
|
174
|
-
max-height: var(--container-max-height);
|
|
187
|
+
height: var(--container-height, auto);
|
|
188
|
+
min-height: var(--container-min-height, auto);
|
|
189
|
+
max-height: var(--container-max-height, none);
|
|
175
190
|
padding: var(--container-padding);
|
|
176
|
-
overflow: var(--container-overflow);
|
|
177
|
-
flex: var(--container-grow);
|
|
178
|
-
flex-shrink: var(--container-shrink);
|
|
191
|
+
overflow: var(--container-overflow, visible);
|
|
192
|
+
flex: var(--container-grow, 0 1 auto);
|
|
193
|
+
flex-shrink: var(--container-shrink, 1);
|
|
179
194
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
|
|
180
195
|
flex-direction: row;
|
|
181
196
|
flex-wrap: nowrap;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
const Check = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "
|
|
3
|
+
const Check = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6.5L9 17.5L4 12.5", stroke: "#161517", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4
4
|
|
|
5
5
|
export { Check as default };
|
|
6
6
|
//# sourceMappingURL=Check.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Check.js","sources":["../../../../../src/components/Assets/Icons/Check.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\n\nconst Check = (props: SVGAssetProps) => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"
|
|
1
|
+
{"version":3,"file":"Check.js","sources":["../../../../../src/components/Assets/Icons/Check.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\n\nconst Check = (props: SVGAssetProps) => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M20 6.5L9 17.5L4 12.5\"\n stroke=\"#161517\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\nexport default Check;\n"],"names":["Check","props"],"mappings":";;AAEA,MAAMA,KAAAA,GAAQA,CAACC,KAAAA,qBACb,GAAA,CAAC,KAAA,EAAA,EACC,KAAA,EAAM,IAAA,EACN,MAAA,EAAO,IAAA,EACP,OAAA,EAAQ,WAAA,EACR,IAAA,EAAK,MAAA,EACL,KAAA,EAAM,4BAAA,EACN,GAAIA,KAAAA,EAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EACC,CAAA,EAAE,uBAAA,EACF,MAAA,EAAO,SAAA,EACP,WAAA,EAAY,GAAA,EACZ,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,SAAO,CAAA,EAE1B;;;;"}
|
|
@@ -40,17 +40,7 @@ const Checkbox = ({
|
|
|
40
40
|
return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, className: styles.wrapper, children: [
|
|
41
41
|
/* @__PURE__ */ jsx(RadixCheckbox.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cn(checkInputVariants({
|
|
42
42
|
variant
|
|
43
|
-
}), className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: styles.checkicon, children: /* @__PURE__ */ jsx(
|
|
44
|
-
SvgImage,
|
|
45
|
-
{
|
|
46
|
-
name: checked === "indeterminate" ? "minus" : "check",
|
|
47
|
-
size: "sm",
|
|
48
|
-
...checked === "indeterminate" ? {} : {
|
|
49
|
-
width: "0.8rem",
|
|
50
|
-
height: "0.8rem"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
) }) }),
|
|
43
|
+
}), className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: styles.checkicon, children: /* @__PURE__ */ jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
|
|
54
44
|
label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
|
|
55
45
|
] });
|
|
56
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n />\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label && (\n <GenericLabel\n htmlFor={id ?? defaultId}\n disabled={disabled}\n >\n {label}\n </GenericLabel>\n )}\n </FormRoot>\n );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","wrapper","cn","checkicon","Icon"],"mappings":";;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,OAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,OAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,OAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,OAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,OAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,OAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,OAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,YACC,YAAA,EAAcN,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,OAAOuB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAc,IAAA,EAAd,EACC,IAAIV,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWI,GAAG1B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,8BAAC,aAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAWnB,MAAAA,CAAOyB,WACzC,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,MAAMR,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASD,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -1,15 +1,30 @@
|
|
|
1
1
|
.container__JMoiT {
|
|
2
|
+
/* These props are only emitted as inline custom properties when the
|
|
3
|
+
matching Container prop is set (grow, shrink, fillHeight, minHeight,
|
|
4
|
+
maxHeight, overflow). Custom properties inherit by default, so without
|
|
5
|
+
this reset a nested Container would inherit an ancestor's value — e.g. a
|
|
6
|
+
parent with `fillHeight` would force `height: 100%` onto every descendant
|
|
7
|
+
Container, and a parent with `grow` would make children flex-grow too.
|
|
8
|
+
Resetting to the guaranteed-invalid `initial` value keeps each Container's
|
|
9
|
+
defaults isolated; the `var()` fallbacks below then resolve to the same
|
|
10
|
+
defaults the styled-components version produced when the prop was unset. */
|
|
11
|
+
--container-height: initial;
|
|
12
|
+
--container-min-height: initial;
|
|
13
|
+
--container-max-height: initial;
|
|
14
|
+
--container-overflow: initial;
|
|
15
|
+
--container-grow: initial;
|
|
16
|
+
--container-shrink: initial;
|
|
2
17
|
display: var(--container-display, flex);
|
|
3
18
|
width: var(--container-width, 100%);
|
|
4
19
|
min-width: var(--container-min-width, auto);
|
|
5
20
|
max-width: var(--container-max-width, none);
|
|
6
|
-
height: var(--container-height);
|
|
7
|
-
min-height: var(--container-min-height);
|
|
8
|
-
max-height: var(--container-max-height);
|
|
21
|
+
height: var(--container-height, auto);
|
|
22
|
+
min-height: var(--container-min-height, auto);
|
|
23
|
+
max-height: var(--container-max-height, none);
|
|
9
24
|
padding: var(--container-padding);
|
|
10
|
-
overflow: var(--container-overflow);
|
|
11
|
-
flex: var(--container-grow);
|
|
12
|
-
flex-shrink: var(--container-shrink);
|
|
25
|
+
overflow: var(--container-overflow, visible);
|
|
26
|
+
flex: var(--container-grow, 0 1 auto);
|
|
27
|
+
flex-shrink: var(--container-shrink, 1);
|
|
13
28
|
/* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
|
|
14
29
|
flex-direction: row;
|
|
15
30
|
flex-wrap: nowrap;
|