@aristobyte-ui/radio 2.3.6 → 2.4.0

package/es/src/main/components/Radio/index.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import './Radio.scss';
+export var Radio = function (_a) {
+    var children = _a.children, value = _a.value, checked = _a.checked, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.highlightLabel, highlightLabel = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.appearance, appearance = _f === void 0 ? 'default' : _f, _g = _a.alignLabel, alignLabel = _g === void 0 ? 'right' : _g, onChange = _a.onChange, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.style, style = _j === void 0 ? {} : _j;
+    var handleChange = function () {
+        if (!disabled && onChange) {
+            onChange(value);
+        }
+    };
+    return (React.createElement("label", { className: "radio ".concat("radio-align-label--".concat(alignLabel), " ").concat("radio-appearance--".concat(appearance), " ").concat("radio-variant--".concat(variant), " ").concat("radio-size--".concat(size), " ").concat(disabled ? 'radio--disabled' : '', " ").concat(className), style: style },
+        React.createElement("input", { type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: "radio__input" }),
+        React.createElement("span", { className: "radio__control" }),
+        children && (React.createElement("span", { className: "radio__label ".concat(highlightLabel ? 'radio__label--highlight-label' : '') }, children))));
+};

package/es/src/main/components/RadioGroup/index.js

@@ -0,0 +1,48 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from 'react';
+import { Radio } from '../Radio';
+import './RadioGroup.scss';
+export var RadioGroup = function (_a) {
+    var name = _a.name, value = _a.value, onChange = _a.onChange, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.highlightLabel, highlightLabel = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.appearance, appearance = _f === void 0 ? 'outline' : _f, _g = _a.align, align = _g === void 0 ? 'horizontal' : _g, _h = _a.alignLabel, alignLabel = _h === void 0 ? 'right' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.style, style = _k === void 0 ? {} : _k;
+    var uniqueId = React.useId();
+    var _l = __read(React.useState(value), 2), currentValue = _l[0], setCurrentValue = _l[1];
+    var radios = React.Children.toArray(children).filter(function (child) { return React.isValidElement(child) && child.type === Radio; });
+    var handleChange = function (currentRadioValue) {
+        if (onChange) {
+            onChange(currentRadioValue);
+        }
+        setCurrentValue(currentRadioValue);
+    };
+    return (React.createElement("div", { key: uniqueId, className: "radio-group ".concat("radio-group--".concat(align), " ").concat(className), style: style }, radios.map(function (_a) {
+        var _b, _c, _d, _e, _f, _g;
+        var props = _a.props;
+        return (React.createElement(Radio, __assign({}, props, { key: "".concat(name, "-").concat(props.value, "-").concat(uniqueId), name: "".concat(name, "-").concat(props.value, "-").concat(uniqueId), checked: props.value === currentValue, onChange: function () { return handleChange(props.value); }, disabled: (_b = props.disabled) !== null && _b !== void 0 ? _b : disabled, size: (_c = props.size) !== null && _c !== void 0 ? _c : size, variant: (_d = props.variant) !== null && _d !== void 0 ? _d : variant, appearance: (_e = props.appearance) !== null && _e !== void 0 ? _e : appearance, highlightLabel: (_f = props.highlightLabel) !== null && _f !== void 0 ? _f : highlightLabel, alignLabel: (_g = props.alignLabel) !== null && _g !== void 0 ? _g : alignLabel })));
+    })));
+};

package/es/src/main/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Radio";
+export * from "./RadioGroup";

package/es/src/main/index.js

@@ -0,0 +1 @@
+export * from './components';

package/lib/src/main/components/Radio/index.js

@@ -0,0 +1,51 @@
+"use strict";
+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.Radio = void 0;
+var React = __importStar(require("react"));
+require("./Radio.scss");
+var Radio = function (_a) {
+    var children = _a.children, value = _a.value, checked = _a.checked, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.highlightLabel, highlightLabel = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.appearance, appearance = _f === void 0 ? 'default' : _f, _g = _a.alignLabel, alignLabel = _g === void 0 ? 'right' : _g, onChange = _a.onChange, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.style, style = _j === void 0 ? {} : _j;
+    var handleChange = function () {
+        if (!disabled && onChange) {
+            onChange(value);
+        }
+    };
+    return (React.createElement("label", { className: "radio ".concat("radio-align-label--".concat(alignLabel), " ").concat("radio-appearance--".concat(appearance), " ").concat("radio-variant--".concat(variant), " ").concat("radio-size--".concat(size), " ").concat(disabled ? 'radio--disabled' : '', " ").concat(className), style: style },
+        React.createElement("input", { type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: "radio__input" }),
+        React.createElement("span", { className: "radio__control" }),
+        children && (React.createElement("span", { className: "radio__label ".concat(highlightLabel ? 'radio__label--highlight-label' : '') }, children))));
+};
+exports.Radio = Radio;

package/lib/src/main/components/RadioGroup/index.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+var React = __importStar(require("react"));
+var Radio_1 = require("../Radio");
+require("./RadioGroup.scss");
+var RadioGroup = function (_a) {
+    var name = _a.name, value = _a.value, onChange = _a.onChange, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.highlightLabel, highlightLabel = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.appearance, appearance = _f === void 0 ? 'outline' : _f, _g = _a.align, align = _g === void 0 ? 'horizontal' : _g, _h = _a.alignLabel, alignLabel = _h === void 0 ? 'right' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.style, style = _k === void 0 ? {} : _k;
+    var uniqueId = React.useId();
+    var _l = __read(React.useState(value), 2), currentValue = _l[0], setCurrentValue = _l[1];
+    var radios = React.Children.toArray(children).filter(function (child) { return React.isValidElement(child) && child.type === Radio_1.Radio; });
+    var handleChange = function (currentRadioValue) {
+        if (onChange) {
+            onChange(currentRadioValue);
+        }
+        setCurrentValue(currentRadioValue);
+    };
+    return (React.createElement("div", { key: uniqueId, className: "radio-group ".concat("radio-group--".concat(align), " ").concat(className), style: style }, radios.map(function (_a) {
+        var _b, _c, _d, _e, _f, _g;
+        var props = _a.props;
+        return (React.createElement(Radio_1.Radio, __assign({}, props, { key: "".concat(name, "-").concat(props.value, "-").concat(uniqueId), name: "".concat(name, "-").concat(props.value, "-").concat(uniqueId), checked: props.value === currentValue, onChange: function () { return handleChange(props.value); }, disabled: (_b = props.disabled) !== null && _b !== void 0 ? _b : disabled, size: (_c = props.size) !== null && _c !== void 0 ? _c : size, variant: (_d = props.variant) !== null && _d !== void 0 ? _d : variant, appearance: (_e = props.appearance) !== null && _e !== void 0 ? _e : appearance, highlightLabel: (_f = props.highlightLabel) !== null && _f !== void 0 ? _f : highlightLabel, alignLabel: (_g = props.alignLabel) !== null && _g !== void 0 ? _g : alignLabel })));
+    })));
+};
+exports.RadioGroup = RadioGroup;

package/lib/src/main/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./RadioGroup"), exports);

package/lib/src/main/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/radio",
   "description": "Composable and fully-typed Radio and RadioGroup components for AristoByteUI. Supports multiple variants, sizes, appearances, alignments, and optional label highlights, optimized for performance and developer experience.",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",

package/README.md

@@ -1,98 +0,0 @@
-# @aristobyte-ui/radio
-
-<p align="center"> 
-  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" /> 
-  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" /> 
-  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" /> 
-  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" /> 
-  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" /> 
-  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" /> 
-  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" /> 
-  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" /> 
-</p>
-
-Fully-typed, composable Radio and RadioGroup components for AristoByteUI, supporting multiple variants, sizes, appearances, alignments, and optional label highlights.
-
-## 📦 Installation
-
-```bash
-# Install via Yarn
-yarn add -D @aristobyte-ui/radio
-
-# Or via npm
-npm install -D @aristobyte-ui/radio
-
-# Or via pnpm
-pnpm add -D @aristobyte-ui/radio
-```
-
-## 🛠 Usage
-
-```tsx
-import { Radio, RadioGroup } from "@aristobyte-ui/radio";
-
-<RadioGroup
-  name="options"
-  value="option1"
-  onChange={(val) => console.log(val)}
-  variant="primary"
-  size="md"
-  align="horizontal"
-  alignLabel="right"
->
-  <Radio value="option1">Option 1</Radio>
-  <Radio value="option2">Option 2</Radio>
-</RadioGroup>;
-```
-
-##📂 Presets Available
-
-- **variant**: `default` | `primary` | `secondary` | `success` | `error` | `warning`
-- **appearance**: `default` | `solid` | `outline` | `outline-dashed` | `no-outline` | `glowing`
-- **size**: `xsm` | `sm` | `md` | `lg` | `xlg`
-- **align**: `horizontal` | `vertical`
-- **alignLabel**: `top` | `right` | `bottom` | `left`
-- **highlightLabel**: `boolean`
-
-## 🔧 Example in a Package
-
-```tsx
-<Radio
-  value="radio1"
-  size="lg"
-  variant="success"
-  appearance="glowing"
-  alignLabel="top"
->
-  Radio Option
-</Radio>
-```
-
-## 📊 Why This Matters
-
-- **Performance-first:** Lightweight CSS ensures fast rendering and smooth transitions.
-- **Fully typed:** TypeScript-first API ensures predictable usage and IDE autocomplete.
-- **AristoByteUI ready:** Seamlessly integrates with design tokens and SCSS modules.
-- **Flexible:** Supports multiple variants, sizes, appearances, alignments, and optional label highlights.
-
-## 🏆 Philosophy
-
-- **Modular architecture:** Radio and RadioGroup components are fully composable.
-- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
-- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
-- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
-
-## 📜 License
-
-[MIT](./LICENSE) © AristoByte
-
-## 🛡 Shields Showcase
-
-<p align="center"> 
-  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" /> 
-  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" /> 
-  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" /> 
-  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" /> 
-  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" /> 
-  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" /> 
-</p>