@mabi-ui/radio
Version:
Radio group and radio button components for Mabi-UI
379 lines (375 loc) • 8.61 kB
JavaScript
"use client";import {
RadioContext
} from "./chunk-5YH4EE2M.mjs";
import {
SelectedIcon,
UnselectedIcon
} from "./chunk-3ZUYM7QW.mjs";
// src/RadioButton.tsx
import {
VisuallyHidden,
mergeProps,
useFocusRing,
useHover,
useRadio
} from "react-aria";
// ../checkbox/src/styles.ts
import { typography } from "@mabi-ui/typography";
import { cn } from "@mabi-ui/utils";
import { cva } from "class-variance-authority";
var checkbox = cva(
cn(
"flex gap-[10px] relative items-center cursor-pointer p-2 border-2 border-solid border-transparent rounded-lg w-fit select-none ",
typography({ 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
import { forwardRef, useContext } from "react";
import { cn as cn2, useForwardedRef } from "@mabi-ui/utils";
import React from "react";
var RadioButton = forwardRef(({ className, selectedIcon, unselectedIcon, ...props }, ref) => {
const children = props.label ?? props.children;
const context = useContext(RadioContext);
const state = context?.state;
const color = context?.color ?? "primary";
const innerRef = useForwardedRef(ref);
if (state == null) {
throw new Error("Radio must be used within a RadioGroup");
}
const { inputProps, isSelected, isDisabled, isPressed } = useRadio(
{ ...props, children },
state,
innerRef
);
const { isFocusVisible, focusProps } = useFocusRing();
const { hoverProps, isHovered } = useHover({
...props,
isDisabled: state.isDisabled
});
return /* @__PURE__ */ React.createElement(
"label",
{
className: cn2(
checkbox({
isHovered,
isPressed,
isFocusVisible,
isDisabled,
color
}),
typeof className === "string" ? className : className?.({
isSelected,
isDisabled,
isPressed,
isFocusVisible,
isHovered
})
),
...mergeProps(hoverProps)
},
/* @__PURE__ */ React.createElement(VisuallyHidden, null, /* @__PURE__ */ React.createElement("input", { ...mergeProps(inputProps, focusProps), ref })),
isSelected ? selectedIcon ?? /* @__PURE__ */ React.createElement(
SelectedIcon,
{
"aria-hidden": "true",
color,
isDisabled
}
) : unselectedIcon ?? /* @__PURE__ */ React.createElement(
UnselectedIcon,
{
"aria-hidden": "true",
color,
isDisabled
}
),
children
);
});
RadioButton.displayName = "RadioButton";
export {
RadioButton
};
//# sourceMappingURL=chunk-VG7W3YPM.mjs.map