@semcore/accordion 5.48.2 → 5.49.0-prerelease.0

package/lib/esm/Accordion.mjs

@@ -2,52 +2,44 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { Component, sstyled as sstyled$1, assignProps } from "@semcore/core";
-import React from "react";
-import { Flex } from "@semcore/flex-box";
-import { Collapse as Collapse$1 } from "@semcore/animation";
-import { Text } from "@semcore/typography";
-import ChevronRightM from "@semcore/icon/ChevronRight/m";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
+import { Flex, Collapse as Collapse$1 } from "@semcore/base-components";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
 import ChevronRightL from "@semcore/icon/ChevronRight/l";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import { cssVariableEnhance } from "@semcore/utils/lib/useCssVariable";
+import ChevronRightM from "@semcore/icon/ChevronRight/m";
+import { Text } from "@semcore/typography";
+import React from "react";
 /*!__reshadow-styles__:"./style/accordion.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SItemToggle_amcdq_gg_{display:flex;align-items:center;position:relative;cursor:pointer;outline:0}.___SItemToggle_amcdq_gg_.__keyboardFocused_amcdq_gg_:not(._tabIndex_-1_amcdq_gg_)::after{position:absolute;display:block;content:"";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:3}.___SItemToggle_amcdq_gg_.__use_amcdq_gg_.__use_amcdq_gg_{color:var(--intergalactic-text-primary, #191b23);font-weight:var(--intergalactic-regular, 400)}.___SItemToggle_amcdq_gg_.__use_amcdq_gg_._use_primary_amcdq_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);margin-bottom:var(--intergalactic-spacing-05x, 2px)}@media (hover:hover){.___SItemToggle_amcdq_gg_.__use_amcdq_gg_._use_primary_amcdq_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SItemToggle_amcdq_gg_.__disabled_amcdq_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_amcdq_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SItemChevron_amcdq_gg_.__selected_amcdq_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_amcdq_gg_{transition:none}}',
+    ".___SItemToggle_hkpt8_gg_{display:flex;align-items:center;position:relative;cursor:pointer;outline:0}.___SItemToggle_hkpt8_gg_.__use_hkpt8_gg_.__use_hkpt8_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-weight:var(--intergalactic-regular, 400)}.___SItemToggle_hkpt8_gg_.__use_hkpt8_gg_._use_primary_hkpt8_gg_{background-color:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248));padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);margin-bottom:var(--intergalactic-spacing-05x, 2px)}@media (hover:hover){.___SItemToggle_hkpt8_gg_.__use_hkpt8_gg_._use_primary_hkpt8_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover, rgb(241, 242, 242))}}.___SItemToggle_hkpt8_gg_.__disabled_hkpt8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default}.___SItemChevron_hkpt8_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}.___SItemChevron_hkpt8_gg_.__selected_hkpt8_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_hkpt8_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "amcdq_gg_"
+    "hkpt8_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SItemToggle": "___SItemToggle_amcdq_gg_",
-    "_keyboardFocused": "__keyboardFocused_amcdq_gg_",
-    "_tabIndex_-1": "_tabIndex_-1_amcdq_gg_",
-    "_use": "__use_amcdq_gg_",
-    "_use_primary": "_use_primary_amcdq_gg_",
-    "_disabled": "__disabled_amcdq_gg_",
-    "__SItemChevron": "___SItemChevron_amcdq_gg_",
-    "_selected": "__selected_amcdq_gg_"
+    "__SItemToggle": "___SItemToggle_hkpt8_gg_",
+    "_use": "__use_hkpt8_gg_",
+    "_use_primary": "_use_primary_hkpt8_gg_",
+    "_disabled": "__disabled_hkpt8_gg_",
+    "__SItemChevron": "___SItemChevron_hkpt8_gg_",
+    "_selected": "__selected_hkpt8_gg_"
   })
 );
-var RootAccordion = /* @__PURE__ */ function(_Component) {
-  _inherits(RootAccordion2, _Component);
-  var _super = _createSuper(RootAccordion2);
+var RootAccordion = /* @__PURE__ */ (function(_Component) {
   function RootAccordion2() {
     var _this;
     _classCallCheck(this, RootAccordion2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "handleToggleInteraction", function(newValue) {
+    _this = _callSuper(this, RootAccordion2, [].concat(args));
+    _defineProperty(_this, "handleToggleInteraction", function(newValue) {
       var value = _this.asProps.value;
       if (Array.isArray(value)) {
         var indexOfNewValue = value.indexOf(newValue);
@@ -60,7 +52,8 @@ var RootAccordion = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(RootAccordion2, [{
+  _inherits(RootAccordion2, _Component);
+  return _createClass(RootAccordion2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -87,8 +80,7 @@ var RootAccordion = /* @__PURE__ */ function(_Component) {
       return /* @__PURE__ */ React.createElement(Children, null);
     }
   }]);
-  return RootAccordion2;
-}(Component);
+})(Component);
 _defineProperty(RootAccordion, "displayName", "Accordion");
 _defineProperty(RootAccordion, "style", style);
 _defineProperty(RootAccordion, "defaultProps", {
@@ -98,38 +90,38 @@ _defineProperty(RootAccordion, "defaultProps", {
 _defineProperty(RootAccordion, "enhance", [cssVariableEnhance({
   variable: "--intergalactic-duration-accordion",
   fallback: "200",
-  map: Number.parseInt,
+  map: function map(value) {
+    return "".concat(Number.parseInt(value));
+  },
   prop: "duration"
 })]);
-var RootItem = /* @__PURE__ */ function(_Component2) {
-  _inherits(RootItem2, _Component2);
-  var _super2 = _createSuper(RootItem2);
+var RootItem = /* @__PURE__ */ (function(_Component2) {
   function RootItem2() {
     var _this2;
     _classCallCheck(this, RootItem2);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this2), "handleClick", function() {
+    _this2 = _callSuper(this, RootItem2, [].concat(args));
+    _defineProperty(_this2, "handleClick", function() {
       var _this2$asProps = _this2.asProps, value = _this2$asProps.value, $handleInteraction = _this2$asProps.$handleInteraction;
       $handleInteraction(value);
     });
     return _this2;
   }
-  _createClass(RootItem2, [{
+  _inherits(RootItem2, _Component2);
+  return _createClass(RootItem2, [{
     key: "getToggleProps",
     value: function getToggleProps() {
-      var _this$asProps2 = this.asProps, value = _this$asProps2.value, uid = _this$asProps2.uid;
-      _this$asProps2.selected;
-      var disabled = _this$asProps2.disabled, use = _this$asProps2.use;
+      var _this$asProps2 = this.asProps, value = _this$asProps2.value, uid = _this$asProps2.uid, disabled = _this$asProps2.disabled, use = _this$asProps2.use;
       return {
         use,
         disabled,
         onClick: disabled ? void 0 : this.handleClick,
         id: "igc-".concat(uid, "-").concat(value, "-toggle"),
         tag: "h3",
-        size: 300
+        size: 300,
+        tabIndex: disabled ? -1 : 0
       };
     }
   }, {
@@ -138,7 +130,7 @@ var RootItem = /* @__PURE__ */ function(_Component2) {
       var _this$asProps3 = this.asProps, value = _this$asProps3.value, uid = _this$asProps3.uid, selected = _this$asProps3.selected, disabled = _this$asProps3.disabled;
       return {
         disabled,
-        id: "igc-".concat(uid, "-").concat(value, "-toggle-button"),
+        "id": "igc-".concat(uid, "-").concat(value, "-toggle-button"),
         "aria-expanded": selected ? "true" : "false",
         "aria-controls": selected ? "igc-".concat(uid, "-").concat(value, "-collapse") : void 0
       };
@@ -150,8 +142,8 @@ var RootItem = /* @__PURE__ */ function(_Component2) {
       return {
         selected,
         duration,
-        id: "igc-".concat(uid, "-").concat(value, "-collapse"),
-        role: "region",
+        "id": "igc-".concat(uid, "-").concat(value, "-collapse"),
+        "role": "region",
         "aria-labelledby": "igc-".concat(uid, "-").concat(value, "-toggle-button")
       };
     }
@@ -171,23 +163,20 @@ var RootItem = /* @__PURE__ */ function(_Component2) {
       return /* @__PURE__ */ React.createElement(Children, null);
     }
   }]);
-  return RootItem2;
-}(Component);
+})(Component);
 _defineProperty(RootItem, "displayName", "Item");
 _defineProperty(RootItem, "style", style);
 _defineProperty(RootItem, "enhance", [uniqueIDEnhancement()]);
-var Toggle = /* @__PURE__ */ function(_Component3) {
-  _inherits(Toggle2, _Component3);
-  var _super3 = _createSuper(Toggle2);
+var Toggle = /* @__PURE__ */ (function(_Component3) {
   function Toggle2() {
     var _this3;
     _classCallCheck(this, Toggle2);
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-    _this3 = _super3.call.apply(_super3, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this3), "toggleRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this3), "handleKeyDown", function(event) {
+    _this3 = _callSuper(this, Toggle2, [].concat(args));
+    _defineProperty(_this3, "toggleRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this3, "handleKeyDown", function(event) {
       if (event.key === "Enter") {
         if (_this3.toggleRef.current === event.target) {
           event.currentTarget.click();
@@ -201,38 +190,35 @@ var Toggle = /* @__PURE__ */ function(_Component3) {
     });
     return _this3;
   }
-  _createClass(Toggle2, [{
+  _inherits(Toggle2, _Component3);
+  return _createClass(Toggle2, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref5;
-      var _this$asProps6 = this.asProps, styles = _this$asProps6.styles;
-      _this$asProps6.disabled;
-      var use = _this$asProps6.use;
+      var _this$asProps6 = this.asProps, styles = _this$asProps6.styles, use = _this$asProps6.use;
       var SItemToggle = Text;
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItemToggle, _ref5.cn("SItemToggle", _objectSpread({}, assignProps({
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemToggle, _ref5.cn("SItemToggle", _objectSpread({}, assignProps({
         "use": use,
         "ref": this.toggleRef,
+        "innerOutline": true,
         "onKeyDown": this.handleKeyDown
       }, _ref))));
     }
   }]);
-  return Toggle2;
-}(Component);
-_defineProperty(Toggle, "enhance", [keyboardFocusEnhance()]);
+})(Component);
 function Chevron(props) {
   var _ref2 = arguments[0], _ref6;
   var styles = props.styles, size = props.size;
   var SItemChevron = size === "l" ? ChevronRightL : ChevronRightM;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SItemChevron, _ref6.cn("SItemChevron", _objectSpread({}, assignProps({}, _ref2))));
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemChevron, _ref6.cn("SItemChevron", _objectSpread({}, assignProps({}, _ref2))));
 }
 function ToggleButton(props) {
   var _ref3 = arguments[0], _ref7;
   var styles = props.styles;
-  var SToggleButton = Flex;
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SToggleButton, _ref7.cn("SToggleButton", _objectSpread({}, assignProps(_objectSpread({
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, assignProps({
     "alignItems": "center",
     "role": "button"
-  }, props), _ref3))));
+  }, _ref3));
 }
 function Collapse(props) {
   var _ref4 = arguments[0];

package/lib/esm/Accordion.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/index.mjs

@@ -1,6 +1,6 @@
-import { RootItem, default as default2, wrapAccordion } from "./Accordion.mjs";
+import { default as default2, wrapAccordion } from "./Accordion.mjs";
+import "./Accordion.type.mjs";
 export {
-  RootItem,
   default2 as default,
   wrapAccordion
 };

package/lib/esm/style/accordion.shadow.css

@@ -6,37 +6,29 @@ SItemToggle {
   outline: 0;
 }
 
-SItemToggle[keyboardFocused]:not([tabIndex='-1'])::after {
-  position: absolute;
-  display: block;
-  content: '';
-  inset: 3px;
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  pointer-events: none;
-  z-index: 3;
-}
 SItemToggle[use][use] {
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-weight: var(--intergalactic-regular, 400);
 }
 SItemToggle[use][use='primary'] {
-  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
+  background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
   padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
   margin-bottom: var(--intergalactic-spacing-05x, 2px);
 }
 SItemToggle[use][use='primary']:hover {
-  background-color: var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9);
+  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.96 0.001 180));
 }
 
 SItemToggle[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
 }
 
 SItemChevron {
+  margin-right: var(--intergalactic-spacing-2x, 8px);
   transform: rotate(0deg);
   transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
-  fill: var(--intergalactic-icon-primary-neutral, #6c6e79);
+  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
 
   &[selected] {
     transform: rotate(90deg);

package/lib/types/Accordion.d.ts

@@ -0,0 +1,68 @@
+import type { Intergalactic } from '@semcore/core';
+import { Component } from '@semcore/core';
+import React from 'react';
+import type { NSAccordion } from './Accordion.type';
+declare class RootAccordion extends Component<Intergalactic.InternalTypings.InferComponentProps<NSAccordion.Component>, typeof RootAccordion.enhance, NSAccordion.Handlers> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    static defaultProps: {
+        defaultValue: never[];
+        use: string;
+    };
+    static enhance: readonly [<T extends {}>(props: T) => T & {
+        duration: string;
+    }];
+    uncontrolledProps(): {
+        value: null;
+    };
+    handleToggleInteraction: (newValue: NSAccordion.Item.Props["value"]) => void;
+    getItemProps({ value }: NSAccordion.Item.Props): {
+        selected: boolean;
+        duration: never;
+        use: "primary" | "secondary" | undefined;
+        $handleInteraction: (newValue: NSAccordion.Item.Props["value"]) => void;
+    };
+    render(): React.JSX.Element;
+}
+export declare class RootItem extends Component<Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Component, typeof RootAccordion, 'Item'>, typeof RootItem.enhance> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    static enhance: readonly [(props: any) => {
+        uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+    }];
+    handleClick: () => void;
+    getToggleProps(): {
+        use: "primary" | "secondary" | undefined;
+        disabled: boolean | undefined;
+        onClick: (() => void) | undefined;
+        id: string;
+        tag: string;
+        size: number;
+        tabIndex: number;
+    };
+    getToggleButtonProps(): {
+        disabled: boolean | undefined;
+        id: string;
+        'aria-expanded': string;
+        'aria-controls': string | undefined;
+    };
+    getCollapseProps(): {
+        selected: boolean;
+        duration: number | undefined;
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+    };
+    getChevronProps(): {
+        selected: boolean;
+        size: number | undefined;
+    };
+    render(): React.JSX.Element;
+}
+declare const Accordion: NSAccordion.Component;
+export declare const wrapAccordion: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSAccordion.WrapComponent>> & PropsExtending) => React.ReactNode) => NSAccordion.WrapComponent<PropsExtending>;
+export default Accordion;

package/lib/types/Accordion.type.d.ts

@@ -0,0 +1,142 @@
+import type { BoxProps, FlexProps, Flex } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { Text } from '@semcore/typography';
+import type { Property } from 'csstype';
+declare namespace NSAccordion {
+    type Value = null | number | string | Array<number | string | null>;
+    type Props<V extends NSAccordion.Value = NSAccordion.Value> = FlexProps & {
+        /** Value for the active tab. Can be set as stroke, number, null or as array.
+         * @type AccordionValue
+         * */
+        value?: V;
+        /**
+       * Value of the active tabs selected by default
+       * @type AccordionValue
+       * @default []
+       */
+        defaultValue?: V;
+        /** Called when the selection is changed
+       * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
+       * */
+        onChange?: ((value: V, event?: React.SyntheticEvent) => void) | React.Dispatch<React.SetStateAction<V>>;
+        /** Animation duration of each Accordion.Item inside
+       * @default 350 */
+        duration?: number;
+        /**
+       * Changes the visual appearance of the component
+       * @default secondary
+       */
+        use?: 'primary' | 'secondary';
+    };
+    type Ctx = {
+        getItemProps: PropGetterFn;
+    };
+    type Handlers = {
+        value: Props['value'];
+    };
+    namespace Item {
+        type Props = {
+            /** Tab value */
+            value: string | number;
+            /** Disabling selection changes */
+            disabled?: boolean;
+            /** Animation duration
+             * @default 350 */
+            duration?: number;
+        };
+        type Ctx = {
+            getToggleProps?: PropGetterFn;
+            getCollapseProps?: PropGetterFn;
+            getChevronProps?: PropGetterFn;
+            selected?: boolean;
+        };
+        namespace Toggle {
+            type Props = BoxProps & {
+                tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+            };
+            type Component = Intergalactic.Component<typeof Text, Props>;
+        }
+        namespace ToggleButton {
+            type Props = {};
+            type Component = Intergalactic.Component<typeof Flex, Props>;
+        }
+        namespace Chevron {
+            type Props = BoxProps & {
+                /**
+                 * Chevron size
+                 * @default m
+                 */
+                size?: 'm' | 'l';
+            };
+            type Component = Intergalactic.Component<'div', Props>;
+        }
+        namespace Collapse {
+            type Props = BoxProps & {
+                /** Animation titles */
+                keyframes?: [string, string];
+                /** Enables animation on first rendering
+                 * @default false
+                 */
+                initialAnimation?: boolean;
+                /**
+                 * @default ease-out
+                 */
+                timingFunction?: Property.AnimationTimingFunction;
+                /**
+                 * @default false
+                 */
+                animationsDisabled?: boolean;
+                /** Animation duration in ms
+                 * @default 0
+                 */
+                duration?: number | [number, number];
+                /** If it set to `true`, animated node is persisted in dom even if `visible=false`   */
+                preserveNode?: boolean;
+                /**
+                 * Add overflow=clip when passing animation
+                 * @default true
+                 * */
+                overflowHidden?: boolean;
+                /**
+                 * Value for height after animation
+                 * @default auto
+                 */
+                defaultHeight?: 'auto' | '100%';
+            };
+            type Component = Intergalactic.Component<'div', Props>;
+        }
+        type Component = Intergalactic.Component<'div', Props, Ctx> & {
+            Toggle: Toggle.Component;
+            ToggleButton: ToggleButton.Component;
+            Chevron: Chevron.Component;
+            Collapse: Collapse.Component;
+        };
+    }
+    type WrapComponent<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx & {
+        value: V;
+    }, [
+        handlers: Handlers
+    ]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
+    type Component = WrapComponent & {
+        Item: Item.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type AccordionValue = NSAccordion.Value;
+/** @deprecated It will be removed in v18. */
+export type AccordionProps<V extends AccordionValue = AccordionValue> = NSAccordion.Props<V>;
+/** @deprecated It will be removed in v18. */
+export type AccordionContext = NSAccordion.Ctx;
+/** @deprecated It will be removed in v18. */
+export type AccordionHandlers = NSAccordion.Handlers;
+/** @deprecated It will be removed in v18. */
+export type AccordionItemProps = NSAccordion.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type AccordionItemContext = NSAccordion.Item.Ctx;
+/** @deprecated It will be removed in v18. */
+export type AccordionItemToggleProps = NSAccordion.Item.Toggle.Props;
+/** @deprecated It will be removed in v18. */
+export type ChevronItemProps = NSAccordion.Item.Chevron.Props;
+/** @deprecated It will be removed in v18. */
+export type AccordionCollapseProps = NSAccordion.Item.Collapse.Props;
+export type { NSAccordion };

package/lib/types/index.d.ts

@@ -1,124 +1,2 @@
-import { BoxProps, FlexProps, Flex } from '@semcore/flex-box';
-import { PropGetterFn, Intergalactic, UnknownProperties } from '@semcore/core';
-import { CollapseProps } from '@semcore/animation';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import { Text } from '@semcore/typography';
-
-export type AccordionValue = null | number | string | Array<number | string | null>;
-
-export type AccordionProps<T extends AccordionValue = AccordionValue> = FlexProps & {
-  /** Value for the active tab. Can be set as stroke, number, null or as array.
-   * @type AccordionValue
-   * */
-  value?: T;
-  /**
-   * Value of the active tabs selected by default
-   * @type AccordionValue
-   * @default []
-   */
-  defaultValue?: T;
-  /** Called when the selection is changed
-   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
-   * */
-  onChange?:
-    | ((value: T, event?: React.SyntheticEvent) => void)
-    | React.Dispatch<React.SetStateAction<T>>;
-  /** Animation duration of each Accordion.Item inside
-   * @default 350 */
-  duration?: number;
-
-  /**
-   * Changes the visual appearance of the component
-   * @default secondary
-   */
-  use?: 'primary' | 'secondary';
-};
-
-export interface IAccordionProps<T extends AccordionValue = AccordionValue>
-  extends AccordionProps<T> {}
-
-/** @deprecated */
-export interface IAccordionContext extends AccordionContext, UnknownProperties {}
-export type AccordionContext = {
-  getItemProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface IAccordionHandlers extends AccordionHandlers, UnknownProperties {}
-export type AccordionHandlers = {
-  value: (value: AccordionValue) => void;
-};
-
-/** @deprecated */
-export interface IAccordionItemProps extends AccordionItemProps, UnknownProperties {}
-export type AccordionItemProps = {
-  /** Tab value */
-  value: string | number;
-  /** Disabling selection changes */
-  disabled?: boolean;
-  /** Animation duration
-   * @default 350 */
-  duration?: number;
-};
-
-/** @deprecated */
-export interface IAccordionItemContext extends AccordionItemContext, UnknownProperties {}
-export type AccordionItemContext = {
-  getToggleProps?: PropGetterFn;
-  getCollapseProps?: PropGetterFn;
-  getChevronProps?: PropGetterFn;
-  selected?: boolean;
-};
-
-export type AccordionItemToggleProps = BoxProps &
-  KeyboardFocusProps & {
-    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  };
-export type ChevronItemProps = BoxProps & {
-  /**
-   * Chevron size
-   * @default m
-   */
-  size?: 'm' | 'l';
-};
-
-type IntergalacticAccordionComponent<PropsExtending = {}> = (<
-  Value extends AccordionValue,
-  Tag extends Intergalactic.Tag = 'div',
->(
-  props: Intergalactic.InternalTypings.ComponentProps<
-    Tag,
-    'div',
-    AccordionProps<Value>,
-    AccordionContext & { value: Value },
-    [handlers: AccordionHandlers]
-  > &
-    PropsExtending,
-) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', AccordionProps>;
-
-declare const Accordion: IntergalacticAccordionComponent & {
-  Item: Intergalactic.Component<
-    'div',
-    AccordionItemProps,
-    AccordionItemContext,
-    [handlers: AccordionHandlers]
-  > & {
-    Toggle: Intergalactic.Component<typeof Text, AccordionItemToggleProps>;
-    ToggleButton: Intergalactic.Component<typeof Flex, {}>;
-    Chevron: Intergalactic.Component<'div', ChevronItemProps>;
-    Collapse: Intergalactic.Component<'div', CollapseProps>;
-  };
-};
-
-declare const wrapAccordion: <PropsExtending extends {}>(
-  wrapper: (
-    props: Intergalactic.InternalTypings.UntypeRefAndTag<
-      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticAccordionComponent>
-    > &
-      PropsExtending,
-  ) => React.ReactNode,
-) => IntergalacticAccordionComponent<PropsExtending>;
-export { wrapAccordion };
-
-export default Accordion;
+export { default, wrapAccordion } from './Accordion';
+export * from './Accordion.type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "Semrush Accordion Component",
-  "version": "5.48.2",
+  "version": "5.49.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,15 +14,15 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/animation": "2.41.4",
-    "@semcore/flex-box": "5.41.4",
-    "@semcore/icon": "4.62.1",
-    "@semcore/utils": "4.48.5",
-    "@semcore/button": "5.43.3",
-    "@semcore/typography": "5.53.2"
+    "@semcore/animation": "2.42.0-prerelease.0",
+    "@semcore/flex-box": "5.42.0-prerelease.0",
+    "@semcore/icon": "4.63.0-prerelease.0",
+    "@semcore/utils": "4.49.0-prerelease.0",
+    "@semcore/button": "5.44.0-prerelease.0",
+    "@semcore/typography": "5.54.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.40.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },