@lobehub/ui 1.171.0 → 2.0.0

package/es/SliderWithInput/index.js

@@ -1,77 +1 @@
-'use client';
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["step", "value", "onChange", "max", "min", "defaultValue", "size", "controls", "gap", "style", "className", "disabled"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { InputNumber, Slider } from 'antd';
-import { isNull } from 'lodash-es';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
-  var step = _ref.step,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    max = _ref.max,
-    min = _ref.min,
-    defaultValue = _ref.defaultValue,
-    size = _ref.size,
-    controls = _ref.controls,
-    _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 16 : _ref$gap,
-    style = _ref.style,
-    className = _ref.className,
-    disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var handleOnchange = function handleOnchange(value) {
-    if (Number.isNaN(value) || isNull(value)) return;
-    onChange === null || onChange === void 0 || onChange(value);
-  };
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    align: 'center',
-    className: className,
-    direction: 'horizontal',
-    gap: gap,
-    style: style,
-    children: [/*#__PURE__*/_jsx(Slider, _objectSpread({
-      defaultValue: defaultValue,
-      disabled: disabled,
-      max: max,
-      min: min,
-      onChange: handleOnchange,
-      step: step,
-      style: size === 'small' ? {
-        flex: 1,
-        margin: 0
-      } : {
-        flex: 1
-      },
-      tooltip: {
-        open: false
-      },
-      value: typeof value === 'number' ? value : 0
-    }, rest)), /*#__PURE__*/_jsx(InputNumber, {
-      controls: size !== 'small' || controls,
-      defaultValue: defaultValue,
-      disabled: disabled,
-      max: max,
-      min: min,
-      onChange: handleOnchange,
-      size: size,
-      step: Number.isNaN(step) || isNull(step) ? undefined : step,
-      style: {
-        flex: 1,
-        maxWidth: size === 'small' ? 40 : 64
-      },
-      value: typeof value === 'number' ? value : 0
-    })]
-  });
-});
-export default SliderWithInput;
+export { default } from "./SliderWithInput";

package/es/SliderWithInput/type.d.ts

@@ -0,0 +1,18 @@
+import type { SliderSingleProps } from 'antd';
+import type { CSSProperties } from 'react';
+import type { FlexboxProps } from 'react-layout-kit';
+import type { InputNumberProps } from "../Input";
+export interface SliderWithInputProps extends Omit<SliderSingleProps, 'classNames' | 'styles'> {
+    classNames?: {
+        input?: string;
+        slider?: string;
+    } & SliderSingleProps['classNames'];
+    controls?: InputNumberProps['controls'];
+    gap?: FlexboxProps['gap'];
+    size?: InputNumberProps['size'];
+    styles?: {
+        input?: CSSProperties;
+        slider?: CSSProperties;
+    } & SliderSingleProps['styles'];
+    variant?: InputNumberProps['variant'];
+}

package/es/SliderWithInput/type.js

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

package/es/Snippet/Snippet.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SnippetProps } from './type';
+declare const Snippet: import("react").NamedExoticComponent<SnippetProps>;
+export default Snippet;

package/es/Snippet/Snippet.js

@@ -0,0 +1,82 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "prefix", "language", "children", "copyable", "variant", "spotlight", "shadow", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import CopyButton from "../CopyButton";
+import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
+import Spotlight from "../awesome/Spotlight";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Snippet = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    prefix = _ref.prefix,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'tsx' : _ref$language,
+    children = _ref.children,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    spotlight = _ref.spotlight,
+    shadow = _ref.shadow,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        shadow: false,
+        variant: 'filled'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filled,
+          outlined: styles.outlined,
+          borderless: styles.borderless
+        },
+        shadow: {
+          false: null,
+          true: styles.shadow
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
+  var tirmedChildren = children.trim();
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: cx(variants({
+      shadow: shadow,
+      variant: variant
+    }), className),
+    "data-code-type": "highlighter",
+    gap: 8,
+    horizontal: true,
+    ref: ref
+  }, rest), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      className: styles.hightlight,
+      language: language,
+      children: [prefix, tirmedChildren].filter(Boolean).join(' ')
+    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
+      content: tirmedChildren,
+      size: 'small'
+    })]
+  }));
+});
+Snippet.displayName = 'Snippet';
+export default Snippet;

package/es/Snippet/index.d.ts

@@ -1,34 +1,2 @@
-/// <reference types="react" />
-import { DivProps } from "../types";
-export interface SnippetProps extends DivProps {
-    /**
-     * @description The content to be displayed inside the Snippet component
-     */
-    children: string;
-    /**
-     * @description Whether the Snippet component is copyable or not
-     * @default true
-     */
-    copyable?: boolean;
-    /**
-     * @description The language of the content inside the Snippet component
-     * @default 'tsx'
-     */
-    language?: string;
-    /**
-     * @description Whether add spotlight background
-     * @default false
-     */
-    spotlight?: boolean;
-    /**
-     * @description The symbol to be displayed before the content inside the Snippet component
-     */
-    symbol?: string;
-    /**
-     * @description The type of the Snippet component
-     * @default 'ghost'
-     */
-    type?: 'ghost' | 'block';
-}
-declare const Snippet: import("react").NamedExoticComponent<SnippetProps>;
-export default Snippet;
+export { default } from './Snippet';
+export type * from './type';

package/es/Snippet/index.js

@@ -1,54 +1 @@
-'use client';
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import CopyButton from "../CopyButton";
-import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
-import Spotlight from "../awesome/Spotlight";
-import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Snippet = /*#__PURE__*/memo(function (_ref) {
-  var symbol = _ref.symbol,
-    _ref$language = _ref.language,
-    language = _ref$language === void 0 ? 'tsx' : _ref$language,
-    children = _ref.children,
-    _ref$copyable = _ref.copyable,
-    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'ghost' : _ref$type,
-    spotlight = _ref.spotlight,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(type),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  var tirmedChildren = children.trim();
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    align: 'center',
-    className: cx(styles.container, className),
-    gap: 8,
-    horizontal: true
-  }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
-      language: language,
-      children: [symbol, tirmedChildren].filter(Boolean).join(' ')
-    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
-      content: tirmedChildren,
-      size: {
-        blockSize: 24,
-        fontSize: 14
-      }
-    })]
-  }));
-});
-export default Snippet;
+export { default } from "./Snippet";

package/es/Snippet/style.d.ts

@@ -1,3 +1,8 @@
-export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<{
-    container: string;
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    borderless: string;
+    filled: string;
+    hightlight: import("antd-style").SerializedStyles;
+    outlined: string;
+    root: import("antd-style").SerializedStyles;
+    shadow: string;
 }>;

package/es/Snippet/style.js

@@ -1,13 +1,16 @@
 var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, type) {
+export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    cx = _ref.cx,
     token = _ref.token,
-    prefixCls = _ref.prefixCls;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid ", ";\n  "])), type === 'block' ? token.colorFillQuaternary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
+    stylish = _ref.stylish;
   return {
-    container: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n\n        .", "-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow: auto hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n          text-wrap: nowrap !important;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary, prefixCls))
+    borderless: stylish.variantBorderlessWithoutHover,
+    filled: stylish.variantFilledWithoutHover,
+    hightlight: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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    "]))),
+    outlined: stylish.variantOutlinedWithoutHover,
+    root: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: ", "px;\n    "])), token.borderRadius),
+    shadow: stylish.shadow
   };
 });

package/es/Snippet/type.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'react';
+import type { FlexboxProps } from 'react-layout-kit';
+export interface SnippetProps extends FlexboxProps {
+    children: string;
+    copyable?: boolean;
+    language?: string;
+    prefix?: string;
+    ref?: Ref<HTMLDivElement>;
+    shadow?: boolean;
+    spotlight?: boolean;
+    variant?: 'filled' | 'outlined' | 'borderless';
+}

package/es/Snippet/type.js

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

package/es/SortableList/SortableList.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import DragHandle from './components/DragHandle';
+import SortableItem from './components/SortableItem';
+import type { SortableListProps } from './type';
+export interface ISortableList {
+    (props: SortableListProps): ReactNode;
+    DragHandle: typeof DragHandle;
+    Item: typeof SortableItem;
+}
+declare const SortableList: ISortableList;
+export default SortableList;

package/es/{Image/usePreview.js → SortableList/SortableList.js}

@@ -1,5 +1,7 @@
+'use client';
+
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["onVisibleChange", "styles", "minScale", "maxScale", "toolbarAddon"];
+var _excluded = ["ref", "items", "onChange", "renderItem", "gap"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -13,99 +15,87 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, X, ZoomIn, ZoomOut } from 'lucide-react';
-import { useState } from 'react';
+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';
+import { Fragment, memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import ActionIcon from "../ActionIcon";
-import Icon from "../Icon";
-import Preview from "./Preview";
+import DragHandle from "./components/DragHandle";
+import SortableItem from "./components/SortableItem";
+import SortableOverlay from "./components/SortableOverlay";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var usePreview = function usePreview() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _onVisibleChange = _ref.onVisibleChange,
-    _ref$styles = _ref.styles,
-    previewStyle = _ref$styles === void 0 ? {} : _ref$styles,
-    _ref$minScale = _ref.minScale,
-    minScale = _ref$minScale === void 0 ? 0.32 : _ref$minScale,
-    _ref$maxScale = _ref.maxScale,
-    maxScale = _ref$maxScale === void 0 ? 32 : _ref$maxScale,
-    toolbarAddon = _ref.toolbarAddon,
+var SortableListParent = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    items = _ref.items,
+    onChange = _ref.onChange,
+    renderItem = _ref.renderItem,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 8 : _ref$gap,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
+    active = _useState2[0],
+    setActive = _useState2[1];
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  return _objectSpread({
-    closeIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: X,
-      size: {
-        fontSize: 18,
-        strokeWidth: 3
+  var activeItem = useMemo(function () {
+    return items.find(function (item) {
+      return item.id === (active === null || active === void 0 ? void 0 : active.id);
+    });
+  }, [active, items]);
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  return /*#__PURE__*/_jsxs(DndContext, {
+    modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+    onDragCancel: function onDragCancel() {
+      setActive(null);
+    },
+    onDragEnd: function onDragEnd(_ref2) {
+      var active = _ref2.active,
+        over = _ref2.over;
+      if (over && active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+        var activeIndex = items.findIndex(function (_ref3) {
+          var id = _ref3.id;
+          return id === active.id;
+        });
+        var overIndex = items.findIndex(function (_ref4) {
+          var id = _ref4.id;
+          return id === over.id;
+        });
+        onChange(arrayMove(items, activeIndex, overIndex));
       }
-    }),
-    imageRender: function imageRender(node) {
-      return /*#__PURE__*/_jsx(Preview, {
-        visible: visible,
-        children: node
-      });
+      setActive(null);
     },
-    maxScale: maxScale,
-    minScale: minScale,
-    onVisibleChange: function onVisibleChange(visible, prevVisible, current) {
-      setVisible(visible);
-      _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, prevVisible, current);
+    onDragStart: function onDragStart(_ref5) {
+      var active = _ref5.active;
+      setActive(active);
     },
-    styles: _objectSpread({
-      mask: {
-        backdropFilter: 'blur(2px)'
-      }
-    }, previewStyle),
-    toolbarRender: function toolbarRender(_, _ref2) {
-      var scale = _ref2.transform.scale,
-        _ref2$actions = _ref2.actions,
-        onFlipY = _ref2$actions.onFlipY,
-        onFlipX = _ref2$actions.onFlipX,
-        onRotateLeft = _ref2$actions.onRotateLeft,
-        onRotateRight = _ref2$actions.onRotateRight,
-        onZoomOut = _ref2$actions.onZoomOut,
-        onZoomIn = _ref2$actions.onZoomIn;
-      return /*#__PURE__*/_jsxs(Flexbox, {
-        className: styles.toolbar,
-        gap: 4,
-        horizontal: true,
-        children: [/*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: FlipHorizontal,
-          onClick: onFlipX
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: FlipVertical,
-          onClick: onFlipY
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: RotateCcw,
-          onClick: onRotateLeft
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: RotateCw,
-          onClick: onRotateRight
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          disable: scale === minScale,
-          icon: ZoomOut,
-          onClick: onZoomOut
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          disable: scale === maxScale,
-          icon: ZoomIn,
-          onClick: onZoomIn
-        }), toolbarAddon]
-      });
-    }
-  }, rest);
-};
-export default usePreview;
+    sensors: sensors,
+    children: [/*#__PURE__*/_jsx(SortableContext, {
+      items: items,
+      strategy: verticalListSortingStrategy,
+      children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+        as: 'ul',
+        className: styles.container,
+        gap: gap,
+        ref: ref
+      }, rest), {}, {
+        children: items.map(function (item) {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: renderItem(item)
+          }, item.id);
+        })
+      }))
+    }), /*#__PURE__*/_jsx(SortableOverlay, {
+      children: activeItem ? renderItem(activeItem) : null
+    })]
+  });
+});
+SortableListParent.displayName = 'SortableList';
+var SortableList = SortableListParent;
+SortableList.Item = SortableItem;
+SortableList.DragHandle = DragHandle;
+export default SortableList;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type ActionIconProps } from "../../ActionIcon";
+declare const DragHandle: import("react").NamedExoticComponent<ActionIconProps>;
+export default DragHandle;

package/es/SortableList/{DragHandle.js → components/DragHandle.js}

@@ -1,3 +1,5 @@
+'use client';
+
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -14,8 +16,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { GripVertical } from 'lucide-react';
-import React, { memo, useContext, useState } from 'react';
-import ActionIcon from "../ActionIcon";
+import { memo, use, useState } from 'react';
+import ActionIcon from "../../ActionIcon";
 import { SortableItemContext } from "./SortableItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DragHandle = /*#__PURE__*/memo(function (_ref) {
@@ -25,10 +27,10 @@ var DragHandle = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     grab = _useState2[0],
     setGrab = _useState2[1];
-  var _useContext = useContext(SortableItemContext),
-    attributes = _useContext.attributes,
-    listeners = _useContext.listeners,
-    ref = _useContext.ref;
+  var _use = use(SortableItemContext),
+    attributes = _use.attributes,
+    listeners = _use.listeners,
+    ref = _use.ref;
   return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     "data-cypress": "draggable-handle",
     glass: true,
@@ -47,4 +49,5 @@ var DragHandle = /*#__PURE__*/memo(function (_ref) {
     ref: ref
   }));
 });
+DragHandle.displayName = 'DragHandle';
 export default DragHandle;

package/es/SortableList/{SortableItem.d.ts → components/SortableItem.d.ts}

@@ -9,6 +9,7 @@ interface Context {
 export declare const SortableItemContext: import("react").Context<Context>;
 export interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
     id: string | number;
+    variant?: 'borderless' | 'filled' | 'outlined';
 }
 declare const SortableItem: import("react").NamedExoticComponent<SortableItemProps>;
 export default SortableItem;