@neko-os/ui 0.2.2 → 0.3.0

package/dist/components/inputs/upload/Upload.native.js

@@ -0,0 +1,154 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/upload/Upload.native.js";var _excluded = ["children", "onChange", "onUpload", "value", "accept", "multiple", "maxCount", "disabled"];function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}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 React, { useState, useCallback } from 'react';
+
+import { BottomDrawer } from "../../modals/bottomDrawer";
+import { Icon } from "../../presentation/Icon";
+import { Link } from "../../actions/Link";
+import { Text } from "../../text/Text";
+import { View } from "../../structure/View";
+import { useUploadState } from "./useUploadState";import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
+var ImagePicker;
+try {
+  ImagePicker = require('expo-image-picker');
+} catch (_unused) {}
+
+var DocumentPicker;
+try {
+  DocumentPicker = require('expo-document-picker');
+} catch (_unused2) {}
+
+function acceptsImages(accept) {
+  if (!accept) return true;
+  return accept.includes('image/') || accept.includes('image/*');
+}
+
+function needsFilePicker(accept) {
+  if (!accept) return true;
+  var parts = accept.split(',').map(function (s) {return s.trim();});
+  return parts.some(function (p) {return !p.startsWith('image/');});
+}
+
+function normalizeImageResult(asset) {
+  return {
+    uri: asset.uri,
+    name: asset.fileName || asset.uri.split('/').pop(),
+    type: asset.mimeType || asset.type || 'image/jpeg',
+    size: asset.fileSize || asset.filesize,
+    width: asset.width,
+    height: asset.height
+  };
+}
+
+function normalizeDocumentResult(doc) {
+  return {
+    uri: doc.uri,
+    name: doc.name,
+    type: doc.mimeType || doc.type,
+    size: doc.size
+  };
+}
+
+function getMediaTypes(accept) {
+  if (!accept) return undefined;
+  if (accept.includes('video/') && !accept.includes('image/')) return ['videos'];
+  if (accept.includes('image/') && !accept.includes('video/')) return ['images'];
+  if (accept.includes('video/') && accept.includes('image/')) return ['images', 'videos'];
+  return undefined;
+}
+
+export function Upload(_ref) {var children = _ref.children,onChange = _ref.onChange,onUpload = _ref.onUpload,valueProp = _ref.value,accept = _ref.accept,_ref$multiple = _ref.multiple,multiple = _ref$multiple === void 0 ? false : _ref$multiple,maxCount = _ref.maxCount,_ref$disabled = _ref.disabled,disabled = _ref$disabled === void 0 ? false : _ref$disabled,props = _objectWithoutProperties(_ref, _excluded);
+  var _useUploadState = useUploadState({ onUpload: onUpload, onChange: onChange, multiple: multiple, maxCount: maxCount, value: valueProp }),value = _useUploadState.value,addFiles = _useUploadState.addFiles,remove = _useUploadState.remove;
+  var _useState = useState(false),_useState2 = _slicedToArray(_useState, 2),open = _useState2[0],setOpen = _useState2[1];
+
+  var handlePress = useCallback(function () {
+    if (disabled) return;
+    setOpen(true);
+  }, [disabled]);
+
+  var handleCamera = useCallback(_asyncToGenerator(function* () {
+    setOpen(false);
+    if (!ImagePicker) return;
+    var permission = yield ImagePicker.requestCameraPermissionsAsync();
+    if (!permission.granted) return;
+    var result = yield ImagePicker.launchCameraAsync({
+      allowsMultipleSelection: multiple,
+      selectionLimit: maxCount || 0,
+      mediaTypes: getMediaTypes(accept)
+    });
+    if (result.canceled) return;
+    addFiles(result.assets.map(normalizeImageResult));
+  }), [multiple, maxCount, accept, addFiles]);
+
+  var handleLibrary = useCallback(_asyncToGenerator(function* () {
+    setOpen(false);
+    if (!ImagePicker) return;
+    var permission = yield ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!permission.granted) return;
+    var result = yield ImagePicker.launchImageLibraryAsync({
+      allowsMultipleSelection: multiple,
+      selectionLimit: maxCount || 0,
+      mediaTypes: getMediaTypes(accept)
+    });
+    if (result.canceled) return;
+    addFiles(result.assets.map(normalizeImageResult));
+  }), [multiple, maxCount, accept, addFiles]);
+
+  var handleFiles = useCallback(_asyncToGenerator(function* () {
+    setOpen(false);
+    if (!DocumentPicker) return;
+    var result = yield DocumentPicker.getDocumentAsync({
+      multiple: multiple,
+      type: accept || '*/*'
+    });
+    if (result.canceled) return;
+    addFiles(result.assets.map(normalizeDocumentResult));
+  }), [multiple, accept, addFiles]);
+
+  var showCamera = acceptsImages(accept);
+  var showLibrary = acceptsImages(accept);
+  var showFiles = needsFilePicker(accept);
+
+  var isRenderFn = typeof children === 'function';
+
+  return (
+    _jsxs(_Fragment, { children: [
+      isRenderFn ?
+      _jsx(View, Object.assign({}, props, { children:
+        children({ value: value, remove: remove, isDragging: false, open: handlePress }) })
+      ) :
+
+      _jsx(Link, Object.assign({ onPress: handlePress, disabled: disabled }, props, { children:
+        children })
+      ),
+
+      _jsx(BottomDrawer, { open: open, onClose: function onClose() {return setOpen(false);}, snapPoints: [200], children:
+        _jsxs(View, { padding: "md", gap: "xs", children: [
+          showCamera &&
+          _jsx(Link, { onPress: handleCamera, children:
+            _jsxs(View, { row: true, gap: "md", padding: "sm", centerV: true, children: [
+              _jsx(Icon, { name: "camera-line" }),
+              _jsx(Text, { children: "Camera" })] }
+            ) }
+          ),
+
+          showLibrary &&
+          _jsx(Link, { onPress: handleLibrary, children:
+            _jsxs(View, { row: true, gap: "md", padding: "sm", centerV: true, children: [
+              _jsx(Icon, { name: "image-line" }),
+              _jsx(Text, { children: "Photo Library" })] }
+            ) }
+          ),
+
+          showFiles &&
+          _jsx(Link, { onPress: handleFiles, children:
+            _jsxs(View, { row: true, gap: "md", padding: "sm", centerV: true, children: [
+              _jsx(Icon, { name: "file-line" }),
+              _jsx(Text, { children: "Files" })] }
+            ) }
+          )] }
+
+        ) }
+      )] }
+    ));
+
+}

package/dist/components/inputs/upload/useUploadState.js

@@ -0,0 +1,143 @@
+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 _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 _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 { useState, useRef, useCallback } from 'react';
+
+function toArray(val) {
+  if (!val) return [];
+  return Array.isArray(val) ? val : [val];
+}
+
+export function useUploadState(_ref) {var onUpload = _ref.onUpload,onChange = _ref.onChange,multiple = _ref.multiple,maxCount = _ref.maxCount,valueProp = _ref.value;
+  var _useState = useState([]),_useState2 = _slicedToArray(_useState, 2),inFlight = _useState2[0],setInFlight = _useState2[1];
+  var _useState3 = useState(null),_useState4 = _slicedToArray(_useState3, 2),committed = _useState4[0],setCommitted = _useState4[1];
+  var idRef = useRef(0);
+  var genRef = useRef(0);
+
+  var isControlled = valueProp !== undefined;
+  var externalValue = isControlled ? valueProp : committed;
+  var externalArray = toArray(externalValue);
+
+  var externalArrayRef = useRef(externalArray);
+  externalArrayRef.current = externalArray;
+  var onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  var inFlightRef = useRef(inFlight);
+  inFlightRef.current = inFlight;
+
+  var value = multiple ? [].concat(_toConsumableArray(
+    externalArray), _toConsumableArray(inFlight)) :
+  inFlight[0] || externalArray[0] || null;
+
+  var addFiles = useCallback(
+    function (normalizedFiles) {
+      if (!(normalizedFiles != null && normalizedFiles.length)) return;
+
+      if (!onUpload) {
+        if (!multiple) {
+          var entry = Object.assign({}, normalizedFiles[0], { _id: ++idRef.current });
+          if (!isControlled) setCommitted(entry);
+          onChangeRef.current == null ? void 0 : onChangeRef.current(entry);
+        } else {
+          var _files = normalizedFiles;
+          if (maxCount) {
+            var available = maxCount - externalArrayRef.current.length;
+            if (available <= 0) return;
+            _files = _files.slice(0, available);
+          }
+          var _entries = _files.map(function (file) {return Object.assign({}, file, { _id: ++idRef.current });});
+          if (!isControlled) {
+            setCommitted(function (prev) {
+              var next = [].concat(_toConsumableArray(toArray(prev)), _toConsumableArray(_entries));
+              onChangeRef.current == null ? void 0 : onChangeRef.current(next);
+              return next;
+            });
+          } else {
+            onChangeRef.current == null ? void 0 : onChangeRef.current([].concat(_toConsumableArray(externalArrayRef.current), _toConsumableArray(_entries)));
+          }
+        }
+        return;
+      }
+
+      if (!multiple) {
+        var gen = ++genRef.current;
+        var file = normalizedFiles[0];
+        var _id = ++idRef.current;
+        var _entry = Object.assign({}, file, { _id: _id, status: 'uploading' });
+
+        setInFlight([_entry]);
+
+        onUpload(file).
+        then(function (result) {
+          if (genRef.current !== gen) return;
+          var done = Object.assign({}, _entry, result, { status: 'done' });
+          setInFlight([]);
+          if (!isControlled) setCommitted(done);
+          onChangeRef.current == null ? void 0 : onChangeRef.current(done);
+        }).
+        catch(function (error) {
+          if (genRef.current !== gen) return;
+          setInFlight(function (prev) {return (
+              prev.map(function (f) {return f._id === _id ? Object.assign({}, f, { status: 'error', error: error }) : f;}));}
+          );
+        });
+        return;
+      }
+
+
+      var files = normalizedFiles;
+      if (maxCount) {
+        var _available = maxCount - externalArrayRef.current.length - inFlightRef.current.length;
+        if (_available <= 0) return;
+        files = files.slice(0, _available);
+      }
+
+      var entries = files.map(function (file) {return Object.assign({},
+        file, {
+          _id: ++idRef.current,
+          status: 'uploading' });}
+      );
+
+      setInFlight(function (prev) {return [].concat(_toConsumableArray(prev), _toConsumableArray(entries));});
+
+      entries.forEach(function (entry, i) {
+        onUpload(files[i]).
+        then(function (result) {
+          var done = Object.assign({}, entry, result, { status: 'done' });
+          setInFlight(function (prev) {return prev.filter(function (f) {return f._id !== entry._id;});});
+          if (!isControlled) {
+            setCommitted(function (prev) {
+              var next = [].concat(_toConsumableArray(toArray(prev)), [done]);
+              onChangeRef.current == null ? void 0 : onChangeRef.current(next);
+              return next;
+            });
+          } else {
+            onChangeRef.current == null ? void 0 : onChangeRef.current([].concat(_toConsumableArray(externalArrayRef.current), [done]));
+          }
+        }).
+        catch(function (error) {
+          setInFlight(function (prev) {return (
+              prev.map(function (f) {return f._id === entry._id ? Object.assign({}, f, { status: 'error', error: error }) : f;}));}
+          );
+        });
+      });
+    },
+    [onUpload, multiple, maxCount, isControlled]
+  );
+
+  var remove = useCallback(
+    function (file) {
+      if (!file) return;
+
+      setInFlight(function (prev) {return prev.filter(function (f) {return f._id !== file._id;});});
+
+      var ext = externalArrayRef.current;
+      if (ext.some(function (f) {return f._id === file._id;})) {
+        var next = ext.filter(function (f) {return f._id !== file._id;});
+        var val = multiple ? next : next[0] || null;
+        if (!isControlled) setCommitted(val);
+        onChangeRef.current == null ? void 0 : onChangeRef.current(val);
+      }
+    },
+    [multiple, isControlled]
+  );
+
+  return { value: value, addFiles: addFiles, remove: remove };
+}

package/dist/components/layout/Layout.js

@@ -1 +1,40 @@
-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/layout/Layout.js";var _excluded=["children"];import React from'react';import{View}from"../structure/View";import{getElementSize}from"../../abstractions/helpers/componentSize";import{jsx as _jsx}from"react/jsx-runtime";var LayoutContext=React.createContext({});export var useLayout=function useLayout(){return React.useContext(LayoutContext)||{};};export function Layout(_ref){var children=_ref.children,rootProps=_objectWithoutProperties(_ref,_excluded);var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),layoutHeaderSpace=_React$useState2[0],setLayoutHeaderSpace=_React$useState2[1];var _React$useState3=React.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),layoutSiderSpace=_React$useState4[0],setLayoutSiderSpace=_React$useState4[1];var registerHeader=function registerHeader(space){return setLayoutHeaderSpace(function(v){return v+space;});};var unregisterHeader=function unregisterHeader(space){return setLayoutHeaderSpace(function(v){return v-space;});};var _React$useState5=React.useState({}),_React$useState6=_slicedToArray(_React$useState5,2),layoutSize=_React$useState6[0],setLayoutSize=_React$useState6[1];var layoutRef=React.useRef(null);React.useLayoutEffect(function(){getElementSize(layoutRef,setLayoutSize);},[]);var value={layoutSize:layoutSize,layoutHeaderSpace:layoutHeaderSpace,setLayoutHeaderSpace:setLayoutHeaderSpace,layoutSiderSpace:layoutSiderSpace,layoutSiderSpace:layoutSiderSpace,registerHeader:registerHeader,unregisterHeader:unregisterHeader};return _jsx(LayoutContext.Provider,{value:value,children:_jsx(View,Object.assign({className:"neko-layout",bg:"mainBG",flex:true,relative:true},rootProps,{ref:layoutRef,children:children}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/Layout.js";var _excluded = ["children"];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 React from 'react';
+
+import { View } from "../structure/View";
+import { getElementSize } from "../../abstractions/helpers/componentSize";import { jsx as _jsx } from "react/jsx-runtime";
+
+var LayoutContext = React.createContext({});
+export var useLayout = function useLayout() {return React.useContext(LayoutContext) || {};};
+
+export function Layout(_ref) {var children = _ref.children,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(0),_React$useState2 = _slicedToArray(_React$useState, 2),layoutHeaderSpace = _React$useState2[0],setLayoutHeaderSpace = _React$useState2[1];
+  var _React$useState3 = React.useState(0),_React$useState4 = _slicedToArray(_React$useState3, 2),layoutSiderSpace = _React$useState4[0],setLayoutSiderSpace = _React$useState4[1];
+
+  var registerHeader = function registerHeader(space) {return setLayoutHeaderSpace(function (v) {return v + space;});};
+  var unregisterHeader = function unregisterHeader(space) {return setLayoutHeaderSpace(function (v) {return v - space;});};
+
+  var _React$useState5 = React.useState({}),_React$useState6 = _slicedToArray(_React$useState5, 2),layoutSize = _React$useState6[0],setLayoutSize = _React$useState6[1];
+  var layoutRef = React.useRef(null);
+
+  React.useLayoutEffect(function () {
+    getElementSize(layoutRef, setLayoutSize);
+  }, []);
+
+  var value = {
+    layoutSize: layoutSize,
+    layoutHeaderSpace: layoutHeaderSpace,
+    setLayoutHeaderSpace: setLayoutHeaderSpace,
+    layoutSiderSpace: layoutSiderSpace,
+    layoutSiderSpace: layoutSiderSpace,
+    registerHeader: registerHeader,
+    unregisterHeader: unregisterHeader
+  };
+
+  return (
+    _jsx(LayoutContext.Provider, { value: value, children:
+      _jsx(View, Object.assign({ className: "neko-layout", bg: "mainBG", flex: true, relative: true }, rootProps, { ref: layoutRef, children:
+        children })
+      ) }
+    ));
+
+}

package/dist/components/layout/LayoutContent.js

@@ -1 +1,42 @@
-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/layout/LayoutContent.js";var _excluded=["children"];import{pipe}from'ramda';import{AbsView}from"../../abstractions/View";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useDefaultModifier}from"../../modifiers/default";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useMarginModifier}from"../../modifiers/margin";import{useOverflowModifier}from"../../modifiers/overflow";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useSizeModifier}from"../../modifiers/size";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";var DEFAULT_PROPS={};export function LayoutContent(_ref){var children=_ref.children,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('LayoutContent'),useDefaultModifier(DEFAULT_PROPS),useSizeModifier,usePositionModifier,useOverflowModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier,useBackgroundModifier,useBorderModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],props=_pipe2[1];return _jsx(_Fragment,{children:_jsx(AbsView,Object.assign({className:"neko-layout-content"},props,{children:children}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/LayoutContent.js";var _excluded = ["children"];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 { AbsView } from "../../abstractions/View";
+import { useBackgroundModifier } from "../../modifiers/background";
+import { useBorderModifier } from "../../modifiers/border";
+import { useDefaultModifier } from "../../modifiers/default";
+import { useFlexModifier } from "../../modifiers/flex";
+import { useFlexWrapperModifier } from "../../modifiers/flexWrapper";
+import { useMarginModifier } from "../../modifiers/margin";
+import { useOverflowModifier } from "../../modifiers/overflow";
+import { usePaddingModifier } from "../../modifiers/padding";
+import { usePositionModifier } from "../../modifiers/position";
+import { useSizeModifier } from "../../modifiers/size";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+
+var DEFAULT_PROPS = {
+
+};
+
+export function LayoutContent(_ref) {var children = _ref.children,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _pipe = pipe(
+      useThemeComponentModifier('LayoutContent'),
+      useDefaultModifier(DEFAULT_PROPS),
+      useSizeModifier,
+      usePositionModifier,
+      useOverflowModifier,
+      usePaddingModifier,
+      useMarginModifier,
+      useFlexWrapperModifier,
+      useFlexModifier,
+      useBackgroundModifier,
+      useBorderModifier
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_ = _pipe2[0],props = _pipe2[1];
+
+  return (
+    _jsx(_Fragment, { children:
+      _jsx(AbsView, Object.assign({ className: "neko-layout-content" }, props, { children:
+        children })
+      ) }
+    ));
+
+}

package/dist/components/layout/LayoutHeader.js

@@ -1 +1,70 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/LayoutHeader.js";var _excluded=["children"];import{pipe}from'ramda';import React from'react';import{AbsView}from"../../abstractions/View";import{getElementSize}from"../../abstractions/helpers/componentSize";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useDefaultModifier}from"../../modifiers/default";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useLayout}from"./Layout";import{useMarginModifier}from"../../modifiers/margin";import{useOverflowModifier}from"../../modifiers/overflow";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useShadowModifier}from"../../modifiers/shadow";import{useSizeModifier}from"../../modifiers/size";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,2);_objectDestructuringEmpty(_ref2[0]);var sticky=_ref2[1].sticky;return{bg:'overlayBG',fullW:true,row:true,centerV:true,padding:'md',top:0,left:0,right:0,zIndex:sticky?90:undefined};};export function LayoutHeader(_ref3){var children=_ref3.children,rootProps=_objectWithoutProperties(_ref3,_excluded);var _pipe=pipe(useThemeComponentModifier('LayoutHeader'),useDefaultModifier(DEFAULT_PROPS),useSizeModifier,usePositionModifier,useOverflowModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier,useBackgroundModifier,useBorderModifier,useShadowModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],props=_pipe2[1];var _useLayout=useLayout(),registerHeader=_useLayout.registerHeader,unregisterHeader=_useLayout.unregisterHeader;var headerRef=React.useRef(null);var headerHeightRef=React.useRef(null);React.useLayoutEffect(function(){if(headerRef.current&&!!rootProps.sticky){getElementSize(headerRef,function(_ref4){var height=_ref4.height;headerHeightRef.current=height;registerHeader==null?void 0:registerHeader(height);});return function(){return unregisterHeader==null?void 0:unregisterHeader(headerHeightRef.current);};}},[]);return _jsx(_Fragment,{children:_jsx(AbsView,Object.assign({className:"neko-layout-header"},props,{ref:headerRef,children:children}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/LayoutHeader.js";var _excluded = ["children"];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 _objectDestructuringEmpty(t) {if (null == t) throw new TypeError("Cannot destructure " + 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 React from 'react';
+
+import { AbsView } from "../../abstractions/View";
+import { getElementSize } from "../../abstractions/helpers/componentSize";
+import { useBackgroundModifier } from "../../modifiers/background";
+import { useBorderModifier } from "../../modifiers/border";
+import { useDefaultModifier } from "../../modifiers/default";
+import { useFlexModifier } from "../../modifiers/flex";
+import { useFlexWrapperModifier } from "../../modifiers/flexWrapper";
+import { useLayout } from "./Layout";
+import { useMarginModifier } from "../../modifiers/margin";
+import { useOverflowModifier } from "../../modifiers/overflow";
+import { usePaddingModifier } from "../../modifiers/padding";
+import { usePositionModifier } from "../../modifiers/position";
+import { useShadowModifier } from "../../modifiers/shadow";
+import { useSizeModifier } from "../../modifiers/size";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+
+var DEFAULT_PROPS = function DEFAULT_PROPS(_ref) {var _ref2 = _slicedToArray(_ref, 2);_objectDestructuringEmpty(_ref2[0]);var sticky = _ref2[1].sticky;return {
+    bg: 'overlayBG',
+    fullW: true,
+    row: true,
+    centerV: true,
+    padding: 'md',
+    borderB: 'overlayDivider',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: sticky ? 90 : undefined
+  };};
+
+export function LayoutHeader(_ref3) {var children = _ref3.children,rootProps = _objectWithoutProperties(_ref3, _excluded);
+  var _pipe = pipe(
+      useThemeComponentModifier('LayoutHeader'),
+      useDefaultModifier(DEFAULT_PROPS),
+      useSizeModifier,
+      usePositionModifier,
+      useOverflowModifier,
+      usePaddingModifier,
+      useMarginModifier,
+      useFlexWrapperModifier,
+      useFlexModifier,
+      useBackgroundModifier,
+      useBorderModifier,
+      useShadowModifier
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_ = _pipe2[0],props = _pipe2[1];
+
+  var _useLayout = useLayout(),registerHeader = _useLayout.registerHeader,unregisterHeader = _useLayout.unregisterHeader;
+  var headerRef = React.useRef(null);
+  var headerHeightRef = React.useRef(null);
+
+  React.useLayoutEffect(function () {
+    if (headerRef.current && !!rootProps.sticky) {
+      getElementSize(headerRef, function (_ref4) {var height = _ref4.height;
+        headerHeightRef.current = height;
+        registerHeader == null ? void 0 : registerHeader(height);
+      });
+      return function () {return unregisterHeader == null ? void 0 : unregisterHeader(headerHeightRef.current);};
+    }
+  }, []);
+
+  return (
+    _jsx(_Fragment, { children:
+      _jsx(AbsView, Object.assign({ className: "neko-layout-header" }, props, { ref: headerRef, children:
+        children })
+      ) }
+    ));
+
+}

package/dist/components/layout/LayoutSider.js

@@ -1 +1,64 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/LayoutSider.js";var _excluded=["children"];import{pipe}from'ramda';import React from'react';import{AbsView}from"../../abstractions/View";import{getElementSize}from"../../abstractions/helpers/componentSize";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useDefaultModifier}from"../../modifiers/default";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useLayout}from"./Layout";import{useMarginModifier}from"../../modifiers/margin";import{useOverflowModifier}from"../../modifiers/overflow";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useShadowModifier}from"../../modifiers/shadow";import{useSizeModifier}from"../../modifiers/size";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(layoutSize,headerSpace){return function(_ref){var _ref2=_slicedToArray(_ref,2);_objectDestructuringEmpty(_ref2[0]);var sticky=_ref2[1].sticky;return{top:headerSpace||0,bottom:0,maxHeight:!!sticky?'100vh':undefined,paddingB:!!sticky?headerSpace:undefined};};};export function LayoutSider(_ref3){var children=_ref3.children,rootProps=_objectWithoutProperties(_ref3,_excluded);var _useLayout=useLayout(),layoutSize=_useLayout.layoutSize,layoutHeaderSpace=_useLayout.layoutHeaderSpace,registerSider=_useLayout.registerSider,unregisterHeader=_useLayout.unregisterHeader;var _pipe=pipe(useThemeComponentModifier('LayoutSider'),useDefaultModifier(DEFAULT_PROPS(layoutSize,layoutHeaderSpace)),useSizeModifier,usePositionModifier,useOverflowModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier,useBackgroundModifier,useBorderModifier,useShadowModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],props=_pipe2[1];var siderRef=React.useRef(null);var _React$useState=React.useState(rootProps.width||0),_React$useState2=_slicedToArray(_React$useState,2),siderWidth=_React$useState2[0],setSiderWidth=_React$useState2[1];React.useLayoutEffect(function(){getElementSize(siderRef,function(_ref4){var width=_ref4.width;return setSiderWidth(width);});},[]);return _jsxs(_Fragment,{children:[rootProps.fixed&&_jsx(AbsView,{className:"neko-layout-sider-empty-space",style:{width:siderWidth,height:'100%'}}),_jsx(AbsView,Object.assign({className:"neko-layout-sider"},props,{ref:siderRef,children:children}))]});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/layout/LayoutSider.js";var _excluded = ["children"];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 _objectDestructuringEmpty(t) {if (null == t) throw new TypeError("Cannot destructure " + 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 React from 'react';
+
+import { AbsView } from "../../abstractions/View";
+import { getElementSize } from "../../abstractions/helpers/componentSize";
+import { useBackgroundModifier } from "../../modifiers/background";
+import { useBorderModifier } from "../../modifiers/border";
+import { useDefaultModifier } from "../../modifiers/default";
+import { useFlexModifier } from "../../modifiers/flex";
+import { useFlexWrapperModifier } from "../../modifiers/flexWrapper";
+import { useLayout } from "./Layout";
+import { useMarginModifier } from "../../modifiers/margin";
+import { useOverflowModifier } from "../../modifiers/overflow";
+import { usePaddingModifier } from "../../modifiers/padding";
+import { usePositionModifier } from "../../modifiers/position";
+import { useShadowModifier } from "../../modifiers/shadow";
+import { useSizeModifier } from "../../modifiers/size";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
+var DEFAULT_PROPS =
+function DEFAULT_PROPS(layoutSize, headerSpace) {return (
+    function (_ref) {var _ref2 = _slicedToArray(_ref, 2);_objectDestructuringEmpty(_ref2[0]);var sticky = _ref2[1].sticky;return {
+        top: headerSpace || 0,
+        bottom: 0,
+        maxHeight: !!sticky ? '100vh' : undefined,
+        paddingB: !!sticky ? headerSpace : undefined
+      };});};
+
+export function LayoutSider(_ref3) {var children = _ref3.children,rootProps = _objectWithoutProperties(_ref3, _excluded);
+  var _useLayout = useLayout(),layoutSize = _useLayout.layoutSize,layoutHeaderSpace = _useLayout.layoutHeaderSpace,registerSider = _useLayout.registerSider,unregisterHeader = _useLayout.unregisterHeader;
+
+  var _pipe = pipe(
+      useThemeComponentModifier('LayoutSider'),
+      useDefaultModifier(DEFAULT_PROPS(layoutSize, layoutHeaderSpace)),
+      useSizeModifier,
+      usePositionModifier,
+      useOverflowModifier,
+      usePaddingModifier,
+      useMarginModifier,
+      useFlexWrapperModifier,
+      useFlexModifier,
+      useBackgroundModifier,
+      useBorderModifier,
+      useShadowModifier
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_ = _pipe2[0],props = _pipe2[1];
+
+  var siderRef = React.useRef(null);
+  var _React$useState = React.useState(rootProps.width || 0),_React$useState2 = _slicedToArray(_React$useState, 2),siderWidth = _React$useState2[0],setSiderWidth = _React$useState2[1];
+
+  React.useLayoutEffect(function () {
+    getElementSize(siderRef, function (_ref4) {var width = _ref4.width;return setSiderWidth(width);});
+  }, []);
+
+  return (
+    _jsxs(_Fragment, { children: [
+      rootProps.fixed &&
+      _jsx(AbsView, { className: "neko-layout-sider-empty-space", style: { width: siderWidth, height: '100%' } }),
+
+      _jsx(AbsView, Object.assign({ className: "neko-layout-sider" }, props, { ref: siderRef, children:
+        children })
+      )] }
+    ));
+
+}

package/dist/components/layout/index.js

@@ -1 +1,4 @@
-export*from"./Layout";export*from"./LayoutHeader";export*from"./LayoutSider";export*from"./LayoutContent";
+export * from "./Layout";
+export * from "./LayoutHeader";
+export * from "./LayoutSider";
+export * from "./LayoutContent";