lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
93 lines • 5.39 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioGroupItem = exports.RadioGroup = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils");
const RadioGroupContext = React.createContext(undefined);
const RadioGroup = React.forwardRef(({ className, value, defaultValue, onValueChange, name, orientation = "vertical", ...props }, ref) => {
const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || "");
React.useEffect(() => {
if (value !== undefined) {
setSelectedValue(value);
}
}, [value]);
const handleValueChange = React.useCallback((newValue) => {
if (value === undefined) {
setSelectedValue(newValue);
}
onValueChange?.(newValue);
}, [onValueChange, value]);
return ((0, jsx_runtime_1.jsx)(RadioGroupContext.Provider, { value: {
value: selectedValue,
onValueChange: handleValueChange,
name,
orientation,
}, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)(orientation === "horizontal"
? "flex items-center space-x-4"
: "grid gap-2", className), role: "radiogroup", ...props }) }));
});
exports.RadioGroup = RadioGroup;
RadioGroup.displayName = "RadioGroup";
const RadioGroupItem = React.forwardRef(({ className, value, customSize = "md", ...props }, ref) => {
const context = React.useContext(RadioGroupContext);
if (!context) {
throw new Error("RadioGroupItem must be used within a RadioGroup");
}
const { value: selectedValue, onValueChange, name } = context;
const checked = selectedValue === value;
const [focused, setFocused] = React.useState(false);
const radioRef = React.useRef(null);
// Size mappings for custom sizes
const sizeMap = {
sm: { outer: "h-3.5 w-3.5", inner: "h-1.5 w-1.5", icon: "h-2 w-2" },
md: { outer: "h-4 w-4", inner: "h-2 w-2", icon: "h-2.5 w-2.5" },
lg: { outer: "h-5 w-5", inner: "h-2.5 w-2.5", icon: "h-3 w-3" },
};
const itemSize = sizeMap[customSize];
const handleChange = () => {
onValueChange(value);
};
const handleFocus = () => setFocused(true);
const handleBlur = () => setFocused(false);
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)("div", { ref: ref, className: "relative flex items-center", children: [(0, jsx_runtime_1.jsx)("input", { ref: radioRef, type: "radio", value: value, checked: checked, name: name, className: "absolute h-0 w-0 opacity-0", onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, ...props }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(`relative flex items-center justify-center rounded-full border
border-gray-300 dark:border-gray-800 ring-foreground transition-all duration-200`, checked && "border-foreground/80 dark:border-foreground/80", focused && "ring-2 ring-ring ring-offset-2", props.disabled
? "cursor-not-allowed opacity-50"
: "cursor-pointer", itemSize.outer, className), onClick: () => radioRef.current?.click(), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("absolute rounded-full bg-primary scale-0 transition-transform duration-200 ease-in-out", checked && "scale-100", itemSize.inner) }) })] }), props.children && ((0, jsx_runtime_1.jsx)("label", { htmlFor: props.id, className: (0, utils_1.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.disabled && "opacity-50 cursor-not-allowed"), onClick: () => !props.disabled && radioRef.current?.click(), children: props.children }))] }));
});
exports.RadioGroupItem = RadioGroupItem;
RadioGroupItem.displayName = "RadioGroupItem";
//# sourceMappingURL=radio-group.js.map