@neko-os/ui 0.2.2 → 0.3.0

package/dist/theme/default/lightTheme.js

@@ -1 +1,35 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{label:'Light',colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',mainBG:'#F4F5FE',overlayBG:'#FFFFFF',backdrop:'#383E44',shadow:'rgba(39, 45, 52, 0.15)',transparent:'rgba(255, 255, 255, 0)',divider:'#e0e0e0',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import { mergeDeepRight } from 'ramda';
+import { BASE_THEME } from "./base";
+
+export var DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Light',
+
+  colors: {
+    primary: '#818DF9',
+    text: '#272D34',
+    text2: '#4A5159',
+    text3: '#6E7680',
+    text4: '#9AA1AC',
+
+    mainBG: '#F4F5FE',
+    overlayBG: '#FFFFFF',
+    backdrop: '#383E44',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+    transparent: 'rgba(255, 255, 255, 0)',
+    divider: '#e0e0e0',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#B0BEC5',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1'
+  }
+});

package/dist/theme/default/paperTheme.js

@@ -1 +1,36 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_PAPER_THEME=mergeDeepRight(BASE_THEME,{label:'Paper',colors:{primary:'#5A5A5A',text:'#000000',text2:'#333333',text3:'#555555',text4:'#777777',mainBG:'#F8F1E3',overlayBG:'#F8F1E3',backdrop:'#383E44',shadow:'rgba(0, 0, 0, 0.04)',divider:'#E3D9C9',blue:'#6B8EAE',yellow:'#EADCA6',green:'#88A288',purple:'#A391B8',orange:'#D9A066',cyan:'#9CC9C2',red:'#B85C5C',navy:'#4A4A4A',indigo:'#70788C',gray:'#B8B8B8',brown:'#8B7355',lylac:'#C7B7D4',pink:'#E4A1B2'},components:{Card:{border:true},Section:{border:true},TopBar:{borderB:true}}});
+import { mergeDeepRight } from 'ramda';
+
+import { BASE_THEME } from "./base";
+
+export var DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Paper',
+  useOverlayDivider: true,
+
+  colors: {
+    primary: '#5A5A5A',
+    text: '#000000',
+    text2: '#333333',
+    text3: '#555555',
+    text4: '#777777',
+
+    mainBG: '#F8F1E3',
+    overlayBG: '#F8F1E3',
+    backdrop: '#383E44',
+    shadow: 'rgba(0, 0, 0, 0.04)',
+    divider: '#E3D9C9',
+
+    blue: '#6B8EAE',
+    yellow: '#EADCA6',
+    green: '#88A288',
+    purple: '#A391B8',
+    orange: '#D9A066',
+    cyan: '#9CC9C2',
+    red: '#B85C5C',
+    navy: '#4A4A4A',
+    indigo: '#70788C',
+    gray: '#B8B8B8',
+    brown: '#8B7355',
+    lylac: '#C7B7D4',
+    pink: '#E4A1B2'
+  }
+});

package/dist/theme/default/themes.js

@@ -1 +1,15 @@
-import{CYBERPUNK_DARK_THEME}from"./cyberpunkTheme";import{DEFAULT_BLACK_THEME}from"./blackTheme";import{DEFAULT_DARK_THEME}from"./darkTheme";import{DEFAULT_LIGHT_THEME}from"./lightTheme";import{DEFAULT_MATRIX_THEME}from"./hackerTheme";import{DEFAULT_PAPER_THEME}from"./paperTheme";export var DEFAULT_THEMES={light:DEFAULT_LIGHT_THEME,dark:DEFAULT_DARK_THEME,paper:DEFAULT_PAPER_THEME,black:DEFAULT_BLACK_THEME,cyberpunk:CYBERPUNK_DARK_THEME,hacker:DEFAULT_MATRIX_THEME};
+import { CYBERPUNK_DARK_THEME } from "./cyberpunkTheme";
+import { DEFAULT_BLACK_THEME } from "./blackTheme";
+import { DEFAULT_DARK_THEME } from "./darkTheme";
+import { DEFAULT_LIGHT_THEME } from "./lightTheme";
+import { DEFAULT_MATRIX_THEME } from "./hackerTheme";
+import { DEFAULT_PAPER_THEME } from "./paperTheme";
+
+export var DEFAULT_THEMES = {
+  light: DEFAULT_LIGHT_THEME,
+  dark: DEFAULT_DARK_THEME,
+  paper: DEFAULT_PAPER_THEME,
+  black: DEFAULT_BLACK_THEME,
+  cyberpunk: CYBERPUNK_DARK_THEME,
+  hacker: DEFAULT_MATRIX_THEME
+};

package/dist/theme/format/colorsVariations.js

@@ -1 +1,31 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import tinycolor from'tinycolor2';var variations=[10,20,30,40,50,60,70,80,90];export function generateColorVariants(colors){var isDark=tinycolor((colors==null?void 0:colors.overlayBG)||(colors==null?void 0:colors.bg)).isDark();var result={};Object.entries(colors).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];result[key]=value;variations.forEach(function(amount){if(amount<=60){var lightenSignal=!isDark?'-':'+';var darkenSignal=isDark?'-':'+';result[`${key}${lightenSignal}${amount}`]=tinycolor(value).lighten(amount).toString();result[`${key}${darkenSignal}${amount}`]=tinycolor(value).darken(amount).toString();}result[`${key}_op${amount}`]=tinycolor(value).setAlpha(amount/100).toString();});});return result;}export function applyColorVariantsOnTheme(theme){return Object.assign({},theme,{colors:generateColorVariants(theme.colors)});}
+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 tinycolor from 'tinycolor2';
+
+var variations = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+
+export function generateColorVariants(colors) {
+  var isDark = tinycolor((colors == null ? void 0 : colors.overlayBG) || (colors == null ? void 0 : colors.bg)).isDark();
+  var result = {};
+
+  Object.entries(colors).forEach(function (_ref) {var _ref2 = _slicedToArray(_ref, 2),key = _ref2[0],value = _ref2[1];
+    result[key] = value;
+
+    variations.forEach(function (amount) {
+      if (amount <= 40) {
+        var lightenSignal = !isDark ? '-' : '+';
+        var darkenSignal = isDark ? '-' : '+';
+        result[`${key}${lightenSignal}${amount}`] = tinycolor(value).lighten(amount).toString();
+        result[`${key}${darkenSignal}${amount}`] = tinycolor(value).darken(amount).toString();
+      }
+
+      result[`${key}_op${amount}`] = tinycolor(value).
+      setAlpha(amount / 100).
+      toString();
+    });
+  });
+
+  return result;
+}
+
+export function applyColorVariantsOnTheme(theme) {
+  return Object.assign({}, theme, { colors: generateColorVariants(theme.colors) });
+}

package/dist/theme/format/formatTheme.js

@@ -1 +1,28 @@
-import{mergeDeepRight,mergeDeepLeft,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{DEFAULT_LIGHT_THEME}from"../default/lightTheme";import{DEFAULT_THEMES}from"../default/themes";import{applyColorVariantsOnTheme}from"./colorsVariations";export function useFormattedTheme(themes,key){themes=themes||DEFAULT_THEMES;return React.useMemo(function(){return formatTheme(themes,key);},[key]);}export function formatTheme(themes,key){var _formattedTheme$color,_formattedTheme$color2;themes=themes||DEFAULT_THEMES;var theme=themes[key]||DEFAULT_THEMES[key]||DEFAULT_LIGHT_THEME;var baseDefaultTheme=DEFAULT_THEMES[theme.base]||DEFAULT_THEMES[key]||DEFAULT_LIGHT_THEME;var formattedTheme=pipe(mergeDeepRight(baseDefaultTheme),applyColorVariantsOnTheme,mergeDeepLeft(themes._all||{}))(Object.assign({},theme));var isDark=tinycolor((formattedTheme==null?void 0:(_formattedTheme$color=formattedTheme.colors)==null?void 0:_formattedTheme$color.overlayBG)||(formattedTheme==null?void 0:(_formattedTheme$color2=formattedTheme.colors)==null?void 0:_formattedTheme$color2.bg)).isDark();return Object.assign({},formattedTheme,{isDark:isDark,isLight:!isDark});}
+import { mergeDeepRight, mergeDeepLeft, pipe } from 'ramda';
+import React from 'react';
+import tinycolor from 'tinycolor2';
+
+import { DEFAULT_LIGHT_THEME } from "../default/lightTheme";
+import { DEFAULT_THEMES } from "../default/themes";
+import { applyColorVariantsOnTheme } from "./colorsVariations";
+
+export function useFormattedTheme(themes, key) {
+  themes = themes || DEFAULT_THEMES;
+  return React.useMemo(function () {return formatTheme(themes, key);}, [key]);
+}
+
+export function formatTheme(themes, key) {var _formattedTheme$color, _formattedTheme$color2;
+  themes = themes || DEFAULT_THEMES;
+  var theme = themes[key] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME;
+  var baseDefaultTheme = DEFAULT_THEMES[theme.base] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME;
+
+  var formattedTheme = pipe(
+    mergeDeepRight(baseDefaultTheme),
+    applyColorVariantsOnTheme,
+    mergeDeepLeft(themes._all || {})
+  )(Object.assign({}, theme));
+
+  var isDark = tinycolor((formattedTheme == null ? void 0 : (_formattedTheme$color = formattedTheme.colors) == null ? void 0 : _formattedTheme$color.overlayBG) || (formattedTheme == null ? void 0 : (_formattedTheme$color2 = formattedTheme.colors) == null ? void 0 : _formattedTheme$color2.bg)).isDark();
+
+  return Object.assign({}, formattedTheme, { isDark: isDark, isLight: !isDark });
+}

package/dist/theme/helpers/colorScale.js

@@ -1 +1,12 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["color"];import{omit,keys}from'ramda';import{DEFAULT_DARK_THEME}from"../default/darkTheme";var SCALE=keys(DEFAULT_DARK_THEME.colors);export function getColorFromProps(_ref,defaultValue){var color=_ref.color,props=_objectWithoutProperties(_ref,_excluded);if(!!color)return[color,props];color=SCALE.find(function(key){return!!props[key];})||defaultValue;return[color,omit(SCALE,props)];}
+var _excluded = ["color"];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 { omit, keys } from 'ramda';
+
+import { DEFAULT_DARK_THEME } from "../default/darkTheme";
+
+var EXCLUDED_KEYS = ['shadow', 'transparent'];
+var SCALE = keys(DEFAULT_DARK_THEME.colors).filter(function (k) {return !EXCLUDED_KEYS.includes(k);});
+
+export function getColorFromProps(_ref, defaultValue) {var color = _ref.color,props = _objectWithoutProperties(_ref, _excluded);
+  if (!!color) return [color, props];
+  color = SCALE.find(function (key) {return !!props[key];}) || defaultValue;
+  return [color, omit(SCALE, props)];
+}

package/dist/theme/helpers/contrastColor.js

@@ -1 +1,18 @@
-import tinycolor from'tinycolor2';export function getContrastColor(bg){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:['#FFFFFF','#666666'];var tolerance=arguments.length>2&&arguments[2]!==undefined?arguments[2]:2.5;if(!options.length)return'#666666';var contrasts=options.map(function(color){return{color:color,contrast:tinycolor.readability(bg,color)};});contrasts.sort(function(a,b){return b.contrast-a.contrast;});if(contrasts.length>1&&Math.abs(contrasts[0].contrast-contrasts[1].contrast)<tolerance){return options[0];}return contrasts[0].color;}
+import tinycolor from 'tinycolor2';
+
+export function getContrastColor(bg) {var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['#FFFFFF', '#666666'];var tolerance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2.5;
+  if (!options.length) return '#666666';
+
+  var contrasts = options.map(function (color) {return {
+      color: color,
+      contrast: tinycolor.readability(bg, color)
+    };});
+
+  contrasts.sort(function (a, b) {return b.contrast - a.contrast;});
+
+  if (contrasts.length > 1 && Math.abs(contrasts[0].contrast - contrasts[1].contrast) < tolerance) {
+    return options[0];
+  }
+
+  return contrasts[0].color;
+}

package/dist/theme/helpers/dynamicColor.js

@@ -1 +1,32 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var BASE_COLORS=['text3','blue','yellow','green','purple','orange','cyan','red','navy','indigo','gray','brown','lylac','pink'];var COLORS=[].concat(BASE_COLORS,_toConsumableArray(BASE_COLORS.map(function(c){return`${c}+10`;})),_toConsumableArray(BASE_COLORS.map(function(c){return`${c}-10`;})));export function getDynamicColor(id){var num;if(typeof id==='number'){num=id;}else{num=String(id).split('').reduce(function(acc,char){return acc+char.charCodeAt(0);},0);}var index=num%COLORS.length;return COLORS[index];}
+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;}var BASE_COLORS = [
+'text3',
+'blue',
+'yellow',
+'green',
+'purple',
+'orange',
+'cyan',
+'red',
+'navy',
+'indigo',
+'gray',
+'brown',
+'lylac',
+'pink'];
+
+
+var COLORS = [].concat(BASE_COLORS, _toConsumableArray(BASE_COLORS.map(function (c) {return `${c}+10`;})), _toConsumableArray(BASE_COLORS.map(function (c) {return `${c}-10`;})));
+
+export function getDynamicColor(id) {
+  var num;
+  if (typeof id === 'number') {
+    num = id;
+  } else {
+    num = String(id).
+    split('').
+    reduce(function (acc, char) {return acc + char.charCodeAt(0);}, 0);
+  }
+
+  var index = num % COLORS.length;
+  return COLORS[index];
+}

package/dist/theme/helpers/mergePreset.js

@@ -1 +1,7 @@
-import{getThemeValue}from"./relatedScales";export function mergePreset(presets,key,props,defaultKey){if(!key)return props;var preset=getThemeValue(presets,key,false)||getThemeValue(presets,defaultKey,{});return Object.assign({},props,preset);}
+import { getThemeValue } from "./relatedScales";
+
+export function mergePreset(presets, key, props, defaultKey) {
+  if (!key) return props;
+  var preset = getThemeValue(presets, key, false) || getThemeValue(presets, defaultKey, {});
+  return Object.assign({}, props, preset);
+}

package/dist/theme/helpers/relatedScales.js

@@ -1 +1,34 @@
-import{is}from'ramda';var SCALES=[['xxxs'],['xxs'],['xs'],['sm','small'],['md','p'],['lg','h6'],['xl','h5'],['xxl','h4'],['xxxl','h3']];export function getScaleSynonyms(key){return SCALES.find(function(list){return list.includes(key);})||[];}export function getThemeValue(group,key,defaultValue){defaultValue=defaultValue===undefined?key:defaultValue;if(!key)return defaultValue;var value=group[key];if(!!value||!is(String,key))return value||defaultValue;var synonyms=getScaleSynonyms(key);for(var synonym of synonyms){if(group!=null&&group[synonym]){value=group[synonym];break;}}return value||defaultValue;}
+import { is } from 'ramda';
+
+var SCALES = [
+['xxxs'],
+['xxs'],
+['xs'],
+['sm', 'small'],
+['md', 'p'],
+['lg', 'h6'],
+['xl', 'h5'],
+['xxl', 'h4'],
+['xxxl', 'h3']];
+
+
+export function getScaleSynonyms(key) {
+  return SCALES.find(function (list) {return list.includes(key);}) || [];
+}
+
+export function getThemeValue(group, key, defaultValue) {
+  defaultValue = defaultValue === undefined ? key : defaultValue;
+  if (!key) return defaultValue;
+  var value = group[key];
+  if (!!value || !is(String, key)) return value || defaultValue;
+
+  var synonyms = getScaleSynonyms(key);
+  for (var synonym of synonyms) {
+    if (group != null && group[synonym]) {
+      value = group[synonym];
+      break;
+    }
+  }
+
+  return value || defaultValue;
+}

package/dist/theme/helpers/sizeScale.js

@@ -1 +1,20 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','md','lg','xl','xxl','xxxl'];export function moveScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;var movedIndex=index+unit;var movedValue=SCALE[index+unit];if(!movedValue){movedValue=unit>0?'xxxl':'xxxs';}return movedValue;}export function getSizeFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}
+var _excluded = ["size"];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 { omit } from 'ramda';
+
+var SCALE = ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
+
+export function moveScale(value) {var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var index = SCALE.indexOf(value);
+  if (!index) return value;
+  var movedIndex = index + unit;
+  var movedValue = SCALE[index + unit];
+  if (!movedValue) {
+    movedValue = unit > 0 ? 'xxxl' : 'xxxs';
+  }
+  return movedValue;
+}
+
+export function getSizeFromProps(_ref, defaultValue) {var size = _ref.size,props = _objectWithoutProperties(_ref, _excluded);
+  if (!!size) return [size, props];
+  size = SCALE.find(function (key) {return !!props[key];}) || defaultValue;
+  return [size, omit(SCALE, props)];
+}

package/dist/theme/helpers/textScale.js

@@ -1 +1,15 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','p','h6','h5','h4','h3','h2','h1'];export function moveTextScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;return SCALE[index+unit]||value;}export function getTextFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}
+var _excluded = ["size"];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 { omit } from 'ramda';
+
+var SCALE = ['xxxs', 'xxs', 'xs', 'sm', 'p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1'];
+
+export function moveTextScale(value) {var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var index = SCALE.indexOf(value);
+  if (!index) return value;
+  return SCALE[index + unit] || value;
+}
+
+export function getTextFromProps(_ref, defaultValue) {var size = _ref.size,props = _objectWithoutProperties(_ref, _excluded);
+  if (!!size) return [size, props];
+  size = SCALE.find(function (key) {return !!props[key];}) || defaultValue;
+  return [size, omit(SCALE, props)];
+}

package/dist/theme/index.js

@@ -1 +1,2 @@
-export*from"./ThemeHandler";export*from"./default/themes";
+export * from "./ThemeHandler";
+export * from "./default/themes";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,9 +39,7 @@
     }
   },
   "dependencies": {
-    "dayjs": "1.11.18",
     "prop-types": "^15.8.1",
-    "react-native-web": "^0.21.0",
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {

package/src/abstractions/Icon.js

@@ -3,7 +3,7 @@ import * as Icons from '@remixicon/react'
 import { capitalizeFirstLetter, toCamelCase } from '../helpers/string'
 
 export function AbsIcon({ name, ...props }) {
-  if (!!name && !name.startsWith('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
+  if (!!name && !name.startsWith?.('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
   const IconComponent = Icons[name] || Icons['RiCircleFill']
 
   return <IconComponent {...props} />

package/src/abstractions/TextInput.js

@@ -1,3 +1,12 @@
-export function AbsTextInput({ onChange, ...props }) {
+export function AbsTextInput({ onChange, multiline, rows, ...props }) {
+  if (multiline) {
+    return (
+      <textarea
+        rows={rows}
+        onChange={(e) => onChange?.(e?.target?.value, e)}
+        {...props}
+      />
+    )
+  }
   return <input type="text" onChange={(e) => onChange?.(e?.target?.value, e)} {...props} />
 }

package/src/components/actions/ActionsDrawer.js

@@ -1,10 +1,12 @@
 import { pipe } from 'ramda'
+import React from 'react'
 
-import { TopBar, View } from '../structure'
 import { BottomDrawer, DrawerScrollView } from '../modals/bottomDrawer'
 import { Menu } from './menu/Menu'
 import { Section } from '../sections'
+import { TopBar, View } from '../structure'
 import { useDefaultModifier } from '../../modifiers/default'
+import { useTheme } from '../../theme'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
@@ -34,7 +36,7 @@ function Content({ items, title, subtitle, onClose, onChange, topBarProps, menuP
       <View flex>
         <DrawerScrollView>
           {!title && <View paddingT="md" />}
-          <Section>
+          <Section marginH="md">
             <Menu items={items} onChange={handleChange} {...menuProps} />
           </Section>
           <View height={100} />
@@ -44,7 +46,8 @@ function Content({ items, title, subtitle, onClose, onChange, topBarProps, menuP
   )
 }
 
-export function ActionsDrawer({ items, onChange, title, subtitle, onClose, ...rootProps }) {
+export function ActionsDrawer({ items, onChange, title, subtitle, onClose, snapPoints, ...rootProps }) {
+  const { elementHeights, spaces } = useTheme()
   const [{}, formattedProps] = pipe(
     useThemeComponentModifier('ActionsDrawer'), //
     useDefaultModifier(DEFAULT_PROPS)
@@ -52,8 +55,18 @@ export function ActionsDrawer({ items, onChange, title, subtitle, onClose, ...ro
 
   const { topBarProps, menuProps, ...props } = formattedProps
 
+  // Auto height
+  snapPoints = React.useMemo(() => {
+    if (!!snapPoints?.length) return snapPoints
+    // Title bar + padding + safe footer space
+    const safeSpace = (!!title ? elementHeights.xxl : spaces.sm) + spaces.md + spaces.sm
+    const itemHeight = elementHeights[menuProps?.linkMinHeight]
+    const itemsLength = Math.min(8, items.length)
+    return [itemsLength * itemHeight + safeSpace]
+  }, [snapPoints, title, items])
+
   return (
-    <BottomDrawer onClose={onClose} {...props}>
+    <BottomDrawer onClose={onClose} snapPoints={snapPoints} {...props}>
       <Content
         onClose={onClose}
         topBarProps={topBarProps}

package/src/components/actions/Button.js

@@ -15,6 +15,7 @@ import { useHoverConverter } from '../../modifiers/hover'
 import { useMarginModifier } from '../../modifiers/margin'
 import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useSizeModifier } from '../../modifiers/size'
 import { useStateModifier } from '../../modifiers/state'
@@ -33,12 +34,15 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   },
 })
 
-export function Button({ children, ...rootProps }) {
+export function Button({ children, dashed, ...rootProps }) {
+  if (dashed) rootProps = { outline: true, ...rootProps, borderStyle: 'dashed' }
+
   const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
     useColorConverter('primary'),
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Button'),
     useDefaultModifier(DEFAULT_PROPS),
+    useShadowModifier,
     useHoverConverter,
     useCursorModifier,
     useFullColorModifier,

package/src/components/actions/FloatingMenu.js

@@ -13,7 +13,7 @@ export function FloatingMenu({ fixed, onChange, items, activeIndex, size = 'md',
   WrapperView = WrapperView || View
 
   return (
-    <View absolute={!fixed} fixed={fixed} left="md" right="md" centerH bottom={Math.max(insets.bottom, 16)}>
+    <View absolute={!fixed} fixed={fixed} left="md" right="md" centerH bottom={Math.max(insets.bottom / 2, 16)}>
       <WrapperView height={height} shadow round row paddingH="sm" bg={bg} {...props}>
         {items.map((item, index) => {
           const isActive = index === activeIndex

package/src/components/actions/menu/HorizontalMenu.js

@@ -23,7 +23,7 @@ function Item({
   ...props
 }) {
   activeColor = activeColor || 'primary'
-  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  let { active, key, disabled, ...childProps } = omit(['onClick', 'onPress'], item)
   if (!active && activeIndex >= 0) active = activeIndex === index
   if (!active && activeKey !== undefined) active = activeKey === item.key
 
@@ -41,6 +41,7 @@ function Item({
         fullH
         center
         paddingH={linkPaddingH}
+        disabled={disabled}
         {...linkProps}
         onPress={() => handlePress(item, index)}
       >

package/src/components/actions/menu/VerticalMenu.js

@@ -30,7 +30,7 @@ function LinkItem({
   ...props
 }) {
   activeColor = activeColor || 'primary'
-  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  let { active, key, disabled, ...childProps } = omit(['onClick', 'onPress'], item)
   if (!active && activeIndex >= 0) active = activeIndex === index
   if (!active && activeKey !== undefined) active = activeKey === item.key
   const bg = active && tinycolor(color).setAlpha(0.03).toString()
@@ -49,6 +49,7 @@ function LinkItem({
         bg={bg}
         transition="border-color 0.5s ease, background 0.3s ease"
         hover={{ br: 0 }}
+        disabled={disabled}
         {...linkProps}
         onPress={() => handlePress(item, index)}
       >

package/src/components/filter/DateFilter.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import { is } from 'ramda'
+
+import { DateInput } from '../inputs'
+import { FilterItem } from './FilterItem'
+import { useFilter } from './FilterHandler'
+
+function getFormat(type) {
+  switch (type) {
+    case 'year':
+      return 'YYYY'
+    case 'quarter':
+      return 'YYYY [Q]Q'
+    case 'month':
+      return 'YYYY MMM'
+    case 'week':
+      return 'YYYY wo'
+    default:
+      return 'YYYY-MM-DD'
+  }
+}
+
+function formatValue(value, type) {
+  if (!value) return null
+  const date = dayjs(value)
+
+  switch (type) {
+    case 'year':
+      return [date.startOf('year'), date.endOf('year')]
+    case 'quarter':
+      return [date.startOf('quarter'), date.endOf('quarter')]
+    case 'month':
+      return [date.startOf('month'), date.endOf('month')]
+    case 'week':
+      return [date.startOf('isoWeek'), date.endOf('isoWeek')]
+    default:
+      return [date.startOf('day'), date.endOf('day')]
+  }
+}
+
+export function DateFilter({ name, label, type, format, useMapValue, ...rest }) {
+  const { filters, onChangeFilter } = useFilter()
+  let value = filters?.[name]
+  format = format || getFormat(type)
+
+  if (!!value?.init && !!value.end) {
+    value = value.init
+  }
+  if (is(Array, value) && value?.length === 2) {
+    value = value[0]
+  }
+
+  if (!!value && !!value.format) {
+    label = value.format(format)
+  }
+
+  const handleChange = (val) => {
+    let result = formatValue(val, type)
+    if (!!result?.length && !!useMapValue) {
+      const [init, end] = result
+      result = { init, end }
+    }
+    onChangeFilter(name, result)
+  }
+
+  return (
+    <FilterItem name={name}>
+      {({ value: _v }) => <DateInput value={value} onChange={handleChange} type={type} {...rest} />}
+    </FilterItem>
+  )
+}

package/src/components/filter/FilterGroup.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const FilterGroupContext = React.createContext(null)
+const useGroupPath = () => React.useContext(FilterGroupContext)?.path || []
+
+export function useFilterPath(name) {
+  const listPath = !!name ? (Array.isArray(name) ? name : [name]) : []
+  const parentPath = useGroupPath()
+  return [...parentPath, ...listPath]
+}
+
+export function FilterGroup({ name, children }) {
+  const path = useFilterPath(name)
+  const value = { path }
+
+  return <FilterGroupContext.Provider value={value}>{children}</FilterGroupContext.Provider>
+}