@rainbow-oh/yee-c 0.8.0 → 0.8.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 InsureMO
+Copyright (c) 2026 insureMO
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@rainbow-oh/yee-c.svg)](https://www.npmjs.com/package/@rainbow-oh/yee-c) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 
-65+ foundational React UI components for building modern enterprise applications. Part of the [Yee](https://github.com/InsureMO/oh-yee) component library.
+65+ foundational React UI components for building modern enterprise applications. Part of the [Yee](https://github.com/insureMO/oh-yee) component library.
 
 ## Features
 
@@ -24,7 +24,16 @@ Requires `react >= 18` and `react-dom >= 18` as peer dependencies.
 ## Usage
 
 ```tsx
-import { Button, Form, Input, Table, Card, Select, Dialog, message } from '@rainbow-oh/yee-c';
+import {
+  Button,
+  Form,
+  Input,
+  Table,
+  Card,
+  Select,
+  Dialog,
+  message,
+} from '@rainbow-oh/yee-c';
 ```
 
 Import styles:
@@ -54,10 +63,16 @@ function UserForm() {
     <>
       {messageHolder}
       <Form form={form} onFinish={handleSubmit}>
-        <Form.Field label="Name" name="name" rules={[{ required: true, message: 'Please enter name' }]}>
+        <Form.Field
+          label="Name"
+          name="name"
+          rules={[{ required: true, message: 'Please enter name' }]}
+        >
           <Input />
         </Form.Field>
-        <Button type="primary" htmlType="submit">Submit</Button>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
       </Form>
     </>
   );
@@ -98,31 +113,31 @@ ConfigProvider, Portal
 
 20+ utility hooks for common React patterns:
 
-| Hook | Description |
-|---|---|
-| `useDebounceFunction` | Debounced function execution |
-| `useDebounceValue` | Debounced state value |
-| `useDeepCompareEffect` | Effect with deep comparison |
-| `useDeepCompareMemo` | Memo with deep comparison |
-| `useMergedState` | Controlled/uncontrolled state |
-| `useLatest` | Always-current ref value |
-| `useMount` | Mount lifecycle hook |
-| `useUpdateEffect` | Skip-first-run effect |
-| `useResizeObserver` | Element resize observation |
-| `useElementSize` | Element dimensions tracking |
-| `useEvent` | Stable event handler |
-| `useFocusManage` | Focus management |
-| `useKeyControl` | Keyboard control |
-| `useVirtualForm` | Virtual scrolling for forms |
+| Hook                   | Description                   |
+| ---------------------- | ----------------------------- |
+| `useDebounceFunction`  | Debounced function execution  |
+| `useDebounceValue`     | Debounced state value         |
+| `useDeepCompareEffect` | Effect with deep comparison   |
+| `useDeepCompareMemo`   | Memo with deep comparison     |
+| `useMergedState`       | Controlled/uncontrolled state |
+| `useLatest`            | Always-current ref value      |
+| `useMount`             | Mount lifecycle hook          |
+| `useUpdateEffect`      | Skip-first-run effect         |
+| `useResizeObserver`    | Element resize observation    |
+| `useElementSize`       | Element dimensions tracking   |
+| `useEvent`             | Stable event handler          |
+| `useFocusManage`       | Focus management              |
+| `useKeyControl`        | Keyboard control              |
+| `useVirtualForm`       | Virtual scrolling for forms   |
 
 ## Theming
 
 Use built-in color themes by importing the corresponding CSS file:
 
 ```tsx
-import '@rainbow-oh/yee-c/variables.css';   // Base variables
-import '@rainbow-oh/yee-c/color.blue.css';  // Blue theme
-import '@rainbow-oh/yee-c/color.dark.css';  // Dark theme
+import '@rainbow-oh/yee-c/variables.css'; // Base variables
+import '@rainbow-oh/yee-c/color.blue.css'; // Blue theme
+import '@rainbow-oh/yee-c/color.dark.css'; // Dark theme
 ```
 
 Available themes: `blue`, `crimson`, `dark`, `green`, `jam`, `navy`, `peach`, `pine`, `pitaya`, `pumpkin`, `ruby`.
@@ -145,8 +160,8 @@ pnpm lint
 
 ## Contributing
 
-See the root [Contributing Guide](https://github.com/InsureMO/oh-yee/blob/main/CONTRIBUTING.md).
+See the root [Contributing Guide](https://github.com/insureMO/oh-yee/blob/main/CONTRIBUTING.md).
 
 ## License
 
-[MIT](./LICENSE) © [InsureMO](https://github.com/InsureMO)
+[MIT](./LICENSE) © [insureMO](https://github.com/insureMO)

package/dist/cjs/Card/card.js

@@ -140,10 +140,10 @@ var Card = (baseprops) => {
         ),
         style: styles == null ? void 0 : styles.expandIcon,
         "aria-expanded": mergedExpanded,
+        "aria-label": mergedExpanded ? "Collapse content" : "Expand content",
         icon: icon ? icon : /* @__PURE__ */ import_react2.default.createElement(
           import_lucide_react.ChevronUp,
           {
-            "aria-label": "expanded",
             strokeWidth: 1.5,
             size: 16,
             style: {
@@ -187,7 +187,8 @@ var Card = (baseprops) => {
         onClick: headerClickable ? handleExpand : void 0,
         onKeyDown: handleKeyDown,
         tabIndex: headerClickable ? 0 : void 0,
-        role: headerClickable ? "button" : void 0
+        role: headerClickable ? "button" : void 0,
+        "aria-expanded": headerClickable ? mergedExpanded : void 0
       },
       iconPosition === "left" ? renderExpandIcon() : null,
       title ? /* @__PURE__ */ import_react2.default.createElement(
@@ -208,7 +209,10 @@ var Card = (baseprops) => {
         style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.content), { overflow: "hidden" }),
         animate: mergedExpanded ? { height: "auto" } : { height: 0 },
         exit: { height: 0, display: "none" },
-        transition: { duration: animationDuration }
+        transition: { duration: animationDuration },
+        role: "region",
+        "aria-labelledby": title ? headerId : void 0,
+        "aria-hidden": !mergedExpanded
       },
       children
     )

package/dist/cjs/Carousel/carousel-item.js

@@ -38,18 +38,23 @@ var import_carousel = require("./carousel");
 var CarouselItem = (props) => {
   const { style, className, children, index } = props;
   const { prefixCls, current } = import_react.default.useContext(import_carousel.CarouselCtx);
+  const isActive = index === current - 1;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(
         `${prefixCls}-item`,
         {
-          [`${prefixCls}-item-active`]: index === current - 1
+          [`${prefixCls}-item-active`]: isActive
         },
         className
       ),
       "data-index": index,
-      style
+      style,
+      role: "tabpanel",
+      "aria-roledescription": "slide",
+      "aria-label": `Slide ${(index != null ? index : 0) + 1}`,
+      "aria-hidden": !isActive
     },
     children
   );

package/dist/cjs/Carousel/carousel.js

@@ -211,6 +211,9 @@ var Carousel = import_react.default.forwardRef(
         { [`${prefixCls}-arrows-visible`]: showArrow },
         className
       ),
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-live": autoplay ? "off" : "polite",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave
     });
@@ -233,7 +236,16 @@ var Carousel = import_react.default.forwardRef(
             classNames == null ? void 0 : classNames.prev
           ),
           style: styles == null ? void 0 : styles.prev,
-          onClick: prev
+          onClick: prev,
+          role: "button",
+          "aria-label": "Previous slide",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              prev();
+            }
+          }
         },
         direction === "vertical" ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, null) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, null)
       ), /* @__PURE__ */ import_react.default.createElement(
@@ -247,7 +259,16 @@ var Carousel = import_react.default.forwardRef(
             classNames == null ? void 0 : classNames.next
           ),
           style: styles == null ? void 0 : styles.next,
-          onClick: next
+          onClick: next,
+          role: "button",
+          "aria-label": "Next slide",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              next();
+            }
+          }
         },
         direction === "vertical" ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, null) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, null)
       ));
@@ -262,15 +283,21 @@ var Carousel = import_react.default.forwardRef(
             [`${prefixCls}-bar-${dotPosition}`],
             classNames == null ? void 0 : classNames.dot
           ),
-          style: styles == null ? void 0 : styles.dot
+          style: styles == null ? void 0 : styles.dot,
+          role: "tablist",
+          "aria-label": "Slide controls"
         },
         new Array(import_react.default.Children.count(children)).fill(0).map((i, index) => {
+          const isActive = current === index + 1 || current === 0 && index === count - 1;
           return /* @__PURE__ */ import_react.default.createElement(
             "li",
             {
               className: (0, import_clsx.default)({
-                active: current === index + 1 || current === 0 && index === count
+                active: isActive
               }),
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-label": `Slide ${index + 1}`,
               tabIndex: 0,
               onClick: () => handleIndicator(index + 1, "click"),
               onKeyDown: (e) => {

package/dist/cjs/Cascader/cascader.js

@@ -409,41 +409,49 @@ var Cascader = (baseprops) => {
     );
   };
   const renderPopup = () => {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(prefixCls) }, isFilter ? /* @__PURE__ */ import_react.default.createElement(
-      import_search_list.default,
-      {
-        prefixCls,
-        items: filteredList,
-        onClick: onSearchItemClick
-      }
-    ) : /* @__PURE__ */ import_react.default.createElement(
-      CascaderCtx.Provider,
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        value: {
+        className: (0, import_clsx.default)(prefixCls),
+        role: "group",
+        "aria-label": "Cascader options"
+      },
+      isFilter ? /* @__PURE__ */ import_react.default.createElement(
+        import_search_list.default,
+        {
           prefixCls,
-          multiple: !!multiple,
-          expandTrigger,
-          mergedValue,
-          nodeMap,
-          flatOptions,
-          expandedPath,
-          loadData,
-          onNodeMouseEnter,
-          onItemClick
+          items: filteredList,
+          onClick: onSearchItemClick
         }
-      },
-      columns.map((data, index) => {
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_column.default,
-          {
+      ) : /* @__PURE__ */ import_react.default.createElement(
+        CascaderCtx.Provider,
+        {
+          value: {
             prefixCls,
-            data,
-            index,
-            key: index
+            multiple: !!multiple,
+            expandTrigger,
+            mergedValue,
+            nodeMap,
+            flatOptions,
+            expandedPath,
+            loadData,
+            onNodeMouseEnter,
+            onItemClick
           }
-        );
-      })
-    ));
+        },
+        columns.map((data, index) => {
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_column.default,
+            {
+              prefixCls,
+              data,
+              index,
+              key: index
+            }
+          );
+        })
+      )
+    );
   };
   return /* @__PURE__ */ import_react.default.createElement(
     import_Trigger.default,

package/dist/cjs/Cascader/column.js

@@ -53,14 +53,22 @@ var import_react = __toESM(require("react"));
 var import_node = __toESM(require("./node"));
 var Column = (props) => {
   const { prefixCls, data, index } = props;
-  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-menu`, role: "menu" }, Array.isArray(data) && data.map((item, idx) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_node.default,
-      __spreadProps(__spreadValues({}, item), {
-        index: idx,
-        key: `cascader-${index}-${item.uid || idx}`
-      })
-    );
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(
+    "ul",
+    {
+      className: `${prefixCls}-menu`,
+      role: "listbox",
+      "aria-label": `Level ${index + 1} options`
+    },
+    Array.isArray(data) && data.map((item, idx) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_node.default,
+        __spreadProps(__spreadValues({}, item), {
+          index: idx,
+          key: `cascader-${index}-${item.uid || idx}`
+        })
+      );
+    })
+  );
 };
 var column_default = Column;

package/dist/cjs/Cascader/node.js

@@ -41,7 +41,7 @@ var import_isEqual = __toESM(require("../utils/isEqual"));
 var import_cascader = require("./cascader");
 var import_utils = require("./utils");
 var Node = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { uid, value, disabled, label, $source, isLeaf, path, level } = props;
   const {
     prefixCls,
@@ -120,14 +120,26 @@ var Node = (props) => {
     {
       className: clsName,
       onMouseEnter: handleMouseEnter,
-      onClick: (e) => handleClick(false, e)
+      onClick: (e) => handleClick(false, e),
+      role: "option",
+      "aria-disabled": disabled || void 0,
+      "aria-selected": checked || ((_b = expandedPath[level]) == null ? void 0 : _b.key) === uid,
+      "aria-expanded": isParent ? ((_c = expandedPath[level]) == null ? void 0 : _c.key) === uid : void 0,
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(false, e);
+        }
+      }
     },
     multiple && /* @__PURE__ */ import_react.default.createElement(
       import_Checkbox.default,
       {
         checked: isParent ? checkedAll : checked,
         onChange: isParent ? () => handleClick(true) : void 0,
-        indeterminate
+        indeterminate,
+        "aria-label": `Select ${typeof label === "string" ? label : String(label)}`
       }
     ),
     /* @__PURE__ */ import_react.default.createElement(
@@ -140,7 +152,7 @@ var Node = (props) => {
       },
       label
     ),
-    load === 1 ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { size: "small" }) : isLeaf === false ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 20 }) : null
+    load === 1 ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { size: "small", "aria-label": "Loading" }) : isLeaf === false ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 20, "aria-hidden": "true" }) : null
   );
 };
 var node_default = (0, import_react.memo)(Node);

package/dist/cjs/Cascader/search-list.js

@@ -45,19 +45,36 @@ var renderHighlightText = (matches) => {
 };
 var SearchList = (props) => {
   const { prefixCls, items, onClick } = props;
-  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-filter-menu` }, items.length ? items.map((item) => {
-    var _a;
-    const title = ((_a = item.data.$source) == null ? void 0 : _a.title) || item.data.labelPath.join(" / ");
-    return /* @__PURE__ */ import_react.default.createElement(
-      "li",
-      {
-        className: `${prefixCls}-filter-menu-item`,
-        title: typeof title === "string" ? title : String(title),
-        onClick: () => onClick(item.data),
-        key: item.data.uid
-      },
-      renderHighlightText(item.matches)
-    );
-  }) : /* @__PURE__ */ import_react.default.createElement("p", null, "No result"));
+  return /* @__PURE__ */ import_react.default.createElement(
+    "ul",
+    {
+      className: `${prefixCls}-filter-menu`,
+      role: "listbox",
+      "aria-label": "Search results"
+    },
+    items.length ? items.map((item) => {
+      var _a, _b;
+      const title = ((_a = item.data.$source) == null ? void 0 : _a.title) || item.data.labelPath.join(" / ");
+      return /* @__PURE__ */ import_react.default.createElement(
+        "li",
+        {
+          className: `${prefixCls}-filter-menu-item`,
+          title: typeof title === "string" ? title : String(title),
+          onClick: () => onClick(item.data),
+          key: item.data.uid,
+          role: "option",
+          "aria-disabled": ((_b = item.data.$source) == null ? void 0 : _b.disabled) || void 0,
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onClick(item.data);
+            }
+          }
+        },
+        renderHighlightText(item.matches)
+      );
+    }) : /* @__PURE__ */ import_react.default.createElement("li", { role: "option", "aria-disabled": "true" }, "No result")
+  );
 };
 var search_list_default = import_react.default.memo(SearchList);

package/dist/cjs/Cascader/utils/index.js

@@ -113,11 +113,7 @@ var flattenOptions = (tree, fieldNames, maxDepth = DEFAULT_MAX_DEPTH) => {
       });
       if (hasChild(node, children)) {
         seen.add(node);
-        dfs(
-          node[children],
-          path,
-          labelPath
-        );
+        dfs(node[children], path, labelPath);
         seen.delete(node);
       }
     });

package/dist/cjs/Checkbox/checkbox-group.js

@@ -100,22 +100,31 @@ var CheckboxGroup = (baseprops) => {
     setMergedValue(newValue);
     onChange == null ? void 0 : onChange(newValue);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style }, /* @__PURE__ */ import_react.default.createElement(
-    CheckboxGroupCtx.Provider,
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      value: { name, buttonStyle, onChange: handleChange }
+      className: cls,
+      style,
+      role: "group",
+      "aria-disabled": disabled || void 0
     },
-    options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
-      import_checkbox.default,
-      __spreadProps(__spreadValues({
-        disabled
-      }, option), {
-        checked: mergedValue.includes(option.value),
-        key: option.value || index
-      }),
-      option.label
-    ))
-  ));
+    /* @__PURE__ */ import_react.default.createElement(
+      CheckboxGroupCtx.Provider,
+      {
+        value: { name, buttonStyle, onChange: handleChange }
+      },
+      options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_checkbox.default,
+        __spreadProps(__spreadValues({
+          disabled
+        }, option), {
+          checked: mergedValue.includes(option.value),
+          key: option.value || index
+        }),
+        option.label
+      ))
+    )
+  );
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 var checkbox_group_default = CheckboxGroup;

package/dist/cjs/Checkbox/checkbox.js

@@ -119,7 +119,8 @@ var Checkbox = (baseprops) => {
         },
         className
       ),
-      style
+      style,
+      "aria-disabled": disabled || void 0
     },
     /* @__PURE__ */ import_react.default.createElement(
       "span",
@@ -139,14 +140,16 @@ var Checkbox = (baseprops) => {
           value,
           disabled,
           checked: mergedChecked,
-          onChange: handleChange
+          onChange: handleChange,
+          "aria-checked": indeterminate ? "mixed" : mergedChecked
         })
       ),
       /* @__PURE__ */ import_react.default.createElement(
         "span",
         {
           className: (0, import_clsx.default)(`${prefixCls}-inner`, classNames == null ? void 0 : classNames.inner),
-          style: styles == null ? void 0 : styles.inner
+          style: styles == null ? void 0 : styles.inner,
+          "aria-hidden": "true"
         }
       )
     ),

package/dist/cjs/Collapse/panel.js

@@ -41,6 +41,9 @@ var import_collapse = require("./collapse");
 var Panel = (props) => {
   const { children, title, id, className, style, extra, classNames, styles } = props;
   const { prefixCls, activeKey, onExpand } = (0, import_react2.useContext)(import_collapse.CollapseContext);
+  const panelId = (0, import_react2.useId)();
+  const headerId = `${panelId}-header`;
+  const contentId = `${panelId}-content`;
   const expanded = activeKey.includes(id);
   const itemClassName = (0, import_clsx.default)(
     `${prefixCls}-item`,
@@ -55,7 +58,9 @@ var Panel = (props) => {
       className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
       role: "button",
       style: styles == null ? void 0 : styles.header,
+      id: headerId,
       "aria-expanded": expanded,
+      "aria-controls": contentId,
       "aria-disabled": "false",
       tabIndex: 0,
       onClick: () => onExpand(id),
@@ -72,7 +77,8 @@ var Panel = (props) => {
         className: (0, import_clsx.default)(`${prefixCls}-expand-icon`, classNames == null ? void 0 : classNames.expandIcon),
         style: styles == null ? void 0 : styles.expandIcon,
         animate: { rotate: expanded ? 90 : 0 },
-        transition: { duration: 0.15 }
+        transition: { duration: 0.15 },
+        "aria-hidden": "true"
       },
       /* @__PURE__ */ import_react2.default.createElement(import_Button.default, { icon: /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronRight, { size: 16 }), type: "text" })
     ),
@@ -99,6 +105,9 @@ var Panel = (props) => {
     {
       className: (0, import_clsx.default)(`${prefixCls}-content`, classNames == null ? void 0 : classNames.content),
       style: styles == null ? void 0 : styles.content,
+      id: contentId,
+      role: "region",
+      "aria-labelledby": headerId,
       initial: { height: 0, opacity: 0 },
       animate: { height: "auto", opacity: 1 },
       exit: { height: 0, opacity: 0 },