@dreamcommerce/aurora 3.0.0-9 → 3.0.0-90

package/build/cjs/packages/aurora/src/components/select/components/select_content.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var input = require('../../input/input.js');
+var SelectPrimitive = require('@radix-ui/react-select');
+var search_icon = require('../../../assets/icons/search_icon.js');
+var select_item = require('./select_item.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "options", "position", "hasSearch", "searchPlaceholder", "innerAdditionalContent", "filterTerm", "setFilterTerm"];
+var SelectContent = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    options = _ref.options,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'popper' : _ref$position,
+    hasSearch = _ref.hasSearch,
+    searchPlaceholder = _ref.searchPlaceholder,
+    innerAdditionalContent = _ref.innerAdditionalContent,
+    filterTerm = _ref.filterTerm,
+    setFilterTerm = _ref.setFilterTerm,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var inputRef = React.useRef(null);
+  var filteredOptions = options.filter(function (option) {
+    var _filterTerm$toLowerCa;
+    return option.label.toLowerCase().includes((_filterTerm$toLowerCa = filterTerm === null || filterTerm === void 0 ? void 0 : filterTerm.toLowerCase()) !== null && _filterTerm$toLowerCa !== void 0 ? _filterTerm$toLowerCa : '');
+  });
+  React.useEffect(function () {
+    requestAnimationFrame(function () {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    });
+  }, [filterTerm]);
+  return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Portal, null, /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Content, _rollupPluginBabelHelpers.objectSpread2({
+    ref: ref,
+    className: cn.cn('aurora-relative aurora-z-50 aurora-max-h-96 aurora-min-w-[8rem] aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-bg-neutral-0 aurora-text-s aurora-shadow-m data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', position === 'popper' && 'data-[side=bottom]:aurora-translate-y-1 data-[side=left]:-aurora-translate-x-1 data-[side=right]:aurora-translate-x-1 data-[side=top]:-aurora-translate-y-1', className),
+    position: position
+  }, props), /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Viewport, {
+    className: cn.cn('aurora-p-1', position === 'popper' && 'aurora-h-[var(--radix-select-trigger-height)] aurora-w-full aurora-min-w-[var(--radix-select-trigger-width)]')
+  }, innerAdditionalContent && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-p-2"
+  }, innerAdditionalContent), hasSearch && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-p-2"
+  }, /*#__PURE__*/React__default['default'].createElement(input.Input, {
+    type: "text",
+    preElement: /*#__PURE__*/React__default['default'].createElement(search_icon.SearchLineIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+    }),
+    value: filterTerm,
+    tabIndex: 0,
+    onChange: function onChange(e) {
+      e.stopPropagation();
+      setFilterTerm === null || setFilterTerm === void 0 ? void 0 : setFilterTerm(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
+    placeholder: searchPlaceholder,
+    ref: inputRef
+  }))), filteredOptions.map(function (option) {
+    return /*#__PURE__*/React__default['default'].createElement(select_item.SelectItem, {
+      key: "select-item-".concat(option.value),
+      value: option.value
+    }, option.label);
+  }))));
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+exports.SelectContent = SelectContent;
+//# sourceMappingURL=select_content.js.map

package/build/cjs/packages/aurora/src/components/select/components/select_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/select/components/select_item.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var check_icon = require('../../../assets/icons/check_icon.js');
+var SelectPrimitive = require('@radix-ui/react-select');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className"];
+var SelectItem = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    className: cn.cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-py-1.5 aurora-pl-9 aurora-pr-8 aurora-text-sm aurora-outline-none focus:aurora-bg-accent focus:aurora-text-accent-foreground data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50 data-[state=checked]:aurora-font-semibold data-[highlighted]:aurora-font-semibold data-[highlighted]:aurora-bg-hover', className)
+  }, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.ItemIndicator, {
+    className: "-aurora-ml-7 aurora-mr-2"
+  }, /*#__PURE__*/React__default['default'].createElement(check_icon.CheckLineIcon, {
+    className: "aurora-h-5 aurora-w-5"
+  })), /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.ItemText, null, children));
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+exports.SelectItem = SelectItem;
+//# sourceMappingURL=select_item.js.map

package/build/cjs/packages/aurora/src/components/select/components/select_item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var SelectPrimitive = require('@radix-ui/react-select');
+var arrow_down_s_fill = require('../../../assets/icons/arrow_down_s_fill.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "hasError", "children"];
+var SelectTrigger = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    hasError = _ref.hasError,
+    children = _ref.children,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Trigger, _rollupPluginBabelHelpers.objectSpread2({
+    ref: ref,
+    className: cn.cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-line-clamp-1 focus:aurora-border-active focus:aurora-border-2 active:aurora-border-active active:aurora-border-2', {
+      '!aurora-border-danger aurora-border-2': hasError
+    }, className)
+  }, props), children, /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_fill.ArrowDownSFillIcon, {
+    className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+  })));
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+exports.SelectTrigger = SelectTrigger;
+//# sourceMappingURL=select_trigger.js.map

package/build/cjs/packages/aurora/src/components/select/components/select_trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/select/components/select_value.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SelectPrimitive = require('@radix-ui/react-select');
+
+var SelectValue = SelectPrimitive.Value;
+
+exports.SelectValue = SelectValue;
+//# sourceMappingURL=select_value.js.map

package/build/cjs/packages/aurora/src/components/select/components/select_value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/select/select.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var SelectPrimitive = require('@radix-ui/react-select');
+var close_circle_fill_icon = require('../../assets/icons/close_circle_fill_icon.js');
+var select_content = require('./components/select_content.js');
+var select_trigger = require('./components/select_trigger.js');
+var select_value = require('./components/select_value.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "hasError", "onValueChange"];
+var Select = function Select(_ref) {
+  var _options$find;
+  var children = _ref.children,
+    id = _ref.id,
+    defaultValue = _ref.defaultValue,
+    options = _ref.options,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    hasSearch = _ref.hasSearch,
+    searchPlaceholder = _ref.searchPlaceholder,
+    hasClearValueButton = _ref.hasClearValueButton,
+    innerAdditionalContent = _ref.innerAdditionalContent,
+    hasError = _ref.hasError,
+    onValueChange = _ref.onValueChange,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(''),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    filterTerm = _useState2[0],
+    setFilterTerm = _useState2[1];
+  var _useState3 = React.useState(defaultValue),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    selectedValue = _useState4[0],
+    setSelectedValue = _useState4[1];
+  var clearFilterInputOnClose = function clearFilterInputOnClose(openState) {
+    if (hasSearch && !openState) setFilterTerm('');
+  };
+  React.useEffect(function () {
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
+  }, [selectedValue]);
+  return /*#__PURE__*/React__default['default'].createElement(SelectPrimitive.Root, _rollupPluginBabelHelpers.objectSpread2({
+    value: selectedValue,
+    defaultValue: defaultValue,
+    onValueChange: setSelectedValue,
+    disabled: disabled,
+    onOpenChange: function onOpenChange(openState) {
+      return clearFilterInputOnClose(openState);
+    }
+  }, props), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-relative aurora-flex aurora-items-center aurora-flex-col"
+  }, /*#__PURE__*/React__default['default'].createElement(select_trigger.SelectTrigger, {
+    id: id,
+    hasError: hasError
+  }, /*#__PURE__*/React__default['default'].createElement(select_value.SelectValue, {
+    placeholder: placeholder
+  }, selectedValue ? (_options$find = options.find(function (option) {
+    return option.value === selectedValue;
+  })) === null || _options$find === void 0 ? void 0 : _options$find.label : '')), selectedValue && hasClearValueButton && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-absolute aurora-top-3 aurora-right-8 aurora-z-10",
+    onClick: function onClick() {
+      return setSelectedValue('');
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(close_circle_fill_icon.CloseCircleFillIcon, {
+    className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
+  })))), /*#__PURE__*/React__default['default'].createElement(select_content.SelectContent, {
+    options: options,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    innerAdditionalContent: innerAdditionalContent,
+    filterTerm: filterTerm,
+    setFilterTerm: setFilterTerm
+  }));
+};
+Select.displayName = SelectPrimitive.Root.displayName;
+
+exports.Select = Select;
+//# sourceMappingURL=select.js.map

package/build/cjs/packages/aurora/src/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/sidebar/components/persistent_sidebar.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var use_sidebar = require('../hooks/use_sidebar.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "width", "children", "TriggerButton", "side"];
+var PersistentSidebar = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    width = _ref.width,
+    children = _ref.children,
+    TriggerButton = _ref.TriggerButton,
+    side = _ref.side,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useSidebar = use_sidebar.useSidebar(),
+    open = _useSidebar.open;
+  var sidebarRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return sidebarRef.current;
+  });
+  return /*#__PURE__*/React__default['default'].createElement("aside", _rollupPluginBabelHelpers.objectSpread2({
+    "aria-expanded": open,
+    ref: sidebarRef,
+    className: cn.cn('aurora-relative aurora-transition-all aurora-duration-200', className),
+    style: {
+      width: open ? width : 0,
+      maxWidth: open ? width : 0,
+      minWidth: open ? width : 0
+    }
+  }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn('aurora-overflow-auto aurora-h-full aurora-w-full')
+  }, children));
+});
+PersistentSidebar.displayName = 'PersistentSidebar';
+
+exports.PersistentSidebar = PersistentSidebar;
+//# sourceMappingURL=persistent_sidebar.js.map

package/build/cjs/packages/aurora/src/components/sidebar/components/persistent_sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/sidebar/components/sidebar_toggle.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_sidebar = require('../hooks/use_sidebar.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SidebarToggle = function SidebarToggle(_ref) {
+  var children = _ref.children;
+  var _useSidebar = use_sidebar.useSidebar(),
+    toggle = _useSidebar.toggle;
+  return /*#__PURE__*/React__default['default'].createElement("button", {
+    onClick: toggle
+  }, children);
+};
+
+exports.SidebarToggle = SidebarToggle;
+//# sourceMappingURL=sidebar_toggle.js.map

package/build/cjs/packages/aurora/src/components/sidebar/components/sidebar_toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var sidebar_constants = require('../sidebar_constants.js');
+var use_sidebar = require('../hooks/use_sidebar.js');
+var reactDom = require('react-dom');
+var use_click_outside = require('../../../hooks/use_click_outside.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var TemporalSidebar = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$container = _ref.container,
+    container = _ref$container === void 0 ? document.body : _ref$container,
+    className = _ref.className,
+    width = _ref.width,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? sidebar_constants.SIDEBAR_SIDE.left : _ref$side,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
+    TriggerButton = _ref.TriggerButton;
+  var _useSidebar = use_sidebar.useSidebar(),
+    open = _useSidebar.open,
+    close = _useSidebar.close,
+    defaultOpen = _useSidebar.defaultOpen;
+  var sidebarRef = React.useRef(null);
+  var _useState = React.useState(!open),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    destroyed = _useState2[0],
+    setDestroyed = _useState2[1];
+  var setTransitionClsses = function setTransitionClsses() {
+    var _sidebarRef$current, _sidebarRef$current2, _sidebarRef$current3, _sidebarRef$current4, _sidebarRef$current5, _sidebarRef$current6, _sidebarRef$current7;
+    (_sidebarRef$current = sidebarRef.current) === null || _sidebarRef$current === void 0 ? void 0 : _sidebarRef$current.classList.remove('-aurora-translate-x-full');
+    (_sidebarRef$current2 = sidebarRef.current) === null || _sidebarRef$current2 === void 0 ? void 0 : _sidebarRef$current2.classList.remove('aurora-translate-x-full');
+    (_sidebarRef$current3 = sidebarRef.current) === null || _sidebarRef$current3 === void 0 ? void 0 : _sidebarRef$current3.classList.remove('aurora-translate-x-0');
+    if (open && side == sidebar_constants.SIDEBAR_SIDE.left) (_sidebarRef$current4 = sidebarRef.current) === null || _sidebarRef$current4 === void 0 ? void 0 : _sidebarRef$current4.classList.add('aurora-translate-x-0');
+    if (!open && side == sidebar_constants.SIDEBAR_SIDE.left) (_sidebarRef$current5 = sidebarRef.current) === null || _sidebarRef$current5 === void 0 ? void 0 : _sidebarRef$current5.classList.add('-aurora-translate-x-full');
+    if (open && side == sidebar_constants.SIDEBAR_SIDE.right) (_sidebarRef$current6 = sidebarRef.current) === null || _sidebarRef$current6 === void 0 ? void 0 : _sidebarRef$current6.classList.add('aurora-translate-x-0');
+    if (!open && side == sidebar_constants.SIDEBAR_SIDE.right) (_sidebarRef$current7 = sidebarRef.current) === null || _sidebarRef$current7 === void 0 ? void 0 : _sidebarRef$current7.classList.add('aurora-translate-x-full');
+  };
+  use_click_outside.useClickOutside({
+    refs: [sidebarRef],
+    callback: function callback() {
+      if (closeOnOutsideClick && open) close();
+    }
+  });
+  React.useEffect(function () {
+    if (!defaultOpen) return;
+    setTransitionClsses();
+  }, []);
+  React.useLayoutEffect(function () {
+    if (open) setDestroyed(false);
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        return setTransitionClsses();
+      });
+    });
+  }, [open]);
+  var handleTransitionEnd = function handleTransitionEnd(ev) {
+    if (ev.propertyName === 'transform' && ev.currentTarget === sidebarRef.current) setDestroyed(!open);
+  };
+  React.useEffect(function () {
+    var sidebar = sidebarRef.current;
+    sidebar === null || sidebar === void 0 ? void 0 : sidebar.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      sidebar === null || sidebar === void 0 ? void 0 : sidebar.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [open]);
+  React.useImperativeHandle(ref, function () {
+    return sidebarRef.current;
+  });
+  if (destroyed) return null;
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full aurora-overflow-hidden', {
+      'aurora-left-0': side === sidebar_constants.SIDEBAR_SIDE.left,
+      'aurora-right-0': side === sidebar_constants.SIDEBAR_SIDE.right
+    }),
+    style: {
+      width: width ? width : 'auto',
+      maxWidth: width ? width : 'auto',
+      minWidth: width ? width : 'auto'
+    }
+  }, TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default['default'].createElement("aside", {
+    ref: sidebarRef,
+    className: cn.cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-duration-300 aurora-transition-[transform]', {
+      'aurora-translate-x-full': side === sidebar_constants.SIDEBAR_SIDE.right,
+      '-aurora-translate-x-full': side === sidebar_constants.SIDEBAR_SIDE.left
+    }, className)
+  }, children)), container);
+});
+TemporalSidebar.displayName = 'TemporalSidebar';
+
+exports.TemporalSidebar = TemporalSidebar;
+//# sourceMappingURL=temporal_sidebar.js.map

package/build/cjs/packages/aurora/src/components/sidebar/components/temporal_sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/sidebar/context/sidebar_prvider.js

@@ -4,58 +4,71 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var sidebar_constants = require('../sidebar_constants.js');
 var sidebar_context = require('./sidebar_context.js');
 
-var _excluded = ["onToggle", "open", "className", "style", "children", "persistentKey"];
 var SidebarProvider = function SidebarProvider(_ref) {
-  var onToggle = _ref.onToggle,
-    _ref$open = _ref.open,
-    openProp = _ref$open === void 0 ? true : _ref$open,
-    className = _ref.className,
-    style = _ref.style,
+  var open = _ref.open,
+    defaultOpen = _ref.defaultOpen,
+    onOpenChange = _ref.onOpenChange,
     children = _ref.children,
-    persistentKey = _ref.persistentKey,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+    storageKey = _ref.storageKey,
+    variant = _ref.variant;
   var setPersistedState = function setPersistedState(value) {
-    if (!persistentKey) return;
+    if (!storageKey) return;
     try {
-      localStorage.setItem(persistentKey, String(value));
+      localStorage.setItem(storageKey, String(value));
     } catch (error) {
       console.error('Failed to set persisted state', error);
     }
   };
-  var _React$useState = React.useState(openProp),
+  var hasPersistedState = function hasPersistedState() {
+    if (!storageKey) return false;
+    return localStorage.getItem(storageKey) !== null;
+  };
+  var getPersistedState = function getPersistedState() {
+    if (!storageKey || !hasPersistedState()) return;
+    try {
+      return localStorage.getItem(storageKey) === 'true';
+    } catch (error) {
+      console.error('Failed to get persisted state', error);
+    }
+    return undefined;
+  };
+  var initialOpen = hasPersistedState() ? getPersistedState() : variant === sidebar_constants.SIDEBAR_VARIANTS.persistent;
+  var _React$useState = React.useState(onOpenChange ? open !== null && open !== void 0 ? open : initialOpen : defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : initialOpen),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     _open = _React$useState2[0],
     _setOpen = _React$useState2[1];
-  React.useEffect(function () {
-    if (openProp !== undefined && openProp !== _open) setOpen(openProp);
-  }, [openProp]);
   React.useEffect(function () {
     setPersistedState(_open);
-  }, []);
-  var setOpen = function setOpen(open) {
-    var nextValue = typeof open === 'function' ? open(_open) : open;
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextValue);
-    _setOpen(nextValue);
-    setPersistedState(nextValue);
+  }, [_open]);
+  React.useEffect(function () {
+    if (onOpenChange) _setOpen(open !== null && open !== void 0 ? open : initialOpen);
+  }, [open]);
+  if (open !== undefined && onOpenChange === undefined) {
+    console.error('The controlled open state of the popover. Must be used in conjunction with onOpenChange.');
+  }
+  var setOpen = function setOpen(nextOpen) {
+    _setOpen(nextOpen);
+  };
+  var toggle = function toggle() {
+    onOpenChange ? onOpenChange(!_open) : setOpen(!_open);
   };
-  var toggleSidebar = function toggleSidebar() {
-    setOpen(function (open) {
-      return !open;
-    });
+  var close = function close() {
+    onOpenChange ? onOpenChange(false) : setOpen(false);
   };
   var contextValue = React.useMemo(function () {
     return {
       open: _open,
-      toggleSidebar: toggleSidebar
+      toggle: toggle,
+      close: close,
+      defaultOpen: defaultOpen
     };
-  }, [open, toggleSidebar]);
+  }, [_open, toggle]);
   return /*#__PURE__*/React.createElement(sidebar_context.SidebarContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.objectSpread2({
-    style: style
-  }, props), children));
+  }, children);
 };
 
 exports.SidebarProvider = SidebarProvider;

package/build/cjs/packages/aurora/src/components/sidebar/context/sidebar_prvider.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/sidebar/sidebar.js

@@ -4,56 +4,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var cn = require('../../utilities/cn.js');
-var use_sidebar = require('./hooks/use_sidebar.js');
 var sidebar_constants = require('./sidebar_constants.js');
-var sidebar_content = require('./components/sidebar_content.js');
-var sidebar_trigger = require('./components/sidebar_trigger.js');
+var persistent_sidebar = require('./components/persistent_sidebar.js');
+var sidebar_prvider = require('./context/sidebar_prvider.js');
+var temporal_sidebar = require('./components/temporal_sidebar.js');
 
-var _excluded = ["className", "children", "TriggerButton", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "side"];
-var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    _ref$TriggerButton = _ref.TriggerButton,
-    TriggerButton = _ref$TriggerButton === void 0 ? sidebar_trigger.SidebarTrigger : _ref$TriggerButton,
-    width = _ref.width,
-    minWidth = _ref.minWidth,
-    maxWidth = _ref.maxWidth,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height,
-    minHeight = _ref.minHeight,
-    maxHeight = _ref.maxHeight,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? sidebar_constants.SIDEBAR_SIDE.left : _ref$side,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useSidebar = use_sidebar.useSidebar(),
-    open = _useSidebar.open;
-  var sidebarRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return sidebarRef.current;
-  });
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.objectSpread2({
-    "aria-expanded": open,
-    ref: sidebarRef,
-    className: cn.cn(className),
-    style: {
-      width: open ? width : 0,
-      maxWidth: open ? width : 0,
-      minWidth: open ? width : 0,
-      height: height,
-      minHeight: minHeight,
-      maxHeight: maxHeight
-    }
-  }, props), TriggerButton ? /*#__PURE__*/React.createElement(TriggerButton, {
-    side: side
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: cn.cn('aurora-overflow-auto aurora-h-full aurora-w-full', {
-      'aurora-opacity-0': !open,
-      'aurora-opacity-100': open
-    })
-  }, /*#__PURE__*/React.createElement(sidebar_content.SidebarContent, null, children)));
-});
-Sidebar.displayName = 'Sidebar';
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "variant", "open", "onOpenChange", "defaultOpen", "storageKey"];
+var Sidebar = function Sidebar(_ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    defaultOpen = _ref.defaultOpen,
+    storageKey = _ref.storageKey,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default['default'].createElement(sidebar_prvider.SidebarProvider, {
+    variant: variant,
+    open: open,
+    onOpenChange: onOpenChange,
+    defaultOpen: defaultOpen,
+    storageKey: storageKey
+  }, variant === sidebar_constants.SIDEBAR_VARIANTS.persistent ? (/*#__PURE__*/React__default['default'].createElement(persistent_sidebar.PersistentSidebar, _rollupPluginBabelHelpers.objectSpread2({
+    variant: variant
+  }, rest), children)) : (/*#__PURE__*/React__default['default'].createElement(temporal_sidebar.TemporalSidebar, _rollupPluginBabelHelpers.objectSpread2({
+    variant: variant
+  }, rest), children)));
+};
 
 exports.Sidebar = Sidebar;
 //# sourceMappingURL=sidebar.js.map