@dreamcommerce/aurora 3.1.30 → 3.1.31

package/README.md

@@ -1,135 +1 @@
 # Aurora
-
-## Jak odpalić?
-
-1. `yarn install`
-2. `yarn run start` - odpala Rollupa, który nasłuchuje na folder src (tutaj developujemy komponenty)
-3. `yarn run storybook` - w osobnej zakladace odpalamy storybooka, tutaj tworzymy tzw "story" dla naszego nowo
-   tworzonego komponentu. Dzięki temu możemy sobie developować nasz komponent w izolacji. Proponuje się wzorować na tym
-   co już gotowe.
-
-Taki pakiet możemy zainstlować w swoim projekcie przez użycie tagu beta wrzucając do
-package.json `@dreamcommerce/aurora: "0.2.10-1"`. Co jeśli pracujemy dalej? Odpalamy znowu
-`yarn version --prerelease`
-To uaktualni nam wersję np z `0.2.10-1` do `0.2.10-2` i znowu
-`yarn npm publish --tag beta --access public`
-
-## Testowanie:
-
-Posiadamy dwa rodzaje testów, standardowe unit testy oraz wizualne. Jak je odpalić:
-
-1. `yarn run tests:unit`
-2. `yarn run tests:visual`
-
-Co gdy celowo zmieniamy wyglad komponentu i testy wizualne nie przechodza? 
-Wtedy musimy zaktualizować pliki wzorcowe:
-
-1. `yarn run update-visuals` aktualizuje pliki wzorcowe zmian wizualnych (.png)
-
-## Jak piszemy componenty
-
-### importy
-
-1. W pierwszej kolejnosci importujemy rzeczy zewnętrzne (React, lodash, classnames itp)
-2. Style komponentu
-3. Typowanie
-4. Rzeczy wewnętrzne komponentu
-
-### Komponenty
-
-- do wiekszosci komponentów, korzystamy z opensourcowej libki https://ui.shadcn.com. Kod komponentóœ kopiujemy manualnie i dostosowujemy do naszych potrzeb.
-
-#### Struktura folderów i plików komponentu
-
-- Komponent umieszczamy w folderze `src/components`
-- W nazewnictwie plików i folderów stosujemy `snake_case`
-- Nazwy prefixujemy nazwa komponentu
-- Nazwa komponentu powinna być w liczbe pojedyńczej (button, color_picker, heading itp);
-- struktura komponentu:
-
-```
-    - components (komponenty wchodza w sklad glownego komponetu, nieuzywalne osobno)
-        - somethings.tsx
-        - ...
-    - hooks (folder zawierajacy hooki specyficzne dla danego elementu)
-        - [nazwa-komponentu]_useValues.ts
-        - ...
-    - [nazwa-komponentu]_constants.ts (opcjonalnie, stałe dla tego komponentu)
-    - [nazwa-komponentu]_context.tsx (opcjonalne, context elementu)
-    - [nazwa-komponentu].tsx
-    - [nazwa-komponentu]_types.ts
-    - [nazwa-komponentu]_utils.ts (opcjonalnie, helpery, funkcje danego komponetu)
-```
-
-#### Style
-
-**Autocomplete dla funkcji cva i cx**
-https://cva.style/docs/getting-started/installation#tailwind-css
-
-- do stylowania używamy tailwindcss
-- dostpene tokeny dla różnych wartosci stili (np. `colors`, `spacing`, `fontSizes` itp) znajdują się w pliku `tailwind.config.js`
-
-## Uwagi ogólne
-
-Nazwy metod, zmiennych powinny odpowiadać temu co kryje się za daną zmienną lub co robi metoda. Metody powinny
-realizowac jedna rzeczy. Zmienne typu boolean powinny zawsze zaczynac sie od `is` lub `has`.
-
-## Tymczasowe na czas developmentu westa
-
-- jako, ze wyczysciłam folder z komponentami bo gryzły sie lessy. Niektóre komponenty bd kopiować w zależnosci od kejsu. Np takie taby albo skin-tree bd raczej kopiowane z aurory na tagu 2.0. Nie chcemy zmieniać api tych komponentó
-- czesc bardziej skomplikowanych komponentów bd najprawdopodbniej z osobnych libek, np. select
-
-### Nowa struktura pod storybooka
-
-1. **Feedback and indicators**
-   1. Loader
-   2. Message-box(infobox)
-   3. badge
-   4. flash-messanger
-2. **Table**
-   1. table
-3. **Text**
-   1. Typography
-4. **Selection and Input**
-   1. Checkbox
-   2. Checkbox-switch
-   3. Color-picker
-   4. Date-picker
-   5. File-Picker
-   6. Input
-   7. Select
-   8. MultiSelect
-   9. Radio
-   10. Radio-group
-   11. Textarea
-   12. xhrImagePicker
-   13. Values Syncer
-   14. Hint - ma zostac tyko jeden, juz nie bd tooltip i hint osobno
-   15. Button
-5. **Layout**
-   1. Grid
-   2. Stack
-   3. Box
-   4. Divider 
-   5. Spacing
-6. **Modal**
-7. **Navigation**
-   1. Link
-   2. BreadCrumbs
-   3. Pagination
-   4. Tabs
-   5. Slide
-8. **Lists**
-   1. Search List
-   2. Tree
-   3. Action List
-9. **Surface**
-   1. Accordion
-   2. Dropdown
-   3. Paper - box + shadow
-10. **Utils**
-    1. Scroll Syncer
-    2. Accordion groups
-    3. With Loader
-11. **Hooks**
-    1. ...

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_container.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizable_handle = require('./resizable_handle.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizableContainer = function ResizableContainer(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    variant = _ref.variant,
+    onResize = _ref.onResize,
+    children = _ref.children;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-relative ".concat(className),
+    style: style
+  }, variant === 'horizontal' ? (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: "left",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'left');
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: "right",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'right');
+    }
+  }))) : (/*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: variant,
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, variant);
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex-1"
+  }, children));
+};
+
+exports.ResizableContainer = ResizableContainer;
+//# sourceMappingURL=resizable_container.js.map

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_container.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;"}

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_handle.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('../../../utilities/cn.js');
+var resizable_container_constants = require('../resizable_container_constants.js');
+var use_resizable_context = require('../hooks/use_resizable_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizableHandle = function ResizableHandle(_ref) {
+  var position = _ref.position,
+    className = _ref.className,
+    onMouseDown = _ref.onMouseDown;
+  var _useResizableContext = use_resizable_context.useResizableContext(),
+    isResizing = _useResizableContext.isResizing;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn("".concat(resizable_container_constants.RESIZABLE_CONTAINER_RESIZER_CLASS, " ").concat(className, " aurora-absolute aurora-top-0 aurora-bottom-0 aurora-cursor-col-resize aurora-transition-opacity aurora-duration-200 aurora-z-[99999] aurora-opacity-0 hover:aurora-opacity-100"), {
+      'aurora-opacity-100': isResizing
+    }),
+    style: {
+      paddingLeft: "".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px"),
+      paddingRight: "".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px"),
+      left: position === resizable_container_constants.RESIZE_HANDLE_VARIANTS.left ? "-".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px") : '',
+      right: position === resizable_container_constants.RESIZE_HANDLE_VARIANTS.right ? "-".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px") : ''
+    },
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
+      'aurora-bg-primary-hover': isResizing
+    })
+  }));
+};
+
+exports.ResizableHandle = ResizableHandle;
+//# sourceMappingURL=resizable_handle.js.map

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_handle.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;"}

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_pure.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizable_container_constants = require('../resizable_container_constants.js');
+var use_resizable_context = require('../hooks/use_resizable_context.js');
+var resizable_container = require('./resizable_container.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizablePure = function ResizablePure(_ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? resizable_container_constants.RESIZE_HANDLE_VARIANTS.left : _ref$variant,
+    widthConfig = _ref.widthConfig,
+    onResize = _ref.onResize,
+    className = _ref.className;
+  var _useResizableContext = use_resizable_context.useResizableContext(),
+    currentWidth = _useResizableContext.currentWidth,
+    handleResizing = _useResizableContext.handleResizing,
+    isResizing = _useResizableContext.isResizing;
+  React.useEffect(function () {
+    onResize === null || onResize === void 0 ? void 0 : onResize(currentWidth, isResizing);
+  }, [currentWidth, isResizing, onResize]);
+  return /*#__PURE__*/React__default['default'].createElement(resizable_container.ResizableContainer, {
+    className: className || '',
+    style: {
+      width: currentWidth,
+      minWidth: widthConfig.min,
+      maxWidth: widthConfig.max
+    },
+    variant: variant,
+    onResize: handleResizing
+  }, children);
+};
+
+exports.ResizablePure = ResizablePure;
+//# sourceMappingURL=resizable_pure.js.map

package/build/cjs/packages/aurora/src/components/resizable/components/resizable_pure.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;"}

package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var resizable_container_constants = require('../resizable_container_constants.js');
+var resizable_utils = require('../resizable_utils.js');
+
+var useResizable = function useResizable(name, variant, widthConfig) {
+  var storageKey = "sve_resizable_".concat(name, "_width");
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var isResizingRef = React.useRef(false);
+  var resizingDirection = React.useRef(resizable_container_constants.RESIZING_DIRECTIONS.left);
+  var initialMouseX = React.useRef(0);
+  var initialWidth = React.useRef(0);
+  var _useState3 = React.useState(function () {
+      return resizable_utils.getInitialWidth(storageKey, widthConfig);
+    }),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var widthRef = React.useRef(width);
+  var handleMouseMove = React.useCallback(function (e) {
+    if (!isResizingRef.current) return;
+    var direction = variant === 'horizontal' ? resizingDirection.current : variant;
+    var newWidth = calculateNewWidth(e.clientX, direction, widthConfig, initialMouseX.current, initialWidth.current);
+    widthRef.current = newWidth;
+    setWidth(newWidth);
+  }, []);
+  var handleMouseUp = React.useCallback(function () {
+    if (!isResizingRef.current) return;
+    isResizingRef.current = false;
+    setIsResizing(false);
+    resizable_utils.removeEventListeners({
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp
+    });
+    resizable_utils.saveWidthToStorage(storageKey, widthRef.current);
+  }, []);
+  var handleResizing = React.useCallback(function (e, direction) {
+    e.preventDefault();
+    isResizingRef.current = true;
+    setIsResizing(true);
+    resizingDirection.current = direction;
+    initialMouseX.current = e.clientX;
+    initialWidth.current = widthRef.current;
+    resizable_utils.addEventListeners({
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp
+    });
+  }, []);
+  var calculateNewWidth = function calculateNewWidth(clientX, direction, widthConfig, initialMouseX, initialWidth) {
+    var min = widthConfig.min,
+      max = widthConfig.max;
+    var mouseDelta = clientX - initialMouseX;
+    var newWidth = direction === resizable_container_constants.RESIZING_DIRECTIONS.left ? initialWidth - mouseDelta : initialWidth + mouseDelta;
+    return Math.min(Math.max(newWidth, min), max);
+  };
+  React.useEffect(function () {
+    return function () {
+      resizable_utils.removeEventListeners({
+        mousemove: handleMouseMove,
+        mouseup: handleMouseUp
+      });
+    };
+  }, []);
+  return {
+    isResizing: isResizing,
+    currentWidth: width,
+    handleResizing: handleResizing
+  };
+};
+
+exports.default = useResizable;
+//# sourceMappingURL=use_resizable.js.map

package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable.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;"}

package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable_context.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizable_context = require('../resizable_context.js');
+
+function useResizableContext() {
+  var context = React.useContext(resizable_context.ResizableContext);
+  if (!context) {
+    throw new Error("Resizable component cannot be rendered outside the ResizableProvider component");
+  }
+  return context;
+}
+
+exports.useResizableContext = useResizableContext;
+//# sourceMappingURL=use_resizable_context.js.map

package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable_context.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;"}

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_resizable = require('./hooks/use_resizable.js');
+var resizable_context = require('./resizable_context.js');
+var resizable_pure = require('./components/resizable_pure.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Resizable = function Resizable(_ref) {
+  var name = _ref.name,
+    children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'left' : _ref$variant,
+    widthConfig = _ref.widthConfig,
+    onResize = _ref.onResize,
+    className = _ref.className;
+  var _useResizable = use_resizable['default'](name, variant, widthConfig),
+    isResizing = _useResizable.isResizing,
+    currentWidth = _useResizable.currentWidth,
+    handleResizing = _useResizable.handleResizing;
+  var contextVal = React.useMemo(function () {
+    return {
+      isResizing: isResizing,
+      currentWidth: currentWidth,
+      handleResizing: handleResizing
+    };
+  }, [isResizing, currentWidth, handleResizing]);
+  return /*#__PURE__*/React__default['default'].createElement(resizable_context.ResizableContext.Provider, {
+    value: contextVal
+  }, /*#__PURE__*/React__default['default'].createElement(resizable_pure.ResizablePure, {
+    className: className || '',
+    variant: variant,
+    widthConfig: widthConfig,
+    onResize: onResize
+  }, children));
+};
+
+exports.Resizable = Resizable;
+//# sourceMappingURL=resizable.js.map

package/build/cjs/packages/aurora/src/components/resizable/resizable.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/resizable/resizable_container_constants.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var RESIZE_HANDLE_VARIANTS = {
+  left: 'left',
+  right: 'right',
+  horizontal: 'horizontal'
+};
+var RESIZING_DIRECTIONS = {
+  left: 'left',
+  right: 'right'
+};
+var HANDLE_HOVER_SPACE = 8;
+var RESIZABLE_CONTAINER_RESIZER_CLASS = 'js__resizable-container-resizer';
+
+exports.HANDLE_HOVER_SPACE = HANDLE_HOVER_SPACE;
+exports.RESIZABLE_CONTAINER_RESIZER_CLASS = RESIZABLE_CONTAINER_RESIZER_CLASS;
+exports.RESIZE_HANDLE_VARIANTS = RESIZE_HANDLE_VARIANTS;
+exports.RESIZING_DIRECTIONS = RESIZING_DIRECTIONS;
+//# sourceMappingURL=resizable_container_constants.js.map

package/build/cjs/packages/aurora/src/components/resizable/resizable_container_constants.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;"}

package/build/cjs/packages/aurora/src/components/resizable/resizable_context.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var ResizableContext = /*#__PURE__*/React.createContext({
+  isResizing: false,
+  currentWidth: 0,
+  handleResizing: function handleResizing() {}
+});
+
+exports.ResizableContext = ResizableContext;
+//# sourceMappingURL=resizable_context.js.map

package/build/cjs/packages/aurora/src/components/resizable/resizable_context.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/cjs/packages/aurora/src/components/resizable/resizable_utils.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var getInitialWidth = function getInitialWidth(name, widthConfig) {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') return widthConfig.default;
+  var saved = localStorage.getItem(name);
+  return saved ? Number(saved) : widthConfig.default;
+};
+var saveWidthToStorage = function saveWidthToStorage(name, width) {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
+  localStorage.setItem(name, width.toString());
+};
+var addEventListeners = function addEventListeners(events) {
+  Object.entries(events).forEach(function (_ref) {
+    var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref, 2),
+      eventType = _ref2[0],
+      handler = _ref2[1];
+    document.addEventListener(eventType, handler);
+  });
+};
+var removeEventListeners = function removeEventListeners(events) {
+  Object.entries(events).forEach(function (_ref3) {
+    var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
+      eventType = _ref4[0],
+      handler = _ref4[1];
+    document.removeEventListener(eventType, handler);
+  });
+};
+
+exports.addEventListeners = addEventListeners;
+exports.getInitialWidth = getInitialWidth;
+exports.removeEventListeners = removeEventListeners;
+exports.saveWidthToStorage = saveWidthToStorage;
+//# sourceMappingURL=resizable_utils.js.map

package/build/cjs/packages/aurora/src/components/resizable/resizable_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;"}

package/build/cjs/packages/aurora/src/index.js

@@ -131,6 +131,7 @@ var toast_viewport = require('./components/toast/components/toast_viewport.js');
 var anchor_presets_constants = require('./components/anchor_presets/anchor_presets_constants.js');
 var anchor_presets = require('./components/anchor_presets/anchor_presets.js');
 var anchor_presets_control = require('./components/controls/anchor_presets_control/anchor_presets_control.js');
+var resizable = require('./components/resizable/resizable.js');
 
 
 
@@ -283,4 +284,5 @@ exports.ToastViewport = toast_viewport.ToastViewport;
 exports.ANCHOR_PRESETS_VALUES = anchor_presets_constants.ANCHOR_PRESETS_VALUES;
 exports.AnchorPresets = anchor_presets.AnchorPresets;
 exports.AnchorPresetsControl = anchor_presets_control.AnchorPresetsControl;
+exports.Resizable = resizable.Resizable;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/resizable/components/resizable_container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IResizableContainerProps } from '../resizable_container_types';
+export declare const ResizableContainer: React.FC<IResizableContainerProps>;

package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { ResizableHandle } from './resizable_handle.js';
+
+var ResizableContainer = function ResizableContainer(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    variant = _ref.variant,
+    onResize = _ref.onResize,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "aurora-flex aurora-relative ".concat(className),
+    style: style
+  }, variant === 'horizontal' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: "left",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'left');
+    }
+  }), /*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: "right",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'right');
+    }
+  }))) : (/*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: variant,
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, variant);
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "aurora-flex-1"
+  }, children));
+};
+
+export { ResizableContainer };
+//# sourceMappingURL=resizable_container.js.map

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

package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IResizableHandleProps {
+    position: 'left' | 'right';
+    className?: string;
+    onMouseDown: (e: React.MouseEvent) => void;
+}
+export declare const ResizableHandle: React.FC<IResizableHandleProps>;
+export {};

package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { cn } from '../../../utilities/cn.js';
+import { RESIZABLE_CONTAINER_RESIZER_CLASS, HANDLE_HOVER_SPACE, RESIZE_HANDLE_VARIANTS } from '../resizable_container_constants.js';
+import { useResizableContext } from '../hooks/use_resizable_context.js';
+
+var ResizableHandle = function ResizableHandle(_ref) {
+  var position = _ref.position,
+    className = _ref.className,
+    onMouseDown = _ref.onMouseDown;
+  var _useResizableContext = useResizableContext(),
+    isResizing = _useResizableContext.isResizing;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn("".concat(RESIZABLE_CONTAINER_RESIZER_CLASS, " ").concat(className, " aurora-absolute aurora-top-0 aurora-bottom-0 aurora-cursor-col-resize aurora-transition-opacity aurora-duration-200 aurora-z-[99999] aurora-opacity-0 hover:aurora-opacity-100"), {
+      'aurora-opacity-100': isResizing
+    }),
+    style: {
+      paddingLeft: "".concat(HANDLE_HOVER_SPACE, "px"),
+      paddingRight: "".concat(HANDLE_HOVER_SPACE, "px"),
+      left: position === RESIZE_HANDLE_VARIANTS.left ? "-".concat(HANDLE_HOVER_SPACE, "px") : '',
+      right: position === RESIZE_HANDLE_VARIANTS.right ? "-".concat(HANDLE_HOVER_SPACE, "px") : ''
+    },
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
+      'aurora-bg-primary-hover': isResizing
+    })
+  }));
+};
+
+export { ResizableHandle };
+//# sourceMappingURL=resizable_handle.js.map

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

package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IResizablePureProps } from '../resizable_container_types';
+export declare const ResizablePure: React.FC<IResizablePureProps>;