@lobehub/ui 3.4.2 → 3.4.3

package/es/Skeleton/type.d.mts

@@ -0,0 +1,60 @@
+import { CSSProperties } from "react";
+
+//#region src/Skeleton/type.d.ts
+interface SkeletonBlockProps {
+  active?: boolean;
+  className?: string;
+  height?: number | string;
+  style?: CSSProperties;
+  width?: number | string;
+}
+interface SkeletonTitleProps extends Omit<SkeletonBlockProps, 'height'> {
+  fontSize?: number;
+  height?: number;
+  lineHeight?: number;
+  width?: number | string;
+}
+interface SkeletonParagraphProps extends Omit<SkeletonBlockProps, 'width' | 'height'> {
+  fontSize?: number;
+  gap?: number;
+  height?: number;
+  lineHeight?: number;
+  rows?: number;
+  width?: number | string | (number | string)[];
+}
+interface SkeletonTagsProps extends Omit<SkeletonBlockProps, 'width'> {
+  count?: number;
+  gap?: number;
+  size?: 'small' | 'middle' | 'large';
+  width?: number | string | (number | string)[];
+}
+interface SkeletonAvatarProps extends SkeletonBlockProps {
+  shape?: 'circle' | 'square';
+  size?: number | string;
+}
+interface SkeletonButtonProps extends SkeletonBlockProps {
+  block?: boolean;
+  shape?: 'circle' | 'round' | 'default';
+  size?: 'large' | 'small' | 'default';
+}
+interface SkeletonProps extends SkeletonBlockProps {
+  avatar?: SkeletonAvatarProps | boolean;
+  classNames?: {
+    avatar?: string;
+    paragraph?: string;
+    root?: string;
+    title?: string;
+  };
+  gap?: number;
+  paragraph?: SkeletonParagraphProps | boolean;
+  styles?: {
+    avatar?: CSSProperties;
+    paragraph?: CSSProperties;
+    root?: CSSProperties;
+    title?: CSSProperties;
+  };
+  title?: SkeletonTitleProps | boolean;
+}
+//#endregion
+export { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps };
+//# sourceMappingURL=type.d.mts.map

package/es/SliderWithInput/SliderWithInput.d.mts

@@ -0,0 +1,8 @@
+import { SliderWithInputProps } from "./type.mjs";
+import * as react33 from "react";
+
+//#region src/SliderWithInput/SliderWithInput.d.ts
+declare const SliderWithInput: react33.NamedExoticComponent<SliderWithInputProps>;
+//#endregion
+export { SliderWithInput };
+//# sourceMappingURL=SliderWithInput.d.mts.map

package/es/SliderWithInput/SliderWithInput.mjs

@@ -0,0 +1,67 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
+import { Slider } from "antd";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isNull } from "lodash-es";
+
+//#region src/SliderWithInput/SliderWithInput.tsx
+const SliderWithInput = memo(({ step, value, onChange, max, min, defaultValue, size, controls, gap = 16, style, className, classNames, styles, disabled, unlimitedInput = false, changeOnWheel, ...rest }) => {
+	const handleOnchange = (value$1) => {
+		if (Number.isNaN(value$1) || isNull(value$1)) return;
+		onChange?.(value$1);
+	};
+	const { slider: sliderClassName, input: inputClassName, ...restClassNames } = classNames || {};
+	const { slider: sliderStyle, input: inputStyle, ...restStyles } = styles || {};
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className,
+		direction: "horizontal",
+		gap,
+		style,
+		children: [/* @__PURE__ */ jsx(Slider, {
+			className: sliderClassName,
+			classNames: restClassNames,
+			defaultValue,
+			disabled,
+			max,
+			min,
+			onChange: handleOnchange,
+			step,
+			style: {
+				flex: 1,
+				margin: size === "small" ? 0 : void 0,
+				...sliderStyle
+			},
+			styles: restStyles,
+			tooltip: { open: false },
+			value: typeof value === "number" ? value : 0,
+			...rest
+		}), /* @__PURE__ */ jsx(InputNumber_default, {
+			changeOnWheel,
+			className: inputClassName,
+			controls: size !== "small" || controls,
+			defaultValue,
+			disabled,
+			max: unlimitedInput ? void 0 : max,
+			min,
+			onChange: (v) => handleOnchange(Number(v)),
+			size,
+			step: Number.isNaN(step) || isNull(step) ? void 0 : step,
+			style: {
+				flex: 1,
+				maxWidth: size === "small" ? 40 : 64,
+				...inputStyle
+			},
+			value: typeof value === "number" ? value : 0
+		})]
+	});
+});
+SliderWithInput.displayName = "SliderWithInput";
+var SliderWithInput_default = SliderWithInput;
+
+//#endregion
+export { SliderWithInput_default as default };
+//# sourceMappingURL=SliderWithInput.mjs.map

package/es/SliderWithInput/SliderWithInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderWithInput.mjs","names":["value","Flexbox","InputNumber"],"sources":["../../src/SliderWithInput/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from 'antd';\nimport { isNull } from 'lodash-es';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport InputNumber from '@/Input/InputNumber';\n\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n  ({\n    step,\n    value,\n    onChange,\n    max,\n    min,\n    defaultValue,\n    size,\n    controls,\n    gap = 16,\n    style,\n    className,\n    classNames,\n    styles,\n    disabled,\n    unlimitedInput = false,\n    changeOnWheel,\n    ...rest\n  }) => {\n    const handleOnchange = (value: number | null) => {\n      if (Number.isNaN(value) || isNull(value)) return;\n      onChange?.(value);\n    };\n\n    const { slider: sliderClassName, input: inputClassName, ...restClassNames } = classNames || {};\n    const { slider: sliderStyle, input: inputStyle, ...restStyles } = styles || {};\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        direction={'horizontal'}\n        gap={gap}\n        style={style}\n      >\n        <Slider\n          className={sliderClassName}\n          classNames={restClassNames}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={max}\n          min={min}\n          onChange={handleOnchange}\n          step={step}\n          style={{ flex: 1, margin: size === 'small' ? 0 : undefined, ...sliderStyle }}\n          styles={restStyles}\n          tooltip={{ open: false }}\n          value={typeof value === 'number' ? value : 0}\n          {...rest}\n        />\n        <InputNumber\n          changeOnWheel={changeOnWheel}\n          className={inputClassName}\n          controls={size !== 'small' || controls}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={unlimitedInput ? undefined : max}\n          min={min}\n          onChange={(v) => handleOnchange(Number(v))}\n          size={size}\n          step={Number.isNaN(step) || isNull(step) ? undefined : step}\n          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64, ...inputStyle }}\n          value={typeof value === 'number' ? value : 0}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QACA,UACA,iBAAiB,OACjB,eACA,GAAG,WACC;CACJ,MAAM,kBAAkB,YAAyB;AAC/C,MAAI,OAAO,MAAMA,QAAM,IAAI,OAAOA,QAAM,CAAE;AAC1C,aAAWA,QAAM;;CAGnB,MAAM,EAAE,QAAQ,iBAAiB,OAAO,gBAAgB,GAAG,mBAAmB,cAAc,EAAE;CAC9F,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,eAAe,UAAU,EAAE;AAE9E,QACE,qBAACC;EACC,OAAO;EACI;EACX,WAAW;EACN;EACE;aAEP,oBAAC;GACC,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACL,UAAU;GACJ;GACN,OAAO;IAAE,MAAM;IAAG,QAAQ,SAAS,UAAU,IAAI;IAAW,GAAG;IAAa;GAC5E,QAAQ;GACR,SAAS,EAAE,MAAM,OAAO;GACxB,OAAO,OAAO,UAAU,WAAW,QAAQ;GAC3C,GAAI;IACJ,EACF,oBAACC;GACgB;GACf,WAAW;GACX,UAAU,SAAS,WAAW;GAChB;GACJ;GACV,KAAK,iBAAiB,SAAY;GAC7B;GACL,WAAW,MAAM,eAAe,OAAO,EAAE,CAAC;GACpC;GACN,MAAM,OAAO,MAAM,KAAK,IAAI,OAAO,KAAK,GAAG,SAAY;GACvD,OAAO;IAAE,MAAM;IAAG,UAAU,SAAS,UAAU,KAAK;IAAI,GAAG;IAAY;GACvE,OAAO,OAAO,UAAU,WAAW,QAAQ;IAC3C;GACM;EAGf;AAED,gBAAgB,cAAc;AAE9B,8BAAe"}

package/es/SliderWithInput/index.d.mts

@@ -0,0 +1,3 @@
+import { SliderWithInputProps } from "./type.mjs";
+import { SliderWithInput } from "./SliderWithInput.mjs";
+export { SliderWithInputProps, SliderWithInput as default };

package/es/SliderWithInput/index.mjs

@@ -0,0 +1,3 @@
+import SliderWithInput_default from "./SliderWithInput.mjs";
+
+export { SliderWithInput_default as default };

package/es/SliderWithInput/type.d.mts

@@ -0,0 +1,27 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { InputNumberProps as InputNumberProps$1 } from "../Input/type.mjs";
+import "../Input/index.mjs";
+import { SliderSingleProps } from "antd";
+import { CSSProperties } from "react";
+
+//#region src/SliderWithInput/type.d.ts
+interface SliderWithInputProps extends Omit<SliderSingleProps, 'classNames' | 'styles'> {
+  changeOnWheel?: boolean;
+  classNames?: {
+    input?: string;
+    slider?: string;
+  } & SliderSingleProps['classNames'];
+  controls?: InputNumberProps$1['controls'];
+  gap?: FlexboxProps['gap'];
+  size?: InputNumberProps$1['size'];
+  styles?: {
+    input?: CSSProperties;
+    slider?: CSSProperties;
+  } & SliderSingleProps['styles'];
+  unlimitedInput?: boolean;
+  variant?: InputNumberProps$1['variant'];
+}
+//#endregion
+export { SliderWithInputProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Snippet/Snippet.d.mts

@@ -0,0 +1,8 @@
+import { SnippetProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Snippet/Snippet.d.ts
+declare const Snippet: FC<SnippetProps>;
+//#endregion
+export { Snippet };
+//# sourceMappingURL=Snippet.d.mts.map

package/es/Snippet/Snippet.mjs

@@ -0,0 +1,63 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import SyntaxHighlighter_default from "../Highlighter/SyntaxHighlighter/index.mjs";
+import CopyButton_default from "../CopyButton/CopyButton.mjs";
+import Spotlight_default from "../awesome/Spotlight/Spotlight.mjs";
+import { useStyles } from "./style.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/Snippet/Snippet.tsx
+const Snippet = ({ ref, prefix, language = "tsx", children, copyable = true, variant = "filled", spotlight, shadow, className, ...rest }) => {
+	const { styles, cx } = useStyles();
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: {
+			shadow: false,
+			variant: "filled"
+		},
+		variants: {
+			variant: {
+				filled: styles.filled,
+				outlined: styles.outlined,
+				borderless: styles.borderless
+			},
+			shadow: {
+				false: null,
+				true: styles.shadow
+			}
+		}
+	}), [styles]);
+	const tirmedChildren = children.trim();
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: cx(variants({
+			shadow,
+			variant
+		}), className),
+		"data-code-type": "highlighter",
+		gap: 8,
+		horizontal: true,
+		ref,
+		...rest,
+		children: [
+			spotlight && /* @__PURE__ */ jsx(Spotlight_default, {}),
+			/* @__PURE__ */ jsx(SyntaxHighlighter_default, {
+				className: styles.hightlight,
+				language,
+				children: [prefix, tirmedChildren].filter(Boolean).join(" ")
+			}),
+			copyable && /* @__PURE__ */ jsx(CopyButton_default, {
+				content: tirmedChildren,
+				size: "small"
+			})
+		]
+	});
+};
+Snippet.displayName = "Snippet";
+var Snippet_default = Snippet;
+
+//#endregion
+export { Snippet_default as default };
+//# sourceMappingURL=Snippet.mjs.map

package/es/Snippet/Snippet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snippet.mjs","names":["Snippet: FC<SnippetProps>","Flexbox","Spotlight","SyntaxHighlighter","CopyButton"],"sources":["../../src/Snippet/Snippet.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { useStyles } from './style';\nimport type { SnippetProps } from './type';\n\nconst Snippet: FC<SnippetProps> = ({\n  ref,\n  prefix,\n  language = 'tsx',\n  children,\n  copyable = true,\n  variant = 'filled',\n  spotlight,\n  shadow,\n  className,\n  ...rest\n}) => {\n  const { styles, cx } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\n          variant: 'filled',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  const tirmedChildren = children.trim();\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(variants({ shadow, variant }), className)}\n      data-code-type=\"highlighter\"\n      gap={8}\n      horizontal\n      ref={ref}\n      {...rest}\n    >\n      {spotlight && <Spotlight />}\n      <SyntaxHighlighter className={styles.hightlight} language={language}>\n        {[prefix, tirmedChildren].filter(Boolean).join(' ')}\n      </SyntaxHighlighter>\n      {copyable && <CopyButton content={tirmedChildren} size={'small'} />}\n    </Flexbox>\n  );\n};\n\nSnippet.displayName = 'Snippet';\n\nexport default Snippet;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,WAA6B,EACjC,KACA,QACA,WAAW,OACX,UACA,WAAW,MACX,UAAU,UACV,WACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,SAAS,MAAM;AAEtC,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACf,KAAK;EACL;EACK;EACL,GAAI;;GAEH,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IAAkB,WAAW,OAAO;IAAsB;cACxD,CAAC,QAAQ,eAAe,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACjC;GACnB,YAAY,oBAACC;IAAW,SAAS;IAAgB,MAAM;KAAW;;GAC3D;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/Snippet/index.d.mts

@@ -0,0 +1,3 @@
+import { SnippetProps } from "./type.mjs";
+import { Snippet } from "./Snippet.mjs";
+export { SnippetProps, Snippet as default };

package/es/Snippet/index.mjs

@@ -0,0 +1,3 @@
+import Snippet_default from "./Snippet.mjs";
+
+export { Snippet_default as default };

package/es/Snippet/style.mjs

@@ -0,0 +1,39 @@
+import { createStyles } from "antd-style";
+
+//#region src/Snippet/style.ts
+const useStyles = createStyles(({ css: css$1, token, stylish }) => {
+	return {
+		borderless: stylish.variantBorderlessWithoutHover,
+		filled: stylish.variantFilledWithoutHover,
+		hightlight: css$1`
+      overflow: auto hidden;
+      flex: 1;
+      height: 100%;
+      padding: 0;
+
+      pre {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    `,
+		outlined: stylish.variantOutlinedWithoutHover,
+		root: css$1`
+      position: relative;
+
+      overflow: hidden;
+
+      max-width: 100%;
+      height: 38px;
+      padding-block: 0;
+      padding-inline: 12px 8px;
+
+      border-radius: ${token.borderRadius}px;
+    `,
+		shadow: stylish.shadow
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Snippet/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Snippet/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    filled: stylish.variantFilledWithoutHover,\n    hightlight: css`\n      overflow: auto hidden;\n      flex: 1;\n      height: 100%;\n      padding: 0;\n\n      pre {\n        display: flex;\n        align-items: center;\n        height: 100%;\n      }\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden;\n\n      max-width: 100%;\n      height: 38px;\n      padding-block: 0;\n      padding-inline: 12px 8px;\n\n      border-radius: ${token.borderRadius}px;\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,cAAc;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQ,QAAQ;EAChB,YAAY,KAAG;;;;;;;;;;;;EAYf,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;;;;;uBAUU,MAAM,aAAa;;EAEtC,QAAQ,QAAQ;EACjB;EACD"}

package/es/Snippet/type.d.mts

@@ -0,0 +1,18 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { Ref } from "react";
+
+//#region src/Snippet/type.d.ts
+interface SnippetProps extends FlexboxProps {
+  children: string;
+  copyable?: boolean;
+  language?: string;
+  prefix?: string;
+  ref?: Ref<HTMLDivElement>;
+  shadow?: boolean;
+  spotlight?: boolean;
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+//#endregion
+export { SnippetProps };
+//# sourceMappingURL=type.d.mts.map

package/es/SortableList/SortableList.d.mts

@@ -0,0 +1,15 @@
+import { DragHandle } from "./components/DragHandle.mjs";
+import { SortableItem } from "./components/SortableItem.mjs";
+import { SortableListProps } from "./type.mjs";
+import { ReactNode } from "react";
+
+//#region src/SortableList/SortableList.d.ts
+interface ISortableList {
+  (props: SortableListProps): ReactNode;
+  DragHandle: typeof DragHandle;
+  Item: typeof SortableItem;
+}
+declare const SortableList: ISortableList;
+//#endregion
+export { SortableList };
+//# sourceMappingURL=SortableList.d.mts.map

package/es/SortableList/SortableList.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import SortableItem_default from "./components/SortableItem.mjs";
+import DragHandle_default from "./components/DragHandle.mjs";
+import SortableOverlay_default from "./components/SortableOverlay.mjs";
+import { Fragment, memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+//#region src/SortableList/SortableList.tsx
+const SortableListParent = memo(({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {
+	const [active, setActive] = useState(null);
+	const { styles } = useStyles();
+	const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	return /* @__PURE__ */ jsxs(DndContext, {
+		modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+		onDragCancel: () => {
+			setActive(null);
+		},
+		onDragEnd: ({ active: active$1, over }) => {
+			if (over && active$1.id !== over?.id) onChange(arrayMove(items, items.findIndex(({ id }) => id === active$1.id), items.findIndex(({ id }) => id === over.id)));
+			setActive(null);
+		},
+		onDragStart: ({ active: active$1 }) => {
+			setActive(active$1);
+		},
+		sensors,
+		children: [/* @__PURE__ */ jsx(SortableContext, {
+			items,
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(FlexBasic_default, {
+				as: "ul",
+				className: styles.container,
+				gap,
+				ref,
+				...rest,
+				children: items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item) }, item.id))
+			})
+		}), /* @__PURE__ */ jsx(SortableOverlay_default, { children: activeItem ? renderItem(activeItem) : null })]
+	});
+});
+SortableListParent.displayName = "SortableList";
+const SortableList = SortableListParent;
+SortableList.Item = SortableItem_default;
+SortableList.DragHandle = DragHandle_default;
+var SortableList_default = SortableList;
+
+//#endregion
+export { SortableList_default as default };
+//# sourceMappingURL=SortableList.mjs.map

package/es/SortableList/SortableList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.mjs","names":["active","Flexbox","SortableOverlay","SortableItem","DragHandle"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type Active,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, type ReactNode, memo, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { useStyles } from './style';\nimport type { SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n    const [active, setActive] = useState<Active | null>(null);\n    const { styles } = useStyles();\n    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n    const sensors = useSensors(\n      useSensor(PointerSensor),\n      useSensor(KeyboardSensor, {\n        coordinateGetter: sortableKeyboardCoordinates,\n      }),\n    );\n\n    return (\n      <DndContext\n        modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n        onDragCancel={() => {\n          setActive(null);\n        }}\n        onDragEnd={({ active, over }) => {\n          if (over && active.id !== over?.id) {\n            const activeIndex = items.findIndex(({ id }) => id === active.id);\n            const overIndex = items.findIndex(({ id }) => id === over.id);\n\n            onChange(arrayMove(items, activeIndex, overIndex));\n          }\n          setActive(null);\n        }}\n        onDragStart={({ active }) => {\n          setActive(active);\n        }}\n        sensors={sensors}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n            {items.map((item) => (\n              <Fragment key={item.id}>{renderItem(item)}</Fragment>\n            ))}\n          </Flexbox>\n        </SortableContext>\n        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>\n      </DndContext>\n    );\n  },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n  (props: SortableListProps): ReactNode;\n  DragHandle: typeof DragHandle;\n  Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,MAAM,GAAG,GAAG,WAAW;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;AAED,QACE,qBAAC;EACC,WAAW,CAAC,wBAAwB,sBAAsB;EAC1D,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,kBAAQ,WAAW;AAC/B,OAAI,QAAQA,SAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAOA,SAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,uBAAa;AAC3B,aAAUA,SAAO;;EAEV;aAET,oBAAC;GAAuB;GAAO,UAAU;aACvC,oBAACC;IAAQ,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,sBAAwB,WAAW,KAAK,IAA1B,KAAK,GAAiC,CACrD;KACM;IACM,EAClB,oBAACC,qCAAiB,aAAa,WAAW,WAAW,GAAG,OAAuB;GACpE;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAOC;AACpB,aAAa,aAAaC;AAE1B,2BAAe"}

package/es/SortableList/components/DragHandle.d.mts

@@ -0,0 +1,9 @@
+import { ActionIconProps } from "../../ActionIcon/type.mjs";
+import "../../ActionIcon/index.mjs";
+import * as react101 from "react";
+
+//#region src/SortableList/components/DragHandle.d.ts
+declare const DragHandle: react101.NamedExoticComponent<ActionIconProps>;
+//#endregion
+export { DragHandle };
+//# sourceMappingURL=DragHandle.d.mts.map

package/es/SortableList/components/DragHandle.mjs

@@ -0,0 +1,35 @@
+'use client';
+
+import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import { SortableItemContext } from "./SortableItem.mjs";
+import { memo, use, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+
+//#region src/SortableList/components/DragHandle.tsx
+const DragHandle = memo(({ style, ...rest }) => {
+	const [grab, setGrab] = useState(false);
+	const { attributes, listeners, ref } = use(SortableItemContext);
+	return /* @__PURE__ */ jsx(ActionIcon_default, {
+		"data-cypress": "draggable-handle",
+		glass: true,
+		icon: GripVertical,
+		onMouseDown: () => setGrab(true),
+		onMouseUp: () => setGrab(false),
+		size: "small",
+		style: {
+			cursor: grab ? "grab" : "grabbing",
+			...style
+		},
+		...rest,
+		...attributes,
+		...listeners,
+		ref
+	});
+});
+DragHandle.displayName = "DragHandle";
+var DragHandle_default = DragHandle;
+
+//#endregion
+export { DragHandle_default as default };
+//# sourceMappingURL=DragHandle.mjs.map

package/es/SortableList/components/DragHandle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.mjs","names":["ActionIcon"],"sources":["../../../src/SortableList/components/DragHandle.tsx"],"sourcesContent":["'use client';\n\nimport { GripVertical } from 'lucide-react';\nimport { memo, use, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\n\nimport { SortableItemContext } from './SortableItem';\n\nconst DragHandle = memo<ActionIconProps>(({ style, ...rest }) => {\n  const [grab, setGrab] = useState(false);\n  const { attributes, listeners, ref } = use(SortableItemContext);\n  return (\n    <ActionIcon\n      data-cypress=\"draggable-handle\"\n      glass\n      icon={GripVertical}\n      onMouseDown={() => setGrab(true)}\n      onMouseUp={() => setGrab(false)}\n      size={'small'}\n      style={{ cursor: grab ? 'grab' : 'grabbing', ...style }}\n      {...rest}\n      {...attributes}\n      {...listeners}\n      ref={ref}\n    />\n  );\n});\n\nDragHandle.displayName = 'DragHandle';\n\nexport default DragHandle;\n"],"mappings":";;;;;;;;;AASA,MAAM,aAAa,MAAuB,EAAE,OAAO,GAAG,WAAW;CAC/D,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,YAAY,WAAW,QAAQ,IAAI,oBAAoB;AAC/D,QACE,oBAACA;EACC,gBAAa;EACb;EACA,MAAM;EACN,mBAAmB,QAAQ,KAAK;EAChC,iBAAiB,QAAQ,MAAM;EAC/B,MAAM;EACN,OAAO;GAAE,QAAQ,OAAO,SAAS;GAAY,GAAG;GAAO;EACvD,GAAI;EACJ,GAAI;EACJ,GAAI;EACC;GACL;EAEJ;AAEF,WAAW,cAAc;AAEzB,yBAAe"}

package/es/SortableList/components/SortableItem.d.mts

@@ -0,0 +1,15 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import * as react99 from "react";
+import "@dnd-kit/core";
+
+//#region src/SortableList/components/SortableItem.d.ts
+
+interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
+  id: string | number;
+  variant?: 'borderless' | 'filled' | 'outlined';
+}
+declare const SortableItem: react99.NamedExoticComponent<SortableItemProps>;
+//#endregion
+export { SortableItem };
+//# sourceMappingURL=SortableItem.d.mts.map

package/es/SortableList/components/SortableItem.mjs

@@ -0,0 +1,71 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useStyles } from "../style.mjs";
+import { createContext, memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/SortableList/components/SortableItem.tsx
+const SortableItemContext = createContext({
+	attributes: {},
+	listeners: void 0,
+	ref() {}
+});
+const SortableItem = memo(({ variant = "borderless", className, children, id, style, ...rest }) => {
+	const { cx, styles } = useStyles();
+	const variants = useMemo(() => cva(styles.item, {
+		compoundVariants: [{
+			className: styles.itemVariant,
+			variant: "outlined"
+		}, {
+			className: styles.itemVariant,
+			variant: "filled"
+		}],
+		defaultVariants: { variant: "borderless" },
+		variants: { variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		} }
+	}), [styles]);
+	const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({ id });
+	return /* @__PURE__ */ jsx(SortableItemContext, {
+		value: useMemo(() => ({
+			attributes,
+			listeners,
+			ref: setActivatorNodeRef
+		}), [
+			attributes,
+			listeners,
+			setActivatorNodeRef
+		]),
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			as: "li",
+			className: cx(variants({
+				className,
+				variant
+			})),
+			gap: 4,
+			horizontal: true,
+			ref: setNodeRef,
+			style: {
+				opacity: isDragging ? .4 : void 0,
+				transform: CSS.Translate.toString(transform),
+				transition,
+				...style
+			},
+			...rest,
+			children
+		})
+	});
+});
+SortableItem.displayName = "SortableItem";
+var SortableItem_default = SortableItem;
+
+//#endregion
+export { SortableItemContext, SortableItem_default as default };
+//# sourceMappingURL=SortableItem.mjs.map

package/es/SortableList/components/SortableItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.mjs","names":["Flexbox"],"sources":["../../../src/SortableList/components/SortableItem.tsx"],"sourcesContent":["'use client';\n\nimport type { DraggableSyntheticListeners } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { cva } from 'class-variance-authority';\nimport { createContext, memo, useMemo } from 'react';\n\nimport { type FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from '../style';\n\ninterface Context {\n  attributes: Record<string, any>;\n  listeners: DraggableSyntheticListeners;\n  ref(node: HTMLElement | null): void;\n}\n\nexport const SortableItemContext = createContext<Context>({\n  attributes: {},\n  listeners: undefined,\n  ref() {},\n});\n\nexport interface SortableItemProps extends Omit<FlexboxProps, 'id'> {\n  id: string | number;\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst SortableItem = memo<SortableItemProps>(\n  ({ variant = 'borderless', className, children, id, style, ...rest }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.item, {\n          compoundVariants: [\n            {\n              className: styles.itemVariant,\n              variant: 'outlined',\n            },\n            {\n              className: styles.itemVariant,\n              variant: 'filled',\n            },\n          ],\n          defaultVariants: {\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const {\n      attributes,\n      isDragging,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      transform,\n      transition,\n    } = useSortable({ id });\n    const context = useMemo(\n      () => ({\n        attributes,\n        listeners,\n        ref: setActivatorNodeRef,\n      }),\n      [attributes, listeners, setActivatorNodeRef],\n    );\n\n    return (\n      <SortableItemContext value={context}>\n        <Flexbox\n          align={'center'}\n          as={'li'}\n          className={cx(variants({ className, variant }))}\n          gap={4}\n          horizontal\n          ref={setNodeRef}\n          style={{\n            opacity: isDragging ? 0.4 : undefined,\n            transform: CSS.Translate.toString(transform),\n            transition,\n            ...style,\n          }}\n          {...rest}\n        >\n          {children}\n        </Flexbox>\n      </SortableItemContext>\n    );\n  },\n);\n\nSortableItem.displayName = 'SortableItem';\n\nexport default SortableItem;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,sBAAsB,cAAuB;CACxD,YAAY,EAAE;CACd,WAAW;CACX,MAAM;CACP,CAAC;AAOF,MAAM,eAAe,MAClB,EAAE,UAAU,cAAc,WAAW,UAAU,IAAI,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,kBAAkB,CAChB;GACE,WAAW,OAAO;GAClB,SAAS;GACV,EACD;GACE,WAAW,OAAO;GAClB,SAAS;GACV,CACF;EACD,iBAAiB,EACf,SAAS,cACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,EACJ,YACA,YACA,WACA,YACA,qBACA,WACA,eACE,YAAY,EAAE,IAAI,CAAC;AAUvB,QACE,oBAAC;EAAoB,OAVP,eACP;GACL;GACA;GACA,KAAK;GACN,GACD;GAAC;GAAY;GAAW;GAAoB,CAC7C;YAIG,oBAACA;GACC,OAAO;GACP,IAAI;GACJ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAS,CAAC,CAAC;GAC/C,KAAK;GACL;GACA,KAAK;GACL,OAAO;IACL,SAAS,aAAa,KAAM;IAC5B,WAAW,IAAI,UAAU,SAAS,UAAU;IAC5C;IACA,GAAG;IACJ;GACD,GAAI;GAEH;IACO;GACU;EAG3B;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/SortableList/components/SortableOverlay.mjs

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+
+//#region src/SortableList/components/SortableOverlay.tsx
+const dropAnimationConfig = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }) };
+const SortableOverlay = memo(({ children }) => {
+	return /* @__PURE__ */ jsx(DragOverlay, {
+		dropAnimation: dropAnimationConfig,
+		children
+	});
+});
+SortableOverlay.displayName = "SortableOverlay";
+var SortableOverlay_default = SortableOverlay;
+
+//#endregion
+export { SortableOverlay_default as default };
+//# sourceMappingURL=SortableOverlay.mjs.map

package/es/SortableList/components/SortableOverlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableOverlay.mjs","names":["dropAnimationConfig: DropAnimation"],"sources":["../../../src/SortableList/components/SortableOverlay.tsx"],"sourcesContent":["'use client';\n\nimport { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';\nimport type { DropAnimation } from '@dnd-kit/core';\nimport type { PropsWithChildren } from 'react';\nimport { memo } from 'react';\n\nconst dropAnimationConfig: DropAnimation = {\n  sideEffects: defaultDropAnimationSideEffects({\n    styles: {\n      active: {\n        opacity: '0.4',\n      },\n    },\n  }),\n};\n\nconst SortableOverlay = memo<PropsWithChildren>(({ children }) => {\n  return <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>;\n});\n\nSortableOverlay.displayName = 'SortableOverlay';\n\nexport default SortableOverlay;\n"],"mappings":";;;;;;;AAOA,MAAMA,sBAAqC,EACzC,aAAa,gCAAgC,EAC3C,QAAQ,EACN,QAAQ,EACN,SAAS,OACV,EACF,EACF,CAAC,EACH;AAED,MAAM,kBAAkB,MAAyB,EAAE,eAAe;AAChE,QAAO,oBAAC;EAAY,eAAe;EAAsB;GAAuB;EAChF;AAEF,gBAAgB,cAAc;AAE9B,8BAAe"}

package/es/SortableList/index.d.mts

@@ -0,0 +1,3 @@
+import { SortableListItem, SortableListProps } from "./type.mjs";
+import { SortableList } from "./SortableList.mjs";
+export { SortableListItem, SortableListProps, SortableList as default };

package/es/SortableList/index.mjs

@@ -0,0 +1,3 @@
+import SortableList_default from "./SortableList.mjs";
+
+export { SortableList_default as default };

package/es/SortableList/style.mjs

@@ -0,0 +1,28 @@
+import { createStyles } from "antd-style";
+
+//#region src/SortableList/style.ts
+const useStyles = createStyles(({ css: css$1, stylish, token }) => {
+	return {
+		borderless: stylish.variantBorderlessWithoutHover,
+		container: css$1`
+      padding: 0;
+      list-style: none;
+    `,
+		filled: stylish.variantFilledWithoutHover,
+		item: css$1`
+      overflow: hidden;
+      box-sizing: border-box;
+      list-style: none;
+      border-radius: ${token.borderRadius}px;
+    `,
+		itemVariant: css$1`
+      padding-block: 4px;
+      padding-inline: 4px 16px;
+    `,
+		outlined: stylish.variantOutlinedWithoutHover
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/SortableList/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SortableList/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, stylish, token }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    container: css`\n      padding: 0;\n      list-style: none;\n    `,\n    filled: stylish.variantFilledWithoutHover,\n    item: css`\n      overflow: hidden;\n      box-sizing: border-box;\n      list-style: none;\n      border-radius: ${token.borderRadius}px;\n    `,\n    itemVariant: css`\n      padding-block: 4px;\n      padding-inline: 4px 16px;\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,SAAS,YAAY;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,WAAW,KAAG;;;;EAId,QAAQ,QAAQ;EAChB,MAAM,KAAG;;;;uBAIU,MAAM,aAAa;;EAEtC,aAAa,KAAG;;;;EAIhB,UAAU,QAAQ;EACnB;EACD"}