@ebscn/ui 1.0.0 → 1.0.1-beta.0

package/cjs/components/skeleton/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./skeleton.css");
+var _skeleton2 = require("./skeleton");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_skeleton2.Skeleton, {
+  Title: _skeleton2.SkeletonTitle,
+  Paragraph: _skeleton2.SkeletonParagraph,
+  Img: _skeleton2.SkeletonImg,
+  Circle: _skeleton2.SkeletonCircle,
+  Primary: _skeleton2.SkeletonPrimary
+});

package/cjs/components/skeleton/skeleton.css

@@ -0,0 +1,65 @@
+.ebscn-skeleton {
+  --width: 100%;
+  --height: 0;
+  --border-radius: 3px;
+  background-color: rgba(190, 190, 190, 0.2);
+  border-radius: var(--border-radius);
+  width: var(--width);
+  height: var(--height);
+  display: block;
+}
+.ebscn-skeleton.ebscn-skeleton-animated {
+  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: ebscn-skeleton-loading 1.3s ease infinite;
+}
+.ebscn-skeleton.ebscn-skeleton-primary {
+  background-color: rgba(232, 66, 37, 0.2);
+}
+.ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
+  background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
+  background-size: 400% 100%;
+  animation: ebscn-skeleton-loading 1.3s ease infinite;
+}
+.ebscn-skeleton.ebscn-skeleton-title {
+  --width: 45%;
+  --height: 32px;
+  --border-radius: 2px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+}
+.ebscn-skeleton.ebscn-skeleton-circle {
+  --width: 18px;
+  height: var(--width);
+  border-radius: var(--width);
+}
+.ebscn-skeleton.ebscn-skeleton-img {
+  --width: 100%;
+  --height: 100px;
+  --border-radius: 6px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ebscn-skeleton.ebscn-skeleton-paragraph-line {
+  --height: 18px;
+  --border-radius: 3px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.ebscn-skeleton.ebscn-skeleton-paragraph-line:last-child {
+  --width: 65%;
+}
+@keyframes ebscn-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  38% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}

package/cjs/components/skeleton/skeleton.d.ts

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SkeletonProps = {
+    animated?: boolean;
+} & NativeProps<'--width' | '--height' | '--border-radius'>;
+export declare const Skeleton: FC<SkeletonProps>;
+export type SkeletonPrimaryProps = {
+    animated?: boolean;
+} & NativeProps<'--width' | '--height' | '--border-radius'>;
+export declare const SkeletonPrimary: FC<SkeletonPrimaryProps>;
+export type SkeletonTitleProps = {
+    animated?: boolean;
+} & NativeProps;
+export declare const SkeletonTitle: FC<SkeletonTitleProps>;
+export type SkeletonCircleProps = {
+    animated?: boolean;
+} & NativeProps<'--width'>;
+export declare const SkeletonCircle: FC<SkeletonCircleProps>;
+export type SkeletonImgProps = {
+    animated?: boolean;
+    icon?: boolean;
+    defaultIconSize?: number;
+} & NativeProps;
+export declare const SkeletonImg: FC<SkeletonImgProps>;
+export type SkeletonParagraphProps = {
+    animated?: boolean;
+    lineCount?: number;
+} & NativeProps;
+export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;

package/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonTitle = exports.SkeletonPrimary = exports.SkeletonParagraph = exports.SkeletonImg = exports.SkeletonCircle = exports.Skeleton = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _generateIntArray = require("../../utils/generate-int-array");
+var _nativeProps = require("../../utils/native-props");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _gdlogoIcon = _interopRequireDefault(require("../icons/gdlogo-icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = 'ebscn-skeleton';
+var Skeleton = function (props) {
+  var _a;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-animated")] = props.animated === false ? false : true, _a))
+  }));
+};
+exports.Skeleton = Skeleton;
+var SkeletonPrimary = function (props) {
+  var _a;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-primary"), (_a = {}, _a["".concat(classPrefix, "-primary-animated")] = props.animated === false ? false : true, _a))
+  }));
+};
+exports.SkeletonPrimary = SkeletonPrimary;
+var SkeletonTitle = function (props) {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(Skeleton, {
+    animated: props.animated,
+    className: "".concat(classPrefix, "-title")
+  }));
+};
+exports.SkeletonTitle = SkeletonTitle;
+var SkeletonCircle = function (props) {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(Skeleton, {
+    animated: props.animated,
+    className: "".concat(classPrefix, "-circle")
+  }));
+};
+exports.SkeletonCircle = SkeletonCircle;
+var SkeletonImg = function (props) {
+  var _a;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-img"), (_a = {}, _a["".concat(classPrefix, "-animated")] = props.animated === false ? false : true, _a))
+  }, (props === null || props === void 0 ? void 0 : props.icon) ? props === null || props === void 0 ? void 0 : props.icon : _react.default.createElement(_gdlogoIcon.default, {
+    style: {
+      fontSize: "".concat((props === null || props === void 0 ? void 0 : props.defaultIconSize) || 40, "px")
+    }
+  })));
+};
+exports.SkeletonImg = SkeletonImg;
+var defaultSkeletonParagraphProps = {
+  lineCount: 3
+};
+var SkeletonParagraph = function (p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultSkeletonParagraphProps, p);
+  var keys = (0, _generateIntArray.generateIntArray)(1, props.lineCount);
+  var node = _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-paragraph")
+  }, keys.map(function (key) {
+    return _react.default.createElement(Skeleton, {
+      key: key,
+      animated: props.animated,
+      className: "".concat(classPrefix, "-paragraph-line")
+    });
+  }));
+  return (0, _nativeProps.withNativeProps)(props, node);
+};
+exports.SkeletonParagraph = SkeletonParagraph;

package/cjs/components/space/index.d.ts

@@ -0,0 +1,4 @@
+import './space.less';
+import { Space } from './space';
+export type { SpaceProps } from './space';
+export default Space;

package/cjs/components/space/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./space.css");
+var _space2 = require("./space");
+var _default = exports.default = _space2.Space;

package/cjs/components/space/space.css

@@ -0,0 +1,70 @@
+.ebscn-space-item {
+  flex: none;
+}
+.ebscn-space {
+  display: inline-flex;
+  --gap: 8px;
+  --gap-vertical: var(--gap);
+  --gap-horizontal: var(--gap);
+}
+.ebscn-space-vertical {
+  flex-direction: column;
+}
+.ebscn-space-vertical > .ebscn-space-item {
+  margin-bottom: var(--gap-vertical);
+}
+.ebscn-space-vertical > .ebscn-space-item:last-child {
+  margin-bottom: 0;
+}
+.ebscn-space-horizontal {
+  flex-direction: row;
+}
+.ebscn-space-horizontal > .ebscn-space-item {
+  margin-right: var(--gap-horizontal);
+}
+.ebscn-space-horizontal > .ebscn-space-item:last-child {
+  margin-right: 0;
+}
+.ebscn-space-horizontal.ebscn-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(var(--gap-vertical) * -1);
+}
+.ebscn-space-horizontal.ebscn-space-wrap > .ebscn-space-item {
+  padding-bottom: var(--gap-vertical);
+}
+.ebscn-space.ebscn-space-block {
+  display: flex;
+}
+.ebscn-space-align-center {
+  align-items: center;
+}
+.ebscn-space-align-start {
+  align-items: flex-start;
+}
+.ebscn-space-align-end {
+  align-items: flex-end;
+}
+.ebscn-space-align-baseline {
+  align-items: baseline;
+}
+.ebscn-space-justify-center {
+  justify-content: center;
+}
+.ebscn-space-justify-start {
+  justify-content: flex-start;
+}
+.ebscn-space-justify-end {
+  justify-content: flex-end;
+}
+.ebscn-space-justify-between {
+  justify-content: space-between;
+}
+.ebscn-space-justify-around {
+  justify-content: space-around;
+}
+.ebscn-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.ebscn-space-justify-stretch {
+  justify-content: stretch;
+}

package/cjs/components/space/space.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SpaceProps = {
+    direction?: 'horizontal' | 'vertical';
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
+    wrap?: boolean;
+    block?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Space: FC<SpaceProps>;

package/cjs/components/space/space.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Space = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _nativeProps = require("../../utils/native-props");
+var _withDefaultProps = require("../../utils/with-default-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = "ebscn-space";
+var defaultProps = {
+  direction: 'horizontal'
+};
+var Space = function (p) {
+  var _a;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var direction = props.direction,
+    onClick = props.onClick;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-wrap")] = props.wrap, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-").concat(direction)] = true, _a["".concat(classPrefix, "-align-").concat(props.align)] = !!props.align, _a["".concat(classPrefix, "-justify-").concat(props.justify)] = !!props.justify, _a)),
+    onClick: onClick
+  }, _react.default.Children.map(props.children, function (child) {
+    return child !== null && child !== undefined && _react.default.createElement("div", {
+      className: "".concat(classPrefix, "-item")
+    }, child);
+  })));
+};
+exports.Space = Space;

package/cjs/components/squared-grid/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './squared-grid.less';
+export type { SquaredGridItemProps, SquaredGridProps } from './squared-grid';
+declare const _default: import("react").FC<import("./squared-grid").SquaredGridProps> & {
+    Item: import("react").FC<import("./squared-grid").SquaredGridItemProps>;
+};
+export default _default;

package/cjs/components/squared-grid/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _squaredGrid = require("./squared-grid");
+require("./squared-grid.css");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_squaredGrid.SquaredGrid, {
+  Item: _squaredGrid.SquaredGridItem
+});

package/cjs/components/squared-grid/squared-grid.css

@@ -0,0 +1,30 @@
+.ebscn-squared-grid {
+  --flex-basic: 20%;
+  --icon-size: 32px;
+  --item-flex-direction: column;
+  --row-gap: 6px;
+}
+.ebscn-squared-grid-page {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--row-gap);
+}
+.ebscn-squared-grid-item {
+  flex: 0 0 var(--flex-basic);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: var(--item-flex-direction);
+}
+.ebscn-squared-grid-item-icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  font-size: var(--icon-size);
+  margin: 5px;
+}
+.ebscn-squared-grid-item-label {
+  font-size: var(--ebscn-font-size-5);
+}
+.ebscn-squared-grid.ebscn-squared-grid.ebscn-squared-grid-page {
+  padding-bottom: 20px;
+}

package/cjs/components/squared-grid/squared-grid.d.ts

@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PageIndicatorProps } from '../page-indicator';
+export type SquaredGridProps = {
+    maxColumns?: number;
+    maxRow?: number;
+    children?: ReactNode;
+    indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
+} & NativeProps<'--row-gap' | '--icon-size'>;
+export declare const SquaredGrid: FC<SquaredGridProps>;
+export type SquaredGridItemProps = {
+    icon: ReactNode;
+    label?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps;
+export declare const SquaredGridItem: FC<SquaredGridItemProps>;

package/cjs/components/squared-grid/squared-grid.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SquaredGridItem = exports.SquaredGrid = void 0;
+var _ = require("../..");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _withDefaultProps = require("../../utils/with-default-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var classPrefix = "ebscn-squared-grid";
+var defaultProps = {
+  maxColumns: 5,
+  maxRow: 2,
+  indicatorProps: {
+    style: {
+      '--active-dot-color': 'var(--ebscn-color-primary, #e84225)',
+      '--dot-color': '#d8d8d8'
+    }
+  }
+};
+var chunkArray = function (array, chunkSize) {
+  var index = 0;
+  var chunks = [];
+  while (index < array.length) {
+    chunks.push(array.slice(index, index + chunkSize));
+    index += chunkSize;
+  }
+  return chunks;
+};
+var SquaredGrid = function (p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var maxColumns = props.maxColumns,
+    maxRow = props.maxRow,
+    indicatorProps = props.indicatorProps;
+  var children = _react.default.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
+  var pageSize = maxColumns * maxRow;
+  var overPage = pageSize < children.length;
+  var style = {
+    '--flex': "".concat(100 / maxColumns, "%")
+  };
+  var renderSwiperItems = function () {
+    var pages = chunkArray(children, pageSize);
+    return _react.default.createElement(_.Swiper, {
+      style: {
+        '--track-padding': '0 0 15px'
+      },
+      autoplay: false,
+      indicatorProps: indicatorProps,
+      loop: false
+    }, pages.map(function (items, index) {
+      return _react.default.createElement(_.Swiper.Item, {
+        key: index
+      }, _react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(classPrefix, "-page"), "".concat(classPrefix, "-page-swiper")),
+        style: style
+      }, items));
+    }));
+  };
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix,
+    style: style
+  }, overPage ? renderSwiperItems() : _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-page"),
+    style: style
+  }, children)));
+};
+exports.SquaredGrid = SquaredGrid;
+var SquaredGridItem = function (p) {
+  var props = (0, _withDefaultProps.mergeProps)({
+    label: '功能名称',
+    icon: ''
+  }, p);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-item"),
+    onClick: props.onClick
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-item-icon")
+  }, (0, _nativeProps.withNativeProps)({
+    style: {
+      width: 'var(--icon-size)',
+      height: 'var(--icon-size)',
+      fontSize: 'var(--icon-size)'
+    }
+  }, props.icon)), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-item-label")
+  }, props.label)));
+};
+exports.SquaredGridItem = SquaredGridItem;

package/cjs/components/stock-count-keyboard/stock-count-keyboard.css

@@ -44,11 +44,11 @@
   background: #CACBD0;
 }
 .ebscn-stock-count-keyboard-delete {
-  background: url(./images/delete.png) #e1e3e8 no-repeat center;
+  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-count-keyboard-delete:active {
-  background: url(./images/delete.png) #CACBD0 no-repeat center;
+  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-count-keyboard-confirmKey {

package/cjs/components/stock-keyboard/stock-keyboard.css

@@ -52,11 +52,11 @@
   background: #CACBD0;
 }
 .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
-  background: url(./images/delete.png) #e1e3e8 no-repeat center;
+  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
-  background: url(./images/delete.png) #CACBD0 no-repeat center;
+  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {

package/cjs/components/swiper/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import './swiper.less';
+export type { SwiperProps, SwiperRef } from './swiper';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    defaultIndex?: number | undefined;
+    allowTouchMove?: boolean | undefined;
+    autoplay?: boolean | undefined;
+    autoplayInterval?: number | undefined;
+    loop?: boolean | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    onIndexChange?: ((index: number, isAutoPlay: boolean) => void) | undefined;
+    indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "className" | "style" | "color"> | undefined;
+    indicator?: false | ((total: number, current: number) => import("react").ReactNode) | undefined;
+    slideSize?: number | undefined;
+    trackOffset?: number | undefined;
+    stuckAtBoundary?: boolean | undefined;
+    rubberband?: boolean | undefined;
+    stopPropagation?: ("mousedown" | "mousemove" | "mouseup")[] | undefined;
+    total?: number | undefined;
+    children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | ((index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--height" | "--border-radius" | "--width" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+    Item: import("react").FC<{
+        onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        children?: import("react").ReactNode;
+    } & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes>;
+};
+export default _default;

package/cjs/components/swiper/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./swiper.css");
+var _swiper2 = require("./swiper");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _swiperItem = require("./swiper-item");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_swiper2.Swiper, {
+  Item: _swiperItem.SwiperItem
+});

package/cjs/components/swiper/swiper-item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+type Props = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export declare const SwiperItem: FC<Props>;
+export {};

package/cjs/components/swiper/swiper-item.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwiperItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _nativeProps = require("../../utils/native-props");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SwiperItem = function (props) {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: 'ebscn-swiper-item',
+    onClick: props.onClick
+  }, props.children));
+};
+exports.SwiperItem = SwiperItem;

package/cjs/components/swiper/swiper.css

@@ -0,0 +1,80 @@
+.ebscn-swiper {
+  --height: auto;
+  --width: 100%;
+  --border-radius: 6px;
+  --track-padding: 0;
+  --slide-size: 100%;
+  --track-offset: 0%;
+  display: block;
+  width: var(--width);
+  height: var(--height);
+  position: relative;
+  border-radius: var(--border-radius);
+  z-index: 0;
+  overflow: hidden;
+}
+.ebscn-swiper-track {
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  padding: var(--track-padding);
+}
+.ebscn-swiper-track-allow-touch-move {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.ebscn-swiper-track-inner {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+}
+.ebscn-swiper-slide,
+.ebscn-swiper-slide-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  white-space: unset;
+  flex: none;
+}
+.ebscn-swiper-item {
+  display: block;
+  width: 100%;
+  height: 100%;
+  white-space: normal;
+}
+.ebscn-swiper-horizontal .ebscn-swiper-track-allow-touch-move {
+  touch-action: pan-y;
+}
+.ebscn-swiper-horizontal .ebscn-swiper-indicator {
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ebscn-swiper-horizontal .ebscn-swiper-track {
+  transform: translateX(var(--track-offset));
+}
+.ebscn-swiper-horizontal .ebscn-swiper-track-inner {
+  flex-direction: row;
+  width: var(--slide-size);
+}
+.ebscn-swiper-vertical .ebscn-swiper-track-allow-touch-move {
+  touch-action: pan-x;
+}
+.ebscn-swiper-vertical .ebscn-swiper-indicator {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ebscn-swiper-vertical .ebscn-swiper-track {
+  transform: translateY(var(--track-offset));
+}
+.ebscn-swiper-vertical .ebscn-swiper-track-inner {
+  flex-direction: column;
+  height: var(--slide-size);
+}