@mabi-ui/radio
Version:
Radio group and radio button components for Mabi-UI
520 lines • 16.4 kB
JavaScript
;
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _objectSpread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpreadProps(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _nullishCoalesce(lhs, rhsFn) {
if (lhs != null) {
return lhs;
} else {
return rhsFn();
}
}
function _optionalChain(ops) {
var lastAccessLHS = undefined;
var value = ops[0];
var i = 1;
while(i < ops.length){
var op = ops[i];
var fn = ops[i + 1];
i += 2;
if ((op === "optionalAccess" || op === "optionalCall") && value == null) {
return undefined;
}
if (op === "access" || op === "optionalAccess") {
lastAccessLHS = value;
value = fn(value);
} else if (op === "call" || op === "optionalCall") {
var _value;
value = fn(function() {
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
args[_key] = arguments[_key];
}
return (_value = value).call.apply(_value, [
lastAccessLHS
].concat(_toConsumableArray(args)));
});
lastAccessLHS = undefined;
}
}
return value;
}
"use client";
var _chunkHGY4AZD3js = require("./chunk-HGY4AZD3.js");
var _chunkXXSYQAE2js = require("./chunk-XXSYQAE2.js");
// src/RadioButton.tsx
var _reactaria = require("react-aria");
// ../checkbox/src/styles.ts
var _typography = require("@mabi-ui/typography");
var _utils = require("@mabi-ui/utils");
var _classvarianceauthority = require("class-variance-authority");
var checkbox = _classvarianceauthority.cva.call(void 0, _utils.cn.call(void 0, "flex gap-[10px] relative items-center cursor-pointer p-2 border-2 border-solid border-transparent rounded-lg w-fit select-none ", _typography.typography.call(void 0, {
variant: "body2"
}), "dark:text-white"), {
variants: {
isHovered: {
true: "",
false: ""
},
isPressed: {
true: "",
false: ""
},
isFocusVisible: {
true: "",
false: ""
},
isDisabled: {
true: "opacity-[0.38] cursor-default"
},
color: {
primary: "",
secondary: "",
tertiary: "",
success: "",
warning: "",
error: "",
loading: "",
black: "",
white: "",
grey: "",
orange: "",
lightblue: "",
blue: "",
indaco: "",
purple: ""
}
},
compoundVariants: [
//! primary
{
isHovered: true,
color: "primary",
className: "bg-primary/[0.06]"
},
{
isPressed: true,
color: "primary",
className: "bg-primary/[0.12]"
},
{
isFocusVisible: true,
color: "primary",
className: "bg-primary/[0.12] border-primary"
},
//! secondary
{
isHovered: true,
color: "secondary",
className: "bg-secondary/[0.06]"
},
{
isPressed: true,
color: "secondary",
className: "bg-secondary/[0.12]"
},
{
isFocusVisible: true,
color: "secondary",
className: "bg-secondary/[0.12] border-secondary"
},
//! tertiary
{
isHovered: true,
color: "tertiary",
className: "bg-tertiary/[0.06]"
},
{
isPressed: true,
color: "tertiary",
className: "bg-tertiary/[0.12]"
},
{
isFocusVisible: true,
color: "tertiary",
className: "bg-tertiary/[0.12] border-tertiary"
},
//! success
{
isHovered: true,
color: "success",
className: "bg-success/[0.06]"
},
{
isPressed: true,
color: "success",
className: "bg-success/[0.12]"
},
{
isFocusVisible: true,
color: "success",
className: "bg-success/[0.12] border-success"
},
//! warning
{
isHovered: true,
color: "warning",
className: "bg-warning/[0.06]"
},
{
isPressed: true,
color: "warning",
className: "bg-warning/[0.12]"
},
{
isFocusVisible: true,
color: "warning",
className: "bg-warning/[0.12] border-warning"
},
//! error
{
isHovered: true,
color: "error",
className: "bg-error/[0.06]"
},
{
isPressed: true,
color: "error",
className: "bg-error/[0.12]"
},
{
isFocusVisible: true,
color: "error",
className: "bg-error/[0.12] border-error"
},
//! loading
{
isHovered: true,
color: "loading",
className: "bg-loading/[0.06]"
},
{
isPressed: true,
color: "loading",
className: "bg-loading/[0.12]"
},
{
isFocusVisible: true,
color: "loading",
className: "bg-loading/[0.12] border-loading"
},
//! black
{
isHovered: true,
color: "black",
className: "bg-black/[0.06]"
},
{
isPressed: true,
color: "black",
className: "bg-black/[0.12]"
},
{
isFocusVisible: true,
color: "black",
className: "bg-black/[0.12] border-black"
},
//! white
{
isHovered: true,
color: "white",
className: "bg-white/[0.06]"
},
{
isPressed: true,
color: "white",
className: "bg-white/[0.12]"
},
{
isFocusVisible: true,
color: "white",
className: "bg-white/[0.12] border-white"
},
//! grey
{
isHovered: true,
color: "grey",
className: "bg-grey/[0.06]"
},
{
isPressed: true,
color: "grey",
className: "bg-grey/[0.12]"
},
{
isFocusVisible: true,
color: "grey",
className: "bg-grey/[0.12] border-grey"
},
//! orange
{
isHovered: true,
color: "orange",
className: "bg-orange/[0.06]"
},
{
isPressed: true,
color: "orange",
className: "bg-orange/[0.12]"
},
{
isFocusVisible: true,
color: "orange",
className: "bg-orange/[0.12] border-orange"
},
//! lightblue
{
isHovered: true,
color: "lightblue",
className: "bg-lightblue/[0.06]"
},
{
isPressed: true,
color: "lightblue",
className: "bg-lightblue/[0.12]"
},
{
isFocusVisible: true,
color: "lightblue",
className: "bg-lightblue/[0.12] border-lightblue"
},
//! blue
{
isHovered: true,
color: "blue",
className: "bg-blue/[0.06]"
},
{
isPressed: true,
color: "blue",
className: "bg-blue/[0.12]"
},
{
isFocusVisible: true,
color: "blue",
className: "bg-blue/[0.12] border-blue"
},
//! indaco
{
isHovered: true,
color: "indaco",
className: "bg-indaco/[0.06]"
},
{
isPressed: true,
color: "indaco",
className: "bg-indaco/[0.12]"
},
{
isFocusVisible: true,
color: "indaco",
className: "bg-indaco/[0.12] border-indaco"
},
//! purple
{
isHovered: true,
color: "purple",
className: "bg-purple/[0.06]"
},
{
isPressed: true,
color: "purple",
className: "bg-purple/[0.12]"
},
{
isFocusVisible: true,
color: "purple",
className: "bg-purple/[0.12] border-purple"
}
],
defaultVariants: {
color: "primary"
}
});
// src/RadioButton.tsx
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var RadioButton = _react.forwardRef.call(void 0, function(_param, ref) {
var className = _param.className, selectedIcon = _param.selectedIcon, unselectedIcon = _param.unselectedIcon, props = _objectWithoutProperties(_param, [
"className",
"selectedIcon",
"unselectedIcon"
]);
var children = _nullishCoalesce(props.label, function() {
return props.children;
});
var context = _react.useContext.call(void 0, _chunkHGY4AZD3js.RadioContext);
var state = _optionalChain([
context,
"optionalAccess",
function(_) {
return _.state;
}
]);
var color = _nullishCoalesce(_optionalChain([
context,
"optionalAccess",
function(_2) {
return _2.color;
}
]), function() {
return "primary";
});
var innerRef = _utils.useForwardedRef.call(void 0, ref);
if (state == null) {
throw new Error("Radio must be used within a RadioGroup");
}
var _reactaria_useRadio_call = _reactaria.useRadio.call(void 0, _objectSpreadProps(_objectSpread({}, props), {
children: children
}), state, innerRef), inputProps = _reactaria_useRadio_call.inputProps, isSelected = _reactaria_useRadio_call.isSelected, isDisabled = _reactaria_useRadio_call.isDisabled, isPressed = _reactaria_useRadio_call.isPressed;
var _reactaria_useFocusRing_call = _reactaria.useFocusRing.call(void 0), isFocusVisible = _reactaria_useFocusRing_call.isFocusVisible, focusProps = _reactaria_useFocusRing_call.focusProps;
var _reactaria_useHover_call = _reactaria.useHover.call(void 0, _objectSpreadProps(_objectSpread({}, props), {
isDisabled: state.isDisabled
})), hoverProps = _reactaria_useHover_call.hoverProps, isHovered = _reactaria_useHover_call.isHovered;
return /* @__PURE__ */ _react2.default.createElement("label", _objectSpread({
className: _utils.cn.call(void 0, checkbox({
isHovered: isHovered,
isPressed: isPressed,
isFocusVisible: isFocusVisible,
isDisabled: isDisabled,
color: color
}), typeof className === "string" ? className : _optionalChain([
className,
"optionalCall",
function(_3) {
return _3({
isSelected: isSelected,
isDisabled: isDisabled,
isPressed: isPressed,
isFocusVisible: isFocusVisible,
isHovered: isHovered
});
}
]))
}, _reactaria.mergeProps.call(void 0, hoverProps)), /* @__PURE__ */ _react2.default.createElement(_reactaria.VisuallyHidden, null, /* @__PURE__ */ _react2.default.createElement("input", _objectSpreadProps(_objectSpread({}, _reactaria.mergeProps.call(void 0, inputProps, focusProps)), {
ref: ref
}))), isSelected ? _nullishCoalesce(selectedIcon, function() {
return /* @__PURE__ */ _react2.default.createElement(_chunkXXSYQAE2js.SelectedIcon, {
"aria-hidden": "true",
color: color,
isDisabled: isDisabled
});
}) : _nullishCoalesce(unselectedIcon, function() {
return /* @__PURE__ */ _react2.default.createElement(_chunkXXSYQAE2js.UnselectedIcon, {
"aria-hidden": "true",
color: color,
isDisabled: isDisabled
});
}), children);
});
RadioButton.displayName = "RadioButton";
exports.RadioButton = RadioButton;
//# sourceMappingURL=chunk-U4J63SOZ.js.map