@sertec/toggle-switch
Version:
Sfera ToggleSwitch Component
174 lines (168 loc) • 11.3 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
function Caption({ ref, type = 'info', message, className, value, readable, ...props }) {
if (value === undefined || value === null || value === false) {
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
}
return type ? (jsxRuntime.jsx("div", { ref: ref, className: [
'flex flex-col justify-center w-full truncate',
'!text-caption group-has-[:disabled]:data-[readable=false]:!text-disabled',
'data-[caption-type=info]:text-label',
'data-[caption-type=required]:text-error',
'data-[caption-type=maxLength]:text-error',
'data-[caption-type=minLength]:text-error',
'data-[caption-type=max]:text-error',
'data-[caption-type=min]:text-error',
'data-[caption-type=pattern]:text-error',
'data-[caption-type=validate]:text-error',
'data-[caption-type=error]:text-error',
'data-[caption-type=warning]:text-warning',
'data-[caption-type=success]:text-success',
className,
]
.filter(Boolean)
.join(' '), ...props, "data-caption-type": type, "data-caption-value": typeof value === 'boolean' ? `${value}` : value, "data-readable": readable ? 'true' : 'false', children: message && jsxRuntime.jsx("p", { className: "inline-block align-middle", children: message }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
}
function Label({ label, required, className, readable, 'data-weight': dataWeight = 'normal', }) {
return label ? (jsxRuntime.jsx("div", { className: [
'flex',
'!flex-col',
'justify-center',
'!text-label-size',
'!text-label-color',
'w-full',
'truncate',
'data-[weight=light]:font-light',
'data-[weight=semibold]:font-semibold',
'data-[weight=bold]:font-bold',
'data-[weight=normal]:font-normal',
'group-has-[:disabled]:data-[readable=false]:!text-disabled',
className,
]
.filter(Boolean)
.join(' '), "data-readable": readable ? 'true' : 'false', "data-weight": dataWeight, children: jsxRuntime.jsxs("p", { className: "inline-block align-middle", children: [label, typeof required === 'object' && required?.message && (jsxRuntime.jsxs("span", { className: "ml-1 !italic !text-outline", children: ["(", required.message, ")"] }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
}
const HEIGHT = '!h-[1rem]';
const WIDTH = '!w-[1.4rem]';
function ToggleSwitch({ id: propsId, label, caption, required, htmlFor, variant = 'primary', checked, disabled, readable, className, requiredMessage, 'data-label-weight': labelWeight, ...props }) {
const SIZE = `${HEIGHT} ${WIDTH}`;
const BORDER_SIZE = '!border-[0.14rem]';
const TOGGLE_SIZE = '!size-[0.4rem]';
const generatedId = react.useId();
const id = propsId ?? generatedId;
return (jsxRuntime.jsxs("label", { className: ['group', 'grid gap-2', 'select-none', !label && SIZE, className]
.filter(Boolean)
.join(' '), htmlFor: htmlFor, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 gap-2 items-center justify-center", children: [jsxRuntime.jsxs("div", { className: [
'grow',
'group',
'grid',
'grid-cols-2',
'cursor-pointer',
'items-center',
'justify-items-center',
'content-center',
'place-content-center',
SIZE,
]
.filter(Boolean)
.join(' '), children: [jsxRuntime.jsx("input", { id: id, ...props, checked: checked, disabled: disabled, type: "checkbox", required: typeof required === 'object' ? required?.value : required, "data-variant": variant, className: [
'cursor-pointer',
'peer',
'col-span-2',
'col-start-1',
'row-start-1',
'appearance-none',
'rounded-full',
'border-base',
'transition-all',
'duration-100',
'ease-in-out',
BORDER_SIZE,
'data-[readable=false]:disabled:!border-disabled',
!disabled &&
[
'checked:data-[variant=primary]:!border-primary',
'checked:data-[variant=secondary]:!border-secondary',
'checked:data-[variant=tertiary]:!border-tertiary',
'checked:data-[variant=base]:!border-base',
'checked:data-[variant=contrast]:!border-contrast',
'checked:data-[variant=success]:!border-success',
'checked:data-[variant=warning]:!border-warning',
'checked:data-[variant=error]:!border-error',
'checked:data-[variant=transparent]:!border-transparent',
'checked:data-[variant=tab-not-active]:!border-tab-not-active',
]
.filter(Boolean)
.join(' '),
disabled &&
checked &&
readable &&
[
'data-[variant=primary]:!border-primary',
'data-[variant=secondary]:!border-secondary',
'data-[variant=tertiary]:!border-tertiary',
'data-[variant=base]:!border-base',
'data-[variant=contrast]:!border-contrast',
'data-[variant=success]:!border-success',
'data-[variant=warning]:!border-warning',
'data-[variant=error]:!border-error',
'data-[variant=transparent]:!border-transparent',
'data-[variant=tab-not-active]:!border-tab-not-active',
]
.filter(Boolean)
.join(' '),
SIZE,
]
.filter(Boolean)
.join(' '), "data-readable": readable ? 'true' : 'false' }), jsxRuntime.jsx("div", { "data-variant": variant, className: [
TOGGLE_SIZE,
'col-start-1',
'row-start-1',
'rounded-full',
'bg-transparent',
'border-black',
'border-2',
'peer-checked:col-start-2',
'data-[readable=false]:peer-disabled:!border-disabled',
'transition-all',
'duration-100',
'ease-in-out',
!disabled &&
[
'peer-checked:data-[variant=primary]:!border-primary',
'peer-checked:data-[variant=secondary]:!border-secondary',
'peer-checked:data-[variant=tertiary]:!border-tertiary',
'peer-checked:data-[variant=base]:!border-base',
'peer-checked:data-[variant=contrast]:!border-contrast',
'peer-checked:data-[variant=success]:!border-success',
'peer-checked:data-[variant=warning]:!border-warning',
'peer-checked:data-[variant=error]:!border-error',
'peer-checked:data-[variant=transparent]:!border-transparent',
'peer-checked:data-[variant=tab-not-active]:!border-tab-not-active',
]
.filter(Boolean)
.join(' '),
disabled &&
checked &&
readable &&
[
'data-[variant=primary]:!border-primary',
'data-[variant=secondary]:!border-secondary',
'data-[variant=tertiary]:!border-tertiary',
'data-[variant=base]:!border-base',
'data-[variant=contrast]:!border-contrast',
'data-[variant=success]:!border-success',
'data-[variant=warning]:!border-warning',
'data-[variant=error]:!border-error',
'data-[variant=transparent]:!border-transparent',
'data-[variant=tab-not-active]:!border-tab-not-active',
]
.filter(Boolean)
.join(' '),
]
.filter(Boolean)
.join(' '), "data-readable": readable ? 'true' : 'false' })] }), jsxRuntime.jsx(Label, { label: label, required: requiredMessage ? { value: true, message: requiredMessage } : required, readable: readable, className: "cursor-pointer", "data-weight": labelWeight })] }), jsxRuntime.jsx(Caption, { ...caption, readable: readable, className: ['cursor-pointer', caption?.className].filter(Boolean).join(' ') })] }));
}
exports.ToggleSwitch = ToggleSwitch;
//# sourceMappingURL=index.cjs.map