@neko-os/ui 0.2.2 → 0.3.0

package/dist/modifiers/state.js

@@ -1 +1,33 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["disabled","loading","onClick","onPress","onChange"];import{clearProps,flattenStyle}from"./_helpers";export function useStateModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var disabled=props.disabled,loading=props.loading,onClick=props.onClick,onPress=props.onPress,onChange=props.onChange,restProps=_objectWithoutProperties(props,_excluded);var cursor=undefined;var opacity=props.opacity;if(!!disabled){opacity=0.3;onChange=undefined;cursor='not-allowed';}if(!!disabled||!!loading){onPress=undefined;onClick=undefined;}var style=clearProps({opacity:opacity,cursor:cursor});var newProps=clearProps({onPress:onPress,onClick:onClick,onChange:onChange});return[Object.assign({disabled:disabled,loading:loading},values),Object.assign({},newProps,restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}
+var _excluded = ["disabled", "loading", "onClick", "onPress", "onChange"];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 { clearProps, flattenStyle } from "./_helpers";
+
+export function useStateModifier(_ref) {var _ref2 = _slicedToArray(_ref, 2),values = _ref2[0],props = _ref2[1];
+  var disabled = props.disabled,loading = props.loading,onClick = props.onClick,onPress = props.onPress,onChange = props.onChange,restProps = _objectWithoutProperties(props, _excluded);
+
+  var cursor = undefined;
+  var opacity = props.opacity;
+
+  if (!!disabled) {
+    opacity = 0.3;
+    onChange = undefined;
+    cursor = 'not-allowed';
+  }
+  if (!!disabled || !!loading) {
+    onPress = undefined;
+    onClick = undefined;
+  }
+
+  var style = clearProps({ opacity: opacity, cursor: cursor });
+  var newProps = clearProps({ onPress: onPress, onClick: onClick, onChange: onChange });
+
+  return [Object.assign({
+    disabled: disabled, loading: loading }, values), Object.assign({},
+
+  newProps,
+  restProps, {
+    style: Object.assign({},
+    flattenStyle(props.style),
+    style) })];
+
+
+
+}

package/dist/modifiers/text.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 _excluded=["color","textCode"],_excluded2=["opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps,flattenStyle}from"./_helpers";import{mergePreset}from"../theme/helpers/mergePreset";import{useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,textCode=_ref2$.textCode,values=_objectWithoutProperties(_ref2$,_excluded),props=Object.assign({},(_objectDestructuringEmpty(_ref2[1]),_ref2[1]));var getColor=useGetColor();var texts=useTexts();if(!textCode&&!props.inherit)textCode='p';var _mergePreset=mergePreset(texts,textCode,props,'p'),opacity=_mergePreset.opacity,bold=_mergePreset.bold,strong=_mergePreset.strong,fontWeight=_mergePreset.fontWeight,weight=_mergePreset.weight,italic=_mergePreset.italic,underline=_mergePreset.underline,lineHeight=_mergePreset.lineHeight,align=_mergePreset.align,center=_mergePreset.center,toRight=_mergePreset.toRight,inherit=_mergePreset.inherit,fontSize=_mergePreset.fontSize,restProps=_objectWithoutProperties(_mergePreset,_excluded2);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';fontWeight=fontWeight||weight;if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}
+var _excluded = ["color", "textCode"],_excluded2 = ["opacity", "bold", "strong", "fontWeight", "weight", "italic", "underline", "lineHeight", "align", "center", "toRight", "inherit", "fontSize"];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 { clearProps, flattenStyle } from "./_helpers";
+import { mergePreset } from "../theme/helpers/mergePreset";
+import { useGetColor, useTexts } from "../theme/ThemeHandler";
+
+export function useTextModifier(_ref) {var _ref2 = _slicedToArray(_ref, 2),_ref2$ = _ref2[0],color = _ref2$.color,textCode = _ref2$.textCode,values = _objectWithoutProperties(_ref2$, _excluded),props = Object.assign({}, (_objectDestructuringEmpty(_ref2[1]), _ref2[1]));
+  var getColor = useGetColor();
+  var texts = useTexts();
+
+  if (!textCode && !props.inherit) textCode = 'p';
+
+  var _mergePreset =
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    mergePreset(texts, textCode, props, 'p'),opacity = _mergePreset.opacity,bold = _mergePreset.bold,strong = _mergePreset.strong,fontWeight = _mergePreset.fontWeight,weight = _mergePreset.weight,italic = _mergePreset.italic,underline = _mergePreset.underline,lineHeight = _mergePreset.lineHeight,align = _mergePreset.align,center = _mergePreset.center,toRight = _mergePreset.toRight,inherit = _mergePreset.inherit,fontSize = _mergePreset.fontSize,restProps = _objectWithoutProperties(_mergePreset, _excluded2);
+
+  var fontStyle;
+  if (italic) fontStyle = 'italic';
+
+  var textDecorationLine;
+  if (underline) textDecorationLine = 'underline';
+
+  var textAlign = align;
+  if (center) textAlign = 'center';
+  if (toRight) textAlign = 'right';
+
+  fontWeight = fontWeight || weight;
+  if (bold || strong) fontWeight = 600;
+
+  var style = clearProps({
+    fontWeight: fontWeight,
+    fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    lineHeight: lineHeight,
+    textAlign: textAlign,
+    opacity: opacity,
+    color: color,
+    fontSize: fontSize
+  });
+
+  return [
+  values, Object.assign({},
+
+  restProps, {
+    style: Object.assign({},
+    flattenStyle(props.style),
+    style) })];
+
+
+
+}

package/dist/modifiers/textConverter.js

@@ -1 +1,12 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{getTextFromProps}from"../theme/helpers/textScale";import{useGetThemeValue}from"../theme/ThemeHandler";export function useTextConverter(defaultValue){var getTextValue=useGetThemeValue('texts');return function(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var _getTextFromProps=getTextFromProps(props,defaultValue),_getTextFromProps2=_slicedToArray(_getTextFromProps,2),textCode=_getTextFromProps2[0],formattedProps=_getTextFromProps2[1];var text=getTextValue(textCode);return[Object.assign({},values,{text:text,textCode:textCode}),formattedProps];};}
+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 { getTextFromProps } from "../theme/helpers/textScale";
+import { useGetThemeValue } from "../theme/ThemeHandler";
+
+export function useTextConverter(defaultValue) {
+  var getTextValue = useGetThemeValue('texts');
+
+  return function (_ref) {var _ref2 = _slicedToArray(_ref, 2),values = _ref2[0],props = _ref2[1];
+    var _getTextFromProps = getTextFromProps(props, defaultValue),_getTextFromProps2 = _slicedToArray(_getTextFromProps, 2),textCode = _getTextFromProps2[0],formattedProps = _getTextFromProps2[1];
+    var text = getTextValue(textCode);
+    return [Object.assign({}, values, { text: text, textCode: textCode }), formattedProps];
+  };
+}

package/dist/modifiers/themeComponent.js

@@ -1 +1,11 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{mergeDeepRight}from'ramda';import{useThemeComponent}from"../theme/ThemeHandler";export function useThemeComponentModifier(componentName){var themeProps=useThemeComponent(componentName);return function(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];props=mergeDeepRight(themeProps,props);return[values,props];};}
+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 { mergeDeepRight } from 'ramda';
+import { useThemeComponent } from "../theme/ThemeHandler";
+
+export function useThemeComponentModifier(componentName) {
+  var themeProps = useThemeComponent(componentName);
+
+  return function (_ref) {var _ref2 = _slicedToArray(_ref, 2),values = _ref2[0],props = _ref2[1];
+    props = mergeDeepRight(themeProps, props);
+    return [values, props];
+  };
+}

package/dist/responsive/ResponsiveHandler.js

@@ -1 +1,28 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/responsive/ResponsiveHandler.js";import React from'react';import{useBreakpoints}from"../theme/ThemeHandler";import{useWindowWidth}from"../abstractions/helpers/windowWidth";import{jsx as _jsx}from"react/jsx-runtime";var ResponsiveContext=React.createContext(null);export var useResponsive=function useResponsive(){return React.useContext(ResponsiveContext);};export function ResponsiveHandler(_ref){var children=_ref.children;var width=useWindowWidth();var breakpoints=useBreakpoints();var screen=React.useMemo(function(){var _breakpoints;if(!(breakpoints!=null&&breakpoints.length))return false;for(var i=0;i<breakpoints.length;i++){if(width<breakpoints[i].value){return breakpoints[i].name;}}return(_breakpoints=breakpoints[breakpoints.length-1])==null?void 0:_breakpoints.name;},[width,breakpoints]);var value=React.useMemo(function(){return{width:width,screen:screen};},[width,screen]);return _jsx(ResponsiveContext.Provider,{value:value,children:children});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/responsive/ResponsiveHandler.js";import React from 'react';
+
+import { useBreakpoints } from "../theme/ThemeHandler";
+import { useWindowWidth } from "../abstractions/helpers/windowWidth";import { jsx as _jsx } from "react/jsx-runtime";
+
+var ResponsiveContext = React.createContext(null);
+
+export var useResponsive = function useResponsive() {return React.useContext(ResponsiveContext);};
+
+export function ResponsiveHandler(_ref) {var children = _ref.children;
+  var width = useWindowWidth();
+
+  var breakpoints = useBreakpoints();
+
+  var screen = React.useMemo(function () {var _breakpoints;
+    if (!(breakpoints != null && breakpoints.length)) return false;
+    for (var i = 0; i < breakpoints.length; i++) {
+      if (width < breakpoints[i].value) {
+        return breakpoints[i].name;
+      }
+    }
+    return (_breakpoints = breakpoints[breakpoints.length - 1]) == null ? void 0 : _breakpoints.name;
+  }, [width, breakpoints]);
+
+  var value = React.useMemo(function () {return { width: width, screen: screen };}, [width, screen]);
+
+  return _jsx(ResponsiveContext.Provider, { value: value, children: children });
+}

package/dist/responsive/index.js

@@ -1 +1,2 @@
-export*from"./responsiveHooks";export*from"./ResponsiveHandler";
+export * from "./responsiveHooks";
+export * from "./ResponsiveHandler";

package/dist/responsive/responsiveHooks.js

@@ -1 +1,67 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{is}from'ramda';import React from'react';import{Platform}from"../abstractions/Platform";import{useBreakpoints}from"../theme/ThemeHandler";import{useResponsive}from"../responsive/ResponsiveHandler";export function useGetResponsiveValue(){var breakpoints=useBreakpoints();var _useResponsive=useResponsive(),width=_useResponsive.width,screen=_useResponsive.screen;return React.useCallback(function(value){var isNative=(value==null?void 0:value.native)!==undefined&&Platform.OS!=='web';if(isNative)return value==null?void 0:value.native;var isWeb=(value==null?void 0:value.web)!==undefined&&Platform.OS==='web';if(isWeb)return value==null?void 0:value.web;var isIOS=(value==null?void 0:value.ios)!==undefined&&Platform.OS==='ios';if(isIOS)return value==null?void 0:value.ios;var isAndroid=(value==null?void 0:value.android)!==undefined&&Platform.OS==='android';if(isAndroid)return value==null?void 0:value.android;var isObj=is(Object,value);if(!isObj)return value;if(value[screen])return value[screen];var keys=Object.keys(value);var _loop=function _loop(){var match=k.match(/^(\w+)([du])$/);if(!match)return 0;var bpName=match[1];var mode=match[2];var bpIndex=breakpoints.findIndex(function(b){return b.name===bpName;});if(bpIndex===-1)return 0;if(mode==='u'){var lowerBound=bpIndex>0?breakpoints[bpIndex-1].value:0;if(width>=lowerBound)return{v:value[k]};}if(mode==='d'){if(width<breakpoints[bpIndex].value)return{v:value[k]};}},_ret;for(var k of keys){_ret=_loop();if(_ret===0)continue;if(_ret)return _ret.v;}return value==null?void 0:value.df;},[screen]);}export function useResponsiveValue(value){var getValue=useGetResponsiveValue();var isObj=is(Object,value);var valueWatch=isObj?Object.keys(value).map(function(k){return`${k}:${value[k]}`;}):[value];return React.useMemo(function(){return getValue(value);},[getValue].concat(_toConsumableArray(valueWatch)));}
+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 { Platform } from "../abstractions/Platform";
+import { useBreakpoints } from "../theme/ThemeHandler";
+import { useResponsive } from "../responsive/ResponsiveHandler";
+
+export function useGetResponsiveValue() {
+  var breakpoints = useBreakpoints();
+  var _useResponsive = useResponsive(),width = _useResponsive.width,screen = _useResponsive.screen;
+
+  return React.useCallback(
+    function (value) {
+      var isNative = (value == null ? void 0 : value.native) !== undefined && Platform.OS !== 'web';
+      if (isNative) return value == null ? void 0 : value.native;
+
+      var isWeb = (value == null ? void 0 : value.web) !== undefined && Platform.OS === 'web';
+      if (isWeb) return value == null ? void 0 : value.web;
+
+      var isIOS = (value == null ? void 0 : value.ios) !== undefined && Platform.OS === 'ios';
+      if (isIOS) return value == null ? void 0 : value.ios;
+
+      var isAndroid = (value == null ? void 0 : value.android) !== undefined && Platform.OS === 'android';
+      if (isAndroid) return value == null ? void 0 : value.android;
+
+      var isObj = is(Object, value);
+
+      if (!isObj) return value;
+
+      if (value[screen]) return value[screen];
+
+      var keys = Object.keys(value);var _loop = function _loop()
+        {
+          var match = k.match(/^(\w+)([du])$/);
+          if (!match) return 0;
+
+          var bpName = match[1];
+          var mode = match[2];
+
+          var bpIndex = breakpoints.findIndex(function (b) {return b.name === bpName;});
+          if (bpIndex === -1) return 0;
+
+
+
+          if (mode === 'u') {
+            var lowerBound = bpIndex > 0 ? breakpoints[bpIndex - 1].value : 0;
+            if (width >= lowerBound) return { v: value[k] };
+          }
+          if (mode === 'd') {
+            if (width < breakpoints[bpIndex].value) return { v: value[k] };
+          }
+        },_ret;for (var k of keys) {_ret = _loop();if (_ret === 0) continue;if (_ret) return _ret.v;}
+
+      return value == null ? void 0 : value.df;
+    },
+    [screen]
+  );
+}
+
+export function useResponsiveValue(value) {
+  var getValue = useGetResponsiveValue();
+
+  var isObj = is(Object, value);
+  var valueWatch = isObj ? Object.keys(value).map(function (k) {return `${k}:${value[k]}`;}) : [value];
+
+  return React.useMemo(function () {return getValue(value);}, [getValue].concat(_toConsumableArray(valueWatch)));
+}

package/dist/theme/ThemeHandler.js

@@ -1 +1,81 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xl',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,onChangeTheme=_ref.onChangeTheme,children=_ref.children;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),themePickerOpen=_React$useState2[0],setThemePickerOpen=_React$useState2[1];var openThemePicker=function openThemePicker(){return setThemePickerOpen(true);};var _React$useState3=React.useState(initTheme||'light'),_React$useState4=_slicedToArray(_React$useState3,2),activeThemeKey=_React$useState4[0],setActiveThemeKey=_React$useState4[1];var handleChangeTheme=function handleChangeTheme(key){setActiveThemeKey(key);onChangeTheme==null?void 0:onChangeTheme(key);};var toggleTheme=function toggleTheme(){return handleChangeTheme(activeThemeKey==='light'?'dark':'light');};var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,toggleTheme:toggleTheme,themePickerOpen:themePickerOpen,setThemePickerOpen:setThemePickerOpen,onChangeTheme:handleChangeTheme,openThemePicker:openThemePicker,toggleTheme:toggleTheme,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";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 { mergeDeepRight } from 'ramda';
+import React from 'react';
+
+import { DEFAULT_LIGHT_THEME } from "./default/lightTheme";
+import { getThemeValue } from "./helpers/relatedScales";
+import { useFormattedTheme } from "./format/formatTheme";import { jsx as _jsx } from "react/jsx-runtime";
+
+var DEFAULT_BREAKPOINTS = [
+{ name: 'sm', value: 768 },
+{ name: 'md', value: 1024 },
+{ name: 'lg', value: 1440 },
+{ name: 'xl', value: 10000 }];
+
+
+var ThemeContext = React.createContext(null);
+export var useThemeHandler = function useThemeHandler() {return React.useContext(ThemeContext) || {};};
+
+export var useBreakpoints = function useBreakpoints() {var _useThemeHandler;return ((_useThemeHandler = useThemeHandler()) == null ? void 0 : _useThemeHandler.breakpoints) || DEFAULT_BREAKPOINTS;};
+
+export var useTheme = function useTheme(groupKey) {
+  var theme = useThemeHandler().theme || DEFAULT_LIGHT_THEME;
+  if (!groupKey) return theme;
+  return (theme == null ? void 0 : theme[groupKey]) || {};
+};
+
+export var useGetThemeValue = function useGetThemeValue(groupKey) {
+  var group = useTheme(groupKey);
+  return function (key) {return getThemeValue(group, key);};
+};
+
+export var useColors = function useColors() {return useTheme('colors');};
+export var useGetColor = function useGetColor() {return useGetThemeValue('colors');};
+
+export var useSpaces = function useSpaces() {return useTheme('spaces');};
+export var useGetSpace = function useGetSpace() {return useGetThemeValue('spaces');};
+
+export var useRadius = function useRadius() {return useTheme('radius');};
+export var useGetRadius = function useGetRadius() {return useGetThemeValue('radius');};
+
+export var useElementHeights = function useElementHeights() {return useTheme('elementHeights');};
+export var useGetElementHeight = function useGetElementHeight() {return useGetThemeValue('elementHeights');};
+
+export var useTexts = function useTexts() {return useTheme('texts');};
+export var useGetText = function useGetText() {return useGetThemeValue('text');};
+
+export var useThemeComponents = function useThemeComponents() {return useTheme('components');};
+export function useThemeComponent(name) {
+  var components = useThemeComponents();
+  return components[name] || {};
+}
+export function useMergeThemeComponent(name, props) {
+  var themeProps = useThemeComponent(name);
+  return mergeDeepRight(themeProps, props);
+}
+
+export function ThemeHandler(_ref) {var breakpoints = _ref.breakpoints,themes = _ref.themes,initTheme = _ref.initTheme,onChangeTheme = _ref.onChangeTheme,children = _ref.children;
+  var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),themePickerOpen = _React$useState2[0],setThemePickerOpen = _React$useState2[1];
+  var openThemePicker = function openThemePicker() {return setThemePickerOpen(true);};
+  var _React$useState3 = React.useState(initTheme || 'light'),_React$useState4 = _slicedToArray(_React$useState3, 2),activeThemeKey = _React$useState4[0],setActiveThemeKey = _React$useState4[1];
+  var handleChangeTheme = function handleChangeTheme(key) {
+    setActiveThemeKey(key);
+    onChangeTheme == null ? void 0 : onChangeTheme(key);
+  };
+  var toggleTheme = function toggleTheme() {return handleChangeTheme(activeThemeKey === 'light' ? 'dark' : 'light');};
+  var theme = useFormattedTheme(themes, activeThemeKey);
+
+  var value = {
+    theme: theme,
+    themes: themes,
+    activeThemeKey: activeThemeKey,
+    toggleTheme: toggleTheme,
+    themePickerOpen: themePickerOpen,
+    setThemePickerOpen: setThemePickerOpen,
+    onChangeTheme: handleChangeTheme,
+    openThemePicker: openThemePicker,
+    toggleTheme: toggleTheme,
+    breakpoints: breakpoints || DEFAULT_BREAKPOINTS
+  };
+
+  return _jsx(ThemeContext.Provider, { value: value, children: children });
+}

package/dist/theme/default/base.js

@@ -1 +1,95 @@
-export var BASE_THEME={spaces:{xxxs:1,xxs:3,xs:5,sm:10,md:15,lg:20,xl:30,xxl:40,xxxl:50},radius:{xxxs:4,xxs:5,xs:5,sm:7,md:8,lg:10,xl:12,xxl:15,xxxl:18},icons:{xxxs:10,xxs:12,xs:14,sm:16,md:18,lg:22,xl:26,xxl:28,xxxl:32},elementHeights:{xxxs:10,xxs:15,xs:25,sm:35,md:40,lg:45,xl:50,xxl:60,xxxl:70},texts:{h1:{fontSize:35,strong:true},h2:{fontSize:28,strong:true},h3:{fontSize:26,strong:true},h4:{fontSize:22,strong:true},h5:{fontSize:18,strong:true},h6:{fontSize:16,strong:true},p:{fontSize:14},sm:{fontSize:12},xs:{fontSize:10},xxs:{fontSize:8}}};
+export var BASE_THEME = {
+  baseMaxWidth: 1800,
+
+  spaces: {
+    xxxs: 1,
+    xxs: 3,
+    xs: 5,
+    sm: 10,
+    md: 15,
+    lg: 20,
+    xl: 30,
+    xxl: 40,
+    xxxl: 50
+  },
+
+  radius: {
+    xxxs: 4,
+    xxs: 5,
+    xs: 5,
+    sm: 7,
+    md: 8,
+    lg: 10,
+    xl: 12,
+    xxl: 15,
+    xxxl: 18
+  },
+
+  icons: {
+    xxxs: 10,
+    xxs: 12,
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 22,
+    xl: 26,
+    xxl: 28,
+    xxxl: 32
+  },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  elementHeights: {
+    xxxs: 10,
+    xxs: 15,
+    xs: 25,
+    sm: 35,
+    md: 40,
+    lg: 45,
+    xl: 50,
+    xxl: 60,
+    xxxl: 70
+  },
+
+  texts: {
+    h1: {
+      fontSize: 35,
+      strong: true
+    },
+    h2: {
+      fontSize: 28,
+      strong: true
+    },
+    h3: {
+      fontSize: 26,
+      strong: true
+    },
+    h4: {
+      fontSize: 22,
+      strong: true
+    },
+    h5: {
+      fontSize: 18,
+      strong: true
+    },
+    h6: {
+      fontSize: 16,
+      strong: true
+    },
+    p: { fontSize: 14 },
+    sm: { fontSize: 12 },
+    xs: { fontSize: 10 },
+    xxs: { fontSize: 8 }
+  }
+};

package/dist/theme/default/blackTheme.js

@@ -1 +1,47 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_BLACK_THEME=mergeDeepRight(BASE_THEME,{label:'Pitch Black',colors:{primary:'#818DF9',text:'#F2F2F2',text2:'#CFCFCF',text3:'#A6A6A6',text4:'#737373',mainBG:'#0A0A0A',overlayBG:'#141414',backdrop:'#1f1f1f',shadow:'rgba(0, 0, 0, 0.7)',transparent:'rgba(0, 0, 0, 0)',divider:'#262626',blue:'#3A7BFF',yellow:'#FFC857',green:'#2ECC71',purple:'#9B5DE5',orange:'#FF8C42',cyan:'#00C2D1',red:'#FF4D4F',navy:'#1F2A44',indigo:'#5C6BC0',gray:'#8E8E93',brown:'#8B5E3C',lylac:'#C77DFF',pink:'#FF6FAE'}});
+import { mergeDeepRight } from 'ramda';
+
+import { BASE_THEME } from "./base";
+
+export var DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Pitch Black',
+
+  colors: {
+    primary: '#818DF9',
+
+    text: '#F2F2F2',
+    text2: '#CFCFCF',
+    text3: '#A6A6A6',
+    text4: '#737373',
+
+    mainBG: '#0A0A0A',
+    overlayBG: '#141414',
+    backdrop: '#1f1f1f',
+    shadow: 'rgba(0, 0, 0, 0.7)',
+    transparent: 'rgba(0, 0, 0, 0)',
+    divider: '#262626',
+
+    blue: '#3A7BFF',
+    yellow: '#FFC857',
+    green: '#2ECC71',
+    purple: '#9B5DE5',
+    orange: '#FF8C42',
+    cyan: '#00C2D1',
+    red: '#FF4D4F',
+    navy: '#1F2A44',
+    indigo: '#5C6BC0',
+    gray: '#8E8E93',
+    brown: '#8B5E3C',
+    lylac: '#C77DFF',
+    pink: '#FF6FAE'
+  }
+
+
+
+
+
+
+
+
+
+
+});

package/dist/theme/default/cyberpunkTheme.js

@@ -1 +1,36 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Cyberpunk',colors:{primary:'#FF4FD8',text:'#F5EFFF',text2:'#D6C8FF',text3:'#A78BFA',text4:'#7C6BB3',mainBG:'#0A0614',overlayBG:'#140A26',backdrop:'#0A0A0F',shadow:'rgba(0, 0, 0, 0.7)',transparent:'rgba(0, 0, 0, 0)',divider:'#24123A',blue:'#00B3FF',yellow:'#FFD166',green:'#00F5A0',purple:'#9D4EDD',orange:'#FF7A18',cyan:'#00E5FF',red:'#FF3D6E',navy:'#1B1B3A',indigo:'#5A67FF',gray:'#8E8EAA',brown:'#8B5CF6',lylac:'#C77DFF',pink:'#FF4FD8'}});
+import { mergeDeepRight } from 'ramda';
+import { BASE_THEME } from "./base";
+
+export var CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Cyberpunk',
+
+  colors: {
+    primary: '#FF4FD8',
+
+    text: '#F5EFFF',
+    text2: '#D6C8FF',
+    text3: '#A78BFA',
+    text4: '#7C6BB3',
+
+    mainBG: '#0A0614',
+    overlayBG: '#140A26',
+    backdrop: '#0A0A0F',
+    shadow: 'rgba(0, 0, 0, 0.7)',
+    transparent: 'rgba(0, 0, 0, 0)',
+    divider: '#24123A',
+
+    blue: '#00B3FF',
+    yellow: '#FFD166',
+    green: '#00F5A0',
+    purple: '#9D4EDD',
+    orange: '#FF7A18',
+    cyan: '#00E5FF',
+    red: '#FF3D6E',
+    navy: '#1B1B3A',
+    indigo: '#5A67FF',
+    gray: '#8E8EAA',
+    brown: '#8B5CF6',
+    lylac: '#C77DFF',
+    pink: '#FF4FD8'
+  }
+});

package/dist/theme/default/darkTheme.js

@@ -1 +1,35 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Dark',colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#383E44',overlayBG:'#272D34',backdrop:'#383E44',shadow:'rgba(216, 210, 203, 0.1)',transparent:'rgba(0, 0, 0, 0)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import { mergeDeepRight } from 'ramda';
+import { BASE_THEME } from "./base";
+
+export var DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Dark',
+
+  colors: {
+    primary: '#818DF9',
+    text: '#FFFFFF',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
+
+    mainBG: '#383E44',
+    overlayBG: '#272D34',
+    backdrop: '#383E44',
+    shadow: 'rgba(216, 210, 203, 0.1)',
+    transparent: 'rgba(0, 0, 0, 0)',
+    divider: '#383E44',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#9E9E9E',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1'
+  }
+});

package/dist/theme/default/hackerTheme.js

@@ -1 +1,55 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{label:'Hacker',colors:{primary:'#00FF41',text:'#D2FFE9',text2:'#A6F5D0',text3:'#6EE7B7',text4:'#3FAF85',mainBG:'#000000',overlayBG:'#0A0A0A',backdrop:'#000000',shadow:'rgba(0, 255, 65, 0.2)',transparent:'rgba(0, 0, 0, 0)',divider:'rgba(0,255,65, 0.3)',blue:'#00B3FF',yellow:'#E6FF3F',green:'#00FF41',purple:'#9B5DE5',orange:'#FF9F1C',cyan:'#00FFE0',red:'#FF3B3B',navy:'#001F2F',indigo:'#4B6BFF',gray:'#2E2E2E',brown:'#5C4033',lylac:'#C084FC',pink:'#FF4FD8'},radius:{xxxs:0,xxs:1,xs:2,sm:3,md:4,lg:5,xl:6,xxl:7,xxxl:8},components:{Card:{border:true},Section:{border:true}}});
+import { mergeDeepRight } from 'ramda';
+
+import { BASE_THEME } from "./base";
+
+export var DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Hacker',
+  useOverlayDivider: true,
+
+  colors: {
+    primary: '#00FF41',
+
+
+
+
+
+
+    text: '#D2FFE9',
+    text2: '#A6F5D0',
+    text3: '#6EE7B7',
+    text4: '#3FAF85',
+
+    mainBG: '#000000',
+    overlayBG: '#0A0A0A',
+    backdrop: '#000000',
+    shadow: 'rgba(0, 255, 65, 0.2)',
+    transparent: 'rgba(0, 0, 0, 0)',
+    divider: 'rgba(0,255,65, 0.3)',
+
+    blue: '#00B3FF',
+    yellow: '#E6FF3F',
+    green: '#00FF41',
+    purple: '#9B5DE5',
+    orange: '#FF9F1C',
+    cyan: '#00FFE0',
+    red: '#FF3B3B',
+    navy: '#001F2F',
+    indigo: '#4B6BFF',
+    gray: '#2E2E2E',
+    brown: '#5C4033',
+    lylac: '#C084FC',
+    pink: '#FF4FD8'
+  },
+
+  radius: {
+    xxxs: 0,
+    xxs: 1,
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 5,
+    xl: 6,
+    xxl: 7,
+    xxxl: 8
+  }
+});