@dreamcommerce/aurora 3.0.0-3 → 3.0.0-300

package/build/esm/packages/aurora/src/components/select/components/select_search.js

@@ -0,0 +1,28 @@
+import React, { useRef } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Input } from '../../input/input.js';
+import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
+import { usePreventSearchBlur } from '../hooks/use_prevent_search_blur.js';
+
+var _excluded = ["options"];
+var SelectSearch = function SelectSearch(_ref) {
+  var options = _ref.options,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = useRef(null);
+  var _usePreventSearchBlur = usePreventSearchBlur({
+      options: options,
+      inputRef: inputRef
+    }),
+    handleBlur = _usePreventSearchBlur.handleBlur;
+  return /*#__PURE__*/React.createElement(Input, _objectSpread2({
+    ref: inputRef,
+    type: "text",
+    preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+    }),
+    onBlur: handleBlur
+  }, props));
+};
+
+export { SelectSearch };
+//# sourceMappingURL=select_search.js.map

package/build/esm/packages/aurora/src/components/select/components/select_search.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;"}

package/build/esm/packages/aurora/src/components/select/components/select_trigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TSelectTriggerProps } from '../select_types';
+export declare const SelectTrigger: React.ForwardRefExoticComponent<TSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
+import { Trigger, Icon } from '@radix-ui/react-select';
+
+var _excluded = ["className", "hasError", "children", "clearValueButton"];
+var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    hasError = _ref.hasError,
+    children = _ref.children,
+    clearValueButton = _ref.clearValueButton,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Trigger, _objectSpread2({
+    ref: ref,
+    className: 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-visible:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-text-ellipsis [&>span]:aurora-whitespace-nowrap [&>span]:aurora-overflow-hidden focus-visible:aurora-border-active -visible:aurora-border-2 data-[state=open]:aurora-border-active data-[state=open]:aurora-border-2', {
+      '!aurora-border-danger aurora-border-2': hasError
+    }, className)
+  }, props), children, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-none aurora-items-center"
+  }, clearValueButton, /*#__PURE__*/React.createElement(Icon, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
+    className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+  }))));
+});
+SelectTrigger.displayName = Trigger.displayName;
+
+export { SelectTrigger };
+//# sourceMappingURL=select_trigger.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.d.ts

@@ -0,0 +1,4 @@
+import { TUsePreventSearchBlurProps } from "../select_types";
+export declare const usePreventSearchBlur: ({ options, inputRef }: TUsePreventSearchBlurProps) => {
+    handleBlur: () => void;
+};

package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js

@@ -0,0 +1,45 @@
+import { useMemo, useRef, useCallback, useLayoutEffect } from 'react';
+import { deepEqual } from '../../../../../../external/fast-equals/dist/esm/index.mjs.js';
+
+var BLUR_GUARD_TIMEOUT = 100;
+var usePreventSearchBlur = function usePreventSearchBlur(_ref) {
+  var options = _ref.options,
+    inputRef = _ref.inputRef;
+  // SHOPSVE-1360 (bardzo slaby hack)
+  // Radix w momencie usuniecia z dom aktualnie wybranego itemu przenosi focus na body
+  var blurGuardRef = useRef(false);
+  var handleBlur = useCallback(function () {
+    var _inputRef$current;
+    if (!blurGuardRef.current) return;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }, [inputRef]);
+  var optionsRef = useRef();
+  var timeoutRef = useRef();
+  // Uzycie useLayoutEffect ze wzgledu na to ze itemy na liscie moga sie zmienic po dluzszym czasie po wpisaniu w search
+  // np. moga byc wczytane z serwera
+  // Wiec nie mozemy sie podpiac pod onKeyDown i wtedy ustawiac timeout
+  useLayoutEffect(function () {
+    if (optionsRef.current === undefined) {
+      optionsRef.current = options;
+      return;
+    }
+    if (!deepEqual(optionsRef.current, options)) {
+      optionsRef.current = options;
+      blurGuardRef.current = true;
+      timeoutRef.current = setTimeout(function () {
+        blurGuardRef.current = false;
+      }, BLUR_GUARD_TIMEOUT);
+    }
+    return function () {
+      return timeoutRef.current && clearTimeout(timeoutRef.current);
+    };
+  }, [options]);
+  return useMemo(function () {
+    return {
+      handleBlur: handleBlur
+    };
+  }, [handleBlur]);
+};
+
+export { usePreventSearchBlur };
+//# sourceMappingURL=use_prevent_search_blur.js.map

package/build/esm/packages/aurora/src/components/select/hooks/use_prevent_search_blur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,0BAA0B,8DAAkE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/aurora/src/components/select/hooks/use_select_value.d.ts

@@ -0,0 +1,5 @@
+import { TSelectOption, TUseSelectValueProps } from "../select_types";
+export declare const useSelectValue: ({ value, options }: TUseSelectValueProps) => {
+    selectedOption: TSelectOption | undefined;
+    setSelectedOption: (option: TSelectOption | undefined) => void;
+};

package/build/esm/packages/aurora/src/components/select/hooks/use_select_value.js

@@ -0,0 +1,35 @@
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { SelectUtils } from '../select_utils.js';
+
+var useSelectValue = function useSelectValue(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  // Przechowanie aktualnie wybranej opcji w razie jakby przy wyszukiwaniu aktualna opcja zniknela z listy options
+  var _useState = useState(function () {
+      return SelectUtils.findValueInOptions(value, options);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedOption = _useState2[0],
+    _setSelectedOption = _useState2[1];
+  var selectedOptionRef = useRef(selectedOption);
+  var setSelectedOption = useCallback(function (option) {
+    selectedOptionRef.current = option;
+    _setSelectedOption(option);
+  }, []);
+  useEffect(function () {
+    var _selectedOptionRef$cu;
+    if (value === ((_selectedOptionRef$cu = selectedOptionRef.current) === null || _selectedOptionRef$cu === void 0 ? void 0 : _selectedOptionRef$cu.value)) return;
+    var option = SelectUtils.findValueInOptions(value, options);
+    setSelectedOption(option);
+  }, [options, setSelectedOption, value]);
+  return useMemo(function () {
+    return {
+      selectedOption: selectedOption,
+      setSelectedOption: setSelectedOption
+    };
+  }, [selectedOption, setSelectedOption]);
+};
+
+export { useSelectValue };
+//# sourceMappingURL=use_select_value.js.map

package/build/esm/packages/aurora/src/components/select/hooks/use_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;AACA;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/esm/packages/aurora/src/components/select/select.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+import { TSelectProps } from './select_types';
+export declare const Select: {
+    ({ children, id, value, options, disabled, placeholder, hasSearch, searchPlaceholder, hasClearValueButton, innerAdditionalContent, enableLocalSearch, localSearchNotFoundContent, errors, onValueChange, onScroll, onSearch, onClose, hasError, ...props }: PropsWithChildren<TSelectProps>): React.JSX.Element;
+    displayName: string | undefined;
+};

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

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../utilities/cn.js';
+import { Root } from '@radix-ui/react-select';
+import { CloseCircleFillIcon } from '../../assets/icons/close_circle_fill_icon.js';
+import { SelectContent } from './components/select_content.js';
+import { SelectTrigger } from './components/select_trigger.js';
+import { useSelectValue } from './hooks/use_select_value.js';
+
+var _excluded = ["children", "id", "value", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "enableLocalSearch", "localSearchNotFoundContent", "errors", "onValueChange", "onScroll", "onSearch", "onClose", "hasError"];
+var Select = function Select(_ref) {
+  var _selectedOption$value;
+  var children = _ref.children,
+    id = _ref.id,
+    value = _ref.value,
+    options = _ref.options,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    hasSearch = _ref.hasSearch,
+    searchPlaceholder = _ref.searchPlaceholder,
+    hasClearValueButton = _ref.hasClearValueButton,
+    innerAdditionalContent = _ref.innerAdditionalContent,
+    enableLocalSearch = _ref.enableLocalSearch,
+    localSearchNotFoundContent = _ref.localSearchNotFoundContent,
+    errors = _ref.errors,
+    onValueChange = _ref.onValueChange,
+    onScroll = _ref.onScroll,
+    onSearch = _ref.onSearch,
+    onClose = _ref.onClose,
+    hasError = _ref.hasError,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSelectValue = useSelectValue({
+      value: value,
+      options: options
+    }),
+    selectedOption = _useSelectValue.selectedOption,
+    setSelectedOption = _useSelectValue.setSelectedOption;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var handleSearch = function handleSearch(str) {
+    setSearch(str);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(str);
+  };
+  var handleChange = function handleChange(val) {
+    var _option$value;
+    var option = val ? options.find(function (opt) {
+      return opt.value === val;
+    }) : undefined;
+    setSelectedOption(option);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
+  };
+  var handleOpenChange = function handleOpenChange(open) {
+    if (hasSearch && !open) setSearch('');
+    if (onClose && !open) onClose();
+  };
+  var showPlaceholder = !selectedOption;
+  return /*#__PURE__*/React.createElement(Root, _objectSpread2({
+    value: (_selectedOption$value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _selectedOption$value !== void 0 ? _selectedOption$value : '',
+    onValueChange: handleChange,
+    disabled: disabled,
+    onOpenChange: handleOpenChange
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-relative aurora-flex aurora-items-center aurora-flex-col"
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    id: id,
+    hasError: hasError || !!(errors !== null && errors !== void 0 && errors.length),
+    clearValueButton: value && hasClearValueButton && onValueChange && (/*#__PURE__*/React.createElement("div", {
+      onPointerDown: function onPointerDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick() {
+        handleChange('');
+      },
+      className: "aurora-w-5 aurora-h-5 aurora-flex aurora-items-center aurora-justify-center"
+    }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
+    })))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
+  }, !showPlaceholder ? selectedOption.text : placeholder))), /*#__PURE__*/React.createElement(SelectContent, {
+    options: options,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    innerAdditionalContent: innerAdditionalContent,
+    search: search,
+    onSearch: handleSearch,
+    onScroll: onScroll,
+    enableLocalSearch: enableLocalSearch,
+    localSearchNotFoundContent: localSearchNotFoundContent
+  }));
+};
+Select.displayName = Root.displayName;
+
+export { Select };
+//# sourceMappingURL=select.js.map

package/build/esm/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/select/select_types.d.ts

@@ -0,0 +1,57 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ReactNode, RefObject } from 'react';
+import { TInputProps } from "../input/input_types";
+export interface TSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    hasError?: boolean;
+    clearValueButton?: ReactNode;
+}
+export declare type TSelectOption = {
+    text: string;
+    value: string;
+    additionalInfo?: string;
+    isHeader?: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+};
+export interface TSelectSearchProps extends TInputProps {
+    options: TSelectOption[];
+}
+export interface TSelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    options: TSelectOption[];
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
+    innerAdditionalContent?: ReactNode;
+    search: string;
+    onSearch?: (str: string) => void;
+    enableLocalSearch?: boolean;
+    localSearchNotFoundContent?: ReactNode;
+}
+export interface TSelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+    additionalInfo?: string;
+}
+export interface TSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'defaultValue'> {
+    id: string;
+    options: TSelectOption[];
+    placeholder?: string;
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
+    innerAdditionalContent?: ReactNode;
+    hasClearValueButton?: boolean;
+    errors?: string | string[];
+    hasError?: boolean;
+    enableLocalSearch?: boolean;
+    localSearchNotFoundContent?: ReactNode;
+    onScroll?: (event: React.UIEvent<HTMLElement>) => void;
+    onSearch?: (str: string) => void;
+    onClose?: () => void;
+}
+export interface TUseSelectValueProps {
+    value: string | undefined;
+    options: TSelectOption[];
+}
+export interface TUsePreventSearchBlurProps {
+    inputRef: RefObject<HTMLInputElement | null>;
+    options: TSelectOption[];
+}

package/build/esm/packages/aurora/src/components/select/select_types.js

@@ -0,0 +1,4 @@
+import '@radix-ui/react-select';
+import 'react';
+import '@auroraComponents/input/input_types';
+//# sourceMappingURL=select_types.js.map

package/build/esm/packages/aurora/src/components/select/select_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,OAAqC,OAAO,CAAC;AAC7C,OAA4B,qCAAqC,CAAC"}

package/build/esm/packages/aurora/src/components/select/select_utils.d.ts

@@ -0,0 +1,6 @@
+import { TSelectOption } from "./select_types";
+export declare class SelectUtils {
+    static localSearchIsOptionVisible: (option: TSelectOption, search: string) => boolean;
+    static localSearchIsHeaderVisible: (search: string, options: TSelectOption[], index: number) => boolean;
+    static findValueInOptions: (value: string | undefined, options: TSelectOption[]) => TSelectOption | undefined;
+}

package/build/esm/packages/aurora/src/components/select/select_utils.js

@@ -0,0 +1,38 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var _SelectUtils;
+var SelectUtils = /*#__PURE__*/_createClass(function SelectUtils() {
+  _classCallCheck(this, SelectUtils);
+});
+_SelectUtils = SelectUtils;
+_defineProperty(SelectUtils, "localSearchIsOptionVisible", function (option, search) {
+  var normalizePolish = function normalizePolish(str) {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[\u0141-\u0142]/g, 'l').toLowerCase();
+  };
+  return normalizePolish(option.text).includes(normalizePolish(search));
+});
+_defineProperty(SelectUtils, "localSearchIsHeaderVisible", function (search, options, index) {
+  var visible = false;
+  var i = index + 1;
+  while (options[i]) {
+    var curr = options[i];
+    if (curr.isHeader) {
+      break;
+    }
+    if (_SelectUtils.localSearchIsOptionVisible(curr, search)) {
+      visible = true;
+      break;
+    }
+    i++;
+  }
+  return visible;
+});
+_defineProperty(SelectUtils, "findValueInOptions", function (value, options) {
+  if (!value) return undefined;
+  return options.find(function (opt) {
+    return opt.value === value;
+  });
+});
+
+export { SelectUtils };
+//# sourceMappingURL=select_utils.js.map

package/build/esm/packages/aurora/src/components/select/select_utils.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;"}

package/build/esm/packages/aurora/src/components/sidebar/components/persistent_sidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const PersistentSidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    width?: string | undefined;
+    className?: string | undefined;
+    side?: "left" | "right" | undefined;
+    TriggerButton?: React.ReactNode;
+    onClickOutside?: import("../sidebar_types_types").TSidebarOnClickOutside | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement | null>>;

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

@@ -0,0 +1,56 @@
+import React, { useRef, useImperativeHandle } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { useClickOutside } from '../../../hooks/use_click_outside.js';
+import { useSidebar } from '../hooks/use_sidebar.js';
+
+var _excluded = ["className", "width", "children", "TriggerButton", "side", "onScroll", "onClickOutside"];
+var PersistentSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    width = _ref.width,
+    children = _ref.children,
+    TriggerButton = _ref.TriggerButton,
+    side = _ref.side,
+    onScroll = _ref.onScroll,
+    onClickOutside = _ref.onClickOutside,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSidebar = useSidebar(),
+    open = _useSidebar.open,
+    toggle = _useSidebar.toggle,
+    close = _useSidebar.close;
+  var sidebarRef = useRef(null);
+  var _ref2 = onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : {},
+    config = _ref2.config,
+    onClickOutsideCallback = _ref2.callback;
+  useImperativeHandle(ref, function () {
+    return sidebarRef.current;
+  });
+  useClickOutside({
+    refs: [sidebarRef],
+    callback: function callback() {
+      if (open) onClickOutsideCallback === null || onClickOutsideCallback === void 0 ? void 0 : onClickOutsideCallback({
+        open: open,
+        toggle: toggle,
+        close: close
+      });
+    },
+    config: config
+  });
+  return /*#__PURE__*/React.createElement("aside", _objectSpread2({
+    "aria-expanded": open,
+    className: cn('aurora-relative aurora-transition-all aurora-duration-200'),
+    style: {
+      width: open ? width : 0,
+      maxWidth: open ? width : 0,
+      minWidth: open ? width : 0
+    }
+  }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React.createElement("div", {
+    onScroll: onScroll,
+    ref: sidebarRef,
+    className: cn('aurora-overflow-auto aurora-h-full aurora-w-full custom-scrollbar', className)
+  }, children));
+});
+PersistentSidebar.displayName = 'PersistentSidebar';
+
+export { PersistentSidebar };
+//# sourceMappingURL=persistent_sidebar.js.map

package/build/esm/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TSidebarCloseButtonProps } from "./sidebar_components_types";
+export declare const SidebarCloseButton: FC<TSidebarCloseButtonProps>;

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSidebar } from '../hooks/use_sidebar.js';
+import { CloseLineIcon } from '../../../assets/icons/close_line_icon.js';
+
+var SidebarCloseButton = function SidebarCloseButton(_ref) {
+  var onClose = _ref.onClose;
+  var _useSidebar = useSidebar(),
+    close = _useSidebar.close;
+  return /*#__PURE__*/React.createElement("button", {
+    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
+    onClick: function onClick() {
+      close();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    },
+    "data-test-el": "close-sidebar"
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
+};
+
+export { SidebarCloseButton };
+//# sourceMappingURL=sidebar_close_button.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.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;"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TSidebarOnClickOutside, TSidebarSide } from "../sidebar_types_types";
+export declare type TPersistentSidebarProps = {
+    width?: string;
+    className?: string;
+    side?: TSidebarSide;
+    TriggerButton?: React.ReactNode;
+    onClickOutside?: TSidebarOnClickOutside;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare type TTemporalSidebar = React.PropsWithoutRef<{
+    width?: string;
+    className?: string;
+    side?: TSidebarSide;
+    container?: HTMLElement;
+    closeOnOutsideClick?: boolean;
+    TriggerButton?: React.ReactNode;
+    onClickOutside?: TSidebarOnClickOutside;
+} & React.HTMLAttributes<HTMLDivElement>>;
+export declare type TSidebarCloseButtonProps = {
+    onClose?: () => void;
+};

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.js

@@ -0,0 +1,3 @@
+import 'react';
+import '@auroraComponents/sidebar/sidebar_types_types';
+//# sourceMappingURL=sidebar_components_types.js.map

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar_components_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/sidebar/components/sidebar_components_types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC;AAC1B,OAAqD,+CAA+C,CAAC"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_toggle.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from 'react';
+export declare const SidebarToggle: ({ children }: PropsWithChildren) => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useSidebar } from '../hooks/use_sidebar.js';
+
+var SidebarToggle = function SidebarToggle(_ref) {
+  var children = _ref.children;
+  var _useSidebar = useSidebar(),
+    toggle = _useSidebar.toggle;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: toggle
+  }, children);
+};
+
+export { SidebarToggle };
+//# sourceMappingURL=sidebar_toggle.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const TemporalSidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    width?: string | undefined;
+    className?: string | undefined;
+    side?: "left" | "right" | undefined;
+    container?: HTMLElement | undefined;
+    closeOnOutsideClick?: boolean | undefined;
+    TriggerButton?: React.ReactNode;
+    onClickOutside?: import("../sidebar_types_types").TSidebarOnClickOutside | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement | null>>;