@qsxy/element-plus-react 1.0.0-next.1

package/dist/Scrollbar/Scrollbar.js

@@ -0,0 +1,162 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Scrollbar/Scrollbar.tsx
+var Scrollbar_exports = {};
+__export(Scrollbar_exports, {
+  default: () => Scrollbar_default
+});
+module.exports = __toCommonJS(Scrollbar_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_isNumber = __toESM(require("lodash/isNumber"));
+var import_isObject = __toESM(require("lodash/isObject"));
+var import_react = __toESM(require("react"));
+var import_resize_event = require("../Util/resize-event");
+var import_hooks = require("../hooks");
+var import_Thumb = __toESM(require("./Thumb"));
+var Scrollbar = (0, import_react.forwardRef)((props, ref) => {
+  const { tag, className, style, wrapClass, wrapStyle, viewClass, viewStyle, native, height, maxHeight, minSize, always, onScroll, showHorizontal, showVertical, ...rest } = props;
+  const { b, e, em } = (0, import_hooks.useClassNames)("scrollbar");
+  const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
+  const containerRef = (0, import_react.useRef)();
+  const wrapRef = (0, import_react.useRef)();
+  const resizeRef = (0, import_react.useRef)();
+  const [sizeWidth, setSizeWidth] = (0, import_react.useState)("0");
+  const [sizeHeight, setSizeHeight] = (0, import_react.useState)("0");
+  const [moveX, setMoveX] = (0, import_react.useState)(0);
+  const [moveY, setMoveY] = (0, import_react.useState)(0);
+  const [ratioX, setRatioX] = (0, import_react.useState)(1);
+  const [ratioY, setRatioY] = (0, import_react.useState)(1);
+  const GAP = 4;
+  const handleScroll = (0, import_react.useCallback)(
+    (event) => {
+      if (wrapRef.current) {
+        const offsetHeight = wrapRef.current.offsetHeight - GAP;
+        const offsetWidth = wrapRef.current.offsetWidth - GAP;
+        setMoveX(wrapRef.current.scrollLeft * 100 / offsetWidth * ratioX);
+        setMoveY(wrapRef.current.scrollTop * 100 / offsetHeight * ratioY);
+        onScroll == null ? void 0 : onScroll({
+          e: event,
+          scrollTop: wrapRef.current.scrollTop,
+          scrollLeft: wrapRef.current.scrollLeft
+        });
+      }
+    },
+    [ratioX, ratioY, onScroll]
+  );
+  const scrollTo = (0, import_react.useCallback)((options, yCoord) => {
+    if (wrapRef.current) {
+      if ((0, import_isObject.default)(options)) {
+        wrapRef.current.scrollTo(options);
+      } else if ((0, import_isNumber.default)(options) && (0, import_isNumber.default)(yCoord)) {
+        wrapRef.current.scrollTo(options, yCoord);
+      }
+    }
+  }, []);
+  const setScrollTop = (0, import_react.useCallback)((value) => {
+    if (!value) {
+      return;
+    }
+    wrapRef.current.scrollTop = value;
+  }, []);
+  const setScrollLeft = (0, import_react.useCallback)((value) => {
+    if (!value) {
+      return;
+    }
+    wrapRef.current.scrollLeft = value;
+  }, []);
+  const update = (0, import_react.useCallback)(() => {
+    if (!wrapRef.current) {
+      return;
+    }
+    const offsetHeight = wrapRef.current.offsetHeight - GAP;
+    const offsetWidth = wrapRef.current.offsetWidth - GAP;
+    const originalHeight = offsetHeight ** 2 / wrapRef.current.scrollHeight;
+    const originalWidth = offsetWidth ** 2 / wrapRef.current.scrollWidth;
+    const _height = Math.max(originalHeight, minSize);
+    const width = Math.max(originalWidth, minSize);
+    setRatioY(originalHeight / (offsetHeight - originalHeight) / (_height / (offsetHeight - _height)));
+    setRatioX(originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)));
+    setSizeHeight(_height + GAP < offsetHeight ? _height + "px" : "");
+    setSizeWidth(width + GAP < offsetWidth ? width + "px" : "");
+  }, [minSize]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    ref: containerRef,
+    scrollTo,
+    setScrollLeft,
+    setScrollTop,
+    update,
+    wrapRef,
+    resizeRef
+  }));
+  (0, import_react.useEffect)(() => {
+    if (!props.native) {
+      update();
+    }
+    if (!props.noresize) {
+      (0, import_resize_event.addResizeListener)(resizeRef.current, update);
+      addEventListener("resize", update);
+    }
+    return () => {
+      if (!props.noresize) {
+        (0, import_resize_event.removeResizeListener)(resizeRef.current, update);
+        removeEventListener("resize", update);
+      }
+    };
+  }, [props.native, props.noresize, update]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: (0, import_classnames.default)(b(), className), style: { ...style, height } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: wrapRef,
+      className: (0, import_classnames.default)(wrapClass, e`wrap`, { [em("wrap", "hidden-default")]: !native }),
+      style: { ...wrapStyle, maxHeight },
+      onScroll: (event) => handleScroll(event)
+    },
+    import_react.default.createElement(
+      tag,
+      {
+        ref: resizeRef,
+        className: (0, import_classnames.default)(viewClass, e`view`),
+        style: viewStyle,
+        ...htmlInputProps
+      },
+      props.children
+    )
+  ), !native ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showHorizontal && /* @__PURE__ */ import_react.default.createElement(import_Thumb.default, { move: moveX, ratio: ratioX, size: sizeWidth, vertical: false, always, scrollbar: containerRef, wrapRef }), showVertical && /* @__PURE__ */ import_react.default.createElement(import_Thumb.default, { move: moveY, ratio: ratioY, size: sizeHeight, vertical: true, always, scrollbar: containerRef, wrapRef })) : null);
+});
+Scrollbar.defaultProps = {
+  native: false,
+  tag: "div",
+  always: false,
+  minSize: 20,
+  height: "100%",
+  showHorizontal: true,
+  showVertical: true
+};
+Scrollbar.displayName = "Scrollbar";
+var Scrollbar_default = Scrollbar;

package/dist/Scrollbar/Thumb.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BarProps } from './typings';
+declare const _default: React.NamedExoticComponent<BarProps>;
+export default _default;

package/dist/Scrollbar/Thumb.js

@@ -0,0 +1,155 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Scrollbar/Thumb.tsx
+var Thumb_exports = {};
+__export(Thumb_exports, {
+  default: () => Thumb_default
+});
+module.exports = __toCommonJS(Thumb_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_dom_lib = require("dom-lib");
+var import_react = __toESM(require("react"));
+var import_Transition = require("../Transition");
+var import_hooks = require("../hooks");
+var import_util = require("./util");
+var Thumb = (props) => {
+  const { always, vertical, scrollbar, wrapRef, size, move } = props;
+  const { b, e, is } = (0, import_hooks.useClassNames)("scrollbar");
+  const instanceRef = (0, import_react.useRef)();
+  const thumbRef = (0, import_react.useRef)();
+  const bar = (0, import_react.useMemo)(() => import_util.BAR_MAP[vertical ? "vertical" : "horizontal"], [vertical]);
+  const barStore = (0, import_react.useRef)({});
+  const cursorDown = (0, import_react.useRef)(null);
+  const cursorLeave = (0, import_react.useRef)(null);
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  let onselectstartStore = null;
+  const offsetRatio = (0, import_react.useRef)(0);
+  const getOffsetRatio = () => {
+    offsetRatio.current = instanceRef.current[bar.offset] ** 2 / wrapRef.current[bar.scrollSize] / props.ratio / thumbRef.current[bar.offset];
+  };
+  const onEnter = () => {
+    if (visible) {
+      getOffsetRatio();
+    }
+  };
+  const clickThumbHandler = (event) => {
+    event.stopPropagation();
+    if (event.ctrlKey || [1, 2].includes(event.button)) {
+      return;
+    }
+    window.getSelection().removeAllRanges();
+    startDrag(event);
+    Object.assign(barStore.current, {
+      [bar.axis]: event.currentTarget[bar.offset] - (event[bar.client] - event.currentTarget.getBoundingClientRect()[bar.direction])
+    });
+  };
+  const clickTrackHandler = (event) => {
+    const offset = Math.abs(event.target.getBoundingClientRect()[bar.direction] - event[bar.client]);
+    const thumbHalf = thumbRef.current[bar.offset] / 2;
+    if (always) {
+      getOffsetRatio();
+    }
+    const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
+    wrapRef.current[bar.scroll] = thumbPositionPercentage * wrapRef.current[bar.scrollSize] / 100;
+  };
+  const startDrag = (event) => {
+    event.stopPropagation();
+    cursorDown.current = true;
+    (0, import_dom_lib.addClass)(thumbRef.current, is("hover"));
+    (0, import_dom_lib.on)(document, "mousemove", mouseMoveDocumentHandler);
+    (0, import_dom_lib.on)(document, "mouseup", mouseUpDocumentHandler);
+    onselectstartStore = document.onselectstart;
+    document.onselectstart = () => false;
+  };
+  const mouseMoveDocumentHandler = (event) => {
+    if (cursorDown.current === false) {
+      return;
+    }
+    const prevPage = barStore.current[bar.axis];
+    if (!prevPage) {
+      return;
+    }
+    if (instanceRef.current && thumbRef.current && wrapRef.current) {
+      const offset = instanceRef.current ? (instanceRef.current.getBoundingClientRect()[bar.direction] - event[bar.client]) * -1 : 0;
+      const thumbClickPosition = thumbRef.current[bar.offset] - prevPage;
+      if (always) {
+        getOffsetRatio();
+      }
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.current / instanceRef.current[bar.offset];
+      wrapRef.current[bar.scroll] = thumbPositionPercentage * wrapRef.current[bar.scrollSize] / 100;
+    }
+  };
+  const mouseUpDocumentHandler = () => {
+    cursorDown.current = false;
+    (0, import_dom_lib.removeClass)(thumbRef.current, is("hover"));
+    Object.assign(barStore.current, {
+      [bar.axis]: 0
+    });
+    (0, import_dom_lib.off)(document, "mousemove", mouseMoveDocumentHandler);
+    (0, import_dom_lib.off)(document, "mouseup", mouseUpDocumentHandler);
+    document.onselectstart = onselectstartStore;
+    if (cursorLeave.current) {
+      setVisible(false);
+    }
+  };
+  const thumbStyle = (0, import_react.useMemo)(() => {
+    return (0, import_util.renderThumbStyle)({
+      size,
+      move,
+      bar
+    });
+  }, [size, move, bar]);
+  const mouseMoveScrollbarHandler = () => {
+    if (!always) {
+      cursorLeave.current = false;
+      setVisible(!!props.size);
+    }
+  };
+  const mouseLeaveScrollbarHandler = () => {
+    if (!always) {
+      cursorLeave.current = true;
+      setVisible(cursorDown.current);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (scrollbar.current) {
+      (0, import_dom_lib.on)(scrollbar.current, "mousemove", mouseMoveScrollbarHandler);
+      (0, import_dom_lib.on)(scrollbar.current, "mouseleave", mouseLeaveScrollbarHandler);
+    }
+    return () => {
+      (0, import_dom_lib.off)(document, "mouseup", mouseUpDocumentHandler);
+      if (scrollbar.current) {
+        (0, import_dom_lib.off)(scrollbar.current, "mousemove", mouseMoveScrollbarHandler);
+        (0, import_dom_lib.off)(scrollbar.current, "mouseleave", mouseLeaveScrollbarHandler);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: b`fade`, visible: always || visible, transitionAppear: true, afterEnter: onEnter }, /* @__PURE__ */ import_react.default.createElement("div", { ref: instanceRef, className: (0, import_classnames.default)(e`bar`, is(bar.key, { always })), onMouseDown: clickTrackHandler }, /* @__PURE__ */ import_react.default.createElement("div", { ref: thumbRef, className: (0, import_classnames.default)(e`thumb`), style: thumbStyle, onMouseDown: clickThumbHandler })));
+};
+var Thumb_default = (0, import_react.memo)(Thumb);

package/dist/Scrollbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Scrollbar } from './Scrollbar';
+export type { BarProps, ScrollbarProps, ScrollbarRef } from './typings';

package/dist/Scrollbar/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Scrollbar/index.ts
+var Scrollbar_exports = {};
+__export(Scrollbar_exports, {
+  Scrollbar: () => import_Scrollbar.default
+});
+module.exports = __toCommonJS(Scrollbar_exports);
+var import_Scrollbar = __toESM(require("./Scrollbar"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Scrollbar
+});

package/dist/Scrollbar/typings.d.ts

@@ -0,0 +1,40 @@
+import React, { RefObject } from 'react';
+import { BaseProps, NativeProps } from '../types/common';
+export interface ScrollbarRef {
+    ref: RefObject<HTMLDivElement>;
+    scrollTo: (options: number, yCoord?: number) => void;
+    setScrollTop: (value: number) => void;
+    setScrollLeft: (value: number) => void;
+    update: () => void;
+    wrapRef: RefObject<HTMLDivElement>;
+    resizeRef: RefObject<any>;
+}
+export interface ScrollbarProps extends BaseProps, NativeProps<'--el-scrollbar-opacity' | '--el-scrollbar-bg-color' | '--el-scrollbar-hover-opacity' | '--el-scrollbar-hover-bg-color' | '--el-scrollbar-width'> {
+    height?: number | string;
+    maxHeight?: number | string;
+    native?: boolean;
+    wrapStyle?: React.CSSProperties;
+    wrapClass?: string;
+    viewStyle?: React.CSSProperties;
+    viewClass?: string;
+    noresize?: boolean;
+    tag?: string;
+    always?: boolean;
+    minSize?: number;
+    showHorizontal?: boolean;
+    showVertical?: boolean;
+    onScroll?: (data: {
+        e: React.UIEvent<HTMLDivElement, UIEvent>;
+        scrollTop: number;
+        scrollLeft: number;
+    }) => void;
+}
+export interface BarProps {
+    vertical?: boolean;
+    size: string;
+    move: number;
+    ratio: number;
+    always: boolean;
+    scrollbar: RefObject<HTMLElement>;
+    wrapRef: RefObject<HTMLElement>;
+}

package/dist/Scrollbar/typings.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Scrollbar/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/Scrollbar/util.d.ts

@@ -0,0 +1,27 @@
+export declare const BAR_MAP: {
+    vertical: {
+        offset: string;
+        scroll: string;
+        scrollSize: string;
+        size: string;
+        key: string;
+        axis: string;
+        client: string;
+        direction: string;
+    };
+    horizontal: {
+        offset: string;
+        scroll: string;
+        scrollSize: string;
+        size: string;
+        key: string;
+        axis: string;
+        client: string;
+        direction: string;
+    };
+};
+export declare function renderThumbStyle({ move, size, bar }: {
+    move: any;
+    size: any;
+    bar: any;
+}): any;

package/dist/Scrollbar/util.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Scrollbar/util.ts
+var util_exports = {};
+__export(util_exports, {
+  BAR_MAP: () => BAR_MAP,
+  renderThumbStyle: () => renderThumbStyle
+});
+module.exports = __toCommonJS(util_exports);
+var BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${move}%)`;
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.WebkitTransform = translate;
+  return style;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BAR_MAP,
+  renderThumbStyle
+});

package/dist/Select/Option.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectOptionProps } from './typings';
+declare const Option: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLLIElement>>;
+export default Option;

package/dist/Select/Option.js

@@ -0,0 +1,83 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/Option.tsx
+var Option_exports = {};
+__export(Option_exports, {
+  default: () => Option_default
+});
+module.exports = __toCommonJS(Option_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_SelectContext = require("./SelectContext");
+var Option = (0, import_react.forwardRef)((props, ref) => {
+  const { e, is } = (0, import_hooks.useClassNames)("select-dropdown");
+  const { value: selectedValue, onChoose, hover: hoverValue, setHover, multiple } = (0, import_react.useContext)(import_SelectContext.SelectContext);
+  const { label, disabled, onClick } = props;
+  const handleOnClick = (0, import_react.useCallback)(
+    (event) => {
+      event.stopPropagation();
+      if (!disabled) {
+        onChoose(props.value, label || props.value + "", event);
+        onClick == null ? void 0 : onClick(props.value, label || props.value.toString(), event);
+      }
+    },
+    [disabled, onChoose, props.value, label, onClick]
+  );
+  const selected = (0, import_react.useMemo)(() => {
+    if (multiple && selectedValue instanceof Array) {
+      return selectedValue.includes(props.value);
+    }
+    return props.value === selectedValue;
+  }, [multiple, props.value, selectedValue]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "li",
+    {
+      className: (0, import_classnames.default)(
+        e`item`,
+        is({ disabled }),
+        {
+          selected,
+          hover: props.value === hoverValue
+        },
+        props.className
+      ),
+      style: props.style,
+      title: label,
+      key: props.value,
+      onClick: handleOnClick,
+      onMouseEnter: () => setHover(props.value),
+      onMouseLeave: () => setHover(selectedValue),
+      ref
+    },
+    props.children || /* @__PURE__ */ import_react.default.createElement("span", null, label)
+  );
+});
+Option.displayName = "Select.Option";
+var Option_default = Option;

package/dist/Select/OptionGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SelectOptionGroupProps } from './typings';
+declare const OptionGroup: FC<SelectOptionGroupProps>;
+export default OptionGroup;

package/dist/Select/OptionGroup.js

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/OptionGroup.tsx
+var OptionGroup_exports = {};
+__export(OptionGroup_exports, {
+  default: () => OptionGroup_default
+});
+module.exports = __toCommonJS(OptionGroup_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var OptionGroup = (0, import_react.forwardRef)((props, ref) => {
+  const { e, b } = (0, import_hooks.useClassNames)("select-group");
+  const { label, disabled } = props;
+  return /* @__PURE__ */ import_react.default.createElement("ul", { className: (0, import_classnames.default)(e`wrap`, props.className), style: props.style, ref }, /* @__PURE__ */ import_react.default.createElement("li", { className: e`title` }, label), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement("ul", { className: b() }, import_react.Children.toArray(props.children).map((item) => {
+    return (0, import_react.cloneElement)(item, {
+      ...item.props,
+      disabled
+    });
+  }))));
+});
+OptionGroup.displayName = "OptionGroup";
+var OptionGroup_default = OptionGroup;