antd-solid 0.0.10 → 0.0.12

package/es/Tree.js

@@ -98,9 +98,9 @@ function SingleLevelTree(props) {
           indexes
         }));
         effect(_p$ => {
-          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
+          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
             _v$2 = cs('ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center ant-cursor-pointer', isEmpty(props.children(item())) && 'opacity-0'),
-            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]");
+            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]");
           _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
           _v$2 !== _p$._v$2 && className(_el$4, _p$._v$2 = _v$2);
           _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);

package/es/Upload.d.ts

@@ -1,11 +1,57 @@
-/// <reference types="react" />
-export type { UploadFile } from 'antd/es/upload';
-declare const Upload: import("solid-js").Component<Omit<Omit<import("antd").UploadProps<any> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<any>, "className"> & {
-    class?: string | undefined;
-}, "children"> & {
-    children?: import("solid-js").JSX.Element;
-}>;
-export type UploadProps = Parameters<typeof Upload>[0];
+import { type Component, type ParentProps, type Signal } from 'solid-js';
+interface UploadProgressEvent extends Partial<ProgressEvent> {
+    percent?: number;
+}
+export interface UploadRequestOption<T = any> {
+    file: File;
+    onProgress?: (event: UploadProgressEvent) => void;
+    onError?: (event: Error) => void;
+    onSuccess?: (body: T) => void;
+}
+export interface UploadFile<T = any> {
+    /**
+     * 文件唯一标识
+     */
+    id: string;
+    /**
+     * 文件名
+     */
+    name: string;
+    /**
+     * MIME 类型
+     */
+    type?: string;
+    /**
+     * 文件大小
+     */
+    size?: number;
+    file?: File;
+    response?: T;
+    status?: 'pending' | 'uploading' | 'error' | 'finished';
+    percent?: number;
+    /**
+     * 下载地址
+     */
+    url?: string;
+}
+export interface UploadProps<T = any> extends ParentProps {
+    class?: string;
+    accept?: string;
+    /**
+     * 上传的地址
+     */
+    action?: string;
+    /**
+     * 上传请求的 http method
+     * 默认 'post'
+     */
+    method?: string;
+    customRequest?: (option: UploadRequestOption<T>) => void;
+    onAdd?: (fileList: Array<Signal<T>>) => void;
+    multiple?: boolean;
+}
+declare function request(file: File, customRequest: UploadProps['customRequest']): Signal<UploadFile<any>>;
+declare const Upload: Component<UploadProps> & {
+    request: typeof request;
+};
 export default Upload;

package/es/Upload.js

@@ -1,6 +1,96 @@
-import { replaceChildren, replaceClassName, reactToSolidComponent } from './utils/component.js';
-import { Upload as Upload$1 } from 'antd';
+import { delegateEvents, insert, use, effect, className, setAttribute, template } from 'solid-js/web';
+import { nanoid } from 'nanoid';
+import { mergeProps, createSignal } from 'solid-js';
 
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(Upload$1)));
+const _tmpl$ = /*#__PURE__*/template(`<span><input class="hidden" type="file">`);
+function request(file, customRequest) {
+  const id = `upload-${nanoid()}`;
+  // eslint-disable-next-line solid/reactivity
+  const uploadFileSignal = createSignal({
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0
+  });
+  const [, setUploadFile] = uploadFileSignal;
+  customRequest?.({
+    file,
+    onProgress(event) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'uploading',
+        percent: event.percent ?? 0
+      }));
+    },
+    onSuccess(response) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'finished',
+        response
+      }));
+    },
+    onError() {
+      setUploadFile(value => ({
+        ...value,
+        status: 'error'
+      }));
+    }
+  });
+  return uploadFileSignal;
+}
+const Upload = _props => {
+  let input;
+  const props = mergeProps({
+    customRequest: ({
+      file,
+      onSuccess,
+      onError
+    }) => {
+      if (!_props.action) return;
+      const formData = new FormData();
+      formData.append('file', file);
+      fetch(_props.action, {
+        method: _props.method ?? 'post',
+        body: formData
+      }).then(onSuccess).catch(onError);
+    }
+  }, _props);
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => input?.click();
+    insert(_el$, () => props.children, _el$2);
+    _el$2.$$input = e => {
+      const fileList = [];
+      for (const file of e.target.files ?? []) {
+        const uploadFileSignal = request(file, props.customRequest);
+        fileList.push(uploadFileSignal);
+      }
+      props.onAdd?.(fileList);
+      e.target.value = '';
+    };
+    const _ref$ = input;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
+    effect(_p$ => {
+      const _v$ = props.class,
+        _v$2 = props.accept,
+        _v$3 = props.multiple;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$2, "accept", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && (_el$2.multiple = _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+    return _el$;
+  })();
+};
+Upload.request = request;
+delegateEvents(["click", "input"]);
 
 export { Upload as default };

package/es/hooks/createControllableValue.d.ts

@@ -3,7 +3,7 @@ export interface Options<T> {
     defaultValue?: T;
     defaultValuePropName?: string;
     valuePropName?: string;
-    trigger?: string | undefined;
+    trigger?: string | null;
 }
 export type Props = Record<string, any>;
 export interface StandardProps<T> {

package/es/hooks/createTransition.d.ts

@@ -0,0 +1,8 @@
+import { type Accessor } from 'solid-js';
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+export default function createTransition(target: Accessor<HTMLElement | undefined | null>, when: Accessor<boolean>, className: string): void;

package/es/hooks/createTransition.js

@@ -0,0 +1,39 @@
+import { createEffect, on } from 'solid-js';
+
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+function createTransition(target, when, className) {
+  createEffect(on(when, input => {
+    const targetValue = target();
+    if (!targetValue) return;
+    if (input) {
+      targetValue.style.display = '';
+      targetValue.classList.add(`${className}-enter-active`, `${className}-enter`, `${className}-enter-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-enter`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.classList.remove(`${className}-enter-active`, `${className}-enter-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    } else {
+      targetValue.classList.add(`${className}-exit-active`, `${className}-exit`, `${className}-exit-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-exit`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.style.display = 'none';
+        targetValue.classList.remove(`${className}-exit-active`, `${className}-exit-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    }
+  }));
+}
+
+export { createTransition as default };

package/es/index.d.ts

@@ -6,6 +6,8 @@ export type { InputNumberProps } from './InputNumber';
 export { default as Timeline } from './Timeline';
 export { default as Modal } from './Modal';
 export type { ModalInstance } from './Modal';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerInstance } from './Drawer';
 export { default as DatePicker } from './DatePicker';
 export { default as Select } from './Select';
 export { default as Tree } from './Tree';
@@ -16,6 +18,7 @@ export { default as ColorPicker } from './ColorPicker';
 export type { ColorPickerProps } from './ColorPicker';
 export { default as Result } from './Result';
 export { default as Progress } from './Progress';
+export type { ProgressProps } from './Progress';
 export { default as Tabs } from './Tabs';
 export type { TabsProps, Tab } from './Tabs';
 export { default as Popconfirm } from './Popconfirm';
@@ -23,8 +26,8 @@ export { default as Upload } from './Upload';
 export type { UploadProps, UploadFile } from './Upload';
 export { default as Radio } from './Radio';
 export type { RadioProps, RadioGroupProps } from './Radio';
-export { default as Form } from './form';
-export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './form';
+export { default as Form } from './Form';
+export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './Form';
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 export { default as Skeleton } from './Skeleton';

package/es/index.js

@@ -1,8 +1,9 @@
-export { default as Button } from './Button.js';
+export { default as Button } from './Button/index.js';
 export { default as Input } from './Input.js';
 export { default as InputNumber } from './InputNumber.js';
 export { default as Timeline } from './Timeline.js';
 export { default as Modal } from './Modal.js';
+export { default as Drawer } from './Drawer/index.js';
 export { default as DatePicker } from './DatePicker.js';
 export { default as Select } from './Select.js';
 export { default as Tree } from './Tree.js';
@@ -10,18 +11,18 @@ export { default as Popover } from './Popover.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as ColorPicker } from './ColorPicker.js';
 export { default as Result } from './Result.js';
-export { default as Progress } from './Progress.js';
+export { default as Progress } from './Progress/index.js';
 export { default as Tabs } from './Tabs.js';
 export { default as Popconfirm } from './Popconfirm.js';
 export { default as Upload } from './Upload.js';
 export { default as Radio } from './Radio.js';
-export { default as Form } from './form/index.js';
+export { default as Form } from './Form/index.js';
 export { default as Switch } from './Switch.js';
 export { default as Skeleton } from './Skeleton.js';
 export { default as Spin } from './Spin.js';
 export { default as Image } from './Image.js';
 export { default as Table } from './Table.js';
-export { default as Compact } from './Compact.js';
+export { default as Compact } from './Compact/index.js';
 export { default as Collapse } from './Collapse/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Segmented } from './Segmented/index.js';

package/es/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,26 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/es/utils/solid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type JSXElement, type JSX } from 'solid-js';
+import { type JSXElement, type JSX, type Ref } from 'solid-js';
 import { type StringOrJSXElement } from '../types';
 /**
  * 判断 JSXElement 是否是基础类型
@@ -13,3 +13,6 @@ export declare function dispatchEventHandlerUnion<T, E extends Event>(handler: J
     target: Element;
 }): void;
 export declare function unwrapStringOrJSXElement(value: StringOrJSXElement): JSXElement;
+export declare function setRef<T>(props: {
+    ref?: Ref<T>;
+}, value: T | null): void;

package/es/utils/solid.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { untrack } from 'solid-js';
 import { isNil } from 'lodash-es';
 import SolidToReact from './SolidToReact.js';
 
@@ -28,5 +29,12 @@ function dispatchEventHandlerUnion(handler, e) {
 function unwrapStringOrJSXElement(value) {
   return typeof value === 'function' ? value() : value;
 }
+function setRef(props, value) {
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(value);
+    }
+  });
+}
 
-export { dispatchEventHandlerUnion, isBaseType, solidToReact, unwrapStringOrJSXElement };
+export { dispatchEventHandlerUnion, isBaseType, setRef, solidToReact, unwrapStringOrJSXElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "",
   "main": "src/index.ts",
   "types": "es/index.d.ts",
@@ -38,7 +38,9 @@
     "rollup": "^3.21.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
+    "sass": "^1.69.6",
     "typescript": "^5.1.6",
     "vite-plugin-solid": "^2.7.0",
     "vitepress": "1.0.0-rc.4",

package/src/Button/index.scss

@@ -0,0 +1,9 @@
+.ant-compact {
+  .ant-btn-primary:not(:first-child) {
+    border-left: 1px solid white;
+  }
+  .ant-btn-primary:not(:last-child) {
+    border-right: 1px solid white;
+
+  }
+}

package/src/{Button.tsx → Button/index.tsx}

@@ -6,17 +6,20 @@ import {
   Show,
   createSignal,
   createMemo,
+  untrack,
 } from 'solid-js'
 import cs from 'classnames'
+import Compact from '../Compact'
+import './index.scss'
 
 interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
   type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'
   onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
+  'on:click'?: (e: MouseEvent) => void
   /**
    * 默认: middle
-   * plain: 没有多余的 padding 和高度等
    */
-  size?: 'large' | 'middle' | 'small' | 'plain'
+  size?: 'large' | 'middle' | 'small'
   class?: string
   style?: JSX.CSSProperties
   loading?: boolean
@@ -30,7 +33,6 @@ const sizeClassMap = {
   large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
   middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
   small: 'ant-px-7px ant-h-24px ant-rounded-4px',
-  plain: 'ant-p-0',
 } as const
 
 const typeClassMap = {
@@ -39,21 +41,21 @@ const typeClassMap = {
       'ant-bg-white',
       danger
         ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
   primary: (danger: boolean) =>
     cs(
-      'ant-border-none ant-text-white',
+      'ant-text-white',
       danger
-        ? 'ant-bg-[var(--ant-color-error)] hover:ant-bg-[var(--light-error-color)] active:ant-bg-[var(--dark-error-color)]'
-        : 'ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
+        ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]'
+        : 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-[var(--ant-color-primary)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-bg-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-bg-[var(--ant-color-primary-active)]',
     ),
   dashed: (danger: boolean) =>
     cs(
       ' ant-bg-white',
       danger
         ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
   text: (danger: boolean) =>
     cs(
@@ -67,7 +69,7 @@ const typeClassMap = {
       'ant-border-none ant-bg-transparent',
       danger
         ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-text-[var(--ant-color-primary)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
 } as const
 
@@ -80,14 +82,22 @@ const Button: Component<ButtonProps> = props => {
     <button
       ref={mergedProps.ref}
       class={cs(
+        `ant-btn ant-btn-${mergedProps.type}`,
         'ant-relative ant-cursor-pointer',
+        'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]',
         mergedProps.class,
         sizeClassMap[mergedProps.size!],
         typeClassMap[mergedProps.type!](props.danger ?? false),
         loading() && 'ant-opacity-65',
-        'ant-[--color:--light-primary-color]'
+        'ant-[--color:--ant-color-primary-hover]',
+        Compact.compactItemRounded0Class,
+        Compact.compactItemZIndexClass,
+        Compact.compactItemClass,
       )}
       style={mergedProps.style}
+      // @ts-expect-error on:
+      on:click={untrack(() => props['on:click'])}
+      // eslint-disable-next-line solid/jsx-no-duplicate-props
       onClick={e => {
         const res = mergedProps.onClick?.(e)
         if (res instanceof Promise) {
@@ -102,7 +112,9 @@ const Button: Component<ButtonProps> = props => {
         ) {
           const div = document.createElement('div')
           div.className = cs(
-            props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--light-primary-color)]',
+            props.danger
+              ? 'ant-[--color:var(--light-error-color)]'
+              : 'ant-[--color:var(--ant-color-primary-hover)]',
             'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]',
           )
           const onAnimationEnd = () => {

package/src/Compact/index.tsx

@@ -0,0 +1,20 @@
+import { type ParentProps } from 'solid-js'
+
+interface CompactProps extends ParentProps {}
+
+function Compact(props: CompactProps) {
+  return (
+    <div class="ant-compact ant-flex child[:first-child]>:ant-rounded-l-6px child[:last-child]>:ant-rounded-r-6px">
+      {props.children}
+    </div>
+  )
+}
+
+Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px p[.ant-compact]:first:ant-ml-0'
+Compact.compactItemRounded0Class = 'p[.ant-compact]:ant-rounded-0'
+Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px'
+Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px'
+Compact.compactItemZIndexClass =
+  'p[.ant-compact]:hover:ant-z-10 p[.ant-compact]:focus:ant-z-10 p[.ant-compact]:focus-within:ant-z-10'
+
+export default Compact

package/src/Drawer/index.scss

@@ -0,0 +1,53 @@
+.ant-drawer-content-right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.ant-drawer-content-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.ant-drawer-content-top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.ant-drawer-content-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.ant-drawer-fade-enter-active,
+.ant-drawer-fade-exit-active {
+  transition: opacity .3s;
+
+  .ant-drawer-content {
+    transition: transform .3s;
+  }
+}
+
+.ant-drawer-fade-enter,
+.ant-drawer-fade-exit-to {
+  opacity: 0;
+
+  .ant-drawer-content-right {
+    transform: translateX(100%);
+  }
+
+  .ant-drawer-content-left {
+    transform: translateX(-100%);
+  }
+
+  .ant-drawer-content-top {
+    transform: translateY(-100%);
+  }
+
+  .ant-drawer-content-bottom {
+    transform: translateY(100%);
+  }
+}