@akinon/ui-collapse 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { CollapseProps } from './types';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export declare const Collapse: ({ ...collapseProps }: CollapseProps) => React.JSX.Element;
 export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAmB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAqB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -15,11 +15,28 @@ exports.Collapse = void 0;
 const icons_1 = require("@akinon/icons");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 const Collapse = (_a) => {
     var _b;
     var collapseProps = __rest(_a, []);
     return (React.createElement(antd_1.Collapse, Object.assign({ ghost: true, defaultActiveKey: (_b = collapseProps.items) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }, collapseProps, (collapseProps.expandIcon && {
-        expandIcon: panelProps => collapseProps.expandIcon ? (React.createElement(icons_1.Icon, { icon: collapseProps.expandIcon(panelProps), style: collapseProps.iconStyle })) : undefined
+        expandIcon: panelProps => {
+            const { name, style, size } = collapseProps.expandIcon(panelProps);
+            return name ? (React.createElement(icons_1.Icon, { size: size !== null && size !== void 0 ? size : 16, icon: name, style: style })) : undefined;
+        }
     }))));
 };
 exports.Collapse = Collapse;

package/dist/cjs/types.d.ts

@@ -5,60 +5,73 @@ import type React from 'react';
 export type ExpandIconPosition = 'start' | 'end';
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
 
-export interface ItemType extends React.DOMAttributes<HTMLDivElement> {
+export interface CollapseItemType extends React.DOMAttributes<HTMLDivElement> {
   /**
    * The key of the panel.
    */
   key?: React.Key;
+
   /**
    * The label of the panel.
    */
   label?: React.ReactNode;
+
   /**
    * The React ref object of the panel.
    */
   ref?: React.RefObject<HTMLDivElement>;
+
   /**
    * The id of the panel.
    */
   id?: string;
+
   /**
    * The class name of the panel header.
    */
   headerClass?: string;
+
   /**
    * Whether to show the arrow.
    */
   showArrow?: boolean;
+
   /**
    * The class name of the panel.
    */
   className?: string;
+
   /**
    * Whether to destroy the inactive panel.
    */
   destroyInactivePanel?: boolean;
+
   /**
    * Forced render of content on panel, instead of lazy rendering after clicking on header.
    */
   forceRender?: boolean;
+
   /**
    * The extra element of the panel header.
    */
   extra?: React.ReactNode;
+
   /**
    * The callback function that is triggered when the panel is clicked.
    */
   onItemClick?: (panelKey: React.Key) => void;
+
   /**
    * Custom expand icon.
    */
   expandIcon?: (panelProps: PanelProps) => IconName;
+
   /**
    * The HTML WAI-ARIA role of the panel.
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
    */
   role?: string;
+
   /**
    * The children of the panel.
    */
@@ -70,62 +83,77 @@ export type CollapseProps = {
    * The key of the active panel.
    */
   activeKey?: React.Key | React.Key[];
+
   /**
    * The default key of the active panel.
    */
   defaultActiveKey?: React.Key | React.Key[];
+
   /**
    * The callback function that is triggered when the active panel changes.
    */
   onChange?: (key: React.Key | React.Key[]) => void;
+
   /**
    * Whether to enable accordion mode.
    */
   accordion?: boolean;
+
   /**
    * The class name of the collapse.
    */
   className?: string;
+
   /**
    * The class name of the root element.
    */
   rootClassName?: string;
+
   /**
    * Whether to show border.
    */
   bordered?: boolean;
+
   /**
    * Whether to destroy the inactive panel.
    */
   destroyInactivePanel?: boolean;
+
   /**
    * The expand icon.
    */
-  expandIcon?: (panelProps: PanelProps) => IconName;
+  expandIcon?: (panelProps: PanelProps) => {
+    name: IconName;
+    size?: number;
+    style?: React.CSSProperties;
+    ariaProps?: React.HTMLAttributes<HTMLElement>;
+  };
+
   /**
    * The position of the expand icon.
    */
   expandIconPosition?: ExpandIconPosition;
+
   /**
    * Whether to hide the border and transparent background.
    */
   ghost?: boolean;
+
   /**
    * The size of the collapse.
    */
   size?: 'small' | 'middle' | 'large';
+
   /**
    * Collapse-wide collapsible part or disabled.
    */
   collapsible?: CollapsibleType;
+
   /**
    * The panels of the collapse.
    */
-  items?: ItemType[];
-  /**
-   * The style of the expand icon.
-   */
-  iconStyle?: React.CSSProperties;
+  items?: CollapseItemType[];
+
   /**
    * @ignore
    */
@@ -137,32 +165,34 @@ export type PanelProps = {
    * Whether the panel is active.
    */
   isActive?: boolean;
+
   /**
    * The header of the panel.
    */
   header?: React.ReactNode;
+
   /**
    * The class name of the panel.
    */
   className?: string;
+
   /**
    * Whether to show the arrow.
    */
   showArrow?: boolean;
+
   /**
    * Forced render of content on panel, instead of lazy rendering after clicking on header.
    */
   forceRender?: boolean;
+
   /**
    * The extra element of the panel header.
    */
   extra?: React.ReactNode;
+
   /**
    * The collapsible part of the panel or disabled.
    */
   collapsible?: CollapsibleType;
-  /**
-   * The style of the expand icon.
-   */
-  iconStyle?: React.CSSProperties;
 };

package/dist/esm/index.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { CollapseProps } from './types';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export declare const Collapse: ({ ...collapseProps }: CollapseProps) => React.JSX.Element;
 export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAmB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,SAAS,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,QAAQ,yBAA0B,aAAa,sBAqB3D,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -12,10 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Icon } from '@akinon/icons';
 import { Collapse as AntCollapse } from 'antd';
 import * as React from 'react';
+/**
+ * Collapse component for Akinon UI.
+ *
+ * The Collapse component provides a way to organize content in expandable panels.
+ * It allows users to toggle the visibility of content sections, supporting both
+ * single (accordion) and multiple open panels at a time.
+ *
+ * The component is fully customizable with options for expand icons, ghost mode,
+ * lazy rendering, and border visibility. It adheres to the Akinon design system,
+ * ensuring consistent styling and accessibility.
+ *
+ * Suitable for use cases where space-saving and content organization are priorities,
+ * such as FAQs, settings pages, or nested content structures.
+ */
 export const Collapse = (_a) => {
     var _b;
     var collapseProps = __rest(_a, []);
     return (React.createElement(AntCollapse, Object.assign({ ghost: true, defaultActiveKey: (_b = collapseProps.items) === null || _b === void 0 ? void 0 : _b.map(item => item.key) }, collapseProps, (collapseProps.expandIcon && {
-        expandIcon: panelProps => collapseProps.expandIcon ? (React.createElement(Icon, { icon: collapseProps.expandIcon(panelProps), style: collapseProps.iconStyle })) : undefined
+        expandIcon: panelProps => {
+            const { name, style, size } = collapseProps.expandIcon(panelProps);
+            return name ? (React.createElement(Icon, { size: size !== null && size !== void 0 ? size : 16, icon: name, style: style })) : undefined;
+        }
     }))));
 };

package/dist/esm/types.d.ts

@@ -5,60 +5,73 @@ import type React from 'react';
 export type ExpandIconPosition = 'start' | 'end';
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
 
-export interface ItemType extends React.DOMAttributes<HTMLDivElement> {
+export interface CollapseItemType extends React.DOMAttributes<HTMLDivElement> {
   /**
    * The key of the panel.
    */
   key?: React.Key;
+
   /**
    * The label of the panel.
    */
   label?: React.ReactNode;
+
   /**
    * The React ref object of the panel.
    */
   ref?: React.RefObject<HTMLDivElement>;
+
   /**
    * The id of the panel.
    */
   id?: string;
+
   /**
    * The class name of the panel header.
    */
   headerClass?: string;
+
   /**
    * Whether to show the arrow.
    */
   showArrow?: boolean;
+
   /**
    * The class name of the panel.
    */
   className?: string;
+
   /**
    * Whether to destroy the inactive panel.
    */
   destroyInactivePanel?: boolean;
+
   /**
    * Forced render of content on panel, instead of lazy rendering after clicking on header.
    */
   forceRender?: boolean;
+
   /**
    * The extra element of the panel header.
    */
   extra?: React.ReactNode;
+
   /**
    * The callback function that is triggered when the panel is clicked.
    */
   onItemClick?: (panelKey: React.Key) => void;
+
   /**
    * Custom expand icon.
    */
   expandIcon?: (panelProps: PanelProps) => IconName;
+
   /**
    * The HTML WAI-ARIA role of the panel.
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
    */
   role?: string;
+
   /**
    * The children of the panel.
    */
@@ -70,62 +83,77 @@ export type CollapseProps = {
    * The key of the active panel.
    */
   activeKey?: React.Key | React.Key[];
+
   /**
    * The default key of the active panel.
    */
   defaultActiveKey?: React.Key | React.Key[];
+
   /**
    * The callback function that is triggered when the active panel changes.
    */
   onChange?: (key: React.Key | React.Key[]) => void;
+
   /**
    * Whether to enable accordion mode.
    */
   accordion?: boolean;
+
   /**
    * The class name of the collapse.
    */
   className?: string;
+
   /**
    * The class name of the root element.
    */
   rootClassName?: string;
+
   /**
    * Whether to show border.
    */
   bordered?: boolean;
+
   /**
    * Whether to destroy the inactive panel.
    */
   destroyInactivePanel?: boolean;
+
   /**
    * The expand icon.
    */
-  expandIcon?: (panelProps: PanelProps) => IconName;
+  expandIcon?: (panelProps: PanelProps) => {
+    name: IconName;
+    size?: number;
+    style?: React.CSSProperties;
+    ariaProps?: React.HTMLAttributes<HTMLElement>;
+  };
+
   /**
    * The position of the expand icon.
    */
   expandIconPosition?: ExpandIconPosition;
+
   /**
    * Whether to hide the border and transparent background.
    */
   ghost?: boolean;
+
   /**
    * The size of the collapse.
    */
   size?: 'small' | 'middle' | 'large';
+
   /**
    * Collapse-wide collapsible part or disabled.
    */
   collapsible?: CollapsibleType;
+
   /**
    * The panels of the collapse.
    */
-  items?: ItemType[];
-  /**
-   * The style of the expand icon.
-   */
-  iconStyle?: React.CSSProperties;
+  items?: CollapseItemType[];
+
   /**
    * @ignore
    */
@@ -137,32 +165,34 @@ export type PanelProps = {
    * Whether the panel is active.
    */
   isActive?: boolean;
+
   /**
    * The header of the panel.
    */
   header?: React.ReactNode;
+
   /**
    * The class name of the panel.
    */
   className?: string;
+
   /**
    * Whether to show the arrow.
    */
   showArrow?: boolean;
+
   /**
    * Forced render of content on panel, instead of lazy rendering after clicking on header.
    */
   forceRender?: boolean;
+
   /**
    * The extra element of the panel header.
    */
   extra?: React.ReactNode;
+
   /**
    * The collapsible part of the panel or disabled.
    */
   collapsible?: CollapsibleType;
-  /**
-   * The style of the expand icon.
-   */
-  iconStyle?: React.CSSProperties;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-collapse",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,17 +9,17 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/icons": "^0.6.0"
+    "antd": "5.22.6",
+    "@akinon/icons": "^1.0.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/icons": "0.6.0",
-    "@akinon/typescript-config": "0.4.0",
-    "@akinon/ui-theme": "0.7.0"
+    "typescript": "*",
+    "@akinon/ui-theme": "1.0.1",
+    "@akinon/typescript-config": "1.0.1",
+    "@akinon/icons": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",