@jinmi/ui 0.0.0-stage → 6.0.1

package/es/base-ui/DraggablePanel/style.mjs

@@ -0,0 +1,362 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/DraggablePanel/style.ts
+const TOGGLE_HIT_SHORT = 26;
+const TOGGLE_HIT_LONG = 40;
+const SEAM_ARROW = {
+	depth: 6.5,
+	half: 11,
+	lead: 6,
+	stroke: 1.25
+};
+const prefix = "base-draggable-panel";
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const float = css`
+    position: absolute;
+    z-index: 200;
+  `;
+	const toggleRoot = cx(`${prefix}-toggle`, css`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 110;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > button {
+        pointer-events: all;
+        cursor: pointer;
+
+        position: relative;
+
+        width: ${TOGGLE_HIT_SHORT}px;
+        height: ${TOGGLE_HIT_LONG}px;
+        padding: 0;
+        border: none;
+
+        background: none;
+
+        &:focus-visible {
+          outline: 2px solid ${brandCssVar.colorBrand};
+          outline-offset: 3px;
+        }
+      }
+
+      svg {
+        pointer-events: none;
+
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        transform: translate(-50%, -50%);
+
+        overflow: visible;
+
+        opacity: 0;
+
+        transition: opacity 0.18s ${cssVar.motionEaseOut};
+      }
+
+      path {
+        transform-origin: center;
+        transform: scaleX(0);
+        vector-effect: non-scaling-stroke;
+        transition: transform 0.24s ${cssVar.motionEaseOut};
+      }
+
+      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */
+      stop[data-end] {
+        stop-color: ${cssVar.colorBorderSecondary};
+        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};
+      }
+
+      stop[data-tip] {
+        stop-color: ${cssVar.colorTextTertiary};
+        transition: stop-color 0.16s ${cssVar.motionEaseOut};
+      }
+
+      button:hover stop[data-tip] {
+        stop-color: ${cssVar.colorTextSecondary};
+      }
+    `);
+	return {
+		body: css`
+      overflow: hidden auto;
+      padding: 16px;
+    `,
+		bottomFloat: cx(float, css`
+        inset-block-end: 0;
+        inset-inline: 0;
+        width: 100%;
+      `),
+		container: css`
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    `,
+		content: cx(`${prefix}-content`, css`
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+
+        min-width: 0;
+        min-height: 0;
+
+        background: var(--draggable-panel-bg, transparent);
+      `),
+		fixed: css`
+      position: relative;
+    `,
+		footer: css`
+      display: flex;
+      flex: none;
+      gap: 8px;
+      align-items: center;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    `,
+		handle: cx(`${prefix}-handle`, css`
+        touch-action: none;
+        position: absolute;
+        z-index: 100;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          background: ${cssVar.colorBorderSecondary};
+          transition:
+            width 0.25s ${cssVar.motionEaseOut},
+            height 0.25s ${cssVar.motionEaseOut},
+            background 0.16s ${cssVar.motionEaseOut};
+        }
+
+        &:hover::before,
+        &:hover::after {
+          background: ${cssVar.colorFill};
+        }
+
+        &[data-resizing]::before,
+        &[data-resizing]::after {
+          background: ${cssVar.colorPrimary};
+        }
+
+        &[data-border='false']::before,
+        &[data-border='false']::after {
+          background: transparent;
+        }
+
+        &:focus-visible {
+          outline: 2px solid ${brandCssVar.colorBrand};
+          outline-offset: -2px;
+        }
+      `),
+		handleHorizontal: css`
+      cursor: row-resize;
+      inset-inline: 0;
+      height: var(--draggable-panel-handle-size);
+
+      &::before,
+      &::after {
+        inset-block-start: 50%;
+        height: 1px;
+        margin-block-start: -0.5px;
+      }
+
+      &::before {
+        inset-inline-start: 0;
+        width: calc(50% - var(--draggable-panel-gap, 0px));
+      }
+
+      &::after {
+        inset-inline-end: 0;
+        width: calc(50% - var(--draggable-panel-gap, 0px));
+      }
+    `,
+		handleVertical: css`
+      cursor: col-resize;
+      inset-block: 0;
+      width: var(--draggable-panel-handle-size);
+
+      &::before,
+      &::after {
+        inset-inline-start: 50%;
+        width: 1px;
+        margin-inline-start: -0.5px;
+      }
+
+      &::before {
+        inset-block-start: 0;
+        height: calc(50% - var(--draggable-panel-gap, 0px));
+      }
+
+      &::after {
+        inset-block-end: 0;
+        height: calc(50% - var(--draggable-panel-gap, 0px));
+      }
+    `,
+		header: css`
+      display: flex;
+      flex: none;
+      gap: 8px;
+      align-items: center;
+      justify-content: space-between;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+
+      font-weight: 500;
+    `,
+		leftFloat: cx(float, css`
+        inset-block: 0;
+        inset-inline-start: 0;
+        height: 100%;
+      `),
+		rightFloat: cx(float, css`
+        inset-block: 0;
+        inset-inline-end: 0;
+        height: 100%;
+      `),
+		root: cx(prefix, css`
+        --draggable-panel-gap: 0px;
+
+        display: flex;
+        flex-shrink: 0;
+        min-width: 0;
+        min-height: 0;
+
+        &[data-expandable='true']:hover,
+        &[data-expandable='true']:focus-within,
+        &[data-expandable='true'][data-expand='false'] {
+          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;
+        }
+
+        /* The wrapper carries an inline opacity when collapsed, so beat it. */
+        &[data-expandable='true']:hover
+          .${prefix}-toggle,
+          &[data-expandable='true']:focus-within
+          .${prefix}-toggle {
+          opacity: 1 !important;
+        }
+
+        &[data-expandable='true']:hover .${prefix}-toggle svg,
+        &[data-expandable='true']:focus-within .${prefix}-toggle svg,
+        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {
+          opacity: 1;
+        }
+
+        &[data-expandable='true']:hover .${prefix}-toggle path,
+        &[data-expandable='true']:focus-within .${prefix}-toggle path,
+        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {
+          transform: scaleX(var(--seam-bend));
+        }
+
+        &[data-expandable='true'][data-resizing='true'] {
+          --draggable-panel-gap: 0px;
+        }
+
+        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {
+          opacity: 0;
+        }
+      `),
+		toggleBottom: cx(`${prefix}-toggle-bottom`, css`
+        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;
+        inset-inline: 0;
+        height: ${TOGGLE_HIT_SHORT}px;
+
+        > button {
+          width: ${TOGGLE_HIT_LONG}px;
+          height: ${TOGGLE_HIT_SHORT}px;
+        }
+      `),
+		toggleLeft: cx(`${prefix}-toggle-left`, css`
+        inset-block: 0;
+        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;
+        width: ${TOGGLE_HIT_SHORT}px;
+      `),
+		toggleRight: cx(`${prefix}-toggle-right`, css`
+        inset-block: 0;
+        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;
+        width: ${TOGGLE_HIT_SHORT}px;
+      `),
+		toggleRoot,
+		toggleTop: cx(`${prefix}-toggle-top`, css`
+        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;
+        inset-inline: 0;
+        height: ${TOGGLE_HIT_SHORT}px;
+
+        > button {
+          width: ${TOGGLE_HIT_LONG}px;
+          height: ${TOGGLE_HIT_SHORT}px;
+        }
+      `),
+		topFloat: cx(float, css`
+        inset-block-start: 0;
+        inset-inline: 0;
+        width: 100%;
+      `)
+	};
+});
+const rootVariants = cva(styles.root, {
+	compoundVariants: [
+		{
+			class: styles.leftFloat,
+			mode: "float",
+			placement: "left"
+		},
+		{
+			class: styles.rightFloat,
+			mode: "float",
+			placement: "right"
+		},
+		{
+			class: styles.topFloat,
+			mode: "float",
+			placement: "top"
+		},
+		{
+			class: styles.bottomFloat,
+			mode: "float",
+			placement: "bottom"
+		}
+	],
+	defaultVariants: {
+		mode: "fixed",
+		placement: "right"
+	},
+	variants: {
+		mode: {
+			fixed: styles.fixed,
+			float: null
+		},
+		placement: {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		}
+	}
+});
+const handleVariants = cva(styles.handle, { variants: { edge: {
+	bottom: styles.handleHorizontal,
+	left: styles.handleVertical,
+	right: styles.handleVertical,
+	top: styles.handleHorizontal
+} } });
+const toggleVariants = cva(styles.toggleRoot, { variants: { placement: {
+	bottom: styles.toggleTop,
+	left: styles.toggleRight,
+	right: styles.toggleLeft,
+	top: styles.toggleBottom
+} } });
+//#endregion
+export { SEAM_ARROW, handleVariants, rootVariants, styles, toggleVariants };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/DraggablePanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\r\nconst TOGGLE_HIT_SHORT = 26;\r\nconst TOGGLE_HIT_LONG = 40;\r\n\r\nexport const SEAM_ARROW = {\r\n  depth: 6.5,\r\n  half: 11,\r\n  lead: 6,\r\n  stroke: 1.25,\r\n};\r\n\r\nconst prefix = 'base-draggable-panel';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  const float = css`\r\n    position: absolute;\r\n    z-index: 200;\r\n  `;\r\n\r\n  const toggleRoot = cx(\r\n    `${prefix}-toggle`,\r\n    css`\r\n      pointer-events: none;\r\n\r\n      position: absolute;\r\n      z-index: 110;\r\n\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      > button {\r\n        pointer-events: all;\r\n        cursor: pointer;\r\n\r\n        position: relative;\r\n\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n        height: ${TOGGLE_HIT_LONG}px;\r\n        padding: 0;\r\n        border: none;\r\n\r\n        background: none;\r\n\r\n        &:focus-visible {\r\n          outline: 2px solid ${brandCssVar.colorBrand};\r\n          outline-offset: 3px;\r\n        }\r\n      }\r\n\r\n      svg {\r\n        pointer-events: none;\r\n\r\n        position: absolute;\r\n        inset-block-start: 50%;\r\n        inset-inline-start: 50%;\r\n        transform: translate(-50%, -50%);\r\n\r\n        overflow: visible;\r\n\r\n        opacity: 0;\r\n\r\n        transition: opacity 0.18s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      path {\r\n        transform-origin: center;\r\n        transform: scaleX(0);\r\n        vector-effect: non-scaling-stroke;\r\n        transition: transform 0.24s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */\r\n      stop[data-end] {\r\n        stop-color: ${cssVar.colorBorderSecondary};\r\n        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      stop[data-tip] {\r\n        stop-color: ${cssVar.colorTextTertiary};\r\n        transition: stop-color 0.16s ${cssVar.motionEaseOut};\r\n      }\r\n\r\n      button:hover stop[data-tip] {\r\n        stop-color: ${cssVar.colorTextSecondary};\r\n      }\r\n    `,\r\n  );\r\n\r\n  return {\r\n    body: css`\r\n      overflow: hidden auto;\r\n      padding: 16px;\r\n    `,\r\n    bottomFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-end: 0;\r\n        inset-inline: 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n    container: css`\r\n      position: relative;\r\n      overflow: hidden;\r\n      display: flex;\r\n      flex-direction: column;\r\n    `,\r\n    content: cx(\r\n      `${prefix}-content`,\r\n      css`\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-shrink: 0;\r\n\r\n        min-width: 0;\r\n        min-height: 0;\r\n\r\n        background: var(--draggable-panel-bg, transparent);\r\n      `,\r\n    ),\r\n    fixed: css`\r\n      position: relative;\r\n    `,\r\n    footer: css`\r\n      display: flex;\r\n      flex: none;\r\n      gap: 8px;\r\n      align-items: center;\r\n\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    `,\r\n    handle: cx(\r\n      `${prefix}-handle`,\r\n      css`\r\n        touch-action: none;\r\n        position: absolute;\r\n        z-index: 100;\r\n\r\n        &::before,\r\n        &::after {\r\n          content: '';\r\n          position: absolute;\r\n          background: ${cssVar.colorBorderSecondary};\r\n          transition:\r\n            width 0.25s ${cssVar.motionEaseOut},\r\n            height 0.25s ${cssVar.motionEaseOut},\r\n            background 0.16s ${cssVar.motionEaseOut};\r\n        }\r\n\r\n        &:hover::before,\r\n        &:hover::after {\r\n          background: ${cssVar.colorFill};\r\n        }\r\n\r\n        &[data-resizing]::before,\r\n        &[data-resizing]::after {\r\n          background: ${cssVar.colorPrimary};\r\n        }\r\n\r\n        &[data-border='false']::before,\r\n        &[data-border='false']::after {\r\n          background: transparent;\r\n        }\r\n\r\n        &:focus-visible {\r\n          outline: 2px solid ${brandCssVar.colorBrand};\r\n          outline-offset: -2px;\r\n        }\r\n      `,\r\n    ),\r\n    handleHorizontal: css`\r\n      cursor: row-resize;\r\n      inset-inline: 0;\r\n      height: var(--draggable-panel-handle-size);\r\n\r\n      &::before,\r\n      &::after {\r\n        inset-block-start: 50%;\r\n        height: 1px;\r\n        margin-block-start: -0.5px;\r\n      }\r\n\r\n      &::before {\r\n        inset-inline-start: 0;\r\n        width: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n\r\n      &::after {\r\n        inset-inline-end: 0;\r\n        width: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n    `,\r\n    handleVertical: css`\r\n      cursor: col-resize;\r\n      inset-block: 0;\r\n      width: var(--draggable-panel-handle-size);\r\n\r\n      &::before,\r\n      &::after {\r\n        inset-inline-start: 50%;\r\n        width: 1px;\r\n        margin-inline-start: -0.5px;\r\n      }\r\n\r\n      &::before {\r\n        inset-block-start: 0;\r\n        height: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n\r\n      &::after {\r\n        inset-block-end: 0;\r\n        height: calc(50% - var(--draggable-panel-gap, 0px));\r\n      }\r\n    `,\r\n    header: css`\r\n      display: flex;\r\n      flex: none;\r\n      gap: 8px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n\r\n      padding-block: 8px;\r\n      padding-inline: 16px;\r\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n      font-weight: 500;\r\n    `,\r\n    leftFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-start: 0;\r\n        height: 100%;\r\n      `,\r\n    ),\r\n    rightFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-end: 0;\r\n        height: 100%;\r\n      `,\r\n    ),\r\n    root: cx(\r\n      prefix,\r\n      css`\r\n        --draggable-panel-gap: 0px;\r\n\r\n        display: flex;\r\n        flex-shrink: 0;\r\n        min-width: 0;\r\n        min-height: 0;\r\n\r\n        &[data-expandable='true']:hover,\r\n        &[data-expandable='true']:focus-within,\r\n        &[data-expandable='true'][data-expand='false'] {\r\n          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;\r\n        }\r\n\r\n        /* The wrapper carries an inline opacity when collapsed, so beat it. */\r\n        &[data-expandable='true']:hover\r\n          .${prefix}-toggle,\r\n          &[data-expandable='true']:focus-within\r\n          .${prefix}-toggle {\r\n          opacity: 1 !important;\r\n        }\r\n\r\n        &[data-expandable='true']:hover .${prefix}-toggle svg,\r\n        &[data-expandable='true']:focus-within .${prefix}-toggle svg,\r\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\r\n          opacity: 1;\r\n        }\r\n\r\n        &[data-expandable='true']:hover .${prefix}-toggle path,\r\n        &[data-expandable='true']:focus-within .${prefix}-toggle path,\r\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {\r\n          transform: scaleX(var(--seam-bend));\r\n        }\r\n\r\n        &[data-expandable='true'][data-resizing='true'] {\r\n          --draggable-panel-gap: 0px;\r\n        }\r\n\r\n        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\r\n          opacity: 0;\r\n        }\r\n      `,\r\n    ),\r\n    toggleBottom: cx(\r\n      `${prefix}-toggle-bottom`,\r\n      css`\r\n        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\r\n        inset-inline: 0;\r\n        height: ${TOGGLE_HIT_SHORT}px;\r\n\r\n        > button {\r\n          width: ${TOGGLE_HIT_LONG}px;\r\n          height: ${TOGGLE_HIT_SHORT}px;\r\n        }\r\n      `,\r\n    ),\r\n    toggleLeft: cx(\r\n      `${prefix}-toggle-left`,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n      `,\r\n    ),\r\n    toggleRight: cx(\r\n      `${prefix}-toggle-right`,\r\n      css`\r\n        inset-block: 0;\r\n        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\r\n        width: ${TOGGLE_HIT_SHORT}px;\r\n      `,\r\n    ),\r\n    toggleRoot,\r\n    toggleTop: cx(\r\n      `${prefix}-toggle-top`,\r\n      css`\r\n        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\r\n        inset-inline: 0;\r\n        height: ${TOGGLE_HIT_SHORT}px;\r\n\r\n        > button {\r\n          width: ${TOGGLE_HIT_LONG}px;\r\n          height: ${TOGGLE_HIT_SHORT}px;\r\n        }\r\n      `,\r\n    ),\r\n\r\n    topFloat: cx(\r\n      float,\r\n      css`\r\n        inset-block-start: 0;\r\n        inset-inline: 0;\r\n        width: 100%;\r\n      `,\r\n    ),\r\n  };\r\n});\r\n\r\nexport const rootVariants = cva(styles.root, {\r\n  compoundVariants: [\r\n    { class: styles.leftFloat, mode: 'float', placement: 'left' },\r\n    { class: styles.rightFloat, mode: 'float', placement: 'right' },\r\n    { class: styles.topFloat, mode: 'float', placement: 'top' },\r\n    { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\r\n  ],\r\n  defaultVariants: { mode: 'fixed', placement: 'right' },\r\n  variants: {\r\n    mode: { fixed: styles.fixed, float: null },\r\n    placement: { bottom: null, left: null, right: null, top: null },\r\n  },\r\n});\r\n\r\nexport const handleVariants = cva(styles.handle, {\r\n  variants: {\r\n    edge: {\r\n      bottom: styles.handleHorizontal,\r\n      left: styles.handleVertical,\r\n      right: styles.handleVertical,\r\n      top: styles.handleHorizontal,\r\n    },\r\n  },\r\n});\r\n\r\nexport const toggleVariants = cva(styles.toggleRoot, {\r\n  variants: {\r\n    placement: {\r\n      bottom: styles.toggleTop,\r\n      left: styles.toggleRight,\r\n      right: styles.toggleLeft,\r\n      top: styles.toggleBottom,\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/es/base-ui/DraggablePanel/type.d.mts

@@ -0,0 +1,53 @@
+import { DivProps } from "../../types/index.mjs";
+import { Placement } from "./core/axes.mjs";
+import { CSSProperties } from "react";
+//#region src/base-ui/DraggablePanel/type.d.ts
+type DraggablePanelPlacement = Placement;
+interface DraggablePanelSize {
+  height?: number | string;
+  width?: number | string;
+}
+interface DraggablePanelProps extends Omit<DivProps, 'onDrag'> {
+  backgroundColor?: string;
+  classNames?: {
+    content?: string;
+  };
+  /**
+   * Preview a collapsed panel while resizing at or below this size, then commit
+   * the collapsed state on pointer release. Dragging back above the threshold
+   * before release restores the panel.
+   * Omit to disable drag-to-collapse behavior.
+   */
+  collapseThreshold?: number;
+  defaultExpand?: boolean;
+  defaultSize?: DraggablePanelSize;
+  expand?: boolean;
+  expandable?: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  mode?: 'fixed' | 'float';
+  onExpandChange?: (expand: boolean) => void;
+  onSizeChange?: (delta: DraggablePanelSize, size: DraggablePanelSize) => void;
+  onSizeDragging?: (delta: DraggablePanelSize, size: DraggablePanelSize) => void;
+  /**
+   * `placement` is resolved against the inline axis, so `left` means inline-start
+   * and flips with `dir="rtl"`.
+   */
+  placement?: DraggablePanelPlacement;
+  showBorder?: boolean;
+  showHandleWhenCollapsed?: boolean;
+  /**
+   * Widen the resize handle's hit area from 8px to 16px. A coarse pointer always
+   * gets 20px regardless.
+   */
+  showHandleWideArea?: boolean;
+  size?: DraggablePanelSize;
+  styles?: {
+    content?: CSSProperties;
+  };
+}
+//#endregion
+export { DraggablePanelPlacement, DraggablePanelProps, DraggablePanelSize };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Drawer/Drawer.d.mts

@@ -0,0 +1,6 @@
+import { DrawerProps } from "./type.mjs";
+//#region src/base-ui/Drawer/Drawer.d.ts
+declare const Drawer: import("react").NamedExoticComponent<DrawerProps>;
+//#endregion
+export { Drawer as default };
+//# sourceMappingURL=Drawer.d.mts.map

package/es/base-ui/Drawer/Drawer.mjs

@@ -0,0 +1,152 @@
+"use client";
+import { DEFAULT_CONTAINER_MAX_WIDTH } from "./constants.mjs";
+import { styles } from "./style.mjs";
+import { DrawerBackdrop, DrawerContent, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle } from "./atoms.mjs";
+import { DrawerPushProvider, useDrawerPush } from "./DrawerPushContext.mjs";
+import { memo, useCallback, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/Drawer/Drawer.tsx
+const resolvePushDistance = (push) => {
+	if (push === false) return 0;
+	if (push === true) return 180;
+	return push.distance ?? 180;
+};
+const FULL_SIZES = /* @__PURE__ */ new Set([
+	"100%",
+	"100dvh",
+	"100dvw",
+	"100vh",
+	"100vw"
+]);
+const Drawer = memo(({ open, placement = "right", width, height, mask = true, maskClosable = true, keyboard = true, closable = true, closeIcon, extra, title, footer, noHeader, sidebar, sidebarWidth = 280, containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH, push = true, zIndex, getContainer, className, classNames, style, styles: semanticStyles, afterOpenChange, onClose, children }) => {
+	const isOpen = open ?? false;
+	const { childValue, pushed } = useDrawerPush(isOpen);
+	const pushOffset = pushed ? resolvePushDistance(push) : 0;
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (nextOpen || !isOpen) return;
+		if (!keyboard && eventDetails.reason === "escape-key") return;
+		if (!maskClosable && eventDetails.reason === "outside-press") return;
+		onClose?.();
+	}, [
+		isOpen,
+		keyboard,
+		maskClosable,
+		onClose
+	]);
+	const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);
+	const handleAnimationComplete = useCallback(() => {
+		if (isOpen) afterOpenChange?.(true);
+	}, [isOpen, afterOpenChange]);
+	const isHorizontal = placement === "left" || placement === "right";
+	const resolvedWidth = isHorizontal ? width ?? 378 : width;
+	const resolvedHeight = isHorizontal ? height : height ?? 378;
+	const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));
+	const surfaceWeightClass = (() => {
+		if (isFlush) return void 0;
+		if (pushed) return styles.panelRecessed;
+		return mask ? void 0 : styles.panelBoosted;
+	})();
+	const showTitle = title !== void 0 && title !== null;
+	const showHeader = !noHeader && (showTitle || closable || !!extra);
+	const hasSidebar = !!sidebar;
+	const containerStyle = useMemo(() => ({ maxWidth: containerMaxWidth }), [containerMaxWidth]);
+	const closeNode = closable && /* @__PURE__ */ jsx("button", {
+		"aria-label": "Close",
+		className: cx(styles.close, classNames?.close),
+		style: semanticStyles?.close,
+		type: "button",
+		onClick: onClose,
+		children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
+	});
+	const extraNode = (extra || closeNode) && /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.extra, !showHeader && styles.extraFloating, classNames?.extra),
+		style: semanticStyles?.extra,
+		children: [extra, closeNode]
+	});
+	const bodyNode = hasSidebar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: cx(styles.sidebar, classNames?.sidebar),
+		style: {
+			width: sidebarWidth,
+			...semanticStyles?.sidebar
+		},
+		children: sidebar
+	}), /* @__PURE__ */ jsx("div", {
+		className: cx(styles.sidebarContent, classNames?.sidebarContent),
+		style: semanticStyles?.sidebarContent,
+		children
+	})] }) : children;
+	return /* @__PURE__ */ jsx(DrawerRoot, {
+		modal: mask,
+		open: isOpen,
+		zIndex,
+		onExitComplete: handleExitComplete,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DrawerPortal, {
+			container: getContainer === false ? void 0 : getContainer ?? void 0,
+			children: [mask && /* @__PURE__ */ jsx(DrawerBackdrop, {
+				className: classNames?.backdrop,
+				style: semanticStyles?.backdrop
+			}), /* @__PURE__ */ jsx(DrawerPopup, {
+				className: classNames?.popup,
+				flush: isFlush,
+				height: resolvedHeight,
+				motionProps: { onAnimationComplete: handleAnimationComplete },
+				panelClassName: cx(surfaceWeightClass, className, classNames?.panel),
+				panelStyle: {
+					...style,
+					...semanticStyles?.panel
+				},
+				placement,
+				popupStyle: semanticStyles?.popup,
+				pushOffset,
+				width: resolvedWidth,
+				children: /* @__PURE__ */ jsxs(DrawerPushProvider, {
+					value: childValue,
+					children: [
+						showHeader ? /* @__PURE__ */ jsx(DrawerHeader, {
+							className: classNames?.header,
+							style: semanticStyles?.header,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: styles.containerInner,
+								style: containerStyle,
+								children: [showTitle ? /* @__PURE__ */ jsx(DrawerTitle, {
+									className: classNames?.title,
+									style: semanticStyles?.title,
+									children: title
+								}) : /* @__PURE__ */ jsx("span", {}), extraNode]
+							})
+						}) : extraNode,
+						/* @__PURE__ */ jsx(DrawerContent, {
+							className: cx(hasSidebar && styles.contentSidebar, classNames?.content),
+							style: semanticStyles?.content,
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									...containerStyle,
+									...semanticStyles?.bodyContent
+								},
+								className: cx(styles.bodyContent, hasSidebar && styles.bodyContentSidebar, classNames?.bodyContent),
+								children: bodyNode
+							})
+						}),
+						footer && /* @__PURE__ */ jsx(DrawerFooter, {
+							className: classNames?.footer,
+							style: semanticStyles?.footer,
+							children: /* @__PURE__ */ jsx("div", {
+								className: cx(styles.containerInner, styles.containerInnerFooter),
+								style: containerStyle,
+								children: footer
+							})
+						})
+					]
+				})
+			})]
+		})
+	});
+});
+Drawer.displayName = "Drawer";
+//#endregion
+export { Drawer as default };
+
+//# sourceMappingURL=Drawer.mjs.map

package/es/base-ui/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","names":[],"sources":["../../../src/base-ui/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { X } from 'lucide-react';\r\nimport type { CSSProperties } from 'react';\r\nimport { memo, useCallback, useMemo } from 'react';\r\n\r\nimport {\r\n  DrawerBackdrop,\r\n  DrawerContent,\r\n  DrawerFooter,\r\n  DrawerHeader,\r\n  DrawerPopup,\r\n  DrawerPortal,\r\n  DrawerRoot,\r\n  type DrawerRootProps,\r\n  DrawerTitle,\r\n} from './atoms';\r\nimport {\r\n  DEFAULT_CONTAINER_MAX_WIDTH,\r\n  DEFAULT_DRAWER_HEIGHT,\r\n  DEFAULT_DRAWER_WIDTH,\r\n  DEFAULT_PUSH_DISTANCE,\r\n  DEFAULT_SIDEBAR_WIDTH,\r\n} from './constants';\r\nimport { DrawerPushProvider, useDrawerPush } from './DrawerPushContext';\r\nimport { styles } from './style';\r\nimport type { DrawerProps, DrawerPush } from './type';\r\n\r\nconst resolvePushDistance = (push: DrawerPush) => {\r\n  if (push === false) return 0;\r\n  if (push === true) return DEFAULT_PUSH_DISTANCE;\r\n  return push.distance ?? DEFAULT_PUSH_DISTANCE;\r\n};\r\n\r\nconst FULL_SIZES = new Set(['100%', '100dvh', '100dvw', '100vh', '100vw']);\r\n\r\nconst Drawer = memo<DrawerProps>(\r\n  ({\r\n    open,\r\n    placement = 'right',\r\n    width,\r\n    height,\r\n    mask = true,\r\n    maskClosable = true,\r\n    keyboard = true,\r\n    closable = true,\r\n    closeIcon,\r\n    extra,\r\n    title,\r\n    footer,\r\n    noHeader,\r\n    sidebar,\r\n    sidebarWidth = DEFAULT_SIDEBAR_WIDTH,\r\n    containerMaxWidth = DEFAULT_CONTAINER_MAX_WIDTH,\r\n    push = true,\r\n    zIndex,\r\n    getContainer,\r\n    className,\r\n    classNames,\r\n    style,\r\n    styles: semanticStyles,\r\n    afterOpenChange,\r\n    onClose,\r\n    children,\r\n  }) => {\r\n    const isOpen = open ?? false;\r\n    const { childValue, pushed } = useDrawerPush(isOpen);\r\n    const pushOffset = pushed ? resolvePushDistance(push) : 0;\r\n\r\n    const handleOpenChange = useCallback<NonNullable<DrawerRootProps['onOpenChange']>>(\r\n      (nextOpen, eventDetails) => {\r\n        if (nextOpen || !isOpen) return;\r\n        if (!keyboard && eventDetails.reason === 'escape-key') return;\r\n        if (!maskClosable && eventDetails.reason === 'outside-press') return;\r\n        onClose?.();\r\n      },\r\n      [isOpen, keyboard, maskClosable, onClose],\r\n    );\r\n\r\n    const handleExitComplete = useCallback(() => afterOpenChange?.(false), [afterOpenChange]);\r\n    const handleAnimationComplete = useCallback(() => {\r\n      if (isOpen) afterOpenChange?.(true);\r\n    }, [isOpen, afterOpenChange]);\r\n\r\n    const isHorizontal = placement === 'left' || placement === 'right';\r\n    const resolvedWidth = isHorizontal ? (width ?? DEFAULT_DRAWER_WIDTH) : width;\r\n    const resolvedHeight = isHorizontal ? height : (height ?? DEFAULT_DRAWER_HEIGHT);\r\n\r\n    const isFlush = FULL_SIZES.has(String(isHorizontal ? resolvedWidth : resolvedHeight));\r\n    const surfaceWeightClass = (() => {\r\n      if (isFlush) return undefined;\r\n      if (pushed) return styles.panelRecessed;\r\n      return mask ? undefined : styles.panelBoosted;\r\n    })();\r\n\r\n    const showTitle = title !== undefined && title !== null;\r\n    const showHeader = !noHeader && (showTitle || closable || !!extra);\r\n    const hasSidebar = !!sidebar;\r\n\r\n    const containerStyle = useMemo<CSSProperties>(\r\n      () => ({ maxWidth: containerMaxWidth }),\r\n      [containerMaxWidth],\r\n    );\r\n\r\n    const closeNode = closable && (\r\n      <button\r\n        aria-label=\"Close\"\r\n        className={cx(styles.close, classNames?.close)}\r\n        style={semanticStyles?.close}\r\n        type=\"button\"\r\n        onClick={onClose}\r\n      >\r\n        {closeIcon ?? <X size={16} />}\r\n      </button>\r\n    );\r\n\r\n    const extraNode = (extra || closeNode) && (\r\n      <div\r\n        className={cx(styles.extra, !showHeader && styles.extraFloating, classNames?.extra)}\r\n        style={semanticStyles?.extra}\r\n      >\r\n        {extra}\r\n        {closeNode}\r\n      </div>\r\n    );\r\n\r\n    const bodyNode = hasSidebar ? (\r\n      <>\r\n        <div\r\n          className={cx(styles.sidebar, classNames?.sidebar)}\r\n          style={{ width: sidebarWidth, ...semanticStyles?.sidebar }}\r\n        >\r\n          {sidebar}\r\n        </div>\r\n        <div\r\n          className={cx(styles.sidebarContent, classNames?.sidebarContent)}\r\n          style={semanticStyles?.sidebarContent}\r\n        >\r\n          {children}\r\n        </div>\r\n      </>\r\n    ) : (\r\n      children\r\n    );\r\n\r\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\r\n\r\n    return (\r\n      <DrawerRoot\r\n        modal={mask}\r\n        open={isOpen}\r\n        zIndex={zIndex}\r\n        onExitComplete={handleExitComplete}\r\n        onOpenChange={handleOpenChange}\r\n      >\r\n        <DrawerPortal container={container}>\r\n          {mask && (\r\n            <DrawerBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\r\n          )}\r\n          <DrawerPopup\r\n            className={classNames?.popup}\r\n            flush={isFlush}\r\n            height={resolvedHeight}\r\n            motionProps={{ onAnimationComplete: handleAnimationComplete }}\r\n            panelClassName={cx(surfaceWeightClass, className, classNames?.panel)}\r\n            panelStyle={{ ...style, ...semanticStyles?.panel }}\r\n            placement={placement}\r\n            popupStyle={semanticStyles?.popup}\r\n            pushOffset={pushOffset}\r\n            width={resolvedWidth}\r\n          >\r\n            <DrawerPushProvider value={childValue}>\r\n              {showHeader ? (\r\n                <DrawerHeader className={classNames?.header} style={semanticStyles?.header}>\r\n                  <div className={styles.containerInner} style={containerStyle}>\r\n                    {showTitle ? (\r\n                      <DrawerTitle className={classNames?.title} style={semanticStyles?.title}>\r\n                        {title}\r\n                      </DrawerTitle>\r\n                    ) : (\r\n                      <span />\r\n                    )}\r\n                    {extraNode}\r\n                  </div>\r\n                </DrawerHeader>\r\n              ) : (\r\n                extraNode\r\n              )}\r\n              <DrawerContent\r\n                className={cx(hasSidebar && styles.contentSidebar, classNames?.content)}\r\n                style={semanticStyles?.content}\r\n              >\r\n                <div\r\n                  style={{ ...containerStyle, ...semanticStyles?.bodyContent }}\r\n                  className={cx(\r\n                    styles.bodyContent,\r\n                    hasSidebar && styles.bodyContentSidebar,\r\n                    classNames?.bodyContent,\r\n                  )}\r\n                >\r\n                  {bodyNode}\r\n                </div>\r\n              </DrawerContent>\r\n              {footer && (\r\n                <DrawerFooter className={classNames?.footer} style={semanticStyles?.footer}>\r\n                  <div\r\n                    className={cx(styles.containerInner, styles.containerInnerFooter)}\r\n                    style={containerStyle}\r\n                  >\r\n                    {footer}\r\n                  </div>\r\n                </DrawerFooter>\r\n              )}\r\n            </DrawerPushProvider>\r\n          </DrawerPopup>\r\n        </DrawerPortal>\r\n      </DrawerRoot>\r\n    );\r\n  },\r\n);\r\n\r\nDrawer.displayName = 'Drawer';\r\n\r\nexport default Drawer;\r\n"],"mappings":"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"}

package/es/base-ui/Drawer/DrawerLayerContext.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/Drawer/DrawerLayerContext.tsx
+const DrawerLayerContext = createContext(null);
+const useDrawerLayer = () => use(DrawerLayerContext);
+const DrawerLayerProvider = DrawerLayerContext.Provider;
+//#endregion
+export { DrawerLayerProvider, useDrawerLayer };
+
+//# sourceMappingURL=DrawerLayerContext.mjs.map

package/es/base-ui/Drawer/DrawerLayerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerLayerContext.mjs","names":[],"sources":["../../../src/base-ui/Drawer/DrawerLayerContext.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, use } from 'react';\r\n\r\nexport interface DrawerLayer {\r\n  popupRef: (node: HTMLElement | null) => void;\r\n  zIndex: number | undefined;\r\n}\r\n\r\nconst DrawerLayerContext = createContext<DrawerLayer | null>(null);\r\n\r\nexport const useDrawerLayer = () => use(DrawerLayerContext);\r\nexport const DrawerLayerProvider = DrawerLayerContext.Provider;\r\n"],"mappings":";;;AASA,MAAM,qBAAqB,cAAkC,IAAI;AAEjE,MAAa,uBAAuB,IAAI,kBAAkB;AAC1D,MAAa,sBAAsB,mBAAmB"}

package/es/base-ui/Drawer/DrawerPushContext.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+//#region src/base-ui/Drawer/DrawerPushContext.tsx
+const DrawerPushContext = createContext(null);
+const DrawerPushProvider = DrawerPushContext.Provider;
+const useDrawerPush = (open) => {
+	const parent = use(DrawerPushContext);
+	const [pushedCount, setPushedCount] = useState(0);
+	const push = useCallback(() => setPushedCount((count) => count + 1), []);
+	const pull = useCallback(() => setPushedCount((count) => Math.max(0, count - 1)), []);
+	useEffect(() => {
+		if (!open || !parent) return;
+		parent.push();
+		return () => parent.pull();
+	}, [open, parent]);
+	return {
+		childValue: useMemo(() => ({
+			pull,
+			push
+		}), [pull, push]),
+		pushed: pushedCount > 0
+	};
+};
+//#endregion
+export { DrawerPushProvider, useDrawerPush };
+
+//# sourceMappingURL=DrawerPushContext.mjs.map

package/es/base-ui/Drawer/DrawerPushContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPushContext.mjs","names":[],"sources":["../../../src/base-ui/Drawer/DrawerPushContext.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\r\n\r\nexport interface DrawerPushParent {\r\n  pull: () => void;\r\n  push: () => void;\r\n}\r\n\r\nconst DrawerPushContext = createContext<DrawerPushParent | null>(null);\r\n\r\nexport const DrawerPushProvider = DrawerPushContext.Provider;\r\n\r\nexport const useDrawerPush = (open: boolean) => {\r\n  const parent = use(DrawerPushContext);\r\n  const [pushedCount, setPushedCount] = useState(0);\r\n\r\n  const push = useCallback(() => setPushedCount((count) => count + 1), []);\r\n  const pull = useCallback(() => setPushedCount((count) => Math.max(0, count - 1)), []);\r\n\r\n  useEffect(() => {\r\n    if (!open || !parent) return;\r\n    parent.push();\r\n    return () => parent.pull();\r\n  }, [open, parent]);\r\n\r\n  const childValue = useMemo<DrawerPushParent>(() => ({ pull, push }), [pull, push]);\r\n\r\n  return { childValue, pushed: pushedCount > 0 };\r\n};\r\n"],"mappings":";;;AASA,MAAM,oBAAoB,cAAuC,IAAI;AAErE,MAAa,qBAAqB,kBAAkB;AAEpD,MAAa,iBAAiB,SAAkB;CAC9C,MAAM,SAAS,IAAI,iBAAiB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAEhD,MAAM,OAAO,kBAAkB,gBAAgB,UAAU,QAAQ,CAAC,GAAG,CAAC,CAAC;CACvE,MAAM,OAAO,kBAAkB,gBAAgB,UAAU,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;CAEpF,gBAAgB;EACd,IAAI,CAAC,QAAQ,CAAC,QAAQ;EACtB,OAAO,KAAK;EACZ,aAAa,OAAO,KAAK;CAC3B,GAAG,CAAC,MAAM,MAAM,CAAC;CAIjB,OAAO;EAAE,YAFU,eAAiC;GAAE;GAAM;EAAK,IAAI,CAAC,MAAM,IAAI,CAE9D;EAAG,QAAQ,cAAc;CAAE;AAC/C"}