@tiny-design/react 1.0.4

package/es/speed-dial/style/_index.scss

@@ -0,0 +1,230 @@
+@use "../../style/variables" as *;
+@use "sass:color";
+
+$speed-dial-fab-size: 56px;
+$speed-dial-action-size: 40px;
+$speed-dial-actions-gap: 16px;
+
+.#{$prefix}-speed-dial {
+  position: relative;
+  display: inline-flex;
+
+  // FAB button
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $speed-dial-fab-size;
+    height: $speed-dial-fab-size;
+    border-radius: 50%;
+    border: none;
+    background-color: var(--ty-speed-dial-bg, #{$primary-color});
+    color: var(--ty-speed-dial-color, #{$white-color});
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: $box-shadow;
+    transition: background-color 0.2s ease;
+    outline: none;
+
+    &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
+      background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
+    }
+
+    &_open {
+      .#{$prefix}-speed-dial__icon-default {
+        transform: rotate(45deg);
+      }
+    }
+
+    &_disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__icon-default {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    transition: transform 0.3s ease;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background-color: currentColor;
+      border-radius: 1px;
+      translate: -50% -50%;
+    }
+
+    &::before {
+      width: 55%;
+      height: 2px;
+    }
+
+    &::after {
+      width: 2px;
+      height: 55%;
+    }
+  }
+
+  // Actions container
+  &__actions {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.5);
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+
+    &_open {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1);
+    }
+  }
+
+  // Direction variants
+  &_up &__actions {
+    flex-direction: column-reverse;
+    bottom: 100%;
+    left: 50%;
+    transform-origin: bottom center;
+    translate: -50% 0;
+    padding-bottom: $speed-dial-actions-gap;
+  }
+
+  &_up &__actions_open {
+    transform: scale(1);
+  }
+
+  &_down &__actions {
+    flex-direction: column;
+    top: 100%;
+    left: 50%;
+    transform-origin: top center;
+    translate: -50% 0;
+    padding-top: $speed-dial-actions-gap;
+  }
+
+  &_down &__actions_open {
+    transform: scale(1);
+  }
+
+  &_left &__actions {
+    flex-direction: row-reverse;
+    right: 100%;
+    top: 50%;
+    transform-origin: center right;
+    translate: 0 -50%;
+    padding-right: $speed-dial-actions-gap;
+  }
+
+  &_left &__actions_open {
+    transform: scale(1);
+  }
+
+  &_right &__actions {
+    flex-direction: row;
+    left: 100%;
+    top: 50%;
+    transform-origin: center left;
+    translate: 0 -50%;
+    padding-left: $speed-dial-actions-gap;
+  }
+
+  &_right &__actions_open {
+    transform: scale(1);
+  }
+
+  // Action wrapper (contains button + tooltip)
+  &__action-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 4px 0;
+  }
+
+  &_left &__action-wrapper,
+  &_right &__action-wrapper {
+    margin: 0 4px;
+  }
+
+  // Action button
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $speed-dial-action-size;
+    height: $speed-dial-action-size;
+    border-radius: 50%;
+    border: none;
+    background-color: var(--ty-speed-dial-action-bg, #{$white-color});
+    color: var(--ty-speed-dial-action-color, #{$gray-800});
+    font-size: 16px;
+    cursor: pointer;
+    box-shadow: $box-shadow-sm;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+
+    &:hover:not(.#{$prefix}-speed-dial__action_disabled) {
+      background-color: var(--ty-speed-dial-action-bg-hover, #{$gray-100});
+      box-shadow: $box-shadow;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
+    }
+
+    &_disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Tooltip
+  &__action-tooltip {
+    position: absolute;
+    white-space: nowrap;
+    background-color: var(--ty-speed-dial-tooltip-bg, #{$gray-800});
+    color: var(--ty-speed-dial-tooltip-color, #{$white-color});
+    font-size: $font-size-sm;
+    padding: 4px 8px;
+    border-radius: $border-radius;
+    pointer-events: none;
+
+    &_left {
+      right: calc(100% + 8px);
+      top: 50%;
+      translate: 0 -50%;
+    }
+
+    &_right {
+      left: calc(100% + 8px);
+      top: 50%;
+      translate: 0 -50%;
+    }
+
+    &_top {
+      bottom: calc(100% + 8px);
+      left: 50%;
+      translate: -50% 0;
+    }
+
+    &_bottom {
+      top: calc(100% + 8px);
+      left: 50%;
+      translate: -50% 0;
+    }
+  }
+}

package/es/speed-dial/style/index.css

@@ -0,0 +1,183 @@
+.ty-speed-dial {
+  position: relative;
+  display: inline-flex;
+}
+.ty-speed-dial__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background-color: var(--ty-speed-dial-bg, #6e41bf);
+  color: var(--ty-speed-dial-color, #fff);
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+.ty-speed-dial__button:hover:not(.ty-speed-dial__button_disabled) {
+  background-color: var(--ty-speed-dial-bg-hover, rgb(92.3496062992, 54.2236220472, 160.9763779528));
+}
+.ty-speed-dial__button:focus-visible {
+  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+.ty-speed-dial__button_open .ty-speed-dial__icon-default {
+  transform: rotate(45deg);
+}
+.ty-speed-dial__button_disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ty-speed-dial__icon-default {
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  transition: transform 0.3s ease;
+}
+.ty-speed-dial__icon-default::before, .ty-speed-dial__icon-default::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: currentColor;
+  border-radius: 1px;
+  translate: -50% -50%;
+}
+.ty-speed-dial__icon-default::before {
+  width: 55%;
+  height: 2px;
+}
+.ty-speed-dial__icon-default::after {
+  width: 2px;
+  height: 55%;
+}
+.ty-speed-dial__actions {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.5);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+.ty-speed-dial__actions_open {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+.ty-speed-dial_up .ty-speed-dial__actions {
+  flex-direction: column-reverse;
+  bottom: 100%;
+  left: 50%;
+  transform-origin: bottom center;
+  translate: -50% 0;
+  padding-bottom: 16px;
+}
+.ty-speed-dial_up .ty-speed-dial__actions_open {
+  transform: scale(1);
+}
+.ty-speed-dial_down .ty-speed-dial__actions {
+  flex-direction: column;
+  top: 100%;
+  left: 50%;
+  transform-origin: top center;
+  translate: -50% 0;
+  padding-top: 16px;
+}
+.ty-speed-dial_down .ty-speed-dial__actions_open {
+  transform: scale(1);
+}
+.ty-speed-dial_left .ty-speed-dial__actions {
+  flex-direction: row-reverse;
+  right: 100%;
+  top: 50%;
+  transform-origin: center right;
+  translate: 0 -50%;
+  padding-right: 16px;
+}
+.ty-speed-dial_left .ty-speed-dial__actions_open {
+  transform: scale(1);
+}
+.ty-speed-dial_right .ty-speed-dial__actions {
+  flex-direction: row;
+  left: 100%;
+  top: 50%;
+  transform-origin: center left;
+  translate: 0 -50%;
+  padding-left: 16px;
+}
+.ty-speed-dial_right .ty-speed-dial__actions_open {
+  transform: scale(1);
+}
+.ty-speed-dial__action-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px 0;
+}
+.ty-speed-dial_left .ty-speed-dial__action-wrapper, .ty-speed-dial_right .ty-speed-dial__action-wrapper {
+  margin: 0 4px;
+}
+.ty-speed-dial__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: var(--ty-speed-dial-action-bg, #fff);
+  color: var(--ty-speed-dial-action-color, #32325d);
+  font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  outline: none;
+}
+.ty-speed-dial__action:hover:not(.ty-speed-dial__action_disabled) {
+  background-color: var(--ty-speed-dial-action-bg-hover, #f6f9fc);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+.ty-speed-dial__action:focus-visible {
+  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+.ty-speed-dial__action_disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ty-speed-dial__action-tooltip {
+  position: absolute;
+  white-space: nowrap;
+  background-color: var(--ty-speed-dial-tooltip-bg, #32325d);
+  color: var(--ty-speed-dial-tooltip-color, #fff);
+  font-size: 0.875rem;
+  padding: 4px 8px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+.ty-speed-dial__action-tooltip_left {
+  right: calc(100% + 8px);
+  top: 50%;
+  translate: 0 -50%;
+}
+.ty-speed-dial__action-tooltip_right {
+  left: calc(100% + 8px);
+  top: 50%;
+  translate: 0 -50%;
+}
+.ty-speed-dial__action-tooltip_top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  translate: -50% 0;
+}
+.ty-speed-dial__action-tooltip_bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  translate: -50% 0;
+}

package/es/speed-dial/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/speed-dial/style/index.js

@@ -0,0 +1 @@
+import "./_index.css";

package/es/speed-dial/types.d.ts

@@ -0,0 +1,26 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/speed-dial/types.d.ts
+type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+type SpeedDialTrigger = 'hover' | 'click';
+interface SpeedDialProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'> {
+  icon?: React.ReactNode;
+  openIcon?: React.ReactNode;
+  direction?: SpeedDialDirection;
+  open?: boolean;
+  trigger?: SpeedDialTrigger;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+interface SpeedDialActionProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['button']>, 'children'> {
+  icon: React.ReactNode;
+  tooltip?: string;
+  tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';
+  disabled?: boolean;
+}
+//#endregion
+export { SpeedDialActionProps, SpeedDialProps };
+//# sourceMappingURL=types.d.ts.map

package/es/split/index.d.ts

@@ -0,0 +1 @@
+import { Split } from "./split.js";

package/es/split/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import Split from "./split.js";
+//#region src/split/index.tsx
+var split_default = Split;
+//#endregion
+export { split_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/split/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/split/index.tsx"],"sourcesContent":["import Split from './split';\n\nexport default Split;\n"],"mappings":";;AAEA,IAAA,gBAAe"}

package/es/split/resizer.d.ts

@@ -0,0 +1,12 @@
+import { BaseProps, DirectionType } from "../_utils/props.js";
+import React, { MouseEventHandler } from "react";
+
+//#region src/split/resizer.d.ts
+interface ResizerProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  size: number;
+  mode: DirectionType;
+  onResizerMouseDown: MouseEventHandler<HTMLDivElement>;
+}
+//#endregion
+export { ResizerProps };
+//# sourceMappingURL=resizer.d.ts.map

package/es/split/resizer.js

@@ -0,0 +1,56 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/split/resizer.tsx
+const Resizer = (props) => {
+	const { size, onResizerMouseDown, prefixCls: customisedCls, mode, className, ...otherProps } = props;
+	const prefixCls = getPrefixCls("split-bar", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, { [`${prefixCls}_${mode}`]: mode });
+	const style = mode === "vertical" ? { width: size } : { height: size };
+	const onMouseDown = (e) => {
+		props.onMouseDown && props.onMouseDown(e);
+		onResizerMouseDown(e);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		role: "separator",
+		tabIndex: 0,
+		"aria-orientation": mode === "vertical" ? "vertical" : "horizontal",
+		className: cls,
+		style,
+		onMouseDown: (e) => onMouseDown(e),
+		onKeyDown: (e) => {
+			const step = 10;
+			if (mode === "vertical" && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+				e.preventDefault();
+				const delta = e.key === "ArrowRight" ? step : -step;
+				const synthetic = {
+					clientX: e.target.getBoundingClientRect().left + delta,
+					clientY: 0
+				};
+				onResizerMouseDown(e);
+				window.dispatchEvent(new MouseEvent("mousemove", { clientX: synthetic.clientX }));
+				window.dispatchEvent(new MouseEvent("mouseup"));
+			}
+			if (mode === "horizontal" && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+				e.preventDefault();
+				const delta = e.key === "ArrowDown" ? step : -step;
+				const synthetic = {
+					clientY: e.target.getBoundingClientRect().top + delta,
+					clientX: 0
+				};
+				onResizerMouseDown(e);
+				window.dispatchEvent(new MouseEvent("mousemove", { clientY: synthetic.clientY }));
+				window.dispatchEvent(new MouseEvent("mouseup"));
+			}
+		},
+		children: /* @__PURE__ */ jsx("div", { className: `${prefixCls}__icon` })
+	});
+};
+Resizer.displayName = "Resizer";
+//#endregion
+export { Resizer as default };
+
+//# sourceMappingURL=resizer.js.map

package/es/split/resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer.js","names":[],"sources":["../../src/split/resizer.tsx"],"sourcesContent":["import React, { useContext, MouseEventHandler } from 'react';\nimport classNames from 'classnames';\nimport { BaseProps, DirectionType } from '../_utils/props';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\n\nexport interface ResizerProps\n  extends BaseProps,\n    React.PropsWithoutRef<JSX.IntrinsicElements['div']> {\n  size: number;\n  mode: DirectionType;\n  onResizerMouseDown: MouseEventHandler<HTMLDivElement>;\n}\n\nconst Resizer = (props: ResizerProps): JSX.Element => {\n  const {\n    size,\n    onResizerMouseDown,\n    prefixCls: customisedCls,\n    mode,\n    className,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('split-bar', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${mode}`]: mode,\n  });\n\n  const style: React.CSSProperties = mode === 'vertical' ? { width: size } : { height: size };\n\n  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    props.onMouseDown && props.onMouseDown(e);\n    onResizerMouseDown(e);\n  };\n\n  return (\n    <div\n      {...otherProps}\n      role=\"separator\"\n      tabIndex={0}\n      aria-orientation={mode === 'vertical' ? 'vertical' : 'horizontal'}\n      className={cls}\n      style={style}\n      onMouseDown={(e): void => onMouseDown(e)}\n      onKeyDown={(e) => {\n        const step = 10;\n        if (mode === 'vertical' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n          e.preventDefault();\n          const delta = e.key === 'ArrowRight' ? step : -step;\n          const synthetic = { clientX: (e.target as HTMLElement).getBoundingClientRect().left + delta, clientY: 0 } as MouseEvent;\n          onResizerMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>);\n          window.dispatchEvent(new MouseEvent('mousemove', { clientX: synthetic.clientX }));\n          window.dispatchEvent(new MouseEvent('mouseup'));\n        }\n        if (mode === 'horizontal' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n          e.preventDefault();\n          const delta = e.key === 'ArrowDown' ? step : -step;\n          const synthetic = { clientY: (e.target as HTMLElement).getBoundingClientRect().top + delta, clientX: 0 } as MouseEvent;\n          onResizerMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>);\n          window.dispatchEvent(new MouseEvent('mousemove', { clientY: synthetic.clientY }));\n          window.dispatchEvent(new MouseEvent('mouseup'));\n        }\n      }}>\n      <div className={`${prefixCls}__icon`} />\n    </div>\n  );\n};\n\nResizer.displayName = 'Resizer';\n\nexport default Resizer;\n"],"mappings":";;;;;;AAcA,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,MACA,oBACA,WAAW,eACX,MACA,WACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,aADT,WAAW,cAAc,CACW,WAAW,cAAc;CACnF,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,GAAG,SAAS,MAC3B,CAAC;CAEF,MAAM,QAA6B,SAAS,aAAa,EAAE,OAAO,MAAM,GAAG,EAAE,QAAQ,MAAM;CAE3F,MAAM,eAAe,MAAwC;AAC3D,QAAM,eAAe,MAAM,YAAY,EAAE;AACzC,qBAAmB,EAAE;;AAGvB,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAK;EACL,UAAU;EACV,oBAAkB,SAAS,aAAa,aAAa;EACrD,WAAW;EACJ;EACP,cAAc,MAAY,YAAY,EAAE;EACxC,YAAY,MAAM;GAChB,MAAM,OAAO;AACb,OAAI,SAAS,eAAe,EAAE,QAAQ,eAAe,EAAE,QAAQ,eAAe;AAC5E,MAAE,gBAAgB;IAClB,MAAM,QAAQ,EAAE,QAAQ,eAAe,OAAO,CAAC;IAC/C,MAAM,YAAY;KAAE,SAAU,EAAE,OAAuB,uBAAuB,CAAC,OAAO;KAAO,SAAS;KAAG;AACzG,uBAAmB,EAAiD;AACpE,WAAO,cAAc,IAAI,WAAW,aAAa,EAAE,SAAS,UAAU,SAAS,CAAC,CAAC;AACjF,WAAO,cAAc,IAAI,WAAW,UAAU,CAAC;;AAEjD,OAAI,SAAS,iBAAiB,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc;AAC3E,MAAE,gBAAgB;IAClB,MAAM,QAAQ,EAAE,QAAQ,cAAc,OAAO,CAAC;IAC9C,MAAM,YAAY;KAAE,SAAU,EAAE,OAAuB,uBAAuB,CAAC,MAAM;KAAO,SAAS;KAAG;AACxG,uBAAmB,EAAiD;AACpE,WAAO,cAAc,IAAI,WAAW,aAAa,EAAE,SAAS,UAAU,SAAS,CAAC,CAAC;AACjF,WAAO,cAAc,IAAI,WAAW,UAAU,CAAC;;;YAGnD,oBAAC,OAAD,EAAK,WAAW,GAAG,UAAU,SAAW,CAAA;EACpC,CAAA;;AAIV,QAAQ,cAAc"}

package/es/split/split-context.js

@@ -0,0 +1,7 @@
+import React from "react";
+//#region src/split/split-context.ts
+const SplitContext = React.createContext({ mode: "vertical" });
+//#endregion
+export { SplitContext };
+
+//# sourceMappingURL=split-context.js.map

package/es/split/split-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-context.js","names":[],"sources":["../../src/split/split-context.ts"],"sourcesContent":["import React from 'react';\nimport { DirectionType } from '../_utils/props';\n\ntype Props = {\n  mode: DirectionType;\n};\n\nexport const SplitContext = React.createContext<Props>({ mode: 'vertical' });\n"],"mappings":";;AAOA,MAAa,eAAe,MAAM,cAAqB,EAAE,MAAM,YAAY,CAAC"}

package/es/split/split-pane.js

@@ -0,0 +1,27 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { SplitContext } from "./split-context.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/split/split-pane.tsx
+const SplitPane = React.forwardRef((props, ref) => {
+	const { size, className, style, children, prefixCls: customisedCls, ...otherProps } = props;
+	const cls = classNames(getPrefixCls("split-pane", useContext(ConfigContext).prefixCls, customisedCls), className);
+	const { mode } = useContext(SplitContext);
+	const paneStyle = { ...style };
+	if (mode === "vertical") paneStyle.width = size;
+	else paneStyle.height = size;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		style: paneStyle,
+		children
+	});
+});
+SplitPane.displayName = "SplitPane";
+//#endregion
+export { SplitPane as default };
+
+//# sourceMappingURL=split-pane.js.map

package/es/split/split-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.js","names":[],"sources":["../../src/split/split-pane.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { BaseProps } from '../_utils/props';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { SplitContext } from './split-context';\n\nexport interface SplitPaneProps\n  extends BaseProps,\n    React.PropsWithRef<JSX.IntrinsicElements['div']> {\n  size?: number;\n}\n\nconst SplitPane = React.forwardRef<HTMLDivElement, SplitPaneProps>(\n  (props: SplitPaneProps, ref): JSX.Element => {\n    const { size, className, style, children, prefixCls: customisedCls, ...otherProps } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('split-pane', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className);\n    const { mode } = useContext(SplitContext);\n\n    const paneStyle: React.CSSProperties = {\n      ...style,\n    };\n    if (mode === 'vertical') {\n      paneStyle.width = size;\n    } else {\n      paneStyle.height = size;\n    }\n\n    return (\n      <div ref={ref} {...otherProps} className={cls} style={paneStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\nSplitPane.displayName = 'SplitPane';\n\nexport default SplitPane;\n"],"mappings":";;;;;;;AAaA,MAAM,YAAY,MAAM,YACrB,OAAuB,QAAqB;CAC3C,MAAM,EAAE,MAAM,WAAW,OAAO,UAAU,WAAW,eAAe,GAAG,eAAe;CAGtF,MAAM,MAAM,WADM,aAAa,cADT,WAAW,cAAc,CACY,WAAW,cAAc,EAClD,UAAU;CAC5C,MAAM,EAAE,SAAS,WAAW,aAAa;CAEzC,MAAM,YAAiC,EACrC,GAAG,OACJ;AACD,KAAI,SAAS,WACX,WAAU,QAAQ;KAElB,WAAU,SAAS;AAGrB,QACE,oBAAC,OAAD;EAAU;EAAK,GAAI;EAAY,WAAW;EAAK,OAAO;EACnD;EACG,CAAA;EAGX;AAED,UAAU,cAAc"}

package/es/split/split.d.ts

@@ -0,0 +1,10 @@
+import { SplitProps } from "./types.js";
+
+//#region src/split/split.d.ts
+declare const Split: {
+  (props: SplitProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Split };
+//# sourceMappingURL=split.d.ts.map