@lobehub/ui 1.1.0 → 1.2.0

package/README.md

@@ -66,17 +66,20 @@ $ pnpm start
 
 <!-- CONTRIBUTION GROUP -->
 
-> 📊 Total: <kbd>**3**</kbd>
+> 📊 Total: <kbd>**4**</kbd>
 
 <a href="https://github.com/canisminor1990" title="canisminor1990">
   <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
 </a>
-<a href="https://github.com/actions-user" title="actions-user">
-  <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
+<a href="https://github.com/arvinxx" title="arvinxx">
+  <img src="https://avatars.githubusercontent.com/u/28616219?v=4" width="50" />
 </a>
 <a href="https://github.com/apps/dependabot" title="dependabot[bot]">
   <img src="https://avatars.githubusercontent.com/in/29110?v=4" width="50" />
 </a>
+<a href="https://github.com/actions-user" title="actions-user">
+  <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
+</a>
 
 <!-- CONTRIBUTION END -->
 

package/es/ActionIcon/index.d.ts

@@ -1,14 +1,27 @@
 import { DivProps } from "../types";
 import { LucideIcon } from 'lucide-react';
 import React from 'react';
+export declare type ActionIconSize = 'large' | 'normal' | 'small' | {
+    blockSize?: number;
+    fontSize?: number;
+    strokeWidth?: number;
+    borderRadius?: number;
+};
 export interface ActionIconProps extends DivProps {
+    /**
+     * @description Whether the icon is active or not
+     * @default false
+     */
     active?: boolean;
-    size?: 'large' | 'normal' | 'small' | {
-        blockSize: number;
-        fontSize: number;
-        strokeWidth: number;
-        borderRadius: number;
-    };
+    /**
+     * @description Size of the icon
+     * @default 'normal'
+     */
+    size?: ActionIconSize;
+    /**
+     * @description The icon element to be rendered
+     * @type LucideIcon
+     */
     icon: LucideIcon;
 }
 declare const _default: React.NamedExoticComponent<ActionIconProps>;

package/es/ActionIcon/index.js

@@ -1,74 +1,45 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["active", "icon", "size", "style"];
-var _templateObject;
+var _excluded = ["className", "active", "icon", "size", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Icon } from "./..";
 import React from 'react';
-import styled from 'styled-components';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Block = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  color: ", ";\n\n  background: ", ";\n\n  transition: all 0.2s ", ";\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref) {
-  var active = _ref.active,
-    theme = _ref.theme;
-  return active ? theme.colorText : theme.colorTextQuaternary;
-}, function (_ref2) {
-  var active = _ref2.active,
-    theme = _ref2.theme;
-  return active ? theme.colorFill : 'transparent';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.motionEaseOut;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colorFillTertiary;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colorText;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colorFill;
-});
-var ActionIcon = function ActionIcon(_ref7) {
-  var active = _ref7.active,
-    icon = _ref7.icon,
-    _ref7$size = _ref7.size,
-    size = _ref7$size === void 0 ? 'normal' : _ref7$size,
-    style = _ref7.style,
-    props = _objectWithoutProperties(_ref7, _excluded);
+var ActionIcon = function ActionIcon(_ref) {
+  var className = _ref.className,
+    active = _ref.active,
+    icon = _ref.icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(active),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   var blockSize;
-  var fontSize;
-  var strokeWidth;
   var borderRadius;
-  var Icon = icon;
   switch (size) {
     case 'large':
       blockSize = 44;
-      fontSize = 24;
-      strokeWidth = 2;
       borderRadius = 8;
       break;
     case 'normal':
       blockSize = 36;
-      fontSize = 24;
-      strokeWidth = 2;
       borderRadius = 5;
       break;
     case 'small':
       blockSize = 28;
-      fontSize = 20;
-      strokeWidth = 1.5;
       borderRadius = 5;
       break;
     default:
       blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
-      fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
-      strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
-  return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
-    active: active,
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.block, className),
     style: _objectSpread({
       width: blockSize,
       height: blockSize,
@@ -76,8 +47,8 @@ var ActionIcon = function ActionIcon(_ref7) {
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Icon, {
-      size: fontSize,
-      strokeWidth: strokeWidth
+      size: size,
+      icon: icon
     })
   }));
 };

package/es/ActionIcon/style.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    block: import("antd-style").SerializedStyles;
+}>;

package/es/ActionIcon/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, active) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      color: ", ";\n\n      background: ", ";\n\n      transition: color 600ms ", ", background-color 100ms ", ";\n\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background-color: ", ";\n      }\n    "])), active ? token.colorText : token.colorTextQuaternary, active ? token.colorFill : 'transparent', token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillTertiary, token.colorText, token.colorFill)
+  };
+});

package/es/DraggablePanel/index.d.ts

@@ -4,22 +4,82 @@ import React from 'react';
 import type { Props as RndProps } from 'react-rnd';
 export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
 export interface DraggablePanelProps extends DivProps {
+    /**
+     * @description Whether the panel can be pinned or not
+     * @default true
+     */
     pin?: boolean;
+    /**
+     * @description The mode of the panel, fixed or float
+     * @default 'fixed'
+     */
     mode?: 'fixed' | 'float';
+    /**
+     * @description The placement of the panel, right, left, top or bottom
+     * @default 'right'
+     */
     placement: placementType;
+    /**
+     * @description The minimum width of the panel
+     */
     minWidth?: number;
+    /**
+     * @description The minimum height of the panel
+     */
     minHeight?: number;
+    /**
+     * @description Whether the panel can be resized or not
+     * @default true
+     */
     resize?: RndProps['enableResizing'];
+    /**
+     * @description The size of the panel
+     */
     size?: Partial<Size>;
+    /**
+     * @description Callback function when the size of the panel changes
+     */
     onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * @description Callback function when the panel is being resized
+     */
     onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * @description Whether the panel is expandable or not
+     * @default true
+     */
     expandable?: boolean;
+    /**
+     * @description Whether the panel is expanded or not
+     */
     expand?: boolean;
+    /**
+     * @description The default expand state of the panel
+     * @default true
+     */
     defaultExpand?: boolean;
+    /**
+     * @description Callback function when the expand state of the panel changes
+     */
     onExpandChange?: (expand: boolean) => void;
+    /**
+     * @description The default size of the panel
+     */
     defaultSize?: Partial<Size>;
+    /**
+     * @description Whether the panel should be destroyed when closed or not
+     * @default false
+     */
     destroyOnClose?: boolean;
+    /**
+     * @description Whether the panel handler should be shown when unexpanded or not
+     * @default true
+     */
     showHandlerWhenUnexpand?: boolean;
+    /**
+     * @description The style of the panel handler
+     * @type CSSProperties
+     */
     hanlderStyle?: React.CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<DraggablePanelProps>;

package/es/DraggablePanel/style.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 import { createStyles, css, cx } from 'antd-style';
-var offset = 16;
+var offset = 17;
 var toggleLength = 40;
 var toggleShort = 16;
 export var useStyle = createStyles(function (_ref, prefix) {

package/es/Icon/index.d.ts

@@ -0,0 +1,21 @@
+import { SvgProps } from "../types";
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+export declare type IconSize = 'large' | 'normal' | 'small' | {
+    fontSize?: number;
+    strokeWidth?: number;
+};
+export interface IconProps extends SvgProps {
+    /**
+     * @description Size of the icon
+     * @default 'normal'
+     */
+    size?: IconSize;
+    /**
+     * @description The icon element to be rendered
+     * @type LucideIcon
+     */
+    icon: LucideIcon;
+}
+declare const _default: React.NamedExoticComponent<IconProps>;
+export default _default;

package/es/Icon/index.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "size"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var fontSize;
+  var strokeWidth;
+  var SvgIcon = icon;
+  switch (size) {
+    case 'large':
+    case 'normal':
+      fontSize = 24;
+      strokeWidth = 2;
+      break;
+    case 'small':
+      fontSize = 20;
+      strokeWidth = 1.5;
+      break;
+    default:
+      fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
+      strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
+      break;
+  }
+  return /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
+    size: fontSize,
+    strokeWidth: strokeWidth
+  }, props));
+};
+export default /*#__PURE__*/React.memo(Icon);

package/es/Logo/Divider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<any>;
+export default _default;

package/es/Logo/Divider.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Divider = function Divider(props) {
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    shapeRendering: "geometricPrecision",
+    viewBox: "0 0 24 24"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M16.88 3.549L7.12 20.451"
+    })
+  }));
+};
+export default /*#__PURE__*/React.memo(Divider);

package/es/Logo/Logo3D.d.ts

@@ -1,4 +1,3 @@
-import { ImgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<ImgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/es/Logo/LogoFlat.d.ts

@@ -1,4 +1,3 @@
-import { SvgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<SvgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/es/Logo/LogoFlat.js

@@ -6,7 +6,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var LogoFlat = function LogoFlat(props) {
   return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 320 320"
   }, props), {}, {

package/es/Logo/LogoHighContrast.d.ts

@@ -1,4 +1,3 @@
-import { SvgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<SvgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/es/Logo/LogoHighContrast.js

@@ -6,7 +6,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var LogoHighContrast = function LogoHighContrast(props) {
   return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 320 320",
     fill: "currentColor",
     fillRule: "evenodd"

package/es/Logo/LogoText.d.ts

@@ -1,4 +1,3 @@
-import { SvgProps } from "../types";
 import React from 'react';
-declare const _default: React.NamedExoticComponent<SvgProps>;
+declare const _default: React.NamedExoticComponent<any>;
 export default _default;

package/es/Logo/index.d.ts

@@ -1,8 +1,20 @@
 import { DivProps } from "../types";
 import React from 'react';
 export interface LogoProps extends DivProps {
-    type?: '3d' | 'flat' | 'high-contrast' | 'text';
+    /**
+     * @description Type of the logo to be rendered
+     * @default '3d'
+     */
+    type?: '3d' | 'flat' | 'high-contrast' | 'text' | 'combine';
+    /**
+     * @description Size of the logo in pixels
+     * @default 32
+     */
     size?: number;
+    /**
+     * @description Additional React Node to be rendered next to the logo
+     */
+    extra?: React.ReactNode;
 }
 declare const _default: React.NamedExoticComponent<LogoProps>;
 export default _default;

package/es/Logo/index.js

@@ -1,24 +1,35 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "size", "style"];
+var _excluded = ["type", "size", "style", "extra", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useTheme } from 'antd-style';
 import React from 'react';
+import Divider from "./Divider";
 import Logo3D from "./Logo3D";
 import LogoFlat from "./LogoFlat";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Logo = function Logo(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? '3d' : _ref$type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     style = _ref.style,
+    extra = _ref.extra,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var logoComponent;
   switch (type) {
     case '3d':
-      // @ts-ignore
       return /*#__PURE__*/_jsx(Logo3D, _objectSpread({
         style: _objectSpread({
           height: size,
@@ -26,7 +37,6 @@ var Logo = function Logo(_ref) {
         }, style)
       }, props));
     case 'flat':
-      // @ts-ignore
       return /*#__PURE__*/_jsx(LogoFlat, _objectSpread({
         style: _objectSpread({
           height: size,
@@ -34,7 +44,6 @@ var Logo = function Logo(_ref) {
         }, style)
       }, props));
     case 'high-contrast':
-      // @ts-ignore
       return /*#__PURE__*/_jsx(LogoHighContrast, _objectSpread({
         style: _objectSpread({
           height: size,
@@ -42,13 +51,48 @@ var Logo = function Logo(_ref) {
         }, style)
       }, props));
     case 'text':
-      // @ts-ignore
       return /*#__PURE__*/_jsx(LogoText, _objectSpread({
         style: _objectSpread({
           height: size,
           width: 'auto'
         }, style)
       }, props));
+    case 'combine':
+      logoComponent = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Logo3D, {
+          style: {
+            height: size,
+            width: size
+          }
+        }), /*#__PURE__*/_jsx(LogoText, {
+          style: {
+            marginLeft: Math.round(size / 4),
+            height: size,
+            width: 'auto'
+          }
+        })]
+      });
   }
+  var extraSize = Math.round(size / 3 * 2);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.flexCenter, className),
+    style: style
+  }, props), {}, {
+    children: [logoComponent, extra && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        style: {
+          height: extraSize,
+          width: extraSize,
+          color: theme.colorBorder
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.extraTitle,
+        style: {
+          fontSize: extraSize
+        },
+        children: extra
+      })]
+    })]
+  }));
 };
 export default /*#__PURE__*/React.memo(Logo);

package/es/Logo/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    flexCenter: import("antd-style").SerializedStyles;
+    extraTitle: import("antd-style").SerializedStyles;
+}>;

package/es/Logo/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    flexCenter: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "]))),
+    extraTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      white-space: nowrap;\n      font-weight: 200;\n    "])))
+  };
+});

package/es/SideNav/index.d.ts

@@ -1,8 +1,17 @@
 import { DivProps } from "../types";
 import React from 'react';
 export interface SideNavProps extends DivProps {
+    /**
+     * @description Avatar to be displayed at the top of the sidenav
+     */
     avatar?: React.ReactNode;
+    /**
+     * @description Actions to be displayed below the avatar
+     */
     topActions?: React.ReactNode;
+    /**
+     * @description Actions to be displayed at the bottom of the sidenav
+     */
     bottomActions: React.ReactNode;
 }
 declare const _default: React.NamedExoticComponent<SideNavProps>;

package/es/StroyBook/index.d.ts

@@ -0,0 +1,18 @@
+import { DivProps } from "../types";
+import { useControls, useCreateStore } from 'leva';
+import React from 'react';
+export { useCreateStore, useControls };
+export interface StroyBookProps extends DivProps {
+    /**
+     * @description The Leva store instance to be used by the component
+     * @type levaStore
+     */
+    levaStore: any;
+    /**
+     * @description If use padding around component
+     */
+    noPadding?: boolean;
+}
+export declare const StroyBook: React.FC<StroyBookProps>;
+declare const _default: React.NamedExoticComponent<StroyBookProps>;
+export default _default;

package/es/StroyBook/index.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["levaStore", "noPadding", "className", "children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { DraggablePanel } from "./..";
+import { LevaPanel, useControls, useCreateStore } from 'leva';
+import React from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export { useCreateStore, useControls };
+export var StroyBook = function StroyBook(_ref) {
+  var levaStore = _ref.levaStore,
+    noPadding = _ref.noPadding,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(noPadding),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.editor, className)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.left,
+      children: children
+    }), /*#__PURE__*/_jsxs(DraggablePanel, {
+      className: styles.right,
+      placement: "right",
+      children: [/*#__PURE__*/_jsx(LevaPanel, {
+        fill: true,
+        store: levaStore,
+        titleBar: false,
+        flat: true
+      }), ' ']
+    })]
+  }));
+};
+export default /*#__PURE__*/React.memo(StroyBook);

package/es/StroyBook/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    editor: import("antd-style").SerializedStyles;
+    left: import("antd-style").SerializedStyles;
+    right: import("antd-style").SerializedStyles;
+}>;

package/es/StroyBook/style.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, noPadding) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: stretch;\n      justify-content: stretch;\n      width: inherit;\n      min-height: inherit;\n    "]))),
+    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
+    right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      --leva-sizes-controlWidth: 66%;\n      --leva-colors-elevation1: ", ";\n      --leva-colors-elevation2: transparent;\n      --leva-colors-elevation3: ", ";\n      --leva-colors-accent1: ", ";\n      --leva-colors-accent2: ", ";\n      --leva-colors-accent3: ", ";\n      --leva-colors-highlight1: ", ";\n      --leva-colors-highlight2: ", ";\n      --leva-colors-highlight3: ", ";\n      --leva-colors-vivid1: ", ";\n      --leva-shadows-level1: unset;\n      --leva-shadows-level2: unset;\n      padding: 6px 0;\n      background: ", ";\n      > div {\n        background: transparent;\n        > div {\n          background: transparent;\n        }\n      }\n      input:checked + label > svg {\n        stroke: ", ";\n      }\n    "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.colorBgLayout, token.colorBorder)
+  };
+});