@m3-baseui/react-vanilla-extract 1.0.0
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/badge.css +32 -0
- package/dist/badge.css.map +1 -0
- package/dist/badge.d.ts +7 -0
- package/dist/badge.js +16 -0
- package/dist/badge.js.map +1 -0
- package/dist/button.css +171 -0
- package/dist/button.css.map +1 -0
- package/dist/button.d.ts +10 -0
- package/dist/button.js +14 -0
- package/dist/button.js.map +1 -0
- package/dist/card.css +66 -0
- package/dist/card.css.map +1 -0
- package/dist/card.d.ts +7 -0
- package/dist/card.js +16 -0
- package/dist/card.js.map +1 -0
- package/dist/checkbox.css +122 -0
- package/dist/checkbox.css.map +1 -0
- package/dist/checkbox.d.ts +8 -0
- package/dist/checkbox.js +17 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chip.css +153 -0
- package/dist/chip.css.map +1 -0
- package/dist/chip.d.ts +7 -0
- package/dist/chip.js +22 -0
- package/dist/chip.js.map +1 -0
- package/dist/dialog.css +60 -0
- package/dist/dialog.css.map +1 -0
- package/dist/dialog.d.ts +15 -0
- package/dist/dialog.js +19 -0
- package/dist/dialog.js.map +1 -0
- package/dist/divider.css +28 -0
- package/dist/divider.css.map +1 -0
- package/dist/divider.d.ts +10 -0
- package/dist/divider.js +14 -0
- package/dist/divider.js.map +1 -0
- package/dist/fab.css +109 -0
- package/dist/fab.css.map +1 -0
- package/dist/fab.d.ts +10 -0
- package/dist/fab.js +14 -0
- package/dist/fab.js.map +1 -0
- package/dist/icon-button.css +209 -0
- package/dist/icon-button.css.map +1 -0
- package/dist/icon-button.d.ts +10 -0
- package/dist/icon-button.js +16 -0
- package/dist/icon-button.js.map +1 -0
- package/dist/index.css +2714 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +27 -0
- package/dist/index.js +318 -0
- package/dist/index.js.map +1 -0
- package/dist/item.css +72 -0
- package/dist/item.css.map +1 -0
- package/dist/item.d.ts +7 -0
- package/dist/item.js +29 -0
- package/dist/item.js.map +1 -0
- package/dist/list.css +128 -0
- package/dist/list.css.map +1 -0
- package/dist/list.d.ts +10 -0
- package/dist/list.js +31 -0
- package/dist/list.js.map +1 -0
- package/dist/menu.css +262 -0
- package/dist/menu.css.map +1 -0
- package/dist/menu.d.ts +24 -0
- package/dist/menu.js +31 -0
- package/dist/menu.js.map +1 -0
- package/dist/navigation-bar.css +92 -0
- package/dist/navigation-bar.css.map +1 -0
- package/dist/navigation-bar.d.ts +12 -0
- package/dist/navigation-bar.js +27 -0
- package/dist/navigation-bar.js.map +1 -0
- package/dist/navigation-drawer.css +112 -0
- package/dist/navigation-drawer.css.map +1 -0
- package/dist/navigation-drawer.d.ts +13 -0
- package/dist/navigation-drawer.js +26 -0
- package/dist/navigation-drawer.js.map +1 -0
- package/dist/progress.css +68 -0
- package/dist/progress.css.map +1 -0
- package/dist/progress.d.ts +10 -0
- package/dist/progress.js +23 -0
- package/dist/progress.js.map +1 -0
- package/dist/radio.css +98 -0
- package/dist/radio.css.map +1 -0
- package/dist/radio.d.ts +9 -0
- package/dist/radio.js +18 -0
- package/dist/radio.js.map +1 -0
- package/dist/segmented-button.css +101 -0
- package/dist/segmented-button.css.map +1 -0
- package/dist/segmented-button.d.ts +12 -0
- package/dist/segmented-button.js +25 -0
- package/dist/segmented-button.js.map +1 -0
- package/dist/select.css +181 -0
- package/dist/select.css.map +1 -0
- package/dist/select.d.ts +22 -0
- package/dist/select.js +33 -0
- package/dist/select.js.map +1 -0
- package/dist/slider.css +78 -0
- package/dist/slider.css.map +1 -0
- package/dist/slider.d.ts +15 -0
- package/dist/slider.js +20 -0
- package/dist/slider.js.map +1 -0
- package/dist/snackbar.css +139 -0
- package/dist/snackbar.css.map +1 -0
- package/dist/snackbar.d.ts +21 -0
- package/dist/snackbar.js +28 -0
- package/dist/snackbar.js.map +1 -0
- package/dist/switch.css +139 -0
- package/dist/switch.css.map +1 -0
- package/dist/switch.d.ts +9 -0
- package/dist/switch.js +18 -0
- package/dist/switch.js.map +1 -0
- package/dist/tabs.css +108 -0
- package/dist/tabs.css.map +1 -0
- package/dist/tabs.d.ts +20 -0
- package/dist/tabs.js +24 -0
- package/dist/tabs.js.map +1 -0
- package/dist/textfield.css +160 -0
- package/dist/textfield.css.map +1 -0
- package/dist/textfield.d.ts +7 -0
- package/dist/textfield.js +37 -0
- package/dist/textfield.js.map +1 -0
- package/dist/tooltip.css +26 -0
- package/dist/tooltip.css.map +1 -0
- package/dist/tooltip.d.ts +14 -0
- package/dist/tooltip.js +16 -0
- package/dist/tooltip.js.map +1 -0
- package/package.json +167 -0
package/dist/badge.css
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* vanilla-extract-css-ns:src/badge.css.ts.vanilla.css?source=LnFiZnM1cjAgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBwb2ludGVyLWV2ZW50czogbm9uZTsKICB1c2VyLXNlbGVjdDogbm9uZTsKICBkaXNwbGF5OiBpbmxpbmUtZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJhY2tncm91bmQ6IHJnYih2YXIoLS1tZC1zeXMtY29sb3ItZXJyb3IpKTsKICBjb2xvcjogcmdiKHZhcigtLW1kLXN5cy1jb2xvci1vbi1lcnJvcikpOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLW1kLXN5cy1zaGFwZS1mdWxsKTsKfQoucWJmczVyMSB7CiAgdG9wOiA0cHg7CiAgcmlnaHQ6IDRweDsKICB3aWR0aDogNnB4OwogIGhlaWdodDogNnB4Owp9Ci5xYmZzNXIyIHsKICB0b3A6IC00cHg7CiAgcmlnaHQ6IC00cHg7CiAgbWluLXdpZHRoOiAxNnB4OwogIGhlaWdodDogMTZweDsKICBwYWRkaW5nLWlubGluZTogNHB4OwogIGZvbnQtdmFyaWFudC1udW1lcmljOiB0YWJ1bGFyLW51bXM7CiAgZm9udC1mYW1pbHk6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtZm9udCk7CiAgZm9udC13ZWlnaHQ6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtd2VpZ2h0KTsKICBmb250LXNpemU6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtc2l6ZSk7CiAgbGluZS1oZWlnaHQ6IDE7CiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtdHJhY2tpbmcpOwp9 */
|
|
2
|
+
.qbfs5r0 {
|
|
3
|
+
position: absolute;
|
|
4
|
+
pointer-events: none;
|
|
5
|
+
user-select: none;
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
background: rgb(var(--md-sys-color-error));
|
|
10
|
+
color: rgb(var(--md-sys-color-on-error));
|
|
11
|
+
border-radius: var(--md-sys-shape-full);
|
|
12
|
+
}
|
|
13
|
+
.qbfs5r1 {
|
|
14
|
+
top: 4px;
|
|
15
|
+
right: 4px;
|
|
16
|
+
width: 6px;
|
|
17
|
+
height: 6px;
|
|
18
|
+
}
|
|
19
|
+
.qbfs5r2 {
|
|
20
|
+
top: -4px;
|
|
21
|
+
right: -4px;
|
|
22
|
+
min-width: 16px;
|
|
23
|
+
height: 16px;
|
|
24
|
+
padding-inline: 4px;
|
|
25
|
+
font-variant-numeric: tabular-nums;
|
|
26
|
+
font-family: var(--md-sys-typescale-label-small-font);
|
|
27
|
+
font-weight: var(--md-sys-typescale-label-small-weight);
|
|
28
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
29
|
+
line-height: 1;
|
|
30
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
31
|
+
}
|
|
32
|
+
/*# sourceMappingURL=badge.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["vanilla-extract-css-ns:src/badge.css.ts.vanilla.css?source=LnFiZnM1cjAgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBwb2ludGVyLWV2ZW50czogbm9uZTsKICB1c2VyLXNlbGVjdDogbm9uZTsKICBkaXNwbGF5OiBpbmxpbmUtZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJhY2tncm91bmQ6IHJnYih2YXIoLS1tZC1zeXMtY29sb3ItZXJyb3IpKTsKICBjb2xvcjogcmdiKHZhcigtLW1kLXN5cy1jb2xvci1vbi1lcnJvcikpOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLW1kLXN5cy1zaGFwZS1mdWxsKTsKfQoucWJmczVyMSB7CiAgdG9wOiA0cHg7CiAgcmlnaHQ6IDRweDsKICB3aWR0aDogNnB4OwogIGhlaWdodDogNnB4Owp9Ci5xYmZzNXIyIHsKICB0b3A6IC00cHg7CiAgcmlnaHQ6IC00cHg7CiAgbWluLXdpZHRoOiAxNnB4OwogIGhlaWdodDogMTZweDsKICBwYWRkaW5nLWlubGluZTogNHB4OwogIGZvbnQtdmFyaWFudC1udW1lcmljOiB0YWJ1bGFyLW51bXM7CiAgZm9udC1mYW1pbHk6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtZm9udCk7CiAgZm9udC13ZWlnaHQ6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtd2VpZ2h0KTsKICBmb250LXNpemU6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtc2l6ZSk7CiAgbGluZS1oZWlnaHQ6IDE7CiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtdHJhY2tpbmcpOwp9"],"sourcesContent":[".qbfs5r0 {\n position: absolute;\n pointer-events: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: rgb(var(--md-sys-color-error));\n color: rgb(var(--md-sys-color-on-error));\n border-radius: var(--md-sys-shape-full);\n}\n.qbfs5r1 {\n top: 4px;\n right: 4px;\n width: 6px;\n height: 6px;\n}\n.qbfs5r2 {\n top: -4px;\n right: -4px;\n min-width: 16px;\n height: 16px;\n padding-inline: 4px;\n font-variant-numeric: tabular-nums;\n font-family: var(--md-sys-typescale-label-small-font);\n font-weight: var(--md-sys-typescale-label-small-weight);\n font-size: var(--md-sys-typescale-label-small-size);\n line-height: 1;\n letter-spacing: var(--md-sys-typescale-label-small-tracking);\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,kBAAgB;AAChB,eAAa;AACb,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY,IAAI,IAAI;AACpB,SAAO,IAAI,IAAI;AACf,iBAAe,IAAI;AACrB;AACA,CAAC;AACC,OAAK;AACL,SAAO;AACP,SAAO;AACP,UAAQ;AACV;AACA,CAAC;AACC,OAAK;AACL,SAAO;AACP,aAAW;AACX,UAAQ;AACR,kBAAgB;AAChB,wBAAsB;AACtB,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa;AACb,kBAAgB,IAAI;AACtB;","names":[]}
|
package/dist/badge.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
|
+
export { BadgeProps, BadgeSize } from '@m3-baseui/core';
|
|
4
|
+
|
|
5
|
+
declare const Badge: react.ForwardRefExoticComponent<_m3_baseui_core.BadgeOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "children"> & react.RefAttributes<HTMLSpanElement>>;
|
|
6
|
+
|
|
7
|
+
export { Badge };
|
package/dist/badge.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import './badge.css';
|
|
3
|
+
import { createBadge } from '@m3-baseui/core';
|
|
4
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
5
|
+
|
|
6
|
+
// src/badge.ts
|
|
7
|
+
var badge = createRuntimeFn({ defaultClassName: "qbfs5r0", variantClassNames: { size: { small: "qbfs5r1", large: "qbfs5r2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
8
|
+
|
|
9
|
+
// src/badge.ts
|
|
10
|
+
var Badge = createBadge({
|
|
11
|
+
root: ({ size }) => badge({ size })
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { Badge };
|
|
15
|
+
//# sourceMappingURL=badge.js.map
|
|
16
|
+
//# sourceMappingURL=badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/badge.css.ts","../src/badge.ts"],"names":["_7a468"],"mappings":";;;;;;AAEO,IAAI,KAAA,GAAQA,gBAAO,EAAC,gBAAA,EAAiB,WAAU,iBAAA,EAAkB,EAAC,MAAK,EAAC,KAAA,EAAM,WAAU,KAAA,EAAM,SAAA,IAAU,EAAE,eAAA,EAAgB,EAAC,EAAE,gBAAA,EAAiB,EAAC,EAAE,CAAA;;;ACIjJ,IAAM,QAAQ,WAAA,CAAY;AAAA,EAC/B,IAAA,EAAM,CAAC,EAAE,IAAA,OAAW,KAAA,CAAM,EAAE,MAAM;AACpC,CAAC","file":"badge.js","sourcesContent":["import 'src/badge.css.ts.vanilla.css?source=LnFiZnM1cjAgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBwb2ludGVyLWV2ZW50czogbm9uZTsKICB1c2VyLXNlbGVjdDogbm9uZTsKICBkaXNwbGF5OiBpbmxpbmUtZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJhY2tncm91bmQ6IHJnYih2YXIoLS1tZC1zeXMtY29sb3ItZXJyb3IpKTsKICBjb2xvcjogcmdiKHZhcigtLW1kLXN5cy1jb2xvci1vbi1lcnJvcikpOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLW1kLXN5cy1zaGFwZS1mdWxsKTsKfQoucWJmczVyMSB7CiAgdG9wOiA0cHg7CiAgcmlnaHQ6IDRweDsKICB3aWR0aDogNnB4OwogIGhlaWdodDogNnB4Owp9Ci5xYmZzNXIyIHsKICB0b3A6IC00cHg7CiAgcmlnaHQ6IC00cHg7CiAgbWluLXdpZHRoOiAxNnB4OwogIGhlaWdodDogMTZweDsKICBwYWRkaW5nLWlubGluZTogNHB4OwogIGZvbnQtdmFyaWFudC1udW1lcmljOiB0YWJ1bGFyLW51bXM7CiAgZm9udC1mYW1pbHk6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtZm9udCk7CiAgZm9udC13ZWlnaHQ6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtd2VpZ2h0KTsKICBmb250LXNpemU6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtc2l6ZSk7CiAgbGluZS1oZWlnaHQ6IDE7CiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLW1kLXN5cy10eXBlc2NhbGUtbGFiZWwtc21hbGwtdHJhY2tpbmcpOwp9';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var badge = _7a468({defaultClassName:'qbfs5r0',variantClassNames:{size:{small:'qbfs5r1',large:'qbfs5r2'}},defaultVariants:{},compoundVariants:[]});","/**\n * badge.ts — wires the VE recipe into the shared Badge factory.\n */\nimport { createBadge } from '@m3-baseui/core';\nimport { badge } from './badge.css';\n\nexport const Badge = createBadge({\n root: ({ size }) => badge({ size }),\n});\nexport type { BadgeProps, BadgeSize } from '@m3-baseui/core';\n"]}
|
package/dist/button.css
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/* vanilla-extract-css-ns:src/button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81Y227iMBB95yssnopUd0mgq8rV7st-xqpaOfEk8dbYkT2B0lX_fWWbWwK0KSCVJxRn5sztzMFw9yepXycJqjH5NyCkNk6iNJoRC4qjnMPjgBAhXa34khGpldRACwUv_pwrWWoqEWaOkRw0gvXHfxuHsljS3GgEjbuvSl4z8lAH7wpkWSEj03F8rrkQUpc0BmEkncbzzFgBlhFtNGyfqeVCNo6RObc3lM4EdUtHXcVroEWj1MibmjnYQpkFI5UUArQ_yxvrjGWkNnKdVePAUgcKctyGKYxGWvCZVMtOEFzW4HKugCqegaKK2xKotx9tHBer4no4RtOtq5Ov0MvRGwa3MJSqf8Qd--gPiL4DNc-lLntBoOX5s9Rl8EfLdeQNra2pweKSkcy8-HEIs7glGc-fS2saLWhulLG3ZPWxmmV46iCJxvJIxVY6M9N6S11lLE67aaCceSoVjc6PYwB33sgh14JbMXocvA3uNvvAWAaFsRD2YkPl4fCxtSY8c0Y1GBgjtQNkZHyApFJXYCWGN5teMM9FCxp_rcs3fgK-eeMYJTCUwhw0ui0zt3WytUePHqWjU5pQ-RVqtWKTY3vxkCPQYN2FKEzeODqXTmYKekMFrw7Ub8GR09qCcyCeekOtHLp58dzr25koMSUhHc8UiKeViB6e23Yj1metfNYgZ2B0sjlc2_hI3H7WrWlG0wajYE_qF-KMkoLYMrtptTAsOHWQG8-y5Siqc3SkpijC4qRe7_fLWUis_AwsUpkbverx6stCQYGMJN_fcQUtDjjaqJZ7nkmw2l3SI8XUVs42pYSjo6ZBFzfWu8HifsWQO5NtYYCCedxjBXNQSRci8vhTGOMORnuxzoJq07hHH70-NbbgOYzINzK-S9J-HW05TR4OVtTey69KJu0bfbMf4erEpQbbk15HPHeTOJ9q6QWoll6Oaul1UC29JqpN9qKHy0LN_TXjY_iWpq3v3clHsr7S8Q7hJu3xnFAXaV0PP9fI3UQODejr0pn2VoOIst1oqsyijx50pnjSrk9PkItuoafIRTeNM-Rir6KrkIvpNcnF_QXlovvzPele5-7PFoRdsAst9dsgAjll8McwaxCNDrfFYYS81F8f78X5Sdy8DNEWUmDFSNL5hyQ-v_0HDDh116wRAAA */
|
|
2
|
+
._1pz31tl0 {
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
gap: 8px;
|
|
8
|
+
height: 40px;
|
|
9
|
+
padding-inline: 24px;
|
|
10
|
+
border: none;
|
|
11
|
+
border-radius: var(--md-sys-shape-full);
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
user-select: none;
|
|
15
|
+
font-family: var(--md-sys-typescale-label-large-font);
|
|
16
|
+
font-weight: var(--md-sys-typescale-label-large-weight);
|
|
17
|
+
font-size: var(--md-sys-typescale-label-large-size);
|
|
18
|
+
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
19
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
20
|
+
transition-property:
|
|
21
|
+
box-shadow,
|
|
22
|
+
background-color,
|
|
23
|
+
color,
|
|
24
|
+
border-color;
|
|
25
|
+
transition-duration: var(--md-sys-motion-duration-short4);
|
|
26
|
+
transition-timing-function: var(--md-sys-motion-easing-standard);
|
|
27
|
+
}
|
|
28
|
+
._1pz31tl0::before {
|
|
29
|
+
content: "";
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: 0;
|
|
32
|
+
border-radius: inherit;
|
|
33
|
+
background: currentColor;
|
|
34
|
+
opacity: 0;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
|
|
37
|
+
}
|
|
38
|
+
._1pz31tl0:hover::before {
|
|
39
|
+
opacity: var(--md-sys-state-hover);
|
|
40
|
+
}
|
|
41
|
+
._1pz31tl0:focus-visible::before {
|
|
42
|
+
opacity: var(--md-sys-state-focus);
|
|
43
|
+
}
|
|
44
|
+
._1pz31tl0[data-pressed]::before {
|
|
45
|
+
opacity: var(--md-sys-state-pressed);
|
|
46
|
+
}
|
|
47
|
+
._1pz31tl0:active::before {
|
|
48
|
+
opacity: var(--md-sys-state-pressed);
|
|
49
|
+
}
|
|
50
|
+
._1pz31tl0[data-disabled] {
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
box-shadow: none;
|
|
53
|
+
}
|
|
54
|
+
._1pz31tl0:disabled {
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
box-shadow: none;
|
|
57
|
+
}
|
|
58
|
+
._1pz31tl0[data-disabled]::before {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
}
|
|
61
|
+
._1pz31tl0:disabled::before {
|
|
62
|
+
opacity: 0;
|
|
63
|
+
}
|
|
64
|
+
._1pz31tl0:focus-visible {
|
|
65
|
+
outline: 3px solid rgb(var(--md-sys-color-secondary));
|
|
66
|
+
outline-offset: 2px;
|
|
67
|
+
}
|
|
68
|
+
._1pz31tl0[data-with-start-icon] {
|
|
69
|
+
padding-left: 16px;
|
|
70
|
+
}
|
|
71
|
+
._1pz31tl0[data-with-end-icon] {
|
|
72
|
+
padding-right: 16px;
|
|
73
|
+
}
|
|
74
|
+
._1pz31tl1 {
|
|
75
|
+
background: rgb(var(--md-sys-color-primary));
|
|
76
|
+
color: rgb(var(--md-sys-color-on-primary));
|
|
77
|
+
}
|
|
78
|
+
._1pz31tl1:hover {
|
|
79
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
80
|
+
}
|
|
81
|
+
._1pz31tl1:active {
|
|
82
|
+
box-shadow: var(--md-sys-elevation-level0);
|
|
83
|
+
}
|
|
84
|
+
._1pz31tl1[data-pressed] {
|
|
85
|
+
box-shadow: var(--md-sys-elevation-level0);
|
|
86
|
+
}
|
|
87
|
+
._1pz31tl1:disabled {
|
|
88
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
89
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
90
|
+
}
|
|
91
|
+
._1pz31tl1[data-disabled] {
|
|
92
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
93
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
94
|
+
}
|
|
95
|
+
._1pz31tl2 {
|
|
96
|
+
background: rgb(var(--md-sys-color-secondary-container));
|
|
97
|
+
color: rgb(var(--md-sys-color-on-secondary-container));
|
|
98
|
+
}
|
|
99
|
+
._1pz31tl2:hover {
|
|
100
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
101
|
+
}
|
|
102
|
+
._1pz31tl2:active {
|
|
103
|
+
box-shadow: var(--md-sys-elevation-level0);
|
|
104
|
+
}
|
|
105
|
+
._1pz31tl2[data-pressed] {
|
|
106
|
+
box-shadow: var(--md-sys-elevation-level0);
|
|
107
|
+
}
|
|
108
|
+
._1pz31tl2:disabled {
|
|
109
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
110
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
111
|
+
}
|
|
112
|
+
._1pz31tl2[data-disabled] {
|
|
113
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
114
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
115
|
+
}
|
|
116
|
+
._1pz31tl3 {
|
|
117
|
+
background: transparent;
|
|
118
|
+
color: rgb(var(--md-sys-color-primary));
|
|
119
|
+
border: 1px solid rgb(var(--md-sys-color-outline));
|
|
120
|
+
}
|
|
121
|
+
._1pz31tl3:disabled {
|
|
122
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
123
|
+
border-color: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
124
|
+
}
|
|
125
|
+
._1pz31tl3[data-disabled] {
|
|
126
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
127
|
+
border-color: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
128
|
+
}
|
|
129
|
+
._1pz31tl4 {
|
|
130
|
+
background: rgb(var(--md-sys-color-surface-container-low));
|
|
131
|
+
color: rgb(var(--md-sys-color-primary));
|
|
132
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
133
|
+
}
|
|
134
|
+
._1pz31tl4:hover {
|
|
135
|
+
box-shadow: var(--md-sys-elevation-level2);
|
|
136
|
+
}
|
|
137
|
+
._1pz31tl4:active {
|
|
138
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
139
|
+
}
|
|
140
|
+
._1pz31tl4[data-pressed] {
|
|
141
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
142
|
+
}
|
|
143
|
+
._1pz31tl4:disabled {
|
|
144
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
145
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
146
|
+
}
|
|
147
|
+
._1pz31tl4[data-disabled] {
|
|
148
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.12);
|
|
149
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
150
|
+
}
|
|
151
|
+
._1pz31tl5 {
|
|
152
|
+
background: transparent;
|
|
153
|
+
color: rgb(var(--md-sys-color-primary));
|
|
154
|
+
padding-inline: 12px;
|
|
155
|
+
}
|
|
156
|
+
._1pz31tl5:disabled {
|
|
157
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
158
|
+
}
|
|
159
|
+
._1pz31tl5[data-disabled] {
|
|
160
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
161
|
+
}
|
|
162
|
+
[data-slot=button-icon] {
|
|
163
|
+
display: inline-flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
justify-content: center;
|
|
166
|
+
}
|
|
167
|
+
[data-slot=button-icon] > svg {
|
|
168
|
+
width: 18px;
|
|
169
|
+
height: 18px;
|
|
170
|
+
}
|
|
171
|
+
/*# sourceMappingURL=button.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["vanilla-extract-css-ns:src/button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81Y227iMBB95yssnopUd0mgq8rV7st-xqpaOfEk8dbYkT2B0lX_fWWbWwK0KSCVJxRn5sztzMFw9yepXycJqjH5NyCkNk6iNJoRC4qjnMPjgBAhXa34khGpldRACwUv_pwrWWoqEWaOkRw0gvXHfxuHsljS3GgEjbuvSl4z8lAH7wpkWSEj03F8rrkQUpc0BmEkncbzzFgBlhFtNGyfqeVCNo6RObc3lM4EdUtHXcVroEWj1MibmjnYQpkFI5UUArQ_yxvrjGWkNnKdVePAUgcKctyGKYxGWvCZVMtOEFzW4HKugCqegaKK2xKotx9tHBer4no4RtOtq5Ov0MvRGwa3MJSqf8Qd--gPiL4DNc-lLntBoOX5s9Rl8EfLdeQNra2pweKSkcy8-HEIs7glGc-fS2saLWhulLG3ZPWxmmV46iCJxvJIxVY6M9N6S11lLE67aaCceSoVjc6PYwB33sgh14JbMXocvA3uNvvAWAaFsRD2YkPl4fCxtSY8c0Y1GBgjtQNkZHyApFJXYCWGN5teMM9FCxp_rcs3fgK-eeMYJTCUwhw0ui0zt3WytUePHqWjU5pQ-RVqtWKTY3vxkCPQYN2FKEzeODqXTmYKekMFrw7Ub8GR09qCcyCeekOtHLp58dzr25koMSUhHc8UiKeViB6e23Yj1metfNYgZ2B0sjlc2_hI3H7WrWlG0wajYE_qF-KMkoLYMrtptTAsOHWQG8-y5Siqc3SkpijC4qRe7_fLWUis_AwsUpkbverx6stCQYGMJN_fcQUtDjjaqJZ7nkmw2l3SI8XUVs42pYSjo6ZBFzfWu8HifsWQO5NtYYCCedxjBXNQSRci8vhTGOMORnuxzoJq07hHH70-NbbgOYzINzK-S9J-HW05TR4OVtTey69KJu0bfbMf4erEpQbbk15HPHeTOJ9q6QWoll6Oaul1UC29JqpN9qKHy0LN_TXjY_iWpq3v3clHsr7S8Q7hJu3xnFAXaV0PP9fI3UQODejr0pn2VoOIst1oqsyijx50pnjSrk9PkItuoafIRTeNM-Rir6KrkIvpNcnF_QXlovvzPele5-7PFoRdsAst9dsgAjll8McwaxCNDrfFYYS81F8f78X5Sdy8DNEWUmDFSNL5hyQ-v_0HDDh116wRAAA"],"sourcesContent":["._1pz31tl0 {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 40px;\n padding-inline: 24px;\n border: none;\n border-radius: var(--md-sys-shape-full);\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n font-family: var(--md-sys-typescale-label-large-font);\n font-weight: var(--md-sys-typescale-label-large-weight);\n font-size: var(--md-sys-typescale-label-large-size);\n line-height: var(--md-sys-typescale-label-large-line-height);\n letter-spacing: var(--md-sys-typescale-label-large-tracking);\n transition-property: box-shadow, background-color, color, border-color;\n transition-duration: var(--md-sys-motion-duration-short4);\n transition-timing-function: var(--md-sys-motion-easing-standard);\n}\n._1pz31tl0::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: currentColor;\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);\n}\n._1pz31tl0:hover::before {\n opacity: var(--md-sys-state-hover);\n}\n._1pz31tl0:focus-visible::before {\n opacity: var(--md-sys-state-focus);\n}\n._1pz31tl0[data-pressed]::before {\n opacity: var(--md-sys-state-pressed);\n}\n._1pz31tl0:active::before {\n opacity: var(--md-sys-state-pressed);\n}\n._1pz31tl0[data-disabled] {\n pointer-events: none;\n box-shadow: none;\n}\n._1pz31tl0:disabled {\n pointer-events: none;\n box-shadow: none;\n}\n._1pz31tl0[data-disabled]::before {\n opacity: 0;\n}\n._1pz31tl0:disabled::before {\n opacity: 0;\n}\n._1pz31tl0:focus-visible {\n outline: 3px solid rgb(var(--md-sys-color-secondary));\n outline-offset: 2px;\n}\n._1pz31tl0[data-with-start-icon] {\n padding-left: 16px;\n}\n._1pz31tl0[data-with-end-icon] {\n padding-right: 16px;\n}\n._1pz31tl1 {\n background: rgb(var(--md-sys-color-primary));\n color: rgb(var(--md-sys-color-on-primary));\n}\n._1pz31tl1:hover {\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1pz31tl1:active {\n box-shadow: var(--md-sys-elevation-level0);\n}\n._1pz31tl1[data-pressed] {\n box-shadow: var(--md-sys-elevation-level0);\n}\n._1pz31tl1:disabled {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl1[data-disabled] {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl2 {\n background: rgb(var(--md-sys-color-secondary-container));\n color: rgb(var(--md-sys-color-on-secondary-container));\n}\n._1pz31tl2:hover {\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1pz31tl2:active {\n box-shadow: var(--md-sys-elevation-level0);\n}\n._1pz31tl2[data-pressed] {\n box-shadow: var(--md-sys-elevation-level0);\n}\n._1pz31tl2:disabled {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl2[data-disabled] {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl3 {\n background: transparent;\n color: rgb(var(--md-sys-color-primary));\n border: 1px solid rgb(var(--md-sys-color-outline));\n}\n._1pz31tl3:disabled {\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n border-color: rgb(var(--md-sys-color-on-surface) / 0.12);\n}\n._1pz31tl3[data-disabled] {\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n border-color: rgb(var(--md-sys-color-on-surface) / 0.12);\n}\n._1pz31tl4 {\n background: rgb(var(--md-sys-color-surface-container-low));\n color: rgb(var(--md-sys-color-primary));\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1pz31tl4:hover {\n box-shadow: var(--md-sys-elevation-level2);\n}\n._1pz31tl4:active {\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1pz31tl4[data-pressed] {\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1pz31tl4:disabled {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl4[data-disabled] {\n background: rgb(var(--md-sys-color-on-surface) / 0.12);\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl5 {\n background: transparent;\n color: rgb(var(--md-sys-color-primary));\n padding-inline: 12px;\n}\n._1pz31tl5:disabled {\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1pz31tl5[data-disabled] {\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n[data-slot=\"button-icon\"] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n[data-slot=\"button-icon\"] > svg {\n width: 18px;\n height: 18px;\n}"],"mappings":"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","names":[]}
|
package/dist/button.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
4
|
+
export { ButtonProps, ButtonVariant } from '@m3-baseui/core';
|
|
5
|
+
|
|
6
|
+
declare const Button: react.ForwardRefExoticComponent<_m3_baseui_core.ButtonOwnProps & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
|
|
7
|
+
render?: _base_ui_react.useRender.RenderProp;
|
|
8
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
|
|
10
|
+
export { Button };
|
package/dist/button.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import './button.css';
|
|
3
|
+
import { createButton } from '@m3-baseui/core';
|
|
4
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
5
|
+
|
|
6
|
+
// src/button.ts
|
|
7
|
+
var button = createRuntimeFn({ defaultClassName: "_1pz31tl0", variantClassNames: { variant: { filled: "_1pz31tl1", tonal: "_1pz31tl2", outlined: "_1pz31tl3", elevated: "_1pz31tl4", text: "_1pz31tl5" } }, defaultVariants: { variant: "filled" }, compoundVariants: [] });
|
|
8
|
+
|
|
9
|
+
// src/button.ts
|
|
10
|
+
var Button = createButton(({ variant }) => button({ variant }));
|
|
11
|
+
|
|
12
|
+
export { Button };
|
|
13
|
+
//# sourceMappingURL=button.js.map
|
|
14
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.css.ts","../src/button.ts"],"names":["_7a468"],"mappings":";;;;;;AAEO,IAAI,MAAA,GAASA,eAAA,CAAO,EAAC,gBAAA,EAAiB,WAAA,EAAY,iBAAA,EAAkB,EAAC,OAAA,EAAQ,EAAC,MAAA,EAAO,WAAA,EAAY,KAAA,EAAM,WAAA,EAAY,QAAA,EAAS,WAAA,EAAY,QAAA,EAAS,WAAA,EAAY,IAAA,EAAK,WAAA,EAAW,EAAC,EAAE,eAAA,EAAgB,EAAC,OAAA,EAAQ,QAAA,EAAQ,EAAE,gBAAA,EAAiB,IAAG,CAAA;;;ACKvO,IAAM,MAAA,GAAS,YAAA,CAAa,CAAC,EAAE,OAAA,OAAc,MAAA,CAAO,EAAE,OAAA,EAAS,CAAC","file":"button.js","sourcesContent":["import 'src/button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81Y227iMBB95yssnopUd0mgq8rV7st-xqpaOfEk8dbYkT2B0lX_fWWbWwK0KSCVJxRn5sztzMFw9yepXycJqjH5NyCkNk6iNJoRC4qjnMPjgBAhXa34khGpldRACwUv_pwrWWoqEWaOkRw0gvXHfxuHsljS3GgEjbuvSl4z8lAH7wpkWSEj03F8rrkQUpc0BmEkncbzzFgBlhFtNGyfqeVCNo6RObc3lM4EdUtHXcVroEWj1MibmjnYQpkFI5UUArQ_yxvrjGWkNnKdVePAUgcKctyGKYxGWvCZVMtOEFzW4HKugCqegaKK2xKotx9tHBer4no4RtOtq5Ov0MvRGwa3MJSqf8Qd--gPiL4DNc-lLntBoOX5s9Rl8EfLdeQNra2pweKSkcy8-HEIs7glGc-fS2saLWhulLG3ZPWxmmV46iCJxvJIxVY6M9N6S11lLE67aaCceSoVjc6PYwB33sgh14JbMXocvA3uNvvAWAaFsRD2YkPl4fCxtSY8c0Y1GBgjtQNkZHyApFJXYCWGN5teMM9FCxp_rcs3fgK-eeMYJTCUwhw0ui0zt3WytUePHqWjU5pQ-RVqtWKTY3vxkCPQYN2FKEzeODqXTmYKekMFrw7Ub8GR09qCcyCeekOtHLp58dzr25koMSUhHc8UiKeViB6e23Yj1metfNYgZ2B0sjlc2_hI3H7WrWlG0wajYE_qF-KMkoLYMrtptTAsOHWQG8-y5Siqc3SkpijC4qRe7_fLWUis_AwsUpkbverx6stCQYGMJN_fcQUtDjjaqJZ7nkmw2l3SI8XUVs42pYSjo6ZBFzfWu8HifsWQO5NtYYCCedxjBXNQSRci8vhTGOMORnuxzoJq07hHH70-NbbgOYzINzK-S9J-HW05TR4OVtTey69KJu0bfbMf4erEpQbbk15HPHeTOJ9q6QWoll6Oaul1UC29JqpN9qKHy0LN_TXjY_iWpq3v3clHsr7S8Q7hJu3xnFAXaV0PP9fI3UQODejr0pn2VoOIst1oqsyijx50pnjSrk9PkItuoafIRTeNM-Rir6KrkIvpNcnF_QXlovvzPele5-7PFoRdsAst9dsgAjll8McwaxCNDrfFYYS81F8f78X5Sdy8DNEWUmDFSNL5hyQ-v_0HDDh116wRAAA';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_1pz31tl0',variantClassNames:{variant:{filled:'_1pz31tl1',tonal:'_1pz31tl2',outlined:'_1pz31tl3',elevated:'_1pz31tl4',text:'_1pz31tl5'}},defaultVariants:{variant:'filled'},compoundVariants:[]});","/**\n * button.ts — wires the VE recipe into the shared factory. The factory owns all\n * React logic; only the class resolver differs from the Tailwind build.\n */\nimport { createButton } from '@m3-baseui/core';\nimport { button } from './button.css';\n\nexport const Button = createButton(({ variant }) => button({ variant }));\nexport type { ButtonProps, ButtonVariant } from '@m3-baseui/core';\n"]}
|
package/dist/card.css
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* vanilla-extract-css-ns:src/card.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51U247TMBB971dYKyFtJFySFhByH_kMhNAkniQW7jjyOGm7iH9HdpLdTehCdx8zsc-cy3i2P4ry5B-IcvFrI0Tn2ATjSAmPFoIZ8LARonRnyebBUKNE6bxGL0t3Hv-kLw_a9KzEAP5eyqOWfGHJLXQoj6hNf8zi4cpZ55XwTXm_OJjq0pHk3tdQYZYdNr8325lZkZiVUP1svOtJv4gwXZeVowCG0EvrTln2qKAF7U4rkmhxgKhYWhzQFsvWu7e3bk3TIoeVlv0rAWf20WUliu4s2FmjX_SwD9YQygG8AVo3_5iauwF9baMRrdEaKSXTe47RdM5QQB9LPaOXjBaroAQ5SoMQ8BwkWNOQEhbrEGsno0OrRJHn7-LnROHZHQ80D9VTDKL4lB95mcXRpSAQ2FAjOQBp8HqlQakSa-cxaYl2IwUl7u4Oi-mFkp3tQyJgiDEokR9Wzle990jha3QuMe-gMuEynZyskDggBb4uZ7oRtb9NSxvDWCh6JLF8SgECynR6DVG7qmc5GDalxZuh0q01FFTxwd-M0Xlkxr80LQiNIPNI7P83v4yVi0Zdxrmfx9nVdYpw151XzbRhKC3q9-Kp-E1DADn_-T7ttetpPt8Lc-3mNSU-iHy7_7I2YO48G_kPbte9zheAn8cpGRfHjWtsl60gxmhfhZFW4R8DPKxLHwYAAA */
|
|
2
|
+
._1bwrznn0 {
|
|
3
|
+
position: relative;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
border-radius: var(--md-sys-shape-medium);
|
|
6
|
+
color: rgb(var(--md-sys-color-on-surface));
|
|
7
|
+
}
|
|
8
|
+
._1bwrznn1 {
|
|
9
|
+
background: rgb(var(--md-sys-color-surface-container-low));
|
|
10
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
11
|
+
}
|
|
12
|
+
._1bwrznn2 {
|
|
13
|
+
background: rgb(var(--md-sys-color-surface-container-highest));
|
|
14
|
+
}
|
|
15
|
+
._1bwrznn3 {
|
|
16
|
+
background: rgb(var(--md-sys-color-surface));
|
|
17
|
+
border: 1px solid rgb(var(--md-sys-color-outline-variant));
|
|
18
|
+
}
|
|
19
|
+
._1bwrznn4 {
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
user-select: none;
|
|
23
|
+
text-align: left;
|
|
24
|
+
width: 100%;
|
|
25
|
+
outline: none;
|
|
26
|
+
transition: box-shadow 150ms var(--md-sys-motion-easing-standard);
|
|
27
|
+
}
|
|
28
|
+
._1bwrznn4::before {
|
|
29
|
+
content: "";
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: 0;
|
|
32
|
+
background: currentColor;
|
|
33
|
+
opacity: 0;
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
transition: opacity 100ms var(--md-sys-motion-easing-standard);
|
|
36
|
+
}
|
|
37
|
+
._1bwrznn4:hover::before {
|
|
38
|
+
opacity: var(--md-sys-state-hover);
|
|
39
|
+
}
|
|
40
|
+
._1bwrznn4:focus-visible::before {
|
|
41
|
+
opacity: var(--md-sys-state-focus);
|
|
42
|
+
}
|
|
43
|
+
._1bwrznn4:active::before {
|
|
44
|
+
opacity: var(--md-sys-state-pressed);
|
|
45
|
+
}
|
|
46
|
+
._1bwrznn4:focus-visible {
|
|
47
|
+
outline: 3px solid rgb(var(--md-sys-color-secondary));
|
|
48
|
+
outline-offset: 2px;
|
|
49
|
+
}
|
|
50
|
+
._1bwrznn4:disabled,
|
|
51
|
+
._1bwrznn4[data-disabled] {
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
55
|
+
}
|
|
56
|
+
._1bwrznn4:disabled::before,
|
|
57
|
+
._1bwrznn4[data-disabled]::before {
|
|
58
|
+
opacity: 0;
|
|
59
|
+
}
|
|
60
|
+
._1bwrznn6:hover {
|
|
61
|
+
box-shadow: var(--md-sys-elevation-level2);
|
|
62
|
+
}
|
|
63
|
+
._1bwrznn6:active {
|
|
64
|
+
box-shadow: var(--md-sys-elevation-level1);
|
|
65
|
+
}
|
|
66
|
+
/*# sourceMappingURL=card.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["vanilla-extract-css-ns:src/card.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51U247TMBB971dYKyFtJFySFhByH_kMhNAkniQW7jjyOGm7iH9HdpLdTehCdx8zsc-cy3i2P4ry5B-IcvFrI0Tn2ATjSAmPFoIZ8LARonRnyebBUKNE6bxGL0t3Hv-kLw_a9KzEAP5eyqOWfGHJLXQoj6hNf8zi4cpZ55XwTXm_OJjq0pHk3tdQYZYdNr8325lZkZiVUP1svOtJv4gwXZeVowCG0EvrTln2qKAF7U4rkmhxgKhYWhzQFsvWu7e3bk3TIoeVlv0rAWf20WUliu4s2FmjX_SwD9YQygG8AVo3_5iauwF9baMRrdEaKSXTe47RdM5QQB9LPaOXjBaroAQ5SoMQ8BwkWNOQEhbrEGsno0OrRJHn7-LnROHZHQ80D9VTDKL4lB95mcXRpSAQ2FAjOQBp8HqlQakSa-cxaYl2IwUl7u4Oi-mFkp3tQyJgiDEokR9Wzle990jha3QuMe-gMuEynZyskDggBb4uZ7oRtb9NSxvDWCh6JLF8SgECynR6DVG7qmc5GDalxZuh0q01FFTxwd-M0Xlkxr80LQiNIPNI7P83v4yVi0Zdxrmfx9nVdYpw151XzbRhKC3q9-Kp-E1DADn_-T7ttetpPt8Lc-3mNSU-iHy7_7I2YO48G_kPbte9zheAn8cpGRfHjWtsl60gxmhfhZFW4R8DPKxLHwYAAA"],"sourcesContent":["._1bwrznn0 {\n position: relative;\n box-sizing: border-box;\n border-radius: var(--md-sys-shape-medium);\n color: rgb(var(--md-sys-color-on-surface));\n}\n._1bwrznn1 {\n background: rgb(var(--md-sys-color-surface-container-low));\n box-shadow: var(--md-sys-elevation-level1);\n}\n._1bwrznn2 {\n background: rgb(var(--md-sys-color-surface-container-highest));\n}\n._1bwrznn3 {\n background: rgb(var(--md-sys-color-surface));\n border: 1px solid rgb(var(--md-sys-color-outline-variant));\n}\n._1bwrznn4 {\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n text-align: left;\n width: 100%;\n outline: none;\n transition: box-shadow 150ms var(--md-sys-motion-easing-standard);\n}\n._1bwrznn4::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: currentColor;\n opacity: 0;\n pointer-events: none;\n transition: opacity 100ms var(--md-sys-motion-easing-standard);\n}\n._1bwrznn4:hover::before {\n opacity: var(--md-sys-state-hover);\n}\n._1bwrznn4:focus-visible::before {\n opacity: var(--md-sys-state-focus);\n}\n._1bwrznn4:active::before {\n opacity: var(--md-sys-state-pressed);\n}\n._1bwrznn4:focus-visible {\n outline: 3px solid rgb(var(--md-sys-color-secondary));\n outline-offset: 2px;\n}\n._1bwrznn4:disabled, ._1bwrznn4[data-disabled] {\n pointer-events: none;\n box-shadow: none;\n color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1bwrznn4:disabled::before, ._1bwrznn4[data-disabled]::before {\n opacity: 0;\n}\n._1bwrznn6:hover {\n box-shadow: var(--md-sys-elevation-level2);\n}\n._1bwrznn6:active {\n box-shadow: var(--md-sys-elevation-level1);\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,cAAY;AACZ,iBAAe,IAAI;AACnB,SAAO,IAAI,IAAI;AACjB;AACA,CAAC;AACC,cAAY,IAAI,IAAI;AACpB,cAAY,IAAI;AAClB;AACA,CAAC;AACC,cAAY,IAAI,IAAI;AACtB;AACA,CAAC;AACC,cAAY,IAAI,IAAI;AACpB,UAAQ,IAAI,MAAM,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,YAAU;AACV,UAAQ;AACR,eAAa;AACb,cAAY;AACZ,SAAO;AACP,WAAS;AACT,cAAY,WAAW,MAAM,IAAI;AACnC;AACA,CATC,SASS;AACR,WAAS;AACT,YAAU;AACV,SAAO;AACP,cAAY;AACZ,WAAS;AACT,kBAAgB;AAChB,cAAY,QAAQ,MAAM,IAAI;AAChC;AACA,CAlBC,SAkBS,MAAM;AACd,WAAS,IAAI;AACf;AACA,CArBC,SAqBS,cAAc;AACtB,WAAS,IAAI;AACf;AACA,CAxBC,SAwBS,OAAO;AACf,WAAS,IAAI;AACf;AACA,CA3BC,SA2BS;AACR,WAAS,IAAI,MAAM,IAAI,IAAI;AAC3B,kBAAgB;AAClB;AACA,CA/BC,SA+BS;AAAW,CA/BpB,SA+B8B,CAAC;AAC9B,kBAAgB;AAChB,cAAY;AACZ,SAAO,IAAI,IAAI,2BAA2B,EAAE;AAC9C;AACA,CApCC,SAoCS,SAAS;AAAU,CApC5B,SAoCsC,CAAC,cAAc;AACpD,WAAS;AACX;AACA,CAAC,SAAS;AACR,cAAY,IAAI;AAClB;AACA,CAHC,SAGS;AACR,cAAY,IAAI;AAClB;","names":[]}
|
package/dist/card.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _m3_baseui_core from '@m3-baseui/core';
|
|
3
|
+
export { CardProps, CardVariant } from '@m3-baseui/core';
|
|
4
|
+
|
|
5
|
+
declare const Card: react.ForwardRefExoticComponent<_m3_baseui_core.CardOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "color"> & react.RefAttributes<HTMLElement>>;
|
|
6
|
+
|
|
7
|
+
export { Card };
|
package/dist/card.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import './card.css';
|
|
3
|
+
import { createCard } from '@m3-baseui/core';
|
|
4
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
5
|
+
|
|
6
|
+
// src/card.ts
|
|
7
|
+
var card = createRuntimeFn({ defaultClassName: "_1bwrznn0", variantClassNames: { variant: { elevated: "_1bwrznn1", filled: "_1bwrznn2", outlined: "_1bwrznn3" }, interactive: { true: "_1bwrznn4", false: "_1bwrznn5" } }, defaultVariants: { variant: "elevated", interactive: false }, compoundVariants: [[{ variant: "elevated", interactive: true }, "_1bwrznn6"]] });
|
|
8
|
+
|
|
9
|
+
// src/card.ts
|
|
10
|
+
var Card = createCard({
|
|
11
|
+
root: ({ variant, interactive }) => card({ variant, interactive })
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { Card };
|
|
15
|
+
//# sourceMappingURL=card.js.map
|
|
16
|
+
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/card.css.ts","../src/card.ts"],"names":["_7a468"],"mappings":";;;;;;AAEO,IAAI,OAAOA,eAAA,CAAO,EAAC,kBAAiB,WAAA,EAAY,iBAAA,EAAkB,EAAC,OAAA,EAAQ,EAAC,UAAS,WAAA,EAAY,MAAA,EAAO,aAAY,QAAA,EAAS,WAAA,IAAa,WAAA,EAAY,EAAC,MAAK,WAAA,EAAY,KAAA,EAAM,aAAW,EAAC,EAAE,iBAAgB,EAAC,OAAA,EAAQ,YAAW,WAAA,EAAY,KAAA,IAAO,gBAAA,EAAiB,CAAC,CAAC,EAAC,OAAA,EAAQ,YAAW,WAAA,EAAY,IAAA,IAAM,WAAW,CAAC,GAAE,CAAA;;;ACI1T,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,IAAA,CAAK,EAAE,OAAA,EAAS,WAAA,EAAa;AACnE,CAAC","file":"card.js","sourcesContent":["import 'src/card.css.ts.vanilla.css?source=#H4sIAAAAAAAAA51U247TMBB971dYKyFtJFySFhByH_kMhNAkniQW7jjyOGm7iH9HdpLdTehCdx8zsc-cy3i2P4ry5B-IcvFrI0Tn2ATjSAmPFoIZ8LARonRnyebBUKNE6bxGL0t3Hv-kLw_a9KzEAP5eyqOWfGHJLXQoj6hNf8zi4cpZ55XwTXm_OJjq0pHk3tdQYZYdNr8325lZkZiVUP1svOtJv4gwXZeVowCG0EvrTln2qKAF7U4rkmhxgKhYWhzQFsvWu7e3bk3TIoeVlv0rAWf20WUliu4s2FmjX_SwD9YQygG8AVo3_5iauwF9baMRrdEaKSXTe47RdM5QQB9LPaOXjBaroAQ5SoMQ8BwkWNOQEhbrEGsno0OrRJHn7-LnROHZHQ80D9VTDKL4lB95mcXRpSAQ2FAjOQBp8HqlQakSa-cxaYl2IwUl7u4Oi-mFkp3tQyJgiDEokR9Wzle990jha3QuMe-gMuEynZyskDggBb4uZ7oRtb9NSxvDWCh6JLF8SgECynR6DVG7qmc5GDalxZuh0q01FFTxwd-M0Xlkxr80LQiNIPNI7P83v4yVi0Zdxrmfx9nVdYpw151XzbRhKC3q9-Kp-E1DADn_-T7ttetpPt8Lc-3mNSU-iHy7_7I2YO48G_kPbte9zheAn8cpGRfHjWtsl60gxmhfhZFW4R8DPKxLHwYAAA';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var card = _7a468({defaultClassName:'_1bwrznn0',variantClassNames:{variant:{elevated:'_1bwrznn1',filled:'_1bwrznn2',outlined:'_1bwrznn3'},interactive:{true:'_1bwrznn4',false:'_1bwrznn5'}},defaultVariants:{variant:'elevated',interactive:false},compoundVariants:[[{variant:'elevated',interactive:true},'_1bwrznn6']]});","/**\n * card.ts — wires the VE recipe into the shared Card factory.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { card } from './card.css';\n\nexport const Card = createCard({\n root: ({ variant, interactive }) => card({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/* vanilla-extract-css-ns:src/checkbox.css.ts.vanilla.css?source=#H4sIAAAAAAAAA71W3WrbMBS-z1OIQiGBqrPbZRTlco8xwpCt41itLJkjOWs29u7DipJarmO7GfQmRPI53_k_n-5_puU3MHqdkD8LQmpjpZNGM4KguJN72CwIEdLWih8YkVpJDbRQ8NrecyV3mkoHlWUkB-0A2-vnxjpZHGhutAPtup9aTWpLlPqFkaS9ycwrtfK31DtGMoMCkGbGo_-SwpWMpE-1P5Ygd6V7Owdh5EI2lpGH7q0_EmuUFAR32XLPcUlpJag9WJobZZAaTW2DBc-B7jlKrt1q5QF4_rJD02jBiEOubc0RtGs_eUU2DXgEyhu0rXht5Cl6jxfy-2bnqE_SdVJZEgFXppWlwK3UO2od14KjWN2dYv-o4mbxd3F_LvgPwR2neQn5C4jtHel_kVqAA6yk5g62vj26ybmQhhplxfEQktnxc57GbNH3kQhpeaZAbEMn-7RT2IN2lhFtNIxqMW3cMs7JqnMXZ2N1TMec8Dp9Qb6Q5P7xadz7qbL0BK-r0qBT_YCi9h_LHMugMAjeuKl5Lt3BT3dXh_G8XSde5j-KfMpLgJvq2vlW4_F9bxgQDW7nl93Lz-nps-Alm1MN0ZW6rhs6vn5ybBfLOBT6LOFr6z_oKitM3li6l1ZmKvR341oOZORximEs5Kbdu2GzBUVqisKCC4QVGeuO0Zk7b242ES_zzBrVOM_LCgrHyDq59eRi6vP_QJ1fk5g6T-cedQalbqPkDbZj_70NZNOb6sBjhcEq7AjFHSzpOrm9I-3vqs91QZukyXVMxUqzBxxeMxGaddwB9dKjlZwN5bX6UMeemo1RI1gLvZjST3lunZ5QybHC5ydUOA9z5IxNGVH2hY2fXtxb6cVddYZKR1ZwL4eTzo4sobcnw4dAh4liMCzGeOEA58_0uWTx6D4MTm7cbSWvgRaNUu8esvE4d3x-8I6NvrSnIiQ9sKgd_gGm1pIiXwwAAA */
|
|
2
|
+
._1h6eon50 {
|
|
3
|
+
position: relative;
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
flex-shrink: 0;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
width: 18px;
|
|
10
|
+
height: 18px;
|
|
11
|
+
border-radius: 2px;
|
|
12
|
+
border: 2px solid rgb(var(--md-sys-color-on-surface-variant));
|
|
13
|
+
background: transparent;
|
|
14
|
+
color: rgb(var(--md-sys-color-on-surface));
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
transition: background-color 150ms var(--md-sys-motion-easing-standard), border-color 150ms var(--md-sys-motion-easing-standard);
|
|
17
|
+
}
|
|
18
|
+
._1h6eon50[data-checked],
|
|
19
|
+
._1h6eon50[data-indeterminate] {
|
|
20
|
+
background: rgb(var(--md-sys-color-primary));
|
|
21
|
+
border-color: rgb(var(--md-sys-color-primary));
|
|
22
|
+
color: rgb(var(--md-sys-color-primary));
|
|
23
|
+
}
|
|
24
|
+
._1h6eon50[data-disabled] {
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
}
|
|
27
|
+
._1h6eon50[data-disabled]:not([data-checked]):not([data-indeterminate]) {
|
|
28
|
+
border-color: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
29
|
+
}
|
|
30
|
+
._1h6eon50[data-disabled][data-checked],
|
|
31
|
+
._1h6eon50[data-disabled][data-indeterminate] {
|
|
32
|
+
background: rgb(var(--md-sys-color-on-surface) / 0.38);
|
|
33
|
+
border-color: transparent;
|
|
34
|
+
}
|
|
35
|
+
._1h6eon50[data-disabled]::before {
|
|
36
|
+
opacity: 0;
|
|
37
|
+
}
|
|
38
|
+
._1h6eon50:active {
|
|
39
|
+
color: rgb(var(--md-sys-color-primary));
|
|
40
|
+
}
|
|
41
|
+
._1h6eon50[data-checked]:active,
|
|
42
|
+
._1h6eon50[data-indeterminate]:active {
|
|
43
|
+
color: rgb(var(--md-sys-color-on-surface));
|
|
44
|
+
}
|
|
45
|
+
._1h6eon50[data-error] {
|
|
46
|
+
border-color: rgb(var(--md-sys-color-error));
|
|
47
|
+
color: rgb(var(--md-sys-color-error));
|
|
48
|
+
}
|
|
49
|
+
._1h6eon50[data-error][data-checked],
|
|
50
|
+
._1h6eon50[data-error][data-indeterminate] {
|
|
51
|
+
background: rgb(var(--md-sys-color-error));
|
|
52
|
+
border-color: rgb(var(--md-sys-color-error));
|
|
53
|
+
color: rgb(var(--md-sys-color-error));
|
|
54
|
+
}
|
|
55
|
+
._1h6eon50[data-error]:active,
|
|
56
|
+
._1h6eon50[data-error][data-checked]:active,
|
|
57
|
+
._1h6eon50[data-error][data-indeterminate]:active {
|
|
58
|
+
color: rgb(var(--md-sys-color-error));
|
|
59
|
+
}
|
|
60
|
+
._1h6eon50:focus-visible {
|
|
61
|
+
outline: 3px solid rgb(var(--md-sys-color-secondary));
|
|
62
|
+
outline-offset: 2px;
|
|
63
|
+
}
|
|
64
|
+
._1h6eon50::before {
|
|
65
|
+
content: "";
|
|
66
|
+
position: absolute;
|
|
67
|
+
left: 50%;
|
|
68
|
+
top: 50%;
|
|
69
|
+
width: 40px;
|
|
70
|
+
height: 40px;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
background: currentColor;
|
|
73
|
+
opacity: 0;
|
|
74
|
+
transform: translate(-50%, -50%);
|
|
75
|
+
transition: opacity 100ms var(--md-sys-motion-easing-standard);
|
|
76
|
+
}
|
|
77
|
+
._1h6eon50:hover::before {
|
|
78
|
+
opacity: var(--md-sys-state-hover);
|
|
79
|
+
}
|
|
80
|
+
._1h6eon50:focus-visible::before {
|
|
81
|
+
opacity: var(--md-sys-state-focus);
|
|
82
|
+
}
|
|
83
|
+
._1h6eon50:active::before {
|
|
84
|
+
opacity: var(--md-sys-state-pressed);
|
|
85
|
+
}
|
|
86
|
+
._1h6eon51 {
|
|
87
|
+
position: relative;
|
|
88
|
+
display: inline-flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
width: 100%;
|
|
92
|
+
height: 100%;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
color: rgb(var(--md-sys-color-on-primary));
|
|
95
|
+
opacity: 0;
|
|
96
|
+
}
|
|
97
|
+
._1h6eon51[data-checked],
|
|
98
|
+
._1h6eon51[data-indeterminate] {
|
|
99
|
+
opacity: 1;
|
|
100
|
+
}
|
|
101
|
+
._1h6eon50[data-error] ._1h6eon51 {
|
|
102
|
+
color: rgb(var(--md-sys-color-on-error));
|
|
103
|
+
}
|
|
104
|
+
._1h6eon50[data-disabled] ._1h6eon51 {
|
|
105
|
+
color: rgb(var(--md-sys-color-surface));
|
|
106
|
+
}
|
|
107
|
+
._1h6eon51[data-indeterminate]::after {
|
|
108
|
+
content: "";
|
|
109
|
+
position: absolute;
|
|
110
|
+
width: 10px;
|
|
111
|
+
height: 2px;
|
|
112
|
+
border-radius: var(--md-sys-shape-full);
|
|
113
|
+
background: currentColor;
|
|
114
|
+
}
|
|
115
|
+
._1h6eon52 {
|
|
116
|
+
width: 18px;
|
|
117
|
+
height: 18px;
|
|
118
|
+
}
|
|
119
|
+
._1h6eon51[data-indeterminate] ._1h6eon52 {
|
|
120
|
+
opacity: 0;
|
|
121
|
+
}
|
|
122
|
+
/*# sourceMappingURL=checkbox.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["vanilla-extract-css-ns:src/checkbox.css.ts.vanilla.css?source=#H4sIAAAAAAAAA71W3WrbMBS-z1OIQiGBqrPbZRTlco8xwpCt41itLJkjOWs29u7DipJarmO7GfQmRPI53_k_n-5_puU3MHqdkD8LQmpjpZNGM4KguJN72CwIEdLWih8YkVpJDbRQ8NrecyV3mkoHlWUkB-0A2-vnxjpZHGhutAPtup9aTWpLlPqFkaS9ycwrtfK31DtGMoMCkGbGo_-SwpWMpE-1P5Ygd6V7Owdh5EI2lpGH7q0_EmuUFAR32XLPcUlpJag9WJobZZAaTW2DBc-B7jlKrt1q5QF4_rJD02jBiEOubc0RtGs_eUU2DXgEyhu0rXht5Cl6jxfy-2bnqE_SdVJZEgFXppWlwK3UO2od14KjWN2dYv-o4mbxd3F_LvgPwR2neQn5C4jtHel_kVqAA6yk5g62vj26ybmQhhplxfEQktnxc57GbNH3kQhpeaZAbEMn-7RT2IN2lhFtNIxqMW3cMs7JqnMXZ2N1TMec8Dp9Qb6Q5P7xadz7qbL0BK-r0qBT_YCi9h_LHMugMAjeuKl5Lt3BT3dXh_G8XSde5j-KfMpLgJvq2vlW4_F9bxgQDW7nl93Lz-nps-Alm1MN0ZW6rhs6vn5ybBfLOBT6LOFr6z_oKitM3li6l1ZmKvR341oOZORximEs5Kbdu2GzBUVqisKCC4QVGeuO0Zk7b242ES_zzBrVOM_LCgrHyDq59eRi6vP_QJ1fk5g6T-cedQalbqPkDbZj_70NZNOb6sBjhcEq7AjFHSzpOrm9I-3vqs91QZukyXVMxUqzBxxeMxGaddwB9dKjlZwN5bX6UMeemo1RI1gLvZjST3lunZ5QybHC5ydUOA9z5IxNGVH2hY2fXtxb6cVddYZKR1ZwL4eTzo4sobcnw4dAh4liMCzGeOEA58_0uWTx6D4MTm7cbSWvgRaNUu8esvE4d3x-8I6NvrSnIiQ9sKgd_gGm1pIiXwwAAA"],"sourcesContent":["._1h6eon50 {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n width: 18px;\n height: 18px;\n border-radius: 2px;\n border: 2px solid rgb(var(--md-sys-color-on-surface-variant));\n background: transparent;\n color: rgb(var(--md-sys-color-on-surface));\n cursor: pointer;\n transition: background-color 150ms var(--md-sys-motion-easing-standard), border-color 150ms var(--md-sys-motion-easing-standard);\n}\n._1h6eon50[data-checked], ._1h6eon50[data-indeterminate] {\n background: rgb(var(--md-sys-color-primary));\n border-color: rgb(var(--md-sys-color-primary));\n color: rgb(var(--md-sys-color-primary));\n}\n._1h6eon50[data-disabled] {\n pointer-events: none;\n}\n._1h6eon50[data-disabled]:not([data-checked]):not([data-indeterminate]) {\n border-color: rgb(var(--md-sys-color-on-surface) / 0.38);\n}\n._1h6eon50[data-disabled][data-checked], ._1h6eon50[data-disabled][data-indeterminate] {\n background: rgb(var(--md-sys-color-on-surface) / 0.38);\n border-color: transparent;\n}\n._1h6eon50[data-disabled]::before {\n opacity: 0;\n}\n._1h6eon50:active {\n color: rgb(var(--md-sys-color-primary));\n}\n._1h6eon50[data-checked]:active, ._1h6eon50[data-indeterminate]:active {\n color: rgb(var(--md-sys-color-on-surface));\n}\n._1h6eon50[data-error] {\n border-color: rgb(var(--md-sys-color-error));\n color: rgb(var(--md-sys-color-error));\n}\n._1h6eon50[data-error][data-checked], ._1h6eon50[data-error][data-indeterminate] {\n background: rgb(var(--md-sys-color-error));\n border-color: rgb(var(--md-sys-color-error));\n color: rgb(var(--md-sys-color-error));\n}\n._1h6eon50[data-error]:active, ._1h6eon50[data-error][data-checked]:active, ._1h6eon50[data-error][data-indeterminate]:active {\n color: rgb(var(--md-sys-color-error));\n}\n._1h6eon50:focus-visible {\n outline: 3px solid rgb(var(--md-sys-color-secondary));\n outline-offset: 2px;\n}\n._1h6eon50::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: currentColor;\n opacity: 0;\n transform: translate(-50%, -50%);\n transition: opacity 100ms var(--md-sys-motion-easing-standard);\n}\n._1h6eon50:hover::before {\n opacity: var(--md-sys-state-hover);\n}\n._1h6eon50:focus-visible::before {\n opacity: var(--md-sys-state-focus);\n}\n._1h6eon50:active::before {\n opacity: var(--md-sys-state-pressed);\n}\n._1h6eon51 {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n color: rgb(var(--md-sys-color-on-primary));\n opacity: 0;\n}\n._1h6eon51[data-checked], ._1h6eon51[data-indeterminate] {\n opacity: 1;\n}\n._1h6eon50[data-error] ._1h6eon51 {\n color: rgb(var(--md-sys-color-on-error));\n}\n._1h6eon50[data-disabled] ._1h6eon51 {\n color: rgb(var(--md-sys-color-surface));\n}\n._1h6eon51[data-indeterminate]::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 2px;\n border-radius: var(--md-sys-shape-full);\n background: currentColor;\n}\n._1h6eon52 {\n width: 18px;\n height: 18px;\n}\n._1h6eon51[data-indeterminate] ._1h6eon52 {\n opacity: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,eAAa;AACb,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI,IAAI;AAC1B,cAAY;AACZ,SAAO,IAAI,IAAI;AACf,UAAQ;AACR,cAAY,iBAAiB,MAAM,IAAI,gCAAgC,EAAE,aAAa,MAAM,IAAI;AAClG;AACA,CAhBC,SAgBS,CAAC;AAAe,CAhBzB,SAgBmC,CAAC;AACnC,cAAY,IAAI,IAAI;AACpB,gBAAc,IAAI,IAAI;AACtB,SAAO,IAAI,IAAI;AACjB;AACA,CArBC,SAqBS,CAAC;AACT,kBAAgB;AAClB;AACA,CAxBC,SAwBS,CAAC,cAAc,KAAK,CAAC,cAAc,KAAK,CAAC;AACjD,gBAAc,IAAI,IAAI,2BAA2B,EAAE;AACrD;AACA,CA3BC,SA2BS,CAAC,cAAc,CAAC;AAAe,CA3BxC,SA2BkD,CAAC,cAAc,CAAC;AACjE,cAAY,IAAI,IAAI,2BAA2B,EAAE;AACjD,gBAAc;AAChB;AACA,CA/BC,SA+BS,CAAC,cAAc;AACvB,WAAS;AACX;AACA,CAlCC,SAkCS;AACR,SAAO,IAAI,IAAI;AACjB;AACA,CArCC,SAqCS,CAAC,aAAa;AAAS,CArChC,SAqC0C,CAAC,mBAAmB;AAC7D,SAAO,IAAI,IAAI;AACjB;AACA,CAxCC,SAwCS,CAAC;AACT,gBAAc,IAAI,IAAI;AACtB,SAAO,IAAI,IAAI;AACjB;AACA,CA5CC,SA4CS,CAAC,WAAW,CAAC;AAAe,CA5CrC,SA4C+C,CAAC,WAAW,CAAC;AAC3D,cAAY,IAAI,IAAI;AACpB,gBAAc,IAAI,IAAI;AACtB,SAAO,IAAI,IAAI;AACjB;AACA,CAjDC,SAiDS,CAAC,WAAW;AAAS,CAjD9B,SAiDwC,CAAC,WAAW,CAAC,aAAa;AAAS,CAjD3E,SAiDqF,CAAC,WAAW,CAAC,mBAAmB;AACpH,SAAO,IAAI,IAAI;AACjB;AACA,CApDC,SAoDS;AACR,WAAS,IAAI,MAAM,IAAI,IAAI;AAC3B,kBAAgB;AAClB;AACA,CAxDC,SAwDS;AACR,WAAS;AACT,YAAU;AACV,QAAM;AACN,OAAK;AACL,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,WAAS;AACT,aAAW,UAAU,IAAI,EAAE;AAC3B,cAAY,QAAQ,MAAM,IAAI;AAChC;AACA,CArEC,SAqES,MAAM;AACd,WAAS,IAAI;AACf;AACA,CAxEC,SAwES,cAAc;AACtB,WAAS,IAAI;AACf;AACA,CA3EC,SA2ES,OAAO;AACf,WAAS,IAAI;AACf;AACA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,kBAAgB;AAChB,SAAO,IAAI,IAAI;AACf,WAAS;AACX;AACA,CAXC,SAWS,CAAC;AAAe,CAXzB,SAWmC,CAAC;AACnC,WAAS;AACX;AACA,CA5FC,SA4FS,CAAC,YAAY,CAdtB;AAeC,SAAO,IAAI,IAAI;AACjB;AACA,CA/FC,SA+FS,CAAC,eAAe,CAjBzB;AAkBC,SAAO,IAAI,IAAI;AACjB;AACA,CApBC,SAoBS,CAAC,mBAAmB;AAC5B,WAAS;AACT,YAAU;AACV,SAAO;AACP,UAAQ;AACR,iBAAe,IAAI;AACnB,cAAY;AACd;AACA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AACA,CAhCC,SAgCS,CAAC,oBAAoB,CAJ9B;AAKC,WAAS;AACX;","names":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
3
|
+
|
|
4
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & {
|
|
5
|
+
error?: boolean;
|
|
6
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
7
|
+
|
|
8
|
+
export { Checkbox };
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import './checkbox.css';
|
|
3
|
+
import { createCheckbox } from '@m3-baseui/core';
|
|
4
|
+
|
|
5
|
+
// src/checkbox.ts
|
|
6
|
+
|
|
7
|
+
// src/checkbox.css.ts
|
|
8
|
+
var icon = "_1h6eon52";
|
|
9
|
+
var indicator = "_1h6eon51";
|
|
10
|
+
var root = "_1h6eon50";
|
|
11
|
+
|
|
12
|
+
// src/checkbox.ts
|
|
13
|
+
var Checkbox = createCheckbox({ root, indicator, icon });
|
|
14
|
+
|
|
15
|
+
export { Checkbox };
|
|
16
|
+
//# sourceMappingURL=checkbox.js.map
|
|
17
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.css.ts","../src/checkbox.ts"],"names":[],"mappings":";;;;;;;AACO,IAAI,IAAA,GAAO,WAAA;AACX,IAAI,SAAA,GAAY,WAAA;AAChB,IAAI,IAAA,GAAO,WAAA;;;ACGX,IAAM,WAAW,cAAA,CAAe,EAAE,IAAA,EAAM,SAAA,EAAW,MAAM","file":"checkbox.js","sourcesContent":["import 'src/checkbox.css.ts.vanilla.css?source=#H4sIAAAAAAAAA71W3WrbMBS-z1OIQiGBqrPbZRTlco8xwpCt41itLJkjOWs29u7DipJarmO7GfQmRPI53_k_n-5_puU3MHqdkD8LQmpjpZNGM4KguJN72CwIEdLWih8YkVpJDbRQ8NrecyV3mkoHlWUkB-0A2-vnxjpZHGhutAPtup9aTWpLlPqFkaS9ycwrtfK31DtGMoMCkGbGo_-SwpWMpE-1P5Ygd6V7Owdh5EI2lpGH7q0_EmuUFAR32XLPcUlpJag9WJobZZAaTW2DBc-B7jlKrt1q5QF4_rJD02jBiEOubc0RtGs_eUU2DXgEyhu0rXht5Cl6jxfy-2bnqE_SdVJZEgFXppWlwK3UO2od14KjWN2dYv-o4mbxd3F_LvgPwR2neQn5C4jtHel_kVqAA6yk5g62vj26ybmQhhplxfEQktnxc57GbNH3kQhpeaZAbEMn-7RT2IN2lhFtNIxqMW3cMs7JqnMXZ2N1TMec8Dp9Qb6Q5P7xadz7qbL0BK-r0qBT_YCi9h_LHMugMAjeuKl5Lt3BT3dXh_G8XSde5j-KfMpLgJvq2vlW4_F9bxgQDW7nl93Lz-nps-Alm1MN0ZW6rhs6vn5ybBfLOBT6LOFr6z_oKitM3li6l1ZmKvR341oOZORximEs5Kbdu2GzBUVqisKCC4QVGeuO0Zk7b242ES_zzBrVOM_LCgrHyDq59eRi6vP_QJ1fk5g6T-cedQalbqPkDbZj_70NZNOb6sBjhcEq7AjFHSzpOrm9I-3vqs91QZukyXVMxUqzBxxeMxGaddwB9dKjlZwN5bX6UMeemo1RI1gLvZjST3lunZ5QybHC5ydUOA9z5IxNGVH2hY2fXtxb6cVddYZKR1ZwL4eTzo4sobcnw4dAh4liMCzGeOEA58_0uWTx6D4MTm7cbSWvgRaNUu8esvE4d3x-8I6NvrSnIiQ9sKgd_gGm1pIiXwwAAA';\nexport var icon = '_1h6eon52';\nexport var indicator = '_1h6eon51';\nexport var root = '_1h6eon50';","/**\n * checkbox.ts — wires the VE styles into the shared factory.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { root, indicator, icon } from './checkbox.css';\n\nexport const Checkbox = createCheckbox({ root, indicator, icon });\n"]}
|