@orioncactuscorp/ui 1.2.0 → 1.4.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/README.md +56 -27
- package/dist/components/Accordion/Accordion.css +1 -1
- package/dist/components/Accordion/Accordion.js +39 -38
- package/dist/components/Accordion/Accordion.module.scss.js +5 -5
- package/dist/components/ActionArea/ActionArea.css +1 -1
- package/dist/components/ActionArea/ActionArea.js +101 -71
- package/dist/components/ActionArea/ActionAreaLayout.css +1 -0
- package/dist/components/ActionArea/ActionAreaLayout.js +145 -0
- package/dist/components/ActionArea/ActionAreaLayout.module.scss.js +11 -0
- package/dist/components/ActionArea.js +10 -4
- package/dist/components/Alert/Alert.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.js +72 -52
- package/dist/components/Badge/Badge.css +1 -1
- package/dist/components/Badge/Badge.js +69 -25
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/Button/Button.js +79 -139
- package/dist/components/Cell/Cell.css +1 -1
- package/dist/components/Cell/Cell.js +98 -88
- package/dist/components/CheckMark/CheckMark.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +20 -18
- package/dist/components/CheckMark/CheckMark.module.scss.js +7 -3
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.js +10 -8
- package/dist/components/Field/Field.css +1 -1
- package/dist/components/Fieldset/Fieldset.css +1 -1
- package/dist/components/IconButton/IconButton.css +1 -1
- package/dist/components/IconButton/IconButton.js +48 -29
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Loading/Loading.css +1 -1
- package/dist/components/Loading/Loading.js +10 -10
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/Modal.js +377 -346
- package/dist/components/Modal/useModalDrag.js +654 -614
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.module.scss.js +9 -7
- package/dist/components/ScrollArea/ScrollArea.css +1 -1
- package/dist/components/SectionHeader/SectionHeader.css +1 -1
- package/dist/components/Select/Select.css +1 -1
- package/dist/components/Select/Select.js +15 -15
- package/dist/components/Select/SelectContent.css +1 -1
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.module.scss.js +6 -4
- package/dist/components/TextArea/TextArea.css +1 -1
- package/dist/components/TextArea/TextAreaContent.css +1 -1
- package/dist/components/TextButton/TextButton.css +1 -1
- package/dist/components/TextInput/TextInput.css +1 -1
- package/dist/components/TextInput/TextInputContent.css +1 -1
- package/dist/components/Tooltip/Tooltip.css +1 -1
- package/dist/components/internal/Pressable.js +90 -0
- package/dist/foundations/atomic.css +1 -1
- package/dist/foundations/motion.css +1 -1
- package/dist/foundations/typo.css +1 -1
- package/dist/foundations.css +3 -3
- package/dist/index.js +102 -96
- package/dist/react/motion.js +109 -106
- package/dist/styles.css +32 -31
- package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/ActionArea.d.ts +1 -1
- package/dist/ui/src/components/ActionArea/ActionArea.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts +12 -0
- package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts.map +1 -0
- package/dist/ui/src/components/ActionArea/index.d.ts +2 -1
- package/dist/ui/src/components/ActionArea/index.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/types.d.ts +13 -2
- package/dist/ui/src/components/ActionArea/types.d.ts.map +1 -1
- package/dist/ui/src/components/BackgroundIconButton/BackgroundIconButton.d.ts +1 -1
- package/dist/ui/src/components/BackgroundIconButton/BackgroundIconButton.d.ts.map +1 -1
- package/dist/ui/src/components/BackgroundIconButton/index.d.ts +1 -1
- package/dist/ui/src/components/BackgroundIconButton/index.d.ts.map +1 -1
- package/dist/ui/src/components/BackgroundIconButton/types.d.ts +6 -5
- package/dist/ui/src/components/BackgroundIconButton/types.d.ts.map +1 -1
- package/dist/ui/src/components/Badge/Badge.d.ts +1 -1
- package/dist/ui/src/components/Badge/Badge.d.ts.map +1 -1
- package/dist/ui/src/components/Badge/types.d.ts +19 -2
- package/dist/ui/src/components/Badge/types.d.ts.map +1 -1
- package/dist/ui/src/components/Button/Button.d.ts.map +1 -1
- package/dist/ui/src/components/Button/types.d.ts +3 -7
- package/dist/ui/src/components/Button/types.d.ts.map +1 -1
- package/dist/ui/src/components/Cell/Cell.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/index.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/index.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/types.d.ts +2 -0
- package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
- package/dist/ui/src/components/IconButton/IconButton.d.ts +1 -1
- package/dist/ui/src/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/ui/src/components/IconButton/index.d.ts +1 -1
- package/dist/ui/src/components/IconButton/index.d.ts.map +1 -1
- package/dist/ui/src/components/IconButton/types.d.ts +6 -5
- package/dist/ui/src/components/IconButton/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/contexts.d.ts +1 -0
- package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/types.d.ts +7 -6
- package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/components/internal/Pressable.d.ts +19 -0
- package/dist/ui/src/components/internal/Pressable.d.ts.map +1 -0
- package/dist/ui/src/index.d.ts +5 -5
- package/dist/ui/src/index.d.ts.map +1 -1
- package/dist/ui/src/react/motion/index.d.ts +9 -8
- package/dist/ui/src/react/motion/index.d.ts.map +1 -1
- package/dist/ui/src/utils/motion.d.ts +15 -14
- package/dist/ui/src/utils/motion.d.ts.map +1 -1
- package/dist/utils/motion.js +282 -183
- package/dist/vscode/oc-ui-vars.css +31 -16
- package/package.json +2 -2
- package/src/scss/foundations/atomic.scss +12 -10
- package/src/scss/foundations/atomic.test.ts +34 -0
- package/src/scss/foundations/motion.scss +30 -16
- package/src/scss/foundations/typo.scss +1 -1
- package/src/scss/index.scss +1 -0
- package/src/scss/mixins/_motion.scss +168 -77
- package/src/scss/mixins/_motion.test.ts +137 -54
- package/src/scss/mixins/_radius.scss +3 -0
- package/src/scss/mixins/_radius.test.ts +52 -0
- package/src/scss/mixins/_typo.scss +2 -2
|
@@ -1,34 +1,78 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx as t, jsxs as j, Fragment as x } from "react/jsx-runtime";
|
|
2
|
+
import B from "../Interaction/Interaction.js";
|
|
3
|
+
import n from "./Badge.module.scss.js";
|
|
4
|
+
function S({
|
|
5
|
+
children: u,
|
|
6
|
+
className: m = "",
|
|
7
|
+
style: r,
|
|
8
|
+
variant: a = "normal",
|
|
9
|
+
size: o = "small",
|
|
10
|
+
padding: b = !1,
|
|
11
|
+
interactive: f,
|
|
12
|
+
href: e,
|
|
13
|
+
...c
|
|
11
14
|
}) {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
a
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
].filter(Boolean).join(" ")
|
|
19
|
-
|
|
15
|
+
const g = e !== void 0 || f === !0, s = [
|
|
16
|
+
n.badge,
|
|
17
|
+
n[a],
|
|
18
|
+
n[o],
|
|
19
|
+
b ? n.padding : "",
|
|
20
|
+
m
|
|
21
|
+
].filter(Boolean).join(" "), d = /* @__PURE__ */ j(x, { children: [
|
|
22
|
+
/* @__PURE__ */ t("span", { "data-oc-part": "content", children: u }),
|
|
23
|
+
g ? /* @__PURE__ */ t(B, { self: !0 }) : null
|
|
24
|
+
] });
|
|
25
|
+
if (e !== void 0) {
|
|
26
|
+
const i = c, { ref: p, ...l } = i;
|
|
27
|
+
return /* @__PURE__ */ t(
|
|
28
|
+
"a",
|
|
29
|
+
{
|
|
30
|
+
...l,
|
|
31
|
+
ref: p,
|
|
32
|
+
className: s,
|
|
33
|
+
style: r,
|
|
34
|
+
href: e,
|
|
35
|
+
"data-oc-component": "badge",
|
|
36
|
+
"data-oc-variant": a,
|
|
37
|
+
"data-oc-size": o,
|
|
38
|
+
"data-oc-interactive": "true",
|
|
39
|
+
children: d
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
if (f === !0) {
|
|
44
|
+
const i = c, { type: p = "button", ref: l, ...P } = i;
|
|
45
|
+
return /* @__PURE__ */ t(
|
|
46
|
+
"button",
|
|
47
|
+
{
|
|
48
|
+
...P,
|
|
49
|
+
ref: l,
|
|
50
|
+
className: s,
|
|
51
|
+
style: r,
|
|
52
|
+
type: p,
|
|
53
|
+
"data-oc-component": "badge",
|
|
54
|
+
"data-oc-variant": a,
|
|
55
|
+
"data-oc-size": o,
|
|
56
|
+
"data-oc-interactive": "true",
|
|
57
|
+
children: d
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
const v = c, { ref: h, ...N } = v;
|
|
62
|
+
return /* @__PURE__ */ t(
|
|
20
63
|
"span",
|
|
21
64
|
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
65
|
+
...N,
|
|
66
|
+
ref: h,
|
|
67
|
+
className: s,
|
|
68
|
+
style: r,
|
|
25
69
|
"data-oc-component": "badge",
|
|
26
|
-
"data-oc-variant":
|
|
27
|
-
"data-oc-size":
|
|
28
|
-
children:
|
|
70
|
+
"data-oc-variant": a,
|
|
71
|
+
"data-oc-size": o,
|
|
72
|
+
children: d
|
|
29
73
|
}
|
|
30
74
|
);
|
|
31
75
|
}
|
|
32
76
|
export {
|
|
33
|
-
|
|
77
|
+
S as default
|
|
34
78
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
1
|
+
.oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;padding:.0625rem;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
|
|
@@ -1,152 +1,92 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"aria-
|
|
22
|
-
|
|
2
|
+
import { jsx as o, jsxs as x, Fragment as O } from "react/jsx-runtime";
|
|
3
|
+
import q from "../Interaction/Interaction.js";
|
|
4
|
+
import C from "../Loading/Loading.js";
|
|
5
|
+
import V from "../internal/Pressable.js";
|
|
6
|
+
import t from "./Button.module.scss.js";
|
|
7
|
+
function H({
|
|
8
|
+
children: c,
|
|
9
|
+
className: z = "",
|
|
10
|
+
style: v,
|
|
11
|
+
disabled: h = !1,
|
|
12
|
+
href: y,
|
|
13
|
+
appearance: r = "solid",
|
|
14
|
+
variant: e = "default",
|
|
15
|
+
size: l = "large",
|
|
16
|
+
fullWidth: d = !1,
|
|
17
|
+
loading: a = !1,
|
|
18
|
+
leadingIcon: s,
|
|
19
|
+
trailingIcon: u,
|
|
20
|
+
icon: m,
|
|
21
|
+
"aria-label": b,
|
|
22
|
+
"aria-labelledby": f,
|
|
23
|
+
...N
|
|
23
24
|
}) {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
].filter(Boolean).join(" "),
|
|
34
|
-
process.env.NODE_ENV !== "production" &&
|
|
25
|
+
const n = r === "solid" && e === "secondary" ? "primary" : e, w = c != null, i = !!(m && !w && !s && !u), B = [
|
|
26
|
+
t.button,
|
|
27
|
+
t[r],
|
|
28
|
+
t[n],
|
|
29
|
+
t[l],
|
|
30
|
+
i ? t.iconOnly : "",
|
|
31
|
+
d ? t.fullWidth : "",
|
|
32
|
+
a ? t.loading : "",
|
|
33
|
+
z
|
|
34
|
+
].filter(Boolean).join(" "), E = r === "solid" && n === "default" || r === "outlined" && n === "secondary" ? "light" : "normal";
|
|
35
|
+
process.env.NODE_ENV !== "production" && i && !b && !f && console.warn(
|
|
35
36
|
"[@orioncactuscorp/ui] Button with `icon` requires `aria-label` or `aria-labelledby` for screen reader accessibility."
|
|
36
37
|
);
|
|
37
|
-
const
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
const p = (j, g) => /* @__PURE__ */ o("span", { "data-oc-part": g, "aria-hidden": "true", children: /* @__PURE__ */ o(j, { size: "custom" }) }), P = /* @__PURE__ */ x(O, { children: [
|
|
39
|
+
/* @__PURE__ */ o("span", { "data-oc-part": "content", children: i && m ? p(m, "icon") : /* @__PURE__ */ x(O, { children: [
|
|
40
|
+
s ? p(s, "leading-icon") : null,
|
|
41
|
+
w ? /* @__PURE__ */ o("span", { "data-oc-part": "label", children: c }) : null,
|
|
42
|
+
u ? p(u, "trailing-icon") : null
|
|
42
43
|
] }) }),
|
|
43
|
-
|
|
44
|
-
/* @__PURE__ */
|
|
44
|
+
a ? /* @__PURE__ */ o("span", { "data-oc-part": "loading", "aria-hidden": "true", children: /* @__PURE__ */ o(C, { size: "custom" }) }) : null,
|
|
45
|
+
/* @__PURE__ */ o(q, { variant: E })
|
|
45
46
|
] });
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onAuxClick: b,
|
|
49
|
-
onClick: G,
|
|
50
|
-
onKeyDown: H,
|
|
51
|
-
onMouseDown: I,
|
|
52
|
-
onPointerDown: J,
|
|
53
|
-
ref: Q,
|
|
54
|
-
tabIndex: R,
|
|
55
|
-
...S
|
|
56
|
-
} = o;
|
|
57
|
-
return /* @__PURE__ */ a(
|
|
58
|
-
"a",
|
|
59
|
-
{
|
|
60
|
-
...S,
|
|
61
|
-
ref: Q,
|
|
62
|
-
className: K,
|
|
63
|
-
style: C,
|
|
64
|
-
href: P,
|
|
65
|
-
onAuxClick: (n) => {
|
|
66
|
-
if (i || t) {
|
|
67
|
-
n.preventDefault(), n.stopPropagation();
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
b?.(n);
|
|
71
|
-
},
|
|
72
|
-
onClick: (n) => {
|
|
73
|
-
if (i || t) {
|
|
74
|
-
n.preventDefault();
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
G?.(n);
|
|
78
|
-
},
|
|
79
|
-
onKeyDown: (n) => {
|
|
80
|
-
(n.key === "Enter" || n.key === " ") && r(n) || H?.(n);
|
|
81
|
-
},
|
|
82
|
-
onMouseDown: (n) => {
|
|
83
|
-
r(n) || I?.(n);
|
|
84
|
-
},
|
|
85
|
-
onPointerDown: (n) => {
|
|
86
|
-
r(n) || J?.(n);
|
|
87
|
-
},
|
|
88
|
-
"aria-label": y,
|
|
89
|
-
"aria-labelledby": k,
|
|
90
|
-
"aria-busy": t ? "true" : void 0,
|
|
91
|
-
"aria-disabled": i || t ? "true" : void 0,
|
|
92
|
-
tabIndex: i || t ? -1 : R,
|
|
93
|
-
"data-oc-component": "button",
|
|
94
|
-
"data-oc-appearance": l,
|
|
95
|
-
"data-oc-variant": s,
|
|
96
|
-
"data-oc-resolved-variant": u,
|
|
97
|
-
"data-oc-size": f,
|
|
98
|
-
"data-oc-full-width": h ? "true" : void 0,
|
|
99
|
-
"data-oc-loading": t ? "true" : void 0,
|
|
100
|
-
"data-oc-icon-only": c ? "true" : void 0,
|
|
101
|
-
children: M
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
const j = B, {
|
|
106
|
-
type: O = "button",
|
|
107
|
-
onClick: V,
|
|
108
|
-
onKeyDown: z,
|
|
109
|
-
onMouseDown: q,
|
|
110
|
-
onPointerDown: F,
|
|
111
|
-
ref: _,
|
|
112
|
-
...g
|
|
113
|
-
} = j;
|
|
114
|
-
return /* @__PURE__ */ a(
|
|
115
|
-
"button",
|
|
47
|
+
return y !== void 0 ? /* @__PURE__ */ o(
|
|
48
|
+
V,
|
|
116
49
|
{
|
|
117
|
-
...
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
"aria-
|
|
124
|
-
"aria-
|
|
125
|
-
"aria-labelledby": k,
|
|
126
|
-
onClick: (o) => {
|
|
127
|
-
r(o) || V?.(o);
|
|
128
|
-
},
|
|
129
|
-
onKeyDown: (o) => {
|
|
130
|
-
(o.key === "Enter" || o.key === " ") && r(o) || z?.(o);
|
|
131
|
-
},
|
|
132
|
-
onMouseDown: (o) => {
|
|
133
|
-
r(o) || q?.(o);
|
|
134
|
-
},
|
|
135
|
-
onPointerDown: (o) => {
|
|
136
|
-
r(o) || F?.(o);
|
|
137
|
-
},
|
|
50
|
+
...N,
|
|
51
|
+
className: B,
|
|
52
|
+
style: v,
|
|
53
|
+
href: y,
|
|
54
|
+
disabled: h || a,
|
|
55
|
+
"aria-busy": a ? "true" : void 0,
|
|
56
|
+
"aria-label": b,
|
|
57
|
+
"aria-labelledby": f,
|
|
138
58
|
"data-oc-component": "button",
|
|
139
|
-
"data-oc-appearance":
|
|
140
|
-
"data-oc-variant":
|
|
141
|
-
"data-oc-resolved-variant":
|
|
142
|
-
"data-oc-size":
|
|
143
|
-
"data-oc-full-width":
|
|
144
|
-
"data-oc-loading":
|
|
145
|
-
"data-oc-icon-only":
|
|
146
|
-
children:
|
|
59
|
+
"data-oc-appearance": r,
|
|
60
|
+
"data-oc-variant": e,
|
|
61
|
+
"data-oc-resolved-variant": n,
|
|
62
|
+
"data-oc-size": l,
|
|
63
|
+
"data-oc-full-width": d ? "true" : void 0,
|
|
64
|
+
"data-oc-loading": a ? "true" : void 0,
|
|
65
|
+
"data-oc-icon-only": i ? "true" : void 0,
|
|
66
|
+
children: P
|
|
67
|
+
}
|
|
68
|
+
) : /* @__PURE__ */ o(
|
|
69
|
+
V,
|
|
70
|
+
{
|
|
71
|
+
...N,
|
|
72
|
+
className: B,
|
|
73
|
+
style: v,
|
|
74
|
+
disabled: h || a,
|
|
75
|
+
"aria-busy": a ? "true" : void 0,
|
|
76
|
+
"aria-label": b,
|
|
77
|
+
"aria-labelledby": f,
|
|
78
|
+
"data-oc-component": "button",
|
|
79
|
+
"data-oc-appearance": r,
|
|
80
|
+
"data-oc-variant": e,
|
|
81
|
+
"data-oc-resolved-variant": n,
|
|
82
|
+
"data-oc-size": l,
|
|
83
|
+
"data-oc-full-width": d ? "true" : void 0,
|
|
84
|
+
"data-oc-loading": a ? "true" : void 0,
|
|
85
|
+
"data-oc-icon-only": i ? "true" : void 0,
|
|
86
|
+
children: P
|
|
147
87
|
}
|
|
148
88
|
);
|
|
149
89
|
}
|
|
150
90
|
export {
|
|
151
|
-
|
|
91
|
+
H as default
|
|
152
92
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-Cell-module__cell__BDmja{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-
|
|
1
|
+
.oc-Cell-module__cell__BDmja{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));padding:0;color:var(--oc-color-theme-label-normal);list-style:none;--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);padding-block:var(--oc-cell-padding);min-inline-size:0;color:inherit;transform:scale(var(--oc-cell-press-scale, 1));transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Cell-module__item__r5fW2{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Cell-module__item__r5fW2{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Cell-module__item__r5fW2[data-oc-vertical-align=center]{align-items:center}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Cell-module__item__r5fW2[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Cell-module__item__r5fW2[data-oc-divider=normal]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2[data-oc-divider=neutral]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__item__r5fW2[data-oc-divider=alternative]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__item__r5fW2[data-oc-divider=none]{--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible{outline:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true]){--oc-cell-press-scale: max(0, 1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback))}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]{cursor:not-allowed}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]>[data-oc-component=interaction]{pointer-events:none}.oc-Cell-module__item__r5fW2>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Cell-module__item__r5fW2>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=label],.oc-Cell-module__item__r5fW2 [data-oc-part=description]{min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=description]{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{justify-content:flex-end}@media(hover:hover){.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true]){--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])+.oc-Cell-module__item__r5fW2{--oc-cell-current-divider-color: transparent}}.oc-Cell-module__item__r5fW2[data-oc-interactive=true] :where([data-oc-component=checkbox],[data-oc-component=radio],[data-oc-component=switch]) [data-oc-component=interaction]{display:none}.oc-Cell-module__item__r5fW2+.oc-Cell-module__item__r5fW2{border-block-start:1px solid var(--oc-cell-current-divider-color, var(--oc-cell-divider-color))}.oc-Cell-module__normal__O7uwW{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__neutral__Fhigo{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__alternative__7dShz{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__none__s4kvs{--oc-cell-divider-color: transparent}
|