@neko-os/ui 0.2.2 → 0.3.0

package/dist/components/inputs/Picker.js

@@ -1 +1,169 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/Picker.js";var _excluded=["option","onChange","value","renderOption","useRawOption","multiple","labelKey","valueKey"],_excluded2=["renderItem","options"],_excluded3=["renderItem","options","valueKey"],_excluded4=["value","initialValue","onChange","disabled","options","renderOption","colProps","useRawOption","useFlatList","multiple","valueKey","labelKey","Wrapper"];import{is}from'ramda';import React from'react';import{Col}from"../structure/Col";import{DrawerFlatList}from"../modals/bottomDrawer";import{LoadingView}from"../state/LoadingView";import{Row}from"../structure/Row";import{View}from"../structure";import{normalizeString}from"../../helpers/string";import{useOptions}from"../../helpers/options";import{jsx as _jsx}from"react/jsx-runtime";export function getOption(options,value){var config=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};if(!(options!=null&&options.length))return value;var option=options.find(function(option){return compareOptionsValues(option,value,config);});return option||value;}export function getOptionLabel(options,value){var config=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};if(!(options!=null&&options.length))return'';var labelKey=config.labelKey;var selectedOption=getOption(options,value,config);var label=(selectedOption==null?void 0:selectedOption[labelKey])||value;if(!is(String,label))return'';return label;}export function searchOptions(options,search){var config=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var labelKey=config.labelKey;if(!(options!=null&&options.length))return options;if(!search)return options;return options.filter(function(item){var _normalizeString;return(_normalizeString=normalizeString(item==null?void 0:item[labelKey]))==null?void 0:_normalizeString.includes(normalizeString(search));});}function isSelected(value,option){var config=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};return!!config.multiple?value==null?void 0:value.some==null?void 0:value.some(function(item){return compareOptionsValues(item,option,config);}):compareOptionsValues(value,option,config);}function compareOptionsValues(optionA,optionB){var config=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var valueKey=config.valueKey||'value';var valueA=(optionA==null?void 0:optionA[valueKey])||optionA;var valueB=(optionB==null?void 0:optionB[valueKey])||optionB;if(!valueA||!valueB)return false;return valueA===valueB;}function formatSingleChangeValue(option,value,_ref){var useRawOption=_ref.useRawOption,selected=_ref.selected,valueKey=_ref.valueKey;var selectedOption=option;var selectedValue=option[valueKey];if(!!useRawOption)selectedValue=option;if(selected){selectedOption=null;selectedValue=null;}return selectedValue;}function formatMultipleChangeValue(option,value,_ref2){var useRawOption=_ref2.useRawOption,selected=_ref2.selected,multiple=_ref2.multiple,valueKey=_ref2.valueKey;var selectedOption=option;var selectedValue=option[valueKey];value=_toConsumableArray(value||[]);if(!!useRawOption)selectedValue=option;if(selected){value=value.filter(function(item){return!isSelected(item,selectedOption,{multiple:multiple,valueKey:valueKey});});}else{value.push(selectedValue);}return value;}function PickerItem(_ref3){var option=_ref3.option,onChange=_ref3.onChange,value=_ref3.value,renderOption=_ref3.renderOption,useRawOption=_ref3.useRawOption,multiple=_ref3.multiple,labelKey=_ref3.labelKey,valueKey=_ref3.valueKey,props=_objectWithoutProperties(_ref3,_excluded);var selected=isSelected(value,option,{multiple:multiple,valueKey:valueKey});var handleChange=function handleChange(){var formatChangeValueFunc=multiple?formatMultipleChangeValue:formatSingleChangeValue;var formattedValue=formatChangeValueFunc(option,value,{selected:selected,useRawOption:useRawOption,valueKey:valueKey});onChange(formattedValue,option);};return _jsx(Col,Object.assign({},props,{children:renderOption({option:option,selected:selected,onChange:handleChange,valueKey:valueKey,labelKey:labelKey})}));}function DefaultPickerWrapper(_ref4){var renderItem=_ref4.renderItem,options=_ref4.options,props=_objectWithoutProperties(_ref4,_excluded2);return _jsx(Row,Object.assign({className:"neko-picker",gap:"md"},props,{children:options==null?void 0:options.map==null?void 0:options.map(function(option){return renderItem(option);})}));}function FlatListPickerWrapper(_ref5){var _renderItem=_ref5.renderItem,options=_ref5.options,valueKey=_ref5.valueKey,props=_objectWithoutProperties(_ref5,_excluded3);return _jsx(DrawerFlatList,Object.assign({keyExtractor:function keyExtractor(i){return i[valueKey];},data:options,divider:true,fullH:true,renderItem:function renderItem(_ref6){var option=_ref6.item;return _renderItem(option);}},props));}export function Picker(_ref7){var _this=this;var value=_ref7.value,initialValue=_ref7.initialValue,onChange=_ref7.onChange,disabled=_ref7.disabled,options=_ref7.options,renderOption=_ref7.renderOption,colProps=_ref7.colProps,useRawOption=_ref7.useRawOption,useFlatList=_ref7.useFlatList,multiple=_ref7.multiple,valueKey=_ref7.valueKey,labelKey=_ref7.labelKey,Wrapper=_ref7.Wrapper,rootProps=_objectWithoutProperties(_ref7,_excluded4);var _React$useState=React.useState(initialValue),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;onChange=onChange||setLocalValue;var _useOptions=useOptions(options,{}),finalOptions=_useOptions.options,isFirstLoad=_useOptions.isFirstLoad;var handleChange=function handleChange(v,option){if(!!disabled)return;setLocalValue(v);onChange==null?void 0:onChange(v,option);};valueKey=valueKey||'value';labelKey=labelKey||'label';if(!renderOption){console.error('Picker requires a renderOption prop');return false;}Wrapper=Wrapper||(useFlatList?FlatListPickerWrapper:DefaultPickerWrapper);return _jsx(LoadingView,{active:isFirstLoad,replaceChildren:true,children:_jsx(Wrapper,Object.assign({},rootProps,{valueKey:valueKey,options:finalOptions,renderItem:function renderItem(option){return _jsx(PickerItem,Object.assign({option:option,onChange:handleChange,value:value,renderOption:renderOption,useRawOption:useRawOption,multiple:multiple,valueKey:valueKey,labelKey:labelKey},colProps),option.value);}}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/Picker.js";var _excluded = ["option", "onChange", "value", "renderOption", "useRawOption", "multiple", "labelKey", "valueKey"],_excluded2 = ["renderItem", "options"],_excluded3 = ["renderItem", "options", "valueKey"],_excluded4 = ["value", "initialValue", "onChange", "disabled", "options", "renderOption", "colProps", "useRawOption", "useFlatList", "multiple", "valueKey", "labelKey", "Wrapper"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}function _toConsumableArray(r) {return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _iterableToArray(r) {if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);}function _arrayWithoutHoles(r) {if (Array.isArray(r)) return _arrayLikeToArray(r);}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}import { is } from 'ramda';
+import React from 'react';
+
+import { Col } from "../structure/Col";
+import { DrawerFlatList } from "../modals/bottomDrawer";
+import { LoadingView } from "../state/LoadingView";
+import { Row } from "../structure/Row";
+import { View } from "../structure";
+import { normalizeString } from "../../helpers/string";
+import { useOptions } from "../../helpers/options";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function getOption(options, value) {var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!Array.isArray(options) || !options.length) return value;
+  var option = options.find(function (option) {return compareOptionsValues(option, value, config);});
+  return option || value;
+}
+
+export function getOptionLabel(options, value) {var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!Array.isArray(options) || !options.length) return '';
+  var labelKey = config.labelKey;
+  var selectedOption = getOption(options, value, config);
+  var label = (selectedOption == null ? void 0 : selectedOption[labelKey]) || value;
+  if (!is(String, label)) return '';
+  return label;
+}
+
+export function searchOptions(options, search) {var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var labelKey = config.labelKey;
+  if (!(options != null && options.length)) return options;
+  if (!search) return options;
+  return options.filter(function (item) {var _normalizeString;return (_normalizeString = normalizeString(item == null ? void 0 : item[labelKey])) == null ? void 0 : _normalizeString.includes(normalizeString(search));});
+}
+
+function isSelected(value, option) {var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return !!config.multiple ?
+  value == null ? void 0 : value.some == null ? void 0 : value.some(function (item) {return compareOptionsValues(item, option, config);}) :
+  compareOptionsValues(value, option, config);
+}
+
+function compareOptionsValues(optionA, optionB) {var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var valueKey = config.valueKey || 'value';
+  var valueA = (optionA == null ? void 0 : optionA[valueKey]) || optionA;
+  var valueB = (optionB == null ? void 0 : optionB[valueKey]) || optionB;
+
+  if (!valueA || !valueB) return false;
+
+  return valueA === valueB;
+}
+
+function formatSingleChangeValue(option, value, _ref) {var useRawOption = _ref.useRawOption,selected = _ref.selected,valueKey = _ref.valueKey;
+  var selectedOption = option;
+  var selectedValue = option[valueKey];
+  if (!!useRawOption) selectedValue = option;
+  if (selected) {
+    selectedOption = null;
+    selectedValue = null;
+  }
+
+  return selectedValue;
+}
+
+function formatMultipleChangeValue(option, value, _ref2) {var useRawOption = _ref2.useRawOption,selected = _ref2.selected,multiple = _ref2.multiple,valueKey = _ref2.valueKey;
+  var selectedOption = option;
+  var selectedValue = option[valueKey];
+  value = _toConsumableArray(value || []);
+  if (!!useRawOption) selectedValue = option;
+  if (selected) {
+    value = value.filter(function (item) {return !isSelected(item, selectedOption, { multiple: multiple, valueKey: valueKey });});
+  } else {
+    value.push(selectedValue);
+  }
+
+  return value;
+}
+
+function PickerItem(_ref3) {var option = _ref3.option,onChange = _ref3.onChange,value = _ref3.value,renderOption = _ref3.renderOption,useRawOption = _ref3.useRawOption,multiple = _ref3.multiple,labelKey = _ref3.labelKey,valueKey = _ref3.valueKey,props = _objectWithoutProperties(_ref3, _excluded);
+  var selected = isSelected(value, option, { multiple: multiple, valueKey: valueKey });
+
+  var handleChange = function handleChange() {
+    var formatChangeValueFunc = multiple ? formatMultipleChangeValue : formatSingleChangeValue;
+    var formattedValue = formatChangeValueFunc(option, value, { selected: selected, useRawOption: useRawOption, valueKey: valueKey });
+    onChange(formattedValue, option);
+  };
+
+  return _jsx(Col, Object.assign({}, props, { children: renderOption({ option: option, selected: selected, onChange: handleChange, valueKey: valueKey, labelKey: labelKey }) }));
+}
+
+function DefaultPickerWrapper(_ref4) {var renderItem = _ref4.renderItem,options = _ref4.options,props = _objectWithoutProperties(_ref4, _excluded2);
+  return (
+    _jsx(Row, Object.assign({ className: "neko-picker", gap: "md" }, props, { children:
+      options == null ? void 0 : options.map == null ? void 0 : options.map(function (option) {return renderItem(option);}) })
+    ));
+
+}
+
+function FlatListPickerWrapper(_ref5) {var _renderItem = _ref5.renderItem,options = _ref5.options,valueKey = _ref5.valueKey,props = _objectWithoutProperties(_ref5, _excluded3);
+  return (
+    _jsx(DrawerFlatList, Object.assign({
+      keyExtractor: function keyExtractor(i) {return i[valueKey];},
+      data: options,
+      divider: true,
+      fullH: true,
+      renderItem: function renderItem(_ref6) {var option = _ref6.item;return _renderItem(option);} },
+    props)
+    ));
+
+}
+
+export function Picker(_ref7)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var _this = this;var value = _ref7.value,initialValue = _ref7.initialValue,onChange = _ref7.onChange,disabled = _ref7.disabled,options = _ref7.options,renderOption = _ref7.renderOption,colProps = _ref7.colProps,useRawOption = _ref7.useRawOption,useFlatList = _ref7.useFlatList,multiple = _ref7.multiple,valueKey = _ref7.valueKey,labelKey = _ref7.labelKey,Wrapper = _ref7.Wrapper,rootProps = _objectWithoutProperties(_ref7, _excluded4);
+  var _React$useState = React.useState(initialValue),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
+  value = value === undefined ? localValue : value;
+  onChange = onChange || setLocalValue;
+  var _useOptions = useOptions(options, {}),finalOptions = _useOptions.options,isFirstLoad = _useOptions.isFirstLoad;
+
+  var handleChange = function handleChange(v, option) {
+    if (!!disabled) return;
+    setLocalValue(v);
+    onChange == null ? void 0 : onChange(v, option);
+  };
+
+  valueKey = valueKey || 'value';
+  labelKey = labelKey || 'label';
+
+  if (!renderOption) {
+    console.error('Picker requires a renderOption prop');
+    return false;
+  }
+
+  Wrapper = Wrapper || (useFlatList ? FlatListPickerWrapper : DefaultPickerWrapper);
+
+  return (
+    _jsx(LoadingView, { active: isFirstLoad, replaceChildren: true, children:
+      _jsx(Wrapper, Object.assign({},
+      rootProps, {
+        valueKey: valueKey,
+        options: finalOptions,
+        renderItem: function renderItem(option) {return (
+            _jsx(PickerItem, Object.assign({
+
+              option: option,
+              onChange: handleChange,
+              value: value,
+              renderOption: renderOption,
+              useRawOption: useRawOption,
+              multiple: multiple,
+              valueKey: valueKey,
+              labelKey: labelKey },
+            colProps), option.value
+            ));} })
+
+      ) }
+    ));
+
+}

package/dist/components/inputs/Radio.js

@@ -1 +1,55 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/Radio.js";var _excluded=["value","onChange","disabled","initialValue"],_excluded2=["radioProps"],_excluded3=["option","selected","onChange","labelKey"];import{pipe}from'ramda';import React from'react';import{AbsHiddenInput}from"../../abstractions/HiddenInput";import{ContentLabel}from"../presentation/ContentLabel";import{Link}from"../actions/Link";import{Picker}from"./Picker";import{View}from"../structure/View";import{useColorConverter}from"../../modifiers/colorConverter";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function Radio(_ref){var value=_ref.value,onChange=_ref.onChange,disabled=_ref.disabled,initialValue=_ref.initialValue,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Radio'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],size=_pipe2$.size,sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,props=_pipe2[1];var _React$useState=React.useState(initialValue),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;var toggle=function toggle(){if(!!disabled)return;setLocalValue(!value);onChange==null?void 0:onChange(!value);};return _jsxs(Link,{onPress:toggle,className:"neko-radio",disabled:disabled,children:[_jsx(AbsHiddenInput,{checked:value,onChange:toggle,type:"radio",disabled:disabled}),_jsx(ContentLabel,Object.assign({size:sizeCode,gap:8,content:_jsx(View,{height:size*0.65,ratio:1,border:2,padding:2,borderColor:color,br:size,center:true,children:!!value&&_jsx(View,{bg:color,br:size,flex:true,fullW:true,fullH:true})})},props))]});}export function RadioGroup(_ref2){var _this=this;var radioProps=_ref2.radioProps,props=_objectWithoutProperties(_ref2,_excluded2);return _jsx(Picker,Object.assign({},props,{renderOption:function renderOption(_ref3){var option=_ref3.option,selected=_ref3.selected,onChange=_ref3.onChange,labelKey=_ref3.labelKey,props=_objectWithoutProperties(_ref3,_excluded3);return _jsx(Radio,Object.assign({label:option[labelKey],value:selected,onChange:onChange},props,radioProps));}}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/Radio.js";var _excluded = ["value", "onChange", "disabled", "initialValue"],_excluded2 = ["radioProps"],_excluded3 = ["option", "selected", "onChange", "labelKey"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe } from 'ramda';
+import React from 'react';
+
+import { AbsHiddenInput } from "../../abstractions/HiddenInput";
+import { ContentLabel } from "../presentation/ContentLabel";
+import { Link } from "../actions/Link";
+import { Picker } from "./Picker";
+import { View } from "../structure/View";
+import { useColorConverter } from "../../modifiers/colorConverter";
+import { useSizeConverter } from "../../modifiers/sizeConverter";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function Radio(_ref) {var value = _ref.value,onChange = _ref.onChange,disabled = _ref.disabled,initialValue = _ref.initialValue,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _pipe = pipe(
+      useColorConverter('primary'),
+      useSizeConverter('elementHeights', 'md'),
+      useThemeComponentModifier('Radio')
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],size = _pipe2$.size,sizeCode = _pipe2$.sizeCode,color = _pipe2$.color,props = _pipe2[1];
+
+  var _React$useState = React.useState(initialValue),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
+  value = value === undefined ? localValue : value;
+
+  var toggle = function toggle() {
+    if (!!disabled) return;
+    setLocalValue(!value);
+    onChange == null ? void 0 : onChange(!value);
+  };
+
+  return (
+    _jsxs(Link, { onPress: toggle, className: "neko-radio", disabled: disabled, children: [
+      _jsx(AbsHiddenInput, { checked: value, onChange: toggle, type: "radio", disabled: disabled }),
+      _jsx(ContentLabel, Object.assign({
+        size: sizeCode,
+        gap: 8,
+        content:
+        _jsx(View, { height: size * 0.65, ratio: 1, border: 2, padding: 2, borderColor: color, br: size, center: true, children:
+          !!value && _jsx(View, { bg: color, br: size, flex: true, fullW: true, fullH: true }) }
+        ) },
+
+      props)
+      )] }
+    ));
+
+}
+
+export function RadioGroup(_ref2) {var _this = this;var radioProps = _ref2.radioProps,props = _objectWithoutProperties(_ref2, _excluded2);
+  return (
+    _jsx(Picker, Object.assign({},
+    props, {
+      renderOption: function renderOption(_ref3) {var option = _ref3.option,selected = _ref3.selected,onChange = _ref3.onChange,labelKey = _ref3.labelKey,props = _objectWithoutProperties(_ref3, _excluded3);return (
+          _jsx(Radio, Object.assign({ label: option[labelKey], value: selected, onChange: onChange }, props, radioProps)));} })
+
+    ));
+
+}

package/dist/components/inputs/RateInput.js

@@ -1 +1,62 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/RateInput.js";var _excluded=["value","onChange","disabled","loading"],_excluded2=["icon","max","inactiveColor"];import{pipe,range,is}from'ramda';import React from'react';import{Icon}from"../presentation";import{Link}from"../actions/Link";import{LoadingView}from"../state";import{View}from"../structure/View";import{moveScale}from"../../theme/helpers/sizeScale";import{useColorConverter}from"../../modifiers/colorConverter";import{useDefaultModifier}from"../../modifiers/default";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS={color:'primary',inactiveColor:'text4_op50',max:5,icon:'star-fill'};export function RateInput(_ref){var _this=this;var value=_ref.value,onChange=_ref.onChange,disabled=_ref.disabled,loading=_ref.loading,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('icons','md'),useThemeComponentModifier('RateInput'),useDefaultModifier(DEFAULT_PROPS))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],size=_pipe2$.size,sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _React$useState=React.useState(value),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];React.useEffect(function(){return setLocalValue(value);},[value]);var icon=formattedProps.icon,max=formattedProps.max,inactiveColor=formattedProps.inactiveColor,props=_objectWithoutProperties(formattedProps,_excluded2);var handleChange=function handleChange(v){if(!!disabled)return;var newValue=v===localValue?null:v;setLocalValue(newValue);onChange==null?void 0:onChange(newValue);};return _jsx(LoadingView,{active:loading,width:"fit-content",children:_jsx(View,Object.assign({className:"neko-rate-input",row:true,gap:"xs",centerV:true,minHeight:sizeCode},props,{children:range(1,max+1).map(function(i){var active=localValue>=i;var finalIcon=icon;if(is(Function,icon))finalIcon=icon==null?void 0:icon({value:localValue,optionValue:i,active:active});var finalColor=color;if(is(Function,color))finalColor=color==null?void 0:color({value:localValue,optionValue:i,active:active});return _jsx(Link,{onPress:function onPress(){return handleChange(i);},disabled:disabled,center:true,children:_jsx(Icon,{name:finalIcon,size:moveScale(sizeCode,1),color:active?finalColor:inactiveColor})},i);})}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/RateInput.js";var _excluded = ["value", "onChange", "disabled", "loading"],_excluded2 = ["icon", "max", "inactiveColor"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe, range, is } from 'ramda';
+import React from 'react';
+
+import { Icon } from "../presentation";
+import { Link } from "../actions/Link";
+import { LoadingView } from "../state";
+import { View } from "../structure/View";
+import { moveScale } from "../../theme/helpers/sizeScale";
+import { useColorConverter } from "../../modifiers/colorConverter";
+import { useDefaultModifier } from "../../modifiers/default";
+import { useSizeConverter } from "../../modifiers/sizeConverter";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
+
+var DEFAULT_PROPS = {
+  color: 'primary',
+  inactiveColor: 'text4_op50',
+  max: 5,
+  icon: 'star-fill'
+};
+
+export function RateInput(_ref) {var _this = this;var value = _ref.value,onChange = _ref.onChange,disabled = _ref.disabled,loading = _ref.loading,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _pipe = pipe(
+      useColorConverter('primary'),
+      useSizeConverter('icons', 'md'),
+      useThemeComponentModifier('RateInput'),
+      useDefaultModifier(DEFAULT_PROPS)
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],size = _pipe2$.size,sizeCode = _pipe2$.sizeCode,color = _pipe2$.color,formattedProps = _pipe2[1];
+
+  var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
+  React.useEffect(function () {return setLocalValue(value);}, [value]);
+
+  var icon = formattedProps.icon,max = formattedProps.max,inactiveColor = formattedProps.inactiveColor,props = _objectWithoutProperties(formattedProps, _excluded2);
+
+  var handleChange = function handleChange(v) {
+    if (!!disabled) return;
+    var newValue = v === localValue ? null : v;
+    setLocalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+
+  return (
+    _jsx(LoadingView, { active: loading, width: "fit-content", children:
+      _jsx(View, Object.assign({ className: "neko-rate-input", row: true, gap: "xs", centerV: true, minHeight: sizeCode }, props, { children:
+        range(1, max + 1).map(function (i) {
+          var active = localValue >= i;
+
+          var finalIcon = icon;
+          if (is(Function, icon)) finalIcon = icon == null ? void 0 : icon({ value: localValue, optionValue: i, active: active });
+
+          var finalColor = color;
+          if (is(Function, color)) finalColor = color == null ? void 0 : color({ value: localValue, optionValue: i, active: active });
+
+          return (
+            _jsx(Link, { onPress: function onPress() {return handleChange(i);}, disabled: disabled, center: true, children:
+              _jsx(Icon, { name: finalIcon, size: moveScale(sizeCode, 1), color: active ? finalColor : inactiveColor }) }, i
+            ));
+
+        }) })
+      ) }
+    ));
+
+}

package/dist/components/inputs/SegmentedPicker.js

@@ -1 +1,62 @@
-import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/SegmentedPicker.js";var _excluded=["renderItem","options"],_excluded2=["buttonProps","color"],_excluded3=["option","selected","onChange","labelKey"];import{pipe}from'ramda';import{Button}from"../actions";import{Picker}from"./Picker";import{View}from"../structure";import{moveScale}from"../../theme/helpers/sizeScale";import{useDefaultModifier}from"../../modifiers/default";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,1),sizeCode=_ref2[0].sizeCode;return{gap:1,br:sizeCode,minHeight:sizeCode,bg:'overlayBG',padding:2,wrap:false,row:true,border:true,buttonProps:{fullH:true,size:sizeCode}};};function PickerWrapper(_ref3){var renderItem=_ref3.renderItem,options=_ref3.options,props=_objectWithoutProperties(_ref3,_excluded);return _jsx(View,{row:true,children:_jsx(View,Object.assign({},props,{children:options==null?void 0:options.map==null?void 0:options.map(function(option){return renderItem(option);})}))});}export function SegmentedPicker(_ref4){var _this=this;var rootProps=Object.assign({},(_objectDestructuringEmpty(_ref4),_ref4));var _pipe=pipe(useSizeConverter('elementHeights','md'),useThemeComponentModifier('SegmentPicker'),useDefaultModifier(DEFAULT_PROPS))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),sizeCode=_pipe2[0].sizeCode,formattedProps=_pipe2[1];var buttonProps=formattedProps.buttonProps,color=formattedProps.color,props=_objectWithoutProperties(formattedProps,_excluded2);return _jsx(Picker,Object.assign({className:"neko-segmented-picker",Wrapper:PickerWrapper},props,{renderOption:function renderOption(_ref5){var option=_ref5.option,selected=_ref5.selected,onChange=_ref5.onChange,labelKey=_ref5.labelKey,props=_objectWithoutProperties(_ref5,_excluded3);return _jsx(Button,Object.assign({label:option[labelKey],onPress:onChange,color:selected?color||'primary':(rootProps==null?void 0:rootProps.bg)||'overlayBG',round:rootProps==null?void 0:rootProps.round,textProps:{strong:selected},opacity:!selected&&0.8},option,buttonProps));}}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/SegmentedPicker.js";var _excluded = ["renderItem", "options"],_excluded2 = ["buttonProps", "color"],_excluded3 = ["option", "selected", "onChange", "labelKey"];function _objectDestructuringEmpty(t) {if (null == t) throw new TypeError("Cannot destructure " + t);}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { pipe } from 'ramda';
+
+import { Button } from "../actions";
+import { Picker } from "./Picker";
+import { View } from "../structure";
+import { moveScale } from "../../theme/helpers/sizeScale";
+import { useDefaultModifier } from "../../modifiers/default";
+import { useSizeConverter } from "../../modifiers/sizeConverter";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
+
+var DEFAULT_PROPS = function DEFAULT_PROPS(_ref) {var _ref2 = _slicedToArray(_ref, 1),sizeCode = _ref2[0].sizeCode;return {
+    gap: 1,
+    br: sizeCode,
+    minHeight: sizeCode,
+    bg: 'overlayBG',
+    padding: 2,
+    wrap: false,
+    row: true,
+    border: true,
+    buttonProps: {
+      fullH: true,
+      size: sizeCode
+    }
+  };};
+
+function PickerWrapper(_ref3) {var renderItem = _ref3.renderItem,options = _ref3.options,props = _objectWithoutProperties(_ref3, _excluded);
+  return (
+    _jsx(View, { row: true, children:
+      _jsx(View, Object.assign({}, props, { children: options == null ? void 0 : options.map == null ? void 0 : options.map(function (option) {return renderItem(option);}) })) }
+    ));
+
+}
+
+export function SegmentedPicker(_ref4) {var _this = this;var rootProps = Object.assign({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  var _pipe = pipe(
+      useSizeConverter('elementHeights', 'md'),
+      useThemeComponentModifier('SegmentPicker'),
+      useDefaultModifier(DEFAULT_PROPS)
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),sizeCode = _pipe2[0].sizeCode,formattedProps = _pipe2[1];
+
+  var buttonProps = formattedProps.buttonProps,color = formattedProps.color,props = _objectWithoutProperties(formattedProps, _excluded2);
+
+  return (
+    _jsx(Picker, Object.assign({
+      className: "neko-segmented-picker",
+      Wrapper: PickerWrapper },
+    props, {
+      renderOption: function renderOption(_ref5) {var option = _ref5.option,selected = _ref5.selected,onChange = _ref5.onChange,labelKey = _ref5.labelKey,props = _objectWithoutProperties(_ref5, _excluded3);return (
+          _jsx(Button, Object.assign({
+            label: option[labelKey],
+            onPress: onChange,
+            color: selected ? color || 'primary' : (rootProps == null ? void 0 : rootProps.bg) || 'overlayBG',
+            round: rootProps == null ? void 0 : rootProps.round,
+            textProps: { strong: selected },
+            opacity: !selected && 0.8 },
+          option,
+          buttonProps)
+          ));} })
+
+    ));
+
+}