@navinc/base-react-components
Version:
Nav's Pattern Library
45 lines • 3.99 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import * as RadixCheckbox from '@radix-ui/react-checkbox';
import { Icon } from '../icon/icon.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
import { cn } from '../../cn.js';
export const Checkbox = styledBackwardsCompatibility((_a) => {
var { name, label, checked, onChange, disabled, value } = _a, props = __rest(_a, ["name", "label", "checked", "onChange", "disabled", "value"]);
// use internal state to manage "stateless" checkboxes
const [internalChecked, setInternalChecked] = useState(checked || false);
const handleCheckedChange = (val) => {
if (checked === undefined) {
setInternalChecked(val);
}
onChange === null || onChange === void 0 ? void 0 : onChange({ target: { type: 'checkbox', name, checked: val } });
};
const isChecked = checked !== undefined ? checked : internalChecked;
return (_jsxs("label", Object.assign({}, props, { className: cn('cursor-pointer flex items-center', props.className), children: [_jsx(RadixCheckbox.Root, { value: value, name: name, checked: isChecked, disabled: disabled, onCheckedChange: handleCheckedChange, className: cn(
// base
'group/wf-checkbox border border-solid w-300 h-300 rounded-[5px] py-[1px] border-outlineVariant disabled:border-outline/50 mr-150 enabled:bg-[image:linear-gradient(rgba(255,_255,_255,_0.2)_0%,_rgba(27,_27,_31,_0)_100%)]',
// hover
'enabled:hover:bg-[image:linear-gradient(rgba(255,_255,_255,_0)_0%,_rgba(94,_93,_103,_0.08)_100%)] enabled:data-[state=checked]:hover:shadow-[rgba(173,_171,_174,_0.5)_0px_0px_0px]',
// active
'enabled:active:bg-[image:linear-gradient(rgba(94,_93,_103,_0.08)_0%,_rgba(94,_93,_103,_0.08)_100%)] enabled:data-[state=checked]:active:shadow-[rgb(173,_171,_174)_0px_0px_0px]',
// disabled
'disabled:fill-onSurfaceDim disabled:drop-shadow disabled:[&_.nav-icon]:text-outline/50',
// checked
'enabled:data-[state=checked]:border-primary enabled:data-[state=checked]:hover:border-primary enabled:data-[state=checked]:active:shadow-none enabled:data-[state=checked]:[&_.nav-icon]:text-onPrimary enabled:data-[state=checked]:bg-[image:linear-gradient(rgba(217,_214,_255,_0.2)_0%,_rgba(94,_77,_178,_0)_100%)] enabled:data-[state=checked]:bg-primary enabled:data-[state=checked]:shadow-[rgba(219,_217,_228,_0.6)_0px_1px_0.5px_0px_inset]',
// checked hover
'enabled:data-[state=checked]:hover:bg-[image:linear-gradient(rgba(217,_214,_255,_0.3)_0%,_rgba(94,_77,_178,_0)_100%)] enabled:data-[state=checked]:hover:shadow-[rgba(219,_217,_228,_0.8)_0px_1px_0.5px_0px_inset]',
// checked active
'enabled:data-[state=checked]:active:bg-[image:linear-gradient(rgba(20, 6, 56, 0.4) 0%, rgba(94, 77, 178, 0) 100%)]'), children: _jsx(RadixCheckbox.Indicator, { forceMount: true, children: _jsx(Icon, { size: "medium", className: cn(!isChecked && 'invisible', 'text-outline group-data-[state=checked]/wf-checkbox:text-onPrimary group-disabled/wf-checkbox:[&&]:text-outline/50 group-enabled/wf-checkbox:group-hover/wf-checkbox:visible'), name: isChecked === 'indeterminate' ? 'check_indeterminate_small' : 'check' }) }) }), label] })));
});
//# sourceMappingURL=checkbox.js.map