@onesy/ui-react 1.0.0

package/esm/NavigationRail/NavigationRail.js

@@ -0,0 +1,165 @@
+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", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "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, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import SurfaceElement from '../Surface';
+import DividerElement from '../Divider';
+import NavigationBarElement from '../NavigationBar';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    height: '100%',
+    width: '80px',
+    padding: `${theme.methods.space.value(5, 'px')} 0`,
+    overflow: 'auto',
+    zIndex: theme.z_index.app_bar
+  },
+  size_small: {
+    width: '72px'
+  },
+  size_regular: {
+    width: '80px'
+  },
+  size_large: {
+    width: '88px'
+  },
+  fixed: {
+    position: 'fixed',
+    insetBlock: '0',
+    insetInlineStart: '0'
+  },
+  header: {
+    marginBottom: '70px'
+  },
+  main: {
+    width: '100%',
+    flex: '1 1 auto',
+    '&.onesy-NavigationBar-root': {
+      background: 'transparent'
+    }
+  },
+  divider: {
+    position: 'absolute',
+    height: '100%',
+    insetBlock: '0',
+    insetInlineEnd: '0',
+    '&.onesy-Divider-root': {
+      margin: '0',
+      opacity: theme.palette.light ? '0.07' : '0.11'
+    }
+  }
+}), {
+  name: 'onesy-NavigationRail'
+});
+const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationRail?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const NavigationBar = React.useMemo(() => theme?.elements?.NavigationBar || NavigationBarElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'regular',
+      size = 'regular',
+      value,
+      valueDefault,
+      onChange,
+      justify = 'center',
+      border,
+      header: header_,
+      fixed,
+      NavigationBarProps,
+      DividerProps,
+      className,
+      style,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = React.useState(false);
+  const [selected, setSelected] = React.useState(() => {
+    const valueNew = valueDefault !== undefined ? valueDefault : value;
+    return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : [];
+  });
+  const styles = {
+    root: {},
+    icon: {}
+  };
+  React.useEffect(() => {
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
+  }, [value]);
+  const onSelect = itemProps => {
+    // Only one item at the time is selectable,
+    // and it cannot be unselected by clicking on the same item
+    const valueNew = [itemProps.value];
+    if (valueNew !== undefined) {
+      // Update inner or controlled
+      if (!props.hasOwnProperty('value')) setSelected(valueNew);
+      if (is('function', onChange)) onChange(valueNew);
+    }
+  };
+  const header = React.Children.toArray(header_).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
+    key: index,
+    color: item.props.color !== undefined ? item.props.color : color,
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes(item.type?.displayName) ? 'secondary' : tonal
+  }));
+  const children = React.Children.toArray(children_).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
+    key: index
+  }, ['onesy-NavigationItem'].includes(item.type?.displayName) ? {
+    vertical: true
+  } : {}), {}, {
+    selected: selected.includes(item.props.value),
+    onClick: () => {
+      if (!item.props.disabled) {
+        onSelect(item.props);
+
+        // Invoke items on click method
+        if (is('function', item.props.onClick)) item.props.onClick();
+      }
+    }
+  })));
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: ref,
+    Component: Line,
+    color: color,
+    tonal: tonal,
+    direction: "column",
+    align: "initial",
+    justify: "initial",
+    gap: 0,
+    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-root', `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), header && /*#__PURE__*/React.createElement(Line, {
+    align: "center",
+    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-header'], classes.header])
+  }, header), children && /*#__PURE__*/React.createElement(NavigationBar, _extends({
+    version: version,
+    direction: "column",
+    justify: justify,
+    gap: 2,
+    color: color,
+    tonal: tonal
+  }, NavigationBarProps, {
+    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-main'], NavigationBarProps?.className, classes.main])
+  }), children), border && /*#__PURE__*/React.createElement(Divider, _extends({
+    orientation: "vertical"
+  }, DividerProps, {
+    className: classNames([staticClassName('NavigationRail', theme) && ['onesy-NavigationRail-divider'], DividerProps?.className, classes.divider])
+  })));
+});
+NavigationRail.displayName = 'onesy-NavigationRail';
+export default NavigationRail;

package/esm/NavigationRail/index.js

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

package/esm/NotFound/NotFound.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "ButtonProps", "TypeProps", "className"];
+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 { useNavigate } from 'react-router-dom';
+import { is, isEnvironment } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SectionElement from '../Section';
+import TypeElement from '../Type';
+import ButtonElement from '../Button';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  fullHeight: {
+    height: '100vh'
+  }
+}), {
+  name: 'onesy-NotFound'
+});
+const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNotFound?.props?.default), props_), [props_]);
+  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+      name = 'Page not found 🫠',
+      to = '/',
+      link = '',
+      renderButton,
+      fullHeight,
+      start,
+      end,
+      ButtonProps,
+      TypeProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const navigate = isEnvironment('browser') && useNavigate();
+  const onTo = React.useCallback(() => {
+    if (link) window.open(link, 'blank');else navigate(to);
+  }, [to, link]);
+  return /*#__PURE__*/React.createElement(Section, _extends({
+    ref: ref,
+    flex: true,
+    fullWidth: true,
+    align: "center",
+    justify: "center",
+    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-root`], className, classes.root, fullHeight && classes.fullHeight])
+  }, other), start, /*#__PURE__*/React.createElement(Type, _extends({
+    version: "h3",
+    align: "center"
+  }, TypeProps, {
+    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-type`], TypeProps?.className])
+  }), name), is('function', renderButton) ? renderButton({}) : /*#__PURE__*/React.createElement(Button, _extends({
+    color: "default",
+    version: "outlined",
+    size: "small",
+    onClick: onTo
+  }, ButtonProps, {
+    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-button`], ButtonProps?.className, classes.button])
+  }), "Back"), end);
+});
+NotFound.displayName = 'onesy-NotFound';
+export default NotFound;

package/esm/NotFound/index.js

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

package/esm/NumericTextField/NumericTextField.js

@@ -0,0 +1,205 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["valueDefault", "value", "onChange", "version", "size", "min", "max", "increment", "decrement", "incrementValue", "decrementValue", "onFocus", "onBlur", "IconIncrement", "IconDecrement", "IconButtonProps", "IconProps", "className"];
+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, clamp, numberWithCommas, isEnvironment } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialKeyboardArrowUp from '@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowUpW100';
+import IconMaterialKeyboardArrowDown from '@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100';
+import AdvancedTextFieldElement from '../AdvancedTextField';
+import IconButtonElement from '../IconButton';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {}
+}), {
+  name: 'onesy-NumericTextField'
+});
+const NumericTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNumericTextField?.props?.default), props_), [props_]);
+  const AdvancedTextField = React.useMemo(() => theme?.elements?.AdvancedTextField || AdvancedTextFieldElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const {
+      valueDefault,
+      value: value_,
+      onChange: onChange_,
+      version = 'outlined',
+      size = 'regular',
+      min,
+      max,
+      increment = true,
+      decrement = true,
+      incrementValue = 1,
+      decrementValue = 1,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      IconIncrement = IconMaterialKeyboardArrowUp,
+      IconDecrement = IconMaterialKeyboardArrowDown,
+      IconButtonProps,
+      IconProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const [value, setValue] = React.useState(valueDefault !== undefined ? valueDefault : value_);
+  const refs = {
+    root: React.useRef(undefined),
+    value: React.useRef(undefined),
+    focus: React.useRef(undefined),
+    min: React.useRef(undefined),
+    max: React.useRef(undefined),
+    onChange: React.useRef(onChange_),
+    props: React.useRef(props)
+  };
+  refs.value.current = value;
+  refs.focus.current = focus;
+  refs.min.current = min;
+  refs.max.current = max;
+  refs.onChange.current = onChange_;
+  refs.props.current = props;
+  React.useEffect(() => {
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    const method = event => {
+      if (['ArrowUp', 'ArrowDown', 'End', 'Home'].includes(event.key)) {
+        event.preventDefault();
+      }
+      switch (event.key) {
+        case 'End':
+          if (refs.focus.current && refs.min.current !== undefined) {
+            let valueNew = refs.min.current;
+            if (props.thousand) valueNew = numberWithCommas(valueNew);
+            if (props.prefix !== undefined) valueNew = `${props.prefix}${valueNew}`;
+            onChange(valueNew);
+          }
+          return;
+        case 'Home':
+          if (refs.focus.current && refs.max.current !== undefined) {
+            let valueNew = refs.max.current;
+            if (props.thousand) valueNew = numberWithCommas(valueNew);
+            if (props.prefix !== undefined) valueNew = `${props.prefix}${valueNew}`;
+            onChange(valueNew);
+          }
+          return;
+        case 'ArrowUp':
+          if (refs.focus.current) onIncrement();
+          return;
+        case 'ArrowDown':
+          if (refs.focus.current) onDecrement();
+          return;
+        default:
+          break;
+      }
+    };
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('keydown', method);
+    return () => {
+      // Clean up
+      rootDocument.removeEventListener('keydown', method);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (init) {
+      if (value_ !== value) setValue(value_);
+    }
+  }, [value_]);
+  const onFocus = React.useCallback(event => {
+    setFocus(true);
+    if (is('function', onFocus_)) onFocus_(event);
+  }, []);
+  const onBlur = React.useCallback(event => {
+    setFocus(false);
+    if (is('function', onBlur_)) onBlur_(event);
+  }, []);
+  const onChange = valueNew_ => {
+    let valueNew = valueNew_;
+    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew)) valueNew = '';
+    if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew)) {
+      if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
+      if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+      valueNew = clamp(+valueNew, min_, max_);
+      if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
+      if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    }
+    if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) || (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && clamp(+valueNew_, min_, max_) === +valueNew_) valueNew = valueNew_;
+
+    // Update inner or controlled
+    if (!refs.props.current.hasOwnProperty('value')) setValue(valueNew);
+    if (is('function', refs.onChange.current)) refs.onChange.current(valueNew);
+  };
+  const onIncrement = () => {
+    let valueNew = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew = clamp(+valueNew + incrementValue, min_, max_);
+    if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
+    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+
+    // Update
+    onChange(valueNew);
+  };
+  const onDecrement = () => {
+    let valueNew = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew = clamp(+valueNew - decrementValue, min_, max_);
+    if (refs.props.current.thousand) valueNew = numberWithCommas(valueNew);
+    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+
+    // Update
+    onChange(valueNew);
+  };
+  const end = [];
+  const iconButtonProps = {
+    size: 24,
+    fontSize: '1.5rem'
+  };
+  if (decrement) end.push(/*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onDecrement
+  }, iconButtonProps, IconButtonProps), /*#__PURE__*/React.createElement(IconDecrement, IconProps)));
+  if (increment) end.push(/*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onIncrement
+  }, iconButtonProps, IconButtonProps), /*#__PURE__*/React.createElement(IconIncrement, IconProps)));
+  return /*#__PURE__*/React.createElement(AdvancedTextField, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChange: onChange,
+    version: version,
+    size: size,
+    validate: valueNew_ => {
+      if (valueNew_.startsWith(' ') || valueNew_.endsWith(' ')) return;
+      if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew_)) return true;
+      let valueNew = valueNew_;
+      if (props.prefix !== undefined) valueNew = valueNew_.replace(props.prefix, '');
+      if (props.thousand) valueNew = valueNew.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
+      valueNew = +valueNew;
+      return is('number', valueNew);
+    },
+    end: end,
+    endVerticalAlign: "center",
+    className: classNames([staticClassName('NumericTextField', theme) && ['onesy-NumericTextField-root', `onesy-NumericTextField-version-${version}`, `onesy-NumericTextField-size-${size}`], className, classes.root])
+  }, other));
+});
+NumericTextField.displayName = 'onesy-NumericTextField';
+export default NumericTextField;

package/esm/NumericTextField/index.js

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

package/esm/Page/Page.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["back", "forward", "noHeader", "name", "IconBack", "IconForward", "Component", "className", "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 { useNavigate } from 'react-router-dom';
+import { is, isEnvironment } from '@onesy/utils';
+import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialArrowBack from '@amaui/icons-material-rounded-react/IconMaterialArrowBackW100';
+import IconMaterialArrowForward from '@amaui/icons-material-rounded-react/IconMaterialArrowForwardW100';
+import IconButtonElement from '../IconButton';
+import LineElement from '../Line';
+import TooltipElement from '../Tooltip';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    height: '100%',
+    maxWidth: '1024px',
+    padding: theme.methods.space.value(3, 'px'),
+    '& .onesy-overflow-y': {
+      height: '0px',
+      flex: '1 1 auto',
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    }
+  },
+  name: {
+    maxWidth: '440px'
+  }
+}), {
+  name: 'onesy-Page'
+});
+const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPage?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      back,
+      forward,
+      noHeader,
+      name,
+      IconBack = IconMaterialArrowBack,
+      IconForward = IconMaterialArrowForward,
+      Component = Line,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const navigate = isEnvironment('browser') && useNavigate();
+  const IconButtonProps = {
+    color: 'inherit'
+  };
+  const navigation = (back || forward) && /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    fullWidth: true
+  }, back ? /*#__PURE__*/React.createElement(Tooltip, {
+    name: (back?.name !== undefined ? back.name : back?.label) || 'Back'
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => navigate(back?.to)
+  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBack, null))) : /*#__PURE__*/React.createElement("span", null), forward ? /*#__PURE__*/React.createElement(Tooltip, {
+    name: (forward?.name !== undefined ? forward.name : forward?.label) || 'Forward'
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => navigate(forward?.to)
+  }, IconButtonProps), /*#__PURE__*/React.createElement(IconForward, null))) : /*#__PURE__*/React.createElement("span", null));
+  const header = !noHeader && (navigation || name) && /*#__PURE__*/React.createElement(Line, {
+    gap: 2,
+    direction: "column",
+    fullWidth: true
+  }, navigation, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center",
+    justify: "center",
+    fullWidth: true
+  }, is('string', name) ? /*#__PURE__*/React.createElement(Type, {
+    version: "t1",
+    color: "inherit",
+    align: "center",
+    className: classes.name
+  }, name) : name));
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    gap: 4,
+    direction: "column",
+    justify: "unset",
+    align: "unset",
+    fullWidth: true,
+    flex: true,
+    className: classNames([staticClassName('Page', theme) && ['onesy-Page-root'], className, classes.root])
+  }, other), header, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "column",
+    justify: "unset",
+    align: "unset",
+    fullWidth: true,
+    flex: true
+  }, children));
+});
+Page.displayName = 'onesy-Page';
+export default Page;

package/esm/Page/index.js

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

package/esm/PageTransition/PageTransition.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["add", "classNames", "duration", "Component", "className", "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 { useLocation } from 'react-router-dom';
+import { hash } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  '@keyframes fadeIn': {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  },
+  '@keyframes fadeOut': {
+    from: {
+      opacity: 1
+    },
+    to: {
+      opacity: 0
+    }
+  },
+  root: {},
+  in: {
+    animation: '$fadeIn 0.24s forwards'
+  },
+  out: {
+    animation: '$fadeOut 0.24s forwards'
+  }
+}), {
+  name: 'onesy-PageTransition'
+});
+const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPageTransition?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const {
+      add,
+      classNames: classNames_,
+      duration = 254,
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const location = useLocation();
+  const [locationUsed, setLocationUsed] = React.useState(location);
+  const [transition, setTransition] = React.useState(add ? 'in' : undefined);
+  const refs = {
+    location: React.useRef(location),
+    transition: React.useRef(transition),
+    inProgress: React.useRef(false),
+    timeout: React.useRef(undefined),
+    duration: React.useRef(duration)
+  };
+  refs.location.current = location;
+  refs.transition.current = transition;
+  refs.duration.current = duration;
+  const classNamesToUse = {
+    in: classNames_?.in || classes.in,
+    out: classNames_?.out || classes.out
+  };
+  const hashLocation = React.useCallback(value => {
+    return hash([value.hash, value.pathname, value.search]);
+  }, []);
+  const onUpdate = React.useCallback(async () => {
+    if (refs.inProgress.current) return;
+    if (hashLocation(location) !== hashLocation(locationUsed)) {
+      setTransition('out');
+      clearTimeout(refs.timeout.current);
+      refs.timeout.current = setTimeout(() => {
+        setLocationUsed(refs.location.current);
+        setTransition('in');
+        refs.inProgress.current = false;
+      }, refs.duration.current);
+    }
+  }, [location, locationUsed]);
+  React.useEffect(() => {
+    onUpdate();
+  }, [location, locationUsed]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    direction: "column",
+    align: "unset",
+    justify: "unset",
+    flex: true,
+    fullWidth: true,
+    Component: Component,
+    className: classNames([staticClassName('PageTransition', theme) && [`onesy-PageTransition-root`, `onesy-PageTransition-transition-${transition}`], className, classes.root, classNamesToUse[transition]])
+  }, other), /*#__PURE__*/React.cloneElement(children, {
+    location: locationUsed
+  }));
+});
+PageTransition.displayName = 'onesy-PageTransition';
+export default PageTransition;