@onesy/ui-react 1.0.0

package/esm/Emojis/index.js

@@ -0,0 +1,2 @@
+export { default } from './Emojis';
+export { default as emojis_list } from './emojis_list';

package/esm/Expand/Expand.js

@@ -0,0 +1,196 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["children", "style"],
+  _excluded2 = ["in", "value", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "expandSize", "orientation", "WrapperProps", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { useOnesyTheme } from '@onesy/style-react';
+import { Transition } from '..';
+const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      children,
+      style
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, other, {
+    style: _objectSpread({
+      width: '100%'
+    }, style)
+  }), props.children);
+});
+const Expand = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyExpand?.props?.default), props_), [props_]);
+  const {
+      in: inProp,
+      value: valueProvided,
+      prefix,
+      run,
+      append,
+      add,
+      enter,
+      exit,
+      enterOnAdd,
+      exitOnAdd,
+      noAbruption,
+      removeOnExited = true,
+      delay,
+      duration: duration_,
+      timing_function,
+      addTransition,
+      onTransition,
+      onAppended,
+      onAdd,
+      onAdding,
+      onAdded,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      onRemoved,
+      expandSize,
+      orientation,
+      WrapperProps,
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded2);
+  const [value, setValue] = React.useState(valueProvided !== undefined ? valueProvided : null);
+  const [parent, setParent] = React.useState();
+  const refs = {
+    root: React.useRef(undefined),
+    placeholder: React.useRef(undefined),
+    parent: React.useRef(undefined),
+    element: React.useRef(undefined),
+    value: React.useRef(0)
+  };
+  refs.value.current = value;
+  refs.parent.current = parent;
+  let prop = 'height';
+  if (orientation === 'horizontal') prop = 'width';
+  const isTransition = React.useCallback(item => {
+    const values = ['Transition', 'Fade', 'Grow', 'Slide', 'Zoom'];
+    return values.some(item_ => item?.includes(item_));
+  }, []);
+  const childrenWithTransition = isTransition(children?.type?.displayName);
+  React.useEffect(() => {
+    const method = () => {
+      setValue(null);
+      setParent(null);
+    };
+
+    // on resize
+    // recalculate width, value
+    window.addEventListener('resize', method);
+    return () => {
+      window.removeEventListener('resize', method);
+    };
+  }, []);
+  const styles = status => {
+    const styles_ = refs.root.current && window.getComputedStyle(refs.root?.current) || {};
+    const allStyles = {
+      appended: {
+        position: 'fixed',
+        left: '1114%',
+        visibility: 'hidden'
+      },
+      enter: {
+        transition: 'none',
+        [prop]: 0,
+        overflow: 'hidden'
+      },
+      entering: {
+        [prop]: `${valueProvided !== undefined ? valueProvided : refs.value.current}px`,
+        overflow: 'hidden'
+      },
+      entered: {
+        [prop]: 'auto'
+      },
+      exit: {
+        [prop]: styles_[prop],
+        overflow: 'hidden'
+      },
+      exiting: {
+        [prop]: expandSize !== undefined ? expandSize : '0',
+        overflow: 'hidden'
+      },
+      exited: {
+        [prop]: expandSize !== undefined ? expandSize : '0',
+        overflow: 'hidden'
+      }
+    };
+    return allStyles[status];
+  };
+  const duration = function (status) {
+    let property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'opacity';
+    const properties = {
+      [prop]: theme.transitions.duration.rg
+    };
+    return `${(is('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
+  };
+  const timingFunction = status => (is('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
+  const children_ = /*#__PURE__*/React.createElement(Wrapper, WrapperProps, children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, value === null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: item => {
+      if (!item) return;
+      if (!parent) setParent(item.parentElement);
+    }
+  }), parent && /*#__PURE__*/React.createElement(Wrapper, _extends({}, WrapperProps, {
+    ref: item => {
+      if (!item) return;
+      if (WrapperProps?.ref) {
+        if (is('function', WrapperProps.ref)) WrapperProps?.ref(item);else WrapperProps.ref.current = item;
+      }
+      if (refs.value.current === null) {
+        setValue(item.getBoundingClientRect()[prop] || 0);
+      }
+    },
+    style: _objectSpread({
+      position: 'fixed',
+      left: '1114%',
+      visibility: 'hidden',
+      width: parent.offsetWidth
+    }, WrapperProps?.style)
+  }), /*#__PURE__*/React.cloneElement(children, _objectSpread({}, childrenWithTransition && {
+    in: true
+  })))), value !== null && /*#__PURE__*/React.createElement(Transition, _extends({
+    removeOnExited: true
+  }, props), (status, ref_) => {
+    // If children update
+    // & value is updated
+    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status)) {
+      const value_ = (refs.root.current?.getBoundingClientRect() || {})[prop];
+      if (value_ > 0 && value_ !== refs.value.current) setValue(value_);
+    }
+    return /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, other), {}, {
+      className,
+      ref: item => {
+        refs.root.current = item;
+        if (ref) {
+          if (is('function', ref)) ref(item);else ref.current = item;
+        }
+        if (ref_) {
+          if (is('function', ref_)) ref_(item);else ref_.current = item;
+        }
+        if (children_.ref) {
+          if (is('function', children_.ref)) children_.ref(item);else children_.ref.current = item;
+        }
+      },
+      style: _objectSpread(_objectSpread(_objectSpread({
+        position: 'relative',
+        transition: `${prop} ${duration(status, prop)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`,
+        visibility: status === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined
+      }, styles(status)), style), children_?.style)
+    }));
+  }));
+});
+Expand.displayName = 'onesy-Expand';
+export default Expand;

package/esm/Expand/index.js

@@ -0,0 +1 @@
+export { default } from './Expand';

package/esm/Fab/Fab.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import ButtonElement from '../Button';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {}
+}), {
+  name: 'onesy-Fab'
+});
+const Fab = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFab?.props?.default), props_), [props_]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+    tonal = 'primary',
+    version = 'filled',
+    className
+  } = props;
+  const {
+    classes
+  } = useStyle();
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props, {
+    className: classNames([staticClassName('Fab', theme) && ['onesy-Fab-root'], className, classes.root]),
+    version: version,
+    tonal: tonal,
+    fab: true
+  }));
+});
+Fab.displayName = 'onesy-Fab';
+export default Fab;

package/esm/Fab/index.js

@@ -0,0 +1 @@
+export { default } from './Fab';

package/esm/Fade/Fade.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, useOnesyTheme } from '@onesy/style-react';
+import { Transition } from '..';
+const Fade = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFade?.props?.default), props_), [props_]);
+  const {
+      in: inProp,
+      prefix,
+      run,
+      append,
+      add,
+      enter,
+      exit,
+      enterOnAdd,
+      exitOnAdd,
+      noAbruption,
+      removeOnExited,
+      delay,
+      duration: duration_,
+      timing_function,
+      addTransition,
+      onTransition,
+      onAppended,
+      onAdd,
+      onAdding,
+      onAdded,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      onRemoved,
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const styles = status => {
+    const {
+      opacity = 1
+    } = refs.root.current && window.getComputedStyle(refs.root?.current) || {};
+    const allStyles = {
+      appended: {
+        visibility: 'hidden'
+      },
+      add: {
+        transition: 'none',
+        opacity: 0
+      },
+      adding: {
+        opacity: 1
+      },
+      added: {
+        opacity: 1
+      },
+      enter: {
+        transition: 'none',
+        opacity: 0
+      },
+      entering: {
+        opacity: 1
+      },
+      // With no opacity
+      // as if there's inline opacity value
+      // it ie. overrides button disabled class
+      // opacity value
+      entered: {},
+      exit: {
+        opacity
+      },
+      exiting: {
+        opacity: 0
+      },
+      exited: {
+        opacity: 0
+      }
+    };
+    return allStyles[status];
+  };
+  const duration = function (status) {
+    let property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'opacity';
+    const properties = {
+      opacity: theme.transitions.duration.sm
+    };
+    return `${(is('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
+  };
+  const timingFunction = status => (is('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
+  return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
+    name: "fade"
+  }), (status, ref_) => {
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
+      ref: item => {
+        refs.root.current = item;
+        if (ref) {
+          if (is('function', ref)) ref(item);else ref.current = item;
+        }
+        if (ref_) {
+          if (is('function', ref_)) ref_(item);else ref_.current = item;
+        }
+        if (children.ref) {
+          if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
+        }
+      },
+      className: classNames([className, children?.props?.className]),
+      style: _objectSpread(_objectSpread(_objectSpread({
+        visibility: status === 'exited' && !inProp ? 'hidden' : undefined,
+        transition: `opacity ${duration(status)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`
+      }, styles(status)), children?.props?.style), style)
+    }));
+  });
+});
+Fade.displayName = 'onesy-Fade';
+export default Fade;

package/esm/Fade/index.js

@@ -0,0 +1 @@
+export { default } from './Fade';

package/esm/FileChoose/FileChoose.js

@@ -0,0 +1,197 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "inputRef", "size", "max", "allowedTypes", "files", "valueDefault", "value", "multiple", "accept", "capture", "remove", "renderFiles", "onClick", "onChange", "IconStart", "inputProps", "WrapperProps", "ComponentProps", "Component", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is, to } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialClose from '@amaui/icons-material-rounded-react/IconMaterialCloseW100';
+import IconMaterialDraft from '@amaui/icons-material-rounded-react/IconMaterialDraftW100';
+import IconMaterialCloudUpload from '@amaui/icons-material-rounded-react/IconMaterialCloudUploadW100';
+import IconMaterialFolder from '@amaui/icons-material-rounded-react/IconMaterialFolderW100';
+import IconMaterialFolderOpen from '@amaui/icons-material-rounded-react/IconMaterialFolderOpenW100';
+import TypeElement from '../Type';
+import ButtonElement from '../Button';
+import IconButtonElement from '../IconButton';
+import TreeElement from '../Tree';
+import LineElement from '../Line';
+import { iconFontSize, staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative'
+  },
+  input: {
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    visibility: 'hidden'
+  },
+  files: {
+    width: '340px',
+    maxWidth: '100%'
+  },
+  file: {
+    maxWidth: '174px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}), {
+  name: 'onesy-FileChoose'
+});
+const FileChoose = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFileChoose?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Tree = React.useMemo(() => theme?.elements?.Tree || TreeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      inputRef,
+      size = 'regular',
+      max,
+      allowedTypes,
+      files,
+      valueDefault,
+      value: value_,
+      multiple,
+      accept,
+      capture,
+      remove = true,
+      renderFiles,
+      onClick,
+      onChange: onChange_,
+      IconStart = IconMaterialCloudUpload,
+      inputProps,
+      WrapperProps: WrapperProps_,
+      ComponentProps: ComponentProps_,
+      Component = Button,
+      className,
+      style,
+      children = 'Choose file'
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = React.useState(false);
+  const [value, setValue] = React.useState(valueDefault !== undefined ? valueDefault : value_);
+  const refs = {
+    value: React.useRef(undefined),
+    input: React.useRef(undefined),
+    allowedTypes: React.useRef(undefined),
+    max: React.useRef(undefined)
+  };
+  refs.value.current = value;
+  refs.max.current = max;
+  refs.allowedTypes.current = allowedTypes;
+  React.useEffect(() => {
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    if (init) {
+      if (value_ !== refs.value.current) setValue(value_);
+    }
+  }, [value_]);
+  const onChange = React.useCallback(valueNew_ => {
+    let valueNew = valueNew_;
+
+    // Allowed types
+    if (is('array', refs.allowedTypes.current)) valueNew = valueNew.map(item => refs.allowedTypes.current.includes(item.name));
+
+    // Max
+    if (refs.max.current) valueNew = valueNew.slice(0, refs.max.current);
+    if (!props.hasOwnProperty('value')) setValue(valueNew);
+    if (is('function', onChange_)) onChange_(valueNew);
+  }, []);
+  const onChangeMethod = React.useCallback(event => {
+    const valueNew = Array.from(refs.input.current.files);
+    onChange(valueNew);
+  }, []);
+  const onRemove = index => {
+    const valueNew = [...value];
+    valueNew.splice(index, 1);
+    onChange(valueNew);
+  };
+  const onReset = event => {
+    if (refs.input.current) refs.input.current.value = '';
+    if (is('function', onClick)) onClick(event);
+  };
+  const Wrapper = files ? Line : React.Fragment;
+  const WrapperProps = files ? _objectSpread(_objectSpread({
+    ref,
+    direction: 'column'
+  }, WrapperProps_), {}, {
+    className: classNames([staticClassName('FileChoose', theme) && ['onesy-FileChoose-root'], WrapperProps_?.className, className, classes.root])
+  }, other) : undefined;
+  let ComponentProps = _objectSpread({}, ComponentProps_);
+  if (!files) {
+    ComponentProps = _objectSpread(_objectSpread({}, ComponentProps), {}, {
+      ref,
+      className: classNames([staticClassName('FileChoose', theme) && ['onesy-FileChoose-root'], ComponentProps_?.className, className, classes.root])
+    }, other);
+  }
+  return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
+    Component: "label",
+    tonal: tonal,
+    color: color,
+    version: "outlined",
+    start: /*#__PURE__*/React.createElement(IconStart, null),
+    onClick: onReset,
+    size: size
+  }, ComponentProps), /*#__PURE__*/React.createElement("input", _extends({
+    ref: item => {
+      if (inputRef) inputRef.current = item;
+      refs.input.current = item;
+    },
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    capture: capture,
+    onChange: onChangeMethod
+  }, inputProps, {
+    className: classNames([staticClassName('FileChoose', theme) && ['onesy-FileChoose-input'], inputProps?.className, classes.input])
+  })), children), files && !!value?.length && (is('function', renderFiles) ? renderFiles(value, onRemove) : /*#__PURE__*/React.createElement(Tree, {
+    openDefault: true,
+    icon: /*#__PURE__*/React.createElement(IconMaterialFolder, {
+      size: "small"
+    }),
+    iconOpen: /*#__PURE__*/React.createElement(IconMaterialFolderOpen, {
+      size: "small"
+    }),
+    middle: "Files",
+    indicator: true,
+    indicatorPosition: "end",
+    className: classNames([staticClassName('FileChoose', theme) && ['onesy-FileChoose-files'], classes.files])
+  }, value.map((item, index) => /*#__PURE__*/React.createElement(Tree, {
+    key: index,
+    icon: /*#__PURE__*/React.createElement(IconMaterialDraft, {
+      size: "small"
+    }),
+    end: remove && /*#__PURE__*/React.createElement(IconButton, {
+      tonal: true,
+      color: "default",
+      size: 20,
+      fontSize: iconFontSize,
+      onClick: () => onRemove(index)
+    }, /*#__PURE__*/React.createElement(IconMaterialClose, null)),
+    middle: /*#__PURE__*/React.createElement(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Type, {
+      version: "b2",
+      className: classNames([staticClassName('FileChoose', theme) && ['onesy-FileChoose-file'], classes.file])
+    }, item.name), /*#__PURE__*/React.createElement(Type, {
+      version: "b3",
+      priority: "secondary"
+    }, to(item.size, 'size-format')))
+  })))));
+});
+FileChoose.displayName = 'onesy-FileChoose';
+export default FileChoose;

package/esm/FileChoose/index.js

@@ -0,0 +1 @@
+export { default } from './FileChoose';

package/esm/Focus/Focus.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { useOnesyTheme } from '@onesy/style-react';
+const KEYCODES = {
+  tab: 'Tab'
+};
+export const matches = value => {
+  const method = is('element', value) && (value.matches || value['webkitMatchesSelector'] || value['mozMatchesSelector'] || value['oMatchesSelector'] || value['msMatchesSelector']);
+  if (!method) return () => false;
+  return method.bind(value);
+};
+export const queryMatchFocusable = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)';
+const Focus = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFocus?.props?.default), props_), [props_]);
+  const refs = {
+    focusStart: React.useRef(undefined),
+    focusEnd: React.useRef(undefined)
+  };
+  const {
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const getElements = function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.focusStart.current;
+    // Setup siblings array and get the first sibling
+    const allElements = [];
+    let element = value.parentNode.firstChild;
+
+    // Loop through each sibling and push to the array
+    while (element) {
+      if (element.nodeType === 1 && element !== value) allElements.push(element);
+      element = element.nextSibling;
+    }
+    const focusEndIndex = allElements.findIndex(item => item === refs.focusEnd.current);
+    return allElements.slice(0, focusEndIndex).flatMap(item => [matches(item)(queryMatchFocusable) ? item : undefined, ...Array.from(item.querySelectorAll(queryMatchFocusable))].filter(Boolean));
+  };
+  const onKeyDownUp = event => {
+    const isTabPressed = event.key === 'Tab' || event.code === KEYCODES.tab;
+    if (!isTabPressed) return;
+    if (event.shiftKey) {
+      if (document.activeElement === refs.focusStart.current) {
+        const elements = getElements();
+        if (elements.length) elements[elements.length - 1].focus();
+        event.preventDefault();
+      }
+    } else {
+      if (document.activeElement === refs.focusEnd.current || document.activeElement === refs.focusStart.current) {
+        const elements = getElements();
+        if (elements.length) elements[0].focus();
+        event.preventDefault();
+      }
+    }
+  };
+  React.useEffect(() => {
+    const rootDocument = refs.focusStart.current?.ownerDocument || window.document;
+    rootDocument.addEventListener('keydown', onKeyDownUp);
+    rootDocument.addEventListener('keyup', onKeyDownUp);
+    return () => {
+      rootDocument.removeEventListener('keydown', onKeyDownUp);
+      rootDocument.removeEventListener('keyup', onKeyDownUp);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.focusStart.current = item;
+    },
+    tabIndex: 0
+  }, other)), children, /*#__PURE__*/React.createElement("div", {
+    ref: refs.focusEnd,
+    tabIndex: 0
+  }));
+});
+Focus.displayName = 'onesy-Focus';
+export default Focus;

package/esm/Focus/index.js

@@ -0,0 +1 @@
+export { default } from './Focus';