@hellboy/ds 0.1.2 → 0.2.7

package/{src/style → dist}/components/radio.css

@@ -1,5 +1,4 @@
-/* Radio Component Styles */
-
+/* src/style/components/radio.css */
 .radio {
   display: inline-flex;
   align-items: center;
@@ -8,7 +7,6 @@
   user-select: none;
   position: relative;
 }
-
 .radio__input {
   position: absolute;
   opacity: 0;
@@ -16,7 +14,6 @@
   height: 0;
   pointer-events: none;
 }
-
 .radio__box {
   position: relative;
   display: inline-flex;
@@ -26,9 +23,8 @@
   border: 2px solid var(--color-foreground-2);
   border-radius: 50%;
   background-color: var(--color-bg-1);
-  transition: all 0.2s ease;
+  transition: all var(--motion-transition-base);
 }
-
 .radio__dot {
   width: 50%;
   height: 50%;
@@ -36,143 +32,104 @@
   background-color: var(--color-on-primary);
   opacity: 0;
   transform: scale(0);
-  transition: all 0.2s ease;
+  transition: all var(--motion-transition-base);
 }
-
 .radio__label {
   font-size: var(--font-size-md);
   color: var(--color-foreground-1);
   line-height: 1.5;
 }
-
-/* Size variants */
 .radio--sm .radio__box {
   width: 16px;
   height: 16px;
 }
-
 .radio--sm .radio__label {
   font-size: var(--font-size-sm);
 }
-
 .radio--md .radio__box {
   width: 20px;
   height: 20px;
 }
-
 .radio--lg .radio__box {
   width: 24px;
   height: 24px;
 }
-
 .radio--lg .radio__label {
   font-size: var(--font-size-lg);
 }
-
-/* Checked state */
-.radio__input[aria-checked="true"] + .radio__box,
+.radio__input[aria-checked=true] + .radio__box,
 .radio__input:checked + .radio__box {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
-
-.radio__input[aria-checked="true"] + .radio__box .radio__dot,
+.radio__input[aria-checked=true] + .radio__box .radio__dot,
 .radio__input:checked + .radio__box .radio__dot {
   opacity: 1;
   transform: scale(1);
 }
-
-/* Focus state */
 .radio__input:focus-visible + .radio__box {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-
-/* Hover state */
 .radio:hover .radio__box {
   border-color: var(--color-primary);
 }
-
-.radio:hover .radio__input[aria-checked="true"] + .radio__box,
+.radio:hover .radio__input[aria-checked=true] + .radio__box,
 .radio:hover .radio__input:checked + .radio__box {
-  background-color: HSLA(
-    var(--primary-hue),
-    var(--primary-saturation),
-    calc(var(--primary-lightness) - 5%),
-    1
-  );
-}
-
-/* Disabled state */
+  background-color: HSLA(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 5%), 1);
+}
 .radio--disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-
 .radio--disabled .radio__box {
   background-color: var(--color-bg-2);
   border-color: var(--color-foreground-3);
 }
-
-/* Error state */
 .radio--error .radio__box {
   border-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
 .radio--error .radio__input:focus-visible + .radio__box {
   outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
-/* Radio Group Styles */
-
 .radio-group {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
 .radio-group__label {
   font-size: var(--font-size-md);
   font-weight: 600;
   color: var(--color-foreground-1);
   margin-bottom: var(--spacing-1);
 }
-
 .radio-group__container {
   display: flex;
   gap: var(--spacing-3);
 }
-
 .radio-group--vertical .radio-group__container {
   flex-direction: column;
 }
-
 .radio-group--horizontal .radio-group__container {
   flex-direction: row;
   flex-wrap: wrap;
 }
-
 .radio-group__feedback {
   margin-top: var(--spacing-1);
 }
-
 .radio-group__error-text {
   font-size: var(--font-size-sm);
   color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
   display: block;
 }
-
 .radio-group__helper-text {
   font-size: var(--font-size-sm);
   color: var(--color-foreground-2);
   display: block;
 }
-
-/* Radio group error state */
 .radio-group--error .radio__box {
   border-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
 .radio-group--error .radio__input:focus-visible + .radio__box {
   outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }

package/dist/components/radio.d.mts

@@ -0,0 +1,59 @@
+import React__default from 'react';
+import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from '@ariakit/react';
+
+type RadioSize = 'sm' | 'md' | 'lg';
+interface RadioProps extends Omit<RadioProps$1, 'children' | 'size'> {
+    /**
+     * Size of the radio button
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label text for the radio button
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Error state
+     */
+    error?: boolean;
+}
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'onChange'> {
+    /**
+     * Size of all radio buttons in the group
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label for the radio group
+     */
+    label?: string;
+    /**
+     * Error message to display below the radio group
+     */
+    error?: string;
+    /**
+     * Helper text to display below the radio group
+     */
+    helperText?: string;
+    /**
+     * Children (Radio components)
+     */
+    children: React__default.ReactNode;
+    /**
+     * Orientation of the radio group
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The value of the selected radio button
+     */
+    value?: string | number | null;
+    /**
+     * Callback when the selected value changes
+     */
+    onChange?: (value: string | number | null) => void;
+}
+declare const Radio: React__default.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize };

package/dist/components/radio.d.ts

@@ -0,0 +1,59 @@
+import React__default from 'react';
+import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from '@ariakit/react';
+
+type RadioSize = 'sm' | 'md' | 'lg';
+interface RadioProps extends Omit<RadioProps$1, 'children' | 'size'> {
+    /**
+     * Size of the radio button
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label text for the radio button
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Error state
+     */
+    error?: boolean;
+}
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'onChange'> {
+    /**
+     * Size of all radio buttons in the group
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Label for the radio group
+     */
+    label?: string;
+    /**
+     * Error message to display below the radio group
+     */
+    error?: string;
+    /**
+     * Helper text to display below the radio group
+     */
+    helperText?: string;
+    /**
+     * Children (Radio components)
+     */
+    children: React__default.ReactNode;
+    /**
+     * Orientation of the radio group
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The value of the selected radio button
+     */
+    value?: string | number | null;
+    /**
+     * Callback when the selected value changes
+     */
+    onChange?: (value: string | number | null) => void;
+}
+declare const Radio: React__default.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize };

package/dist/components/radio.js

@@ -0,0 +1,133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/radio/index.ts
+var radio_exports = {};
+__export(radio_exports, {
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup
+});
+module.exports = __toCommonJS(radio_exports);
+
+// src/components/radio/Radio.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("@ariakit/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Radio = import_react.default.forwardRef(
+  ({
+    size = "md",
+    label,
+    error = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const radioClasses = [
+      "radio",
+      `radio--${size}`,
+      error && "radio--error",
+      disabled && "radio--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: radioClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react2.Radio,
+        {
+          ref,
+          disabled,
+          className: "radio__input",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "radio__box", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "radio__dot" }) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "radio__label", children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = import_react.default.forwardRef(
+  ({
+    size = "md",
+    label,
+    error,
+    helperText,
+    children,
+    orientation = "vertical",
+    disabled = false,
+    className,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const groupClasses = [
+      "radio-group",
+      `radio-group--${orientation}`,
+      error && "radio-group--error",
+      disabled && "radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const radioGroupStore = (0, import_react2.useRadioStore)({
+      value,
+      setValue: onChange
+    });
+    const childrenWithProps = import_react.default.Children.map(children, (child) => {
+      if (import_react.default.isValidElement(child) && child.type === Radio) {
+        return import_react.default.cloneElement(child, {
+          size: child.props.size || size,
+          error: error ? true : child.props.error,
+          disabled: disabled || child.props.disabled
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: groupClasses, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "radio-group__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react2.RadioGroup,
+        {
+          ref,
+          store: radioGroupStore,
+          className: "radio-group__container",
+          ...props,
+          children: childrenWithProps
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "radio-group__feedback", children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "radio-group__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "radio-group__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  RadioGroup
+});

package/dist/components/radio.mjs

@@ -0,0 +1,95 @@
+// src/components/radio/Radio.tsx
+import React from "react";
+import { Radio as AriakitRadio, RadioGroup as AriakitRadioGroup, useRadioStore } from "@ariakit/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = React.forwardRef(
+  ({
+    size = "md",
+    label,
+    error = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const radioClasses = [
+      "radio",
+      `radio--${size}`,
+      error && "radio--error",
+      disabled && "radio--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("label", { className: radioClasses, children: [
+      /* @__PURE__ */ jsx(
+        AriakitRadio,
+        {
+          ref,
+          disabled,
+          className: "radio__input",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "radio__box", children: /* @__PURE__ */ jsx("span", { className: "radio__dot" }) }),
+      label && /* @__PURE__ */ jsx("span", { className: "radio__label", children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = React.forwardRef(
+  ({
+    size = "md",
+    label,
+    error,
+    helperText,
+    children,
+    orientation = "vertical",
+    disabled = false,
+    className,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const groupClasses = [
+      "radio-group",
+      `radio-group--${orientation}`,
+      error && "radio-group--error",
+      disabled && "radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const radioGroupStore = useRadioStore({
+      value,
+      setValue: onChange
+    });
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === Radio) {
+        return React.cloneElement(child, {
+          size: child.props.size || size,
+          error: error ? true : child.props.error,
+          disabled: disabled || child.props.disabled
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsxs("div", { className: groupClasses, children: [
+      label && /* @__PURE__ */ jsx("div", { className: "radio-group__label", children: label }),
+      /* @__PURE__ */ jsx(
+        AriakitRadioGroup,
+        {
+          ref,
+          store: radioGroupStore,
+          className: "radio-group__container",
+          ...props,
+          children: childrenWithProps
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "radio-group__feedback", children: [
+        error && /* @__PURE__ */ jsx("span", { className: "radio-group__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ jsx("span", { className: "radio-group__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+export {
+  Radio,
+  RadioGroup
+};