@onesy/ui-react 1.0.0

package/esm/Tooltip/Tooltip.js

@@ -0,0 +1,453 @@
+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", "open", "openDefault", "name", "label", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "elevation", "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 { clamp, is, isEnvironment } from '@onesy/utils';
+import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
+import GrowElement from '../Grow';
+import ModalElement from '../Modal';
+import AppendElement from '../Append';
+import SurfaceElement from '../Surface';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    inset: '0px auto auto 0px'
+  },
+  nameRoot: {
+    pointerEvents: 'all'
+    // whiteSpace: 'nowrap'
+  },
+  nameRoot_position_top: {
+    paddingBlock: theme.methods.space.value(2, 'px')
+  },
+  nameRoot_position_bottom: {
+    paddingBlock: theme.methods.space.value(2, 'px')
+  },
+  nameRoot_position_left: {
+    paddingInline: theme.methods.space.value(2, 'px')
+  },
+  nameRoot_position_right: {
+    paddingInline: theme.methods.space.value(2, 'px')
+  },
+  nameRoot_noMargin: {
+    padding: '0'
+  },
+  name: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
+    borderRadius: `${clamp(theme.shape.radius.unit / 2, 0, 8)}px`,
+    padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
+    lineHeight: '1.455'
+  }),
+  arrow: {
+    '&::before': {
+      content: "''",
+      width: '8px',
+      height: '8px',
+      background: 'inherit',
+      position: 'absolute',
+      zIndex: '0'
+    }
+  },
+  arrow_position_top_alignment_start: {
+    '&::before': {
+      bottom: '-4px',
+      left: 'clamp(11px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_top_alignment_center: {
+    '&::before': {
+      bottom: '-4px',
+      left: '50%',
+      transform: 'translate(-50%, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_top_alignment_end: {
+    '&::before': {
+      bottom: '-4px',
+      right: 'clamp(11px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_bottom_alignment_start: {
+    '&::before': {
+      top: '-4px',
+      left: 'clamp(11px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_bottom_alignment_center: {
+    '&::before': {
+      top: '-4px',
+      left: '50%',
+      transform: 'translate(-50%, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_bottom_alignment_end: {
+    '&::before': {
+      top: '-4px',
+      right: 'clamp(11px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_left_alignment_start: {
+    '&::before': {
+      right: '-4px',
+      top: 'clamp(5.4px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_left_alignment_center: {
+    '&::before': {
+      right: '-4px',
+      top: '50%',
+      transform: 'translate(0, -50%) rotate(45deg)'
+    }
+  },
+  arrow_position_left_alignment_end: {
+    '&::before': {
+      right: '-4px',
+      bottom: 'clamp(5.4px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_right_alignment_start: {
+    '&::before': {
+      left: '-4px',
+      top: 'clamp(5.4px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  arrow_position_right_alignment_center: {
+    '&::before': {
+      left: '-4px',
+      top: '50%',
+      transform: 'translate(0, -50%) rotate(45deg)'
+    }
+  },
+  arrow_position_right_alignment_end: {
+    '&::before': {
+      left: '-4px',
+      bottom: 'clamp(5.4px, 14%, 24px)',
+      transform: 'translate(0, 0) rotate(45deg)'
+    }
+  },
+  // maxWidth
+  maxWidth_xxs: {
+    maxWidth: `320px`
+  },
+  maxWidth_xs: {
+    maxWidth: `400px`
+  },
+  maxWidth_sm: {
+    maxWidth: `480px`
+  },
+  maxWidth_rg: {
+    maxWidth: `560px`
+  },
+  maxWidth_lg: {
+    maxWidth: `800px`
+  },
+  maxWidth_xl: {
+    maxWidth: `1120px`
+  },
+  maxWidth_xxl: {
+    maxWidth: `1360px`
+  },
+  maxWidth_unset: {
+    maxWidth: `unset`
+  },
+  fullWidth: {
+    maxWidth: `${(isEnvironment('browser') ? window.innerWidth : 1400) - +theme.methods.space.value('rg', '', 1)}px`
+  },
+  nowrap: {
+    whiteSpace: 'nowrap'
+  }
+}), {
+  name: 'onesy-Tooltip'
+});
+const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTooltip?.props?.default), props_), [props_]);
+  const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
+  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
+  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const {
+      tonal = true,
+      color = 'inverted',
+      open: open_,
+      openDefault,
+      name,
+      label: label_,
+      parent,
+      position = 'bottom',
+      switch: switch_ = true,
+      alignment = 'center',
+      portal = true,
+      fullWidth,
+      maxWidth = 'unset',
+      arrow,
+      anchor: anchor_,
+      anchorElement,
+      noMargin,
+      classNameSwitch,
+      transformOrigin,
+      transformOriginSwitch,
+      transformOriginRtl,
+      transformOriginRtlSwitch,
+      click,
+      touch: touch_ = true,
+      longPress: longPress_ = false,
+      hover: hover_ = true,
+      focus: focus_ = false,
+      inset,
+      nowrap,
+      follow,
+      interactive,
+      onOpen: onOpen_,
+      onClose: onClose_,
+      onExited,
+      TransitionComponent = Grow,
+      TransitionComponentProps,
+      AppendProps,
+      ModalProps,
+      LabelProps,
+      // other
+      elevation,
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const [init, setInit] = React.useState(false);
+  const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
+  const [hover, setHover] = React.useState(false);
+  const [touch, setTouch] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const [longPress, setLongPress] = React.useState(false);
+  const [anchor, setAnchor] = React.useState(anchor_);
+  const [inProp, setInProp] = React.useState(open_);
+  const refs = {
+    open: React.useRef(false),
+    inProp: React.useRef(inProp),
+    longPress: React.useRef(false),
+    longPressTimer: React.useRef(undefined),
+    props: React.useRef(undefined)
+  };
+  refs.props.current = props;
+  refs.open.current = open;
+  refs.inProp.current = inProp;
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    name: {},
+    nameRoot: {}
+  };
+  const label = name !== undefined ? name : label_;
+  const onMouseDown = React.useCallback(event => {
+    if (longPress_) refs.longPressTimer.current = setTimeout(() => setLongPress(true), 700);
+    if (is('function', children?.props.onMouseDown)) children.props.onMouseDown(event);
+  }, []);
+  const onMouseUp = React.useCallback(event => {
+    if (longPress_) {
+      clearTimeout(refs.longPressTimer.current);
+      setLongPress(false);
+    }
+    if (is('function', children?.props.onMouseUp)) children.props.onMouseUp(event);
+  }, []);
+  const onMouseEnter = React.useCallback(event => {
+    if (hover_) setHover(true);
+    if (is('function', children?.props.onMouseEnter)) children.props.onMouseEnter(event);
+  }, []);
+  const onMouseLeave = React.useCallback(event => {
+    if (refs.longPress.current) {
+      setLongPress(false);
+      if (refs.props.current.open === undefined) {
+        if (!inProp) onClose();else setInProp(false);
+      }
+    }
+    if (hover_) setHover(false);
+    if (is('function', children?.props.onMouseLeave)) children.props.onMouseLeave(event);
+  }, []);
+  const onTouchStart = React.useCallback(event => {
+    if (touch_) setTouch(true);
+    if (is('function', children?.props.onTouchStart)) children.props.onTouchStart(event);
+  }, []);
+  const onTouchEnd = React.useCallback(event => {
+    if (touch_) setTouch(false);
+    if (is('function', children?.props.onTouchEnd)) children.props.onTouchEnd(event);
+  }, []);
+  const onFocus = React.useCallback(event => {
+    if (focus_) setFocus(true);
+    if (is('function', children?.props.onFocus)) children.props.onFocus(event);
+  }, []);
+  const onBlur = React.useCallback(event => {
+    if (refs.longPress.current) {
+      setLongPress(false);
+      if (refs.props.current.open === undefined) {
+        if (!inProp) onClose();else setInProp(false);
+      }
+    }
+    if (focus_) setFocus(false);
+    if (is('function', children?.props.onBlur)) children.props.onBlur(event);
+  }, []);
+  const onMouseMove = React.useCallback(event => {
+    if (follow) {
+      setAnchor({
+        x: event.clientX,
+        y: event.clientY,
+        width: 10,
+        height: 20
+      });
+    }
+    if (is('function', children?.props.onMouseMove)) children.props.onMouseMove(event);
+  }, []);
+  const onOpen = () => {
+    if (!open) setOpen(true);
+    if (!inProp) setInProp(true);
+    if (is('function', onOpen_) && !open) onOpen_();
+  };
+  const onClose = () => {
+    setOpen(false);
+    if (is('function', onClose_)) onClose_();
+    if (is('function', onExited)) onExited();
+  };
+  const onPreClose = () => {
+    if (!refs.inProp.current) onClose();else setInProp(false);
+  };
+  const onClick = React.useCallback(event => {
+    !refs.open.current ? onOpen() : onPreClose();
+  }, [onOpen, onPreClose]);
+  React.useEffect(() => {
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    setAnchor(anchor_);
+  }, [anchor_]);
+  React.useEffect(() => {
+    if (init) {
+      refs.open.current = open_;
+      if (open_) onOpen();else onPreClose();
+    }
+  }, [open_]);
+  React.useEffect(() => {
+    if (init && refs.props.current.open === undefined) {
+      refs.open.current = touch || hover || longPress;
+      if (refs.open.current) onOpen();else {
+        if (!inProp) onClose();else setInProp(false);
+      }
+    }
+  }, [touch, hover, longPress]);
+  React.useEffect(() => {
+    if (init && refs.props.current.open === undefined) {
+      refs.open.current = focus;
+      if (refs.open.current) onOpen();else {
+        if (!inProp) onClose();else setInProp(false);
+      }
+    }
+  }, [focus]);
+  React.useEffect(() => {
+    if (init) {
+      if (longPress) refs.open.current = longPress;
+      refs.longPress.current = longPress;
+      if (refs.open.current) onOpen();
+    }
+  }, [longPress]);
+  const resolvePosition = function () {
+    let switched = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (!switched) return position;
+    if (position === 'top') return 'bottom';
+    if (position === 'left') return 'right';
+    if (position === 'right') return 'left';
+    if (position === 'bottom') return 'top';
+  };
+  return /*#__PURE__*/React.createElement(Append, _extends({
+    open: open,
+    portal: portal,
+    anchor: anchor,
+    anchorElement: anchorElement,
+    position: position,
+    alignment: alignment,
+    switch: switch_,
+    inset: inset,
+    parent: parent,
+    padding: [8, 8]
+  }, AppendProps, {
+    element: items => {
+      const rtl = theme.direction === 'rtl';
+      const switched = items.values.switch;
+      if (!rtl) {
+        styles.nameRoot.transformOrigin = (!switched ? transformOrigin : transformOriginSwitch) || transformOrigin;
+      } else {
+        styles.nameRoot.transformOrigin = (!switched ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
+      }
+      if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
+      return /*#__PURE__*/React.createElement(Modal, _extends({
+        ref: item => {
+          if (ref) {
+            if (is('function', ref)) ref(item);else ref.current = item;
+          }
+          items.ref.current = item;
+        },
+        open: open
+      }, interactive && {
+        onMouseEnter,
+        onTouchStart,
+        onMouseLeave,
+        onTouchEnd
+      }, {
+        modalWrapper: false,
+        portal: false,
+        background: false,
+        freezeScroll: false,
+        focus: false,
+        disableKeyboardClose: true
+      }, ModalProps, {
+        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-root', open && `onesy-Button-open`, touch && 'onesy-Tooltip-touch', longPress && 'onesy-Tooltip-long-press', hover && 'onesy-Tooltip-hover', focus && 'onesy-Tooltip-focus', `onesy-Tooltip-position-${position}`], className, classes.root, ModalProps?.className, switched && classNameSwitch]),
+        style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps?.style)
+      }, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
+        in: inProp,
+        onExited: onClose,
+        add: true,
+        removeOnExited: true
+      }, TransitionComponentProps), /*#__PURE__*/React.createElement("div", {
+        role: "tooltip",
+        "aria-label": is('simple', label) ? label : undefined,
+        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-root'], classes.nameRoot, classes[`nameRoot_position_${resolvePosition(items.values.switch)}`], classes[`maxWidth_${maxWidth}`], noMargin && classes.nameRoot_noMargin, fullWidth && classes.fullWidth, nowrap && classes.nowrap]),
+        style: styles.nameRoot
+      }, is('simple', label) ? /*#__PURE__*/React.createElement(Surface, _extends({
+        tonal: tonal,
+        color: color
+      }, LabelProps, {
+        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
+        style: _objectSpread(_objectSpread({}, styles.name), LabelProps?.style)
+      }), /*#__PURE__*/React.createElement("span", {
+        className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-text']])
+      }, label)) : /*#__PURE__*/React.cloneElement(label, {
+        className: classNames([label?.props?.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
+      }))));
+    }
+  }), children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
+    onMouseMove
+  }, click && {
+    onClick: event => {
+      if (is('function', children?.props?.onClick)) children?.props?.onClick(event);
+      onClick(event);
+    }
+  }), {}, {
+    onFocus,
+    onBlur,
+    onMouseDown,
+    onMouseUp,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    onTouchEnd
+  }))));
+});
+Tooltip.displayName = 'onesy-Tooltip';
+export default Tooltip;

package/esm/Tooltip/index.js

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

package/esm/TopAppBar/TopAppBar.js

@@ -0,0 +1,220 @@
+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", "center", "title", "start", "end", "position", "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 { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import SurfaceElement from '../Surface';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    zIndex: theme.z_index.app_bar,
+    width: '100%',
+    paddingInline: theme.methods.space.value(0.5, 'px')
+  },
+  wrapper: {
+    width: '100%'
+  },
+  // Size
+  version_small_size_small: {
+    height: '56px'
+  },
+  version_small_size_regular: {
+    height: '64px'
+  },
+  version_small_size_large: {
+    height: '72px'
+  },
+  version_center_size_small: {
+    height: '56px'
+  },
+  version_center_size_regular: {
+    height: '64px'
+  },
+  version_center_size_large: {
+    height: '72px'
+  },
+  version_medium_size_small: {
+    height: '104px'
+  },
+  version_medium_size_regular: {
+    height: '112px'
+  },
+  version_medium_size_large: {
+    height: '120px'
+  },
+  version_large_size_small: {
+    height: '144px'
+  },
+  version_large_size_regular: {
+    height: '152px'
+  },
+  version_large_size_large: {
+    height: '160px'
+  },
+  aside: {
+    flex: '0 0 auto',
+    width: 'auto'
+  },
+  title: {
+    flex: '1 1 auto',
+    textAlign: 'start',
+    marginInline: '4px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  title_version_small: {
+    marginInline: '4px'
+  },
+  title_version_center: {
+    textAlign: 'center',
+    marginInline: '4px'
+  },
+  title_version_medium: {
+    marginInline: '12px',
+    marginBottom: '20px',
+    width: 'calc(100% - 24px)'
+  },
+  title_version_large: {
+    textAlign: 'start',
+    marginInline: '12px',
+    marginBottom: '28px',
+    width: 'calc(100% - 24px)'
+  },
+  title_no_start: {
+    marginInlineStart: '12px'
+  },
+  position_relative: {
+    position: 'relative'
+  },
+  position_absolute: {
+    position: 'absolute'
+  },
+  position_static: {
+    position: 'static'
+  },
+  position_fixed: {
+    position: 'fixed'
+  },
+  position_sticky: {
+    position: 'sticky',
+    top: '8px'
+  },
+  position_unset: {
+    position: 'unset'
+  },
+  center: {
+    margin: '8px auto'
+  },
+  center_absolute: {
+    top: '8px',
+    left: '50%',
+    transform: 'translateX(-50%)'
+  }
+}), {
+  name: 'onesy-TopAppBar'
+});
+const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTopAppBar?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'small',
+      size = 'regular',
+      center = true,
+      title: title_,
+      start: start_,
+      end: end_,
+      position,
+      Component = 'div',
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const start = React.Children.toArray(start_).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
+    key: index,
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+    color: item.props.color !== undefined ? item.props.color : color,
+    version: item.props.version !== undefined ? item.props.version : 'filled',
+    elevation: item.props.elevation !== undefined ? item.props.elevation : false
+  }));
+  const end = React.Children.toArray(end_).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
+    key: index,
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+    color: item.props.color !== undefined ? item.props.color : color,
+    version: item.props.version !== undefined ? item.props.version : 'filled',
+    elevation: item.props.elevation !== undefined ? item.props.elevation : false
+  }));
+  const classNameTitle = classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-title'], classes.title, classes[`title_version_${version}`], version === 'small' && !start.length && classes.title_no_start]);
+  const classNameTitleMedium = classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-title', 'onesy-TopAppBar-title-medium'], classes.title, classes[`title_version_${version}`]]);
+  let title;
+  if (title_) {
+    if (['small', 'center'].includes(version)) {
+      title = is('simple', title_) ? /*#__PURE__*/React.createElement(Type, {
+        version: "t1",
+        className: classNameTitle
+      }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
+        tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
+        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        className: classNameTitle
+      });
+    } else {
+      title = is('simple', title_) ? /*#__PURE__*/React.createElement(Type, {
+        version: version === 'medium' ? 'h3' : 'h2',
+        className: classNameTitleMedium
+      }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
+        tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
+        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        className: classNameTitleMedium
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: ref,
+    color: color,
+    tonal: tonal,
+    gap: 0,
+    justify: "space-between",
+    Component: Line,
+    AdditionalProps: {
+      Component
+    },
+    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-root', `onesy-TopAppBar-version-${version}`, `onesy-TopAppBar-size-${size}`], className, classes.root, position && classes[`position_${position}`], center && classes[`center${['absolute', 'fixed'].includes(position) ? '_absolute' : ''}`]])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    gap: 0,
+    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-wrapper'], classes.wrapper, classes[`version_small_size_${size}`]])
+  }, !!start.length && /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    align: "center",
+    justify: "flex-start",
+    gap: 0,
+    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-start`], classes.aside])
+  }, start), ['small', 'center'].includes(version) && title, !!end.length && /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    align: "center",
+    justify: "flex-end",
+    gap: 0,
+    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-end`], classes.aside])
+  }, end)), ['medium', 'large'].includes(version) && /*#__PURE__*/React.createElement(Line, {
+    justify: "flex-end",
+    gap: 0
+  }, title));
+});
+TopAppBar.displayName = 'onesy-TopAppBar';
+export default TopAppBar;

package/esm/TopAppBar/index.js

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

package/esm/Transition/Context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const TransitionContext = /*#__PURE__*/React.createContext(undefined);
+export default TransitionContext;