@lanaco/lnc-react-ui
Version:
React component library
309 lines (308 loc) • 7 kB
JavaScript
import { jsxs as u, jsx as i, Fragment as B } from "react/jsx-runtime";
import { forwardRef as I } from "react";
import { s as j } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as k, d as L, c as t, b as N, f as x } from "./utils-BUdHa0nB.js";
import { u as R } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const W = (e) => e == "left" ? "row-reverse" : "row", n = (e, h) => `calc(${e.components.Checkbox.default.enabled.sizes[h]} / 2)`, F = j.label`
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
min-height: ${(e) => k(e.theme, e.size)};
max-height: ${(e) => k(e.theme, e.size)};
display: inline-flex;
align-items: center;
justify-content: start;
flex-direction: ${(e) => W(e.labelPosition)};
${(e) => e.spaceBetween == !0 && "justify-content: space-between;"}
width: 100%;
${(e) => e.disabled === !0 && "pointer-events: none;"}
${(e) => L(e.theme, "Checkbox", e.size, "enabled")};
gap: 0.75rem;
position: relative;
& .checkbox-label {
${(e) => !e.disabled && e.readOnly !== !0 && "cursor: pointer;"}
min-width: 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
text-overflow: ellipsis;
color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"enabled",
"text"
)};
}
& input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
z-index: 3;
}
& input:focus {
outline: none;
background: transparent;
}
& input:active {
outline: none;
background: transparent;
}
& .checkmark {
min-height: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
min-width: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease;
background-color: transparent;
color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"enabled",
"text"
)};
border: 1px solid
${(e) => t(
e.theme,
"Checkbox",
e.color,
"enabled",
"border"
)};
border-radius: ${(e) => N(e.theme, "slight")};
${(e) => e.disabled === !0 && `background-color: ${t(
e.theme,
"Checkbox",
e.color,
"disabled",
"border"
)}`};
& svg {
height: 0;
width: 0;
stroke: transparent;
}
& img {
max-height: 0;
max-width: 0;
filter: brightness(0) invert(1);
}
}
& input:checked ~ .checkmark {
background-color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"active",
"background",
"backgroundOpacity"
)};
border: 1px solid
${(e) => t(
e.theme,
"Checkbox",
e.color,
"active",
"border"
)};
& .checked {
height: ${(e) => n(e.theme, e.size)};
width: ${(e) => n(e.theme, e.size)};
stroke: white;
}
& .indeterminate {
height: 0;
width: 0;
}
& img {
max-height: ${(e) => n(e.theme, e.size)};
max-width: ${(e) => n(e.theme, e.size)};
}
}
& input:checked ~ .checkbox-label {
color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"active",
"text"
)};
}
& input:indeterminate ~ .checkmark {
& .checked {
height: 0;
width: 0;
}
background-color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"active",
"background",
"backgroundOpacity"
)};
& .indeterminate {
height: ${(e) => n(e.theme, e.size)};
width: ${(e) => n(e.theme, e.size)};
stroke: white;
}
}
& input:indeterminate ~ .checkbox-label {
color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"enabled",
"text"
)};
}
& input:disabled ~ .checkmark {
${(e) => e.readOnly !== !0 && `background-color: ${t(
e.theme,
"Checkbox",
e.color,
"disabled",
"border"
)};
border-color: ${t(
e.theme,
"Checkbox",
e.color,
"disabled",
"border"
)};
`};
}
& input:disabled ~ .checkbox-label {
color: ${(e) => t(
e.theme,
"Checkbox",
e.color,
"disabled",
"text"
)};
}
& input:focus ~ .checkmark {
${(e) => x(e.theme)};
}
& input:active ~ .checkmark {
${(e) => x(e.theme)};
}
`, H = I((e, h) => {
const {
containerRef: g,
disabled: b,
readOnly: l,
label: r,
labelPosition: m = "right",
spaceBetween: w,
customCheckmark: d,
//----------------
onChange: s,
onFocus: c,
onBlur: a,
onClick: $,
//----------------
color: f = "primary",
size: C = "small",
className: v = "",
style: z = {},
...y
} = e;
var O = { theme: R(), size: C, color: f, disabled: b, readOnly: l };
return /* @__PURE__ */ u(
F,
{
ref: g,
direction: m,
className: v,
style: z,
label: r,
labelPosition: m,
spaceBetween: w,
tabIndex: -1,
readOnly: l,
onClick: $,
...O,
children: [
/* @__PURE__ */ i(
"input",
{
ref: h,
type: "checkbox",
onBlur: (o) => {
a && (a == null || a(o));
},
onFocus: (o) => {
c && (c == null || c(o));
},
disabled: b || l,
onChange: (o) => s == null ? void 0 : s(o),
...y
}
),
/* @__PURE__ */ u("div", { className: "checkmark", tabIndex: -1, children: [
!d && /* @__PURE__ */ i(
"svg",
{
viewBox: "0 0 8 6",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": !0,
disabled: !0,
tabIndex: -1,
className: "checked",
children: /* @__PURE__ */ i(
"path",
{
d: "M1 3.15385L2.89474 5L7 1",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
tabIndex: -1
}
)
}
),
/* @__PURE__ */ i(
"svg",
{
width: "8",
height: "2",
viewBox: "0 0 8 2",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": !0,
disabled: !0,
tabIndex: -1,
className: "indeterminate",
children: /* @__PURE__ */ i(
"path",
{
d: "M1 1H7",
stroke: "white",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
tabIndex: -1,
title: r
}
)
}
),
d && /* @__PURE__ */ i(B, { children: d })
] }),
r && /* @__PURE__ */ i("div", { className: "checkbox-label", tabIndex: -1, children: r })
]
}
);
});
export {
H as default
};