@helpdice/ui 1.0.1 → 1.0.2

package/esm/progress/progress.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import { useProportions } from '../utils/calculations';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getCurrentColor = function getCurrentColor(ratio, palette, type) {
+  var colors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var defaultColors = {
+    "default": palette.foreground,
+    success: palette.success,
+    secondary: palette.secondary,
+    warning: palette.warning,
+    error: palette.error
+  };
+  var colorKeys = Object.keys(colors);
+  if (colorKeys.length === 0) return defaultColors[type];
+  var customColorKey = colorKeys.find(function (key) {
+    return ratio <= +key;
+  });
+  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type];
+  return colors[+customColorKey];
+};
+var ProgressComponent = function ProgressComponent(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    colors = _ref.colors,
+    _ref$fixedTop = _ref.fixedTop,
+    fixedTop = _ref$fixedTop === void 0 ? false : _ref$fixedTop,
+    _ref$fixedBottom = _ref.fixedBottom,
+    fixedBottom = _ref$fixedBottom === void 0 ? false : _ref$fixedBottom,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var percentValue = useProportions(value, max);
+  var currentColor = getCurrentColor(percentValue, theme.palette, type, colors);
+  var fixed = fixedTop || fixedBottom;
+  var classes = useClasses('progress', {
+    fixed: fixed
+  }, className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1239801602", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    title: "".concat(percentValue, "%"),
+    className: _JSXStyle.dynamic([["1239801602", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + "inner"
+  }), /*#__PURE__*/React.createElement("progress", _extends({
+    value: value,
+    max: max
+  }, props, {
+    className: _JSXStyle.dynamic([["1239801602", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + (props && props.className != null && props.className || className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1239801602",
+    dynamic: [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]
+  }, "progress.__jsx-style-dynamic-selector{position:fixed;top:-1000px;opacity:0;visibility:hidden;pointer-events:none;}.progress.__jsx-style-dynamic-selector{position:relative;background-color:".concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(0.625), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.fixed.__jsx-style-dynamic-selector{position:fixed;top:").concat(fixedTop ? 0 : 'unset', ";bottom:").concat(fixedBottom ? 0 : 'unset', ";left:0;border-radius:0;}.fixed.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{border-radius:0;}.inner.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;height:100%;bottom:0;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;border-radius:").concat(theme.layout.radius, ";background-color:").concat(currentColor, ";width:").concat(percentValue, "%;}")));
+};
+ProgressComponent.displayName = 'Progress';
+var Progress = withScale(ProgressComponent);
+export default Progress;

package/esm/radio/index.d.ts

@@ -0,0 +1,13 @@
+import Radio from "./radio";
+import RadioGroup from "./radio-group";
+import RadioDescription from "./radio-description";
+export type RadioComponentType = typeof Radio & {
+    Group: typeof RadioGroup;
+    Description: typeof RadioDescription;
+    Desc: typeof RadioDescription;
+};
+export type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from "./radio";
+export type { RadioGroupProps } from "./radio-group";
+export type { RadioDescriptionProps } from "./radio-description";
+declare const _default: RadioComponentType;
+export default _default;

package/esm/radio/index.js

@@ -0,0 +1,7 @@
+import Radio from './radio';
+import RadioGroup from './radio-group';
+import RadioDescription from './radio-description';
+Radio.Group = RadioGroup;
+Radio.Description = RadioDescription;
+Radio.Desc = RadioDescription;
+export default Radio;

package/esm/radio/radio-context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface RadioConfig {
+    updateState?: (value: string | number) => void;
+    disabledAll: boolean;
+    value?: string | number;
+    inGroup: boolean;
+}
+export declare const RadioContext: React.Context<RadioConfig>;
+export declare const useRadioContext: () => RadioConfig;

package/esm/radio/radio-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false
+};
+export var RadioContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useRadioContext = function useRadioContext() {
+  return React.useContext(RadioContext);
+};

package/esm/radio/radio-description.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type RadioDescriptionProps = Props & NativeAttrs;
+declare const RadioDescription: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default RadioDescription;

package/esm/radio/radio-description.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+var RadioDescriptionComponent = function RadioDescriptionComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2489497926", [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2489497926",
+    dynamic: [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]
+  }, "span.__jsx-style-dynamic-selector{color:".concat(theme.palette.accents_3, ";font-size:").concat(SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)'), ";}")));
+};
+RadioDescriptionComponent.displayName = 'RadioDescription';
+var RadioDescription = withScale(RadioDescriptionComponent);
+export default RadioDescription;

package/esm/radio/radio-group.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+interface Props {
+    value?: string | number;
+    initialValue?: string | number;
+    disabled?: boolean;
+    onChange?: (value: string | number) => void;
+    className?: string;
+    useRow?: boolean;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type RadioGroupProps = Props & NativeAttrs;
+declare const RadioGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default RadioGroup;

package/esm/radio/radio-group.js

@@ -0,0 +1,57 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "onChange", "value", "children", "className", "initialValue", "useRow"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { RadioContext } from './radio-context';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var RadioGroupComponent = function RadioGroupComponent(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    initialValue = _ref.initialValue,
+    _ref$useRow = _ref.useRow,
+    useRow = _ref$useRow === void 0 ? false : _ref$useRow,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
+  var updateState = function updateState(nextValue) {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  };
+  var providerValue = useMemo(function () {
+    return {
+      updateState: updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      value: selfVal
+    };
+  }, [disabled, selfVal]);
+  useEffect(function () {
+    if (value === undefined) return;
+    setSelfVal(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement(RadioContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1223822443", [useRow ? 'col' : 'column', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), useRow ? 0 : 'var(--radio-group-gap)', useRow ? 'var(--radio-group-gap)' : 0, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || useClasses('radio-group', className) || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1223822443",
+    dynamic: [useRow ? 'col' : 'column', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), useRow ? 0 : 'var(--radio-group-gap)', useRow ? 'var(--radio-group-gap)' : 0, SCALES.font(1)]
+  }, ".radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(useRow ? 'col' : 'column', ";-ms-flex-direction:").concat(useRow ? 'col' : 'column', ";flex-direction:").concat(useRow ? 'col' : 'column', ";--radio-group-gap:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:").concat(useRow ? 0 : 'var(--radio-group-gap)', ";margin-left:").concat(useRow ? 'var(--radio-group-gap)' : 0, ";--radio-size:").concat(SCALES.font(1), ";}.radio-group.__jsx-style-dynamic-selector .radio:first-of-type{margin:0;}")));
+};
+RadioGroupComponent.displayName = 'RadioGroup';
+var RadioGroup = withScale(RadioGroupComponent);
+export default RadioGroup;

package/esm/radio/radio.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type RadioTypes = NormalTypes;
+export interface RadioEventTarget {
+    checked: boolean;
+}
+export interface RadioEvent {
+    target: RadioEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    value?: string | number;
+    type?: RadioTypes;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (e: RadioEvent) => void;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type RadioProps = Props & NativeAttrs;
+declare const Radio: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Radio;

package/esm/radio/radio.js

@@ -0,0 +1,109 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { useRadioContext } from './radio-context';
+import RadioDescription from './radio-description';
+import { pickChild } from '../utils/collections';
+import useWarning from '../utils/use-warning';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var RadioComponent = function RadioComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    checked = _ref.checked,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    radioValue = _ref.value,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(!!checked),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
+  var _useRadioContext = useRadioContext(),
+    groupValue = _useRadioContext.value,
+    disabledAll = _useRadioContext.disabledAll,
+    inGroup = _useRadioContext.inGroup,
+    updateState = _useRadioContext.updateState;
+  var _pickChild = pickChild(children, RadioDescription),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutDescChildren = _pickChild2[0],
+    DescChildren = _pickChild2[1];
+  if (inGroup) {
+    if (checked !== undefined) {
+      useWarning('Remove props "checked" if in the Radio.Group.', 'Radio');
+    }
+    if (radioValue === undefined) {
+      useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio');
+    }
+    useEffect(function () {
+      setSelfChecked(groupValue === radioValue);
+    }, [groupValue, radioValue]);
+  }
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    label = _useMemo.label,
+    border = _useMemo.border,
+    bg = _useMemo.bg;
+  var isDisabled = useMemo(function () {
+    return disabled || disabledAll;
+  }, [disabled, disabledAll]);
+  var changeHandler = function changeHandler(event) {
+    if (isDisabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: event.stopPropagation,
+      preventDefault: event.preventDefault,
+      nativeEvent: event
+    };
+    setSelfChecked(!selfChecked);
+    if (inGroup) {
+      updateState && updateState(radioValue);
+    }
+    onChange && onChange(selfEvent);
+  };
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(Boolean(checked));
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
+  }, /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    value: radioValue,
+    checked: selfChecked,
+    onChange: changeHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2664604043", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
+      active: selfChecked
+    }) || "")
+  }), withoutDescChildren), DescChildren && DescChildren), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2664604043",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
+  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
+};
+RadioComponent.displayName = 'Radio';
+var Radio = withScale(RadioComponent);
+export default Radio;

package/esm/radio/styles.d.ts

@@ -0,0 +1,8 @@
+import { HUIThemesPalette } from "../themes/presets";
+import { NormalTypes } from "../utils/prop-types";
+export type RadioColor = {
+    label: string;
+    border: string;
+    bg: string;
+};
+export declare const getColors: (palette: HUIThemesPalette, status?: NormalTypes) => RadioColor;

package/esm/radio/styles.js

@@ -0,0 +1,31 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      label: palette.foreground,
+      border: palette.border,
+      bg: palette.foreground
+    },
+    secondary: {
+      label: palette.foreground,
+      border: palette.border,
+      bg: palette.foreground
+    },
+    success: {
+      label: palette.success,
+      border: palette.success,
+      bg: palette.success
+    },
+    warning: {
+      label: palette.warning,
+      border: palette.warning,
+      bg: palette.warning
+    },
+    error: {
+      label: palette.error,
+      border: palette.error,
+      bg: palette.error
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/rating/index.d.ts

@@ -0,0 +1,3 @@
+import Rating from "./rating";
+export type { RatingProps, RatingTypes, RatingCount, RatingValue } from "./rating";
+export default Rating;

package/esm/rating/index.js

@@ -0,0 +1,2 @@
+import Rating from './rating';
+export default Rating;

package/esm/rating/rating-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RatingIcon: React.FC<unknown>;
+export default RatingIcon;

package/esm/rating/rating-icon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+var RatingIcon = function RatingIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+  }));
+};
+RatingIcon.displayName = 'GeistRatingIcon';
+export default RatingIcon;

package/esm/rating/rating.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type RatingTypes = NormalTypes;
+declare const ratingCountTuple: [2, 3, 4, 5, 6, 7, 8, 9, 10];
+declare const ratingValueTuple: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export type RatingValue = typeof ratingValueTuple[number];
+export type RatingCount = typeof ratingCountTuple[number];
+interface Props {
+    type?: RatingTypes;
+    className?: string;
+    icon?: JSX.Element;
+    count?: RatingCount | number;
+    value?: RatingValue | number;
+    initialValue?: RatingValue;
+    onValueChange?: (value: number) => void;
+    locked?: boolean;
+    onLockedChange?: (locked: boolean) => void;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type RatingProps = Props & NativeAttrs;
+declare const Rating: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Rating;