@lobehub/ui 6.1.0 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/es/Accordion/style.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ import { useMotionComponent } from "../MotionProvider/index.mjs";
|
|
|
3
3
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
4
4
|
import ActionIcon from "../ActionIcon/ActionIcon.mjs";
|
|
5
5
|
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
6
|
+
import { bem } from "../utils/bem.mjs";
|
|
6
7
|
import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
|
|
7
8
|
import { AXES } from "./core/axes.mjs";
|
|
8
9
|
import { coarsePointer, handleSize } from "./core/env.mjs";
|
|
@@ -18,7 +19,7 @@ import * as stylex from "@stylexjs/stylex";
|
|
|
18
19
|
import { ChevronLeft } from "lucide-react";
|
|
19
20
|
import { useTransform } from "motion/react";
|
|
20
21
|
//#region src/DraggablePanel/atoms.tsx
|
|
21
|
-
const
|
|
22
|
+
const panel = bem("draggable-panel");
|
|
22
23
|
const floatStyles = {
|
|
23
24
|
bottom: styles.bottomFloat,
|
|
24
25
|
left: styles.leftFloat,
|
|
@@ -31,12 +32,6 @@ const toggleStyles = {
|
|
|
31
32
|
right: styles.toggleLeft,
|
|
32
33
|
top: styles.toggleBottom
|
|
33
34
|
};
|
|
34
|
-
const togglePlacementClass = {
|
|
35
|
-
bottom: `${prefix}-toggle-top`,
|
|
36
|
-
left: `${prefix}-toggle-right`,
|
|
37
|
-
right: `${prefix}-toggle-left`,
|
|
38
|
-
top: `${prefix}-toggle-bottom`
|
|
39
|
-
};
|
|
40
35
|
const PAN_THRESHOLD = 3;
|
|
41
36
|
const ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;
|
|
42
37
|
const ARROW_C = ARROW_BOX / 2;
|
|
@@ -133,13 +128,14 @@ const DraggablePanelRoot = memo(({ backgroundColor, children, className, collaps
|
|
|
133
128
|
children: /* @__PURE__ */ jsx("aside", {
|
|
134
129
|
"data-expand": isExpand,
|
|
135
130
|
"data-expandable": expandable,
|
|
131
|
+
"data-placement": placement,
|
|
136
132
|
"data-resizing": state.dragging,
|
|
137
133
|
ref: elementRef,
|
|
138
134
|
className: styleProps([
|
|
139
135
|
styles.root,
|
|
140
136
|
mode === "float" ? floatStyles[placement] : styles.fixed,
|
|
141
137
|
draggablePanelMarker
|
|
142
|
-
], clsx$1(
|
|
138
|
+
], clsx$1(panel.block, className)).className,
|
|
143
139
|
style: {
|
|
144
140
|
"--draggable-panel-bg": backgroundColor || "",
|
|
145
141
|
"flexDirection": axis.vertical ? "column" : "row",
|
|
@@ -171,7 +167,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
|
|
|
171
167
|
},
|
|
172
168
|
children: /* @__PURE__ */ jsx(Motion.div, {
|
|
173
169
|
animate: { scale: shrunk ? COLLAPSED_SCALE : 1 },
|
|
174
|
-
className: styleProps(styles.content, clsx$1(
|
|
170
|
+
className: styleProps(styles.content, clsx$1(panel("content"), className)).className,
|
|
175
171
|
transition: timing(),
|
|
176
172
|
style: {
|
|
177
173
|
transformOrigin: ORIGIN_MAP[placement],
|
|
@@ -186,7 +182,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
|
|
|
186
182
|
});
|
|
187
183
|
DraggablePanelContent.displayName = "DraggablePanelContent";
|
|
188
184
|
const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest }) => {
|
|
189
|
-
const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();
|
|
185
|
+
const { axis, controller, expand, placement, showBorder, state } = useDraggablePanelContext();
|
|
190
186
|
const size = useStore(coarsePointer.subscribe, () => handleSize(wideArea));
|
|
191
187
|
const target = useStore(controller.subscribe, () => controller.target);
|
|
192
188
|
useEffect(() => () => controller.drag.cancel(), [controller]);
|
|
@@ -202,10 +198,11 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
|
|
|
202
198
|
"aria-valuenow": target,
|
|
203
199
|
"aria-valuetext": `${target} pixels`,
|
|
204
200
|
"data-border": showBorder,
|
|
201
|
+
"data-placement": placement,
|
|
205
202
|
"data-resizing": state.dragging || void 0,
|
|
206
203
|
role: "separator",
|
|
207
204
|
tabIndex: 0,
|
|
208
|
-
className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx$1(
|
|
205
|
+
className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx$1(panel("handle"), className)).className,
|
|
209
206
|
style: {
|
|
210
207
|
"--draggable-panel-handle-size": `${size}px`,
|
|
211
208
|
[EDGE_INSET[axis.edge]]: -size / 2,
|
|
@@ -265,11 +262,12 @@ const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style,
|
|
|
265
262
|
const bend = bendSign(placement, expand);
|
|
266
263
|
const edgeOpacity = expand && showBorder ? 1 : 0;
|
|
267
264
|
return /* @__PURE__ */ jsx("div", {
|
|
265
|
+
"data-placement": placement,
|
|
268
266
|
style: {
|
|
269
267
|
opacity: expand ? void 0 : showHandleWhenCollapsed ? 1 : 0,
|
|
270
268
|
...style
|
|
271
269
|
},
|
|
272
|
-
className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx$1(
|
|
270
|
+
className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx$1(panel("toggle"), className)).className,
|
|
273
271
|
...rest,
|
|
274
272
|
children: /* @__PURE__ */ jsx("button", {
|
|
275
273
|
"aria-label": expand ? "Collapse panel" : "Expand panel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["clsx","getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n type CSSProperties,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n bottom: styles.bottomFloat,\n left: styles.leftFloat,\n right: styles.rightFloat,\n top: styles.topFloat,\n};\n\nconst toggleStyles = {\n bottom: styles.toggleTop,\n left: styles.toggleRight,\n right: styles.toggleLeft,\n top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n bottom: `${prefix}-toggle-top`,\n left: `${prefix}-toggle-right`,\n right: `${prefix}-toggle-left`,\n top: `${prefix}-toggle-bottom`,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n const { depth: d, half: h, lead } = SEAM_ARROW;\n const c = ARROW_C;\n const r = 0.12;\n return [\n `M${c} ${c - h - lead}`,\n `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n `L${c - d * (1 - r)} ${c - h * r}`,\n `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n `L${c - d * r} ${c + h - h * r}`,\n `Q${c} ${c + h} ${c} ${c + h + lead}`,\n ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n bottom: 'center bottom',\n left: 'left center',\n right: 'right center',\n top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n bottom: 'insetBlockEnd',\n left: 'insetInlineStart',\n right: 'insetInlineEnd',\n top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n backgroundColor?: string;\n collapseThreshold?: number;\n defaultExpand?: boolean;\n defaultSize?: number;\n expand?: boolean;\n expandable?: boolean;\n max?: number;\n min?: number;\n mode?: 'fixed' | 'float';\n onExpandChange?: (expand: boolean) => void;\n onSizeChange?: (size: number, delta: number) => void;\n onSizeDragging?: (size: number, delta: number) => void;\n placement?: Placement;\n showBorder?: boolean;\n size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n ({\n backgroundColor,\n children,\n className,\n collapseThreshold,\n defaultExpand = true,\n defaultSize,\n expand,\n expandable = true,\n max,\n min = 0,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n size,\n style,\n ...rest\n }) => {\n const axis = AXES[placement];\n const fallbackSize = axis.vertical ? 180 : 280;\n const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n const currentSize = size ?? innerSize;\n\n const commitSize = useCallback(\n (next: number, delta: number) => {\n if (size === undefined) setInnerSize(next);\n onSizeChange?.(next, delta);\n },\n [onSizeChange, size],\n );\n\n const options: PanelControllerOptions = {\n collapseThreshold,\n defaultSize: resolvedDefaultSize,\n expand: isExpand,\n max,\n min,\n onExpandChange: setIsExpand,\n onSizeChange: commitSize,\n onSizeDragging,\n placement,\n size: currentSize,\n };\n\n const [controller] = useState(() => createPanelController(options));\n const state = useStore(controller.subscribe, () => controller.state);\n const elementRef = useRef<HTMLElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n controller.sync(options);\n });\n\n useIsomorphicLayoutEffect(() => {\n const node = elementRef.current;\n return node ? controller.attach(node) : undefined;\n }, [controller]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const context = useMemo(\n () => ({\n axis,\n controller,\n expand: isExpand,\n expandable,\n placement,\n showBorder,\n state,\n toggleExpand,\n }),\n [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n );\n\n return (\n <DraggablePanelContext value={context}>\n <aside\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\n className={\n styleProps(\n [\n styles.root,\n mode === 'float' ? floatStyles[placement] : styles.fixed,\n draggablePanelMarker,\n ],\n clsx(prefix, className),\n ).className\n }\n style={\n {\n '--draggable-panel-bg': backgroundColor || '',\n 'flexDirection': axis.vertical ? 'column' : 'row',\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </aside>\n </DraggablePanelContext>\n );\n },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n ({ children, className, style, ...rest }) => {\n const Motion = useMotionComponent();\n const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n // Subscribed, not read: a collapse that changes only the target would otherwise\n // leave the content unclipped and painted outside the zero-width box.\n const target = useStore(controller.subscribe, () => controller.target);\n const clipping = state.dragging || state.folding || target === 0;\n const shrunk = state.collapsing || !expand;\n\n return (\n <Motion.div\n inert={!expand}\n style={\n {\n display: 'flex',\n flexDirection: axis.vertical ? 'column' : 'row',\n flexShrink: 0,\n justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n overflow: clipping ? 'clip' : 'visible',\n [axis.cross]: '100%',\n [axis.extent]: extent,\n } as MotionStyle\n }\n >\n <Motion.div\n animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n className={styleProps(styles.content, clsx(`${prefix}-content`, className)).className}\n transition={timing()}\n style={\n {\n transformOrigin: ORIGIN_MAP[placement],\n [axis.cross]: '100%',\n [axis.extent]: controller.motion.content,\n ...style,\n } as MotionStyle\n }\n {...(rest as HTMLMotionProps<'div'>)}\n >\n {children}\n </Motion.div>\n </Motion.div>\n );\n },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n ({ className, style, wideArea = true, ...rest }) => {\n const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n const target = useStore(controller.subscribe, () => controller.target);\n useEffect(() => () => controller.drag.cancel(), [controller]);\n\n const pressedRef = useRef<{ x: number; y: number } | null>(null);\n const draggingRef = useRef(false);\n const draggedRef = useRef(false);\n const { max, min } = controller.bounds();\n\n if (!expand) return null;\n\n return (\n <div\n aria-orientation={axis.ariaOrientation}\n aria-valuemax={Number.isFinite(max) ? max : undefined}\n aria-valuemin={min}\n aria-valuenow={target}\n aria-valuetext={`${target} pixels`}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\n className={\n styleProps(\n [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n clsx(`${prefix}-handle`, className),\n ).className\n }\n style={\n {\n '--draggable-panel-handle-size': `${size}px`,\n [EDGE_INSET[axis.edge]]: -size / 2,\n ...style,\n } as CSSProperties\n }\n onKeyDown={(event) => controller.resizeByKey(event)}\n onDoubleClick={() => {\n if (!draggedRef.current) controller.reset();\n }}\n // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n // cursor) and the pointerup then never reaches us; the pointer is wherever the\n // user last dragged it, so commit rather than snap back.\n onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerCancel={() => {\n controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerDown={(event) => {\n draggedRef.current = false;\n pressedRef.current = { x: event.clientX, y: event.clientY };\n // A synthetic pointerdown carries no active pointer, and capturing throws.\n try {\n event.currentTarget.setPointerCapture(event.pointerId);\n } catch {\n /* empty */\n }\n }}\n onPointerMove={(event) => {\n if (!pressedRef.current) return;\n const offset = {\n x: event.clientX - pressedRef.current.x,\n y: event.clientY - pressedRef.current.y,\n };\n if (!draggingRef.current) {\n if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n draggingRef.current = true;\n draggedRef.current = true;\n controller.drag.start();\n }\n controller.drag.move(offset);\n }}\n onPointerUp={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n {...rest}\n />\n );\n },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n useDraggablePanelContext();\n const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n if (!expandable) return null;\n\n const bend = bendSign(placement, expand);\n const edgeOpacity = expand && showBorder ? 1 : 0;\n\n return (\n <div\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n className={\n styleProps(\n [styles.toggleRoot, toggleStyles[placement]],\n clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n ).className\n }\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n {...stylex.props(\n styles.toggleButton,\n axis.vertical && styles.toggleButtonHorizontal,\n draggablePanelToggleMarker,\n )}\n >\n <svg\n {...stylex.props(styles.toggleSvg)}\n fill=\"none\"\n height={ARROW_BOX}\n style={{ '--seam-bend': bend } as CSSProperties}\n viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n width={ARROW_BOX}\n >\n <defs>\n <linearGradient\n gradientUnits=\"userSpaceOnUse\"\n id={gradientId}\n x1={ARROW_C}\n x2={ARROW_C}\n y1={0}\n y2={ARROW_BOX}\n >\n <stop\n data-end=\"\"\n offset={0}\n stopOpacity={edgeOpacity}\n {...stylex.props(styles.toggleStopEnd)}\n />\n <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n <stop\n data-end=\"\"\n offset={1}\n stopOpacity={edgeOpacity}\n {...stylex.props(styles.toggleStopEnd)}\n />\n </linearGradient>\n </defs>\n <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n <path\n {...stylex.props(styles.togglePath)}\n d={ARROW_PATH}\n stroke={`url(#${gradientId})`}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={SEAM_ARROW.stroke}\n />\n </g>\n </svg>\n </button>\n </div>\n );\n },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n ({ className, ...rest }) => (\n <div className={styleProps(styles.container, className).className} {...rest} />\n ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n extra?: ReactNode;\n onCollapse?: () => void;\n title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n ({ className, extra, onCollapse, title, ...rest }) => {\n const { toggleExpand } = useDraggablePanelContext();\n\n return (\n <div className={styleProps(styles.header, className).className} {...rest}>\n <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n {title}\n {extra}\n </div>\n );\n },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["clsx","getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n type CSSProperties,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\nimport { bem } from '@/utils/bem';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst panel = bem('draggable-panel');\n\nconst floatStyles = {\n bottom: styles.bottomFloat,\n left: styles.leftFloat,\n right: styles.rightFloat,\n top: styles.topFloat,\n};\n\nconst toggleStyles = {\n bottom: styles.toggleTop,\n left: styles.toggleRight,\n right: styles.toggleLeft,\n top: styles.toggleBottom,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n const { depth: d, half: h, lead } = SEAM_ARROW;\n const c = ARROW_C;\n const r = 0.12;\n return [\n `M${c} ${c - h - lead}`,\n `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n `L${c - d * (1 - r)} ${c - h * r}`,\n `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n `L${c - d * r} ${c + h - h * r}`,\n `Q${c} ${c + h} ${c} ${c + h + lead}`,\n ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n bottom: 'center bottom',\n left: 'left center',\n right: 'right center',\n top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n bottom: 'insetBlockEnd',\n left: 'insetInlineStart',\n right: 'insetInlineEnd',\n top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n backgroundColor?: string;\n collapseThreshold?: number;\n defaultExpand?: boolean;\n defaultSize?: number;\n expand?: boolean;\n expandable?: boolean;\n max?: number;\n min?: number;\n mode?: 'fixed' | 'float';\n onExpandChange?: (expand: boolean) => void;\n onSizeChange?: (size: number, delta: number) => void;\n onSizeDragging?: (size: number, delta: number) => void;\n placement?: Placement;\n showBorder?: boolean;\n size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n ({\n backgroundColor,\n children,\n className,\n collapseThreshold,\n defaultExpand = true,\n defaultSize,\n expand,\n expandable = true,\n max,\n min = 0,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n size,\n style,\n ...rest\n }) => {\n const axis = AXES[placement];\n const fallbackSize = axis.vertical ? 180 : 280;\n const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n const currentSize = size ?? innerSize;\n\n const commitSize = useCallback(\n (next: number, delta: number) => {\n if (size === undefined) setInnerSize(next);\n onSizeChange?.(next, delta);\n },\n [onSizeChange, size],\n );\n\n const options: PanelControllerOptions = {\n collapseThreshold,\n defaultSize: resolvedDefaultSize,\n expand: isExpand,\n max,\n min,\n onExpandChange: setIsExpand,\n onSizeChange: commitSize,\n onSizeDragging,\n placement,\n size: currentSize,\n };\n\n const [controller] = useState(() => createPanelController(options));\n const state = useStore(controller.subscribe, () => controller.state);\n const elementRef = useRef<HTMLElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n controller.sync(options);\n });\n\n useIsomorphicLayoutEffect(() => {\n const node = elementRef.current;\n return node ? controller.attach(node) : undefined;\n }, [controller]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const context = useMemo(\n () => ({\n axis,\n controller,\n expand: isExpand,\n expandable,\n placement,\n showBorder,\n state,\n toggleExpand,\n }),\n [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n );\n\n return (\n <DraggablePanelContext value={context}>\n <aside\n data-expand={isExpand}\n data-expandable={expandable}\n data-placement={placement}\n data-resizing={state.dragging}\n ref={elementRef}\n className={\n styleProps(\n [\n styles.root,\n mode === 'float' ? floatStyles[placement] : styles.fixed,\n draggablePanelMarker,\n ],\n clsx(panel.block, className),\n ).className\n }\n style={\n {\n '--draggable-panel-bg': backgroundColor || '',\n 'flexDirection': axis.vertical ? 'column' : 'row',\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </aside>\n </DraggablePanelContext>\n );\n },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n ({ children, className, style, ...rest }) => {\n const Motion = useMotionComponent();\n const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n // Subscribed, not read: a collapse that changes only the target would otherwise\n // leave the content unclipped and painted outside the zero-width box.\n const target = useStore(controller.subscribe, () => controller.target);\n const clipping = state.dragging || state.folding || target === 0;\n const shrunk = state.collapsing || !expand;\n\n return (\n <Motion.div\n inert={!expand}\n style={\n {\n display: 'flex',\n flexDirection: axis.vertical ? 'column' : 'row',\n flexShrink: 0,\n justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n overflow: clipping ? 'clip' : 'visible',\n [axis.cross]: '100%',\n [axis.extent]: extent,\n } as MotionStyle\n }\n >\n <Motion.div\n animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n className={styleProps(styles.content, clsx(panel('content'), className)).className}\n transition={timing()}\n style={\n {\n transformOrigin: ORIGIN_MAP[placement],\n [axis.cross]: '100%',\n [axis.extent]: controller.motion.content,\n ...style,\n } as MotionStyle\n }\n {...(rest as HTMLMotionProps<'div'>)}\n >\n {children}\n </Motion.div>\n </Motion.div>\n );\n },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n ({ className, style, wideArea = true, ...rest }) => {\n const { axis, controller, expand, placement, showBorder, state } = useDraggablePanelContext();\n const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n const target = useStore(controller.subscribe, () => controller.target);\n useEffect(() => () => controller.drag.cancel(), [controller]);\n\n const pressedRef = useRef<{ x: number; y: number } | null>(null);\n const draggingRef = useRef(false);\n const draggedRef = useRef(false);\n const { max, min } = controller.bounds();\n\n if (!expand) return null;\n\n return (\n <div\n aria-orientation={axis.ariaOrientation}\n aria-valuemax={Number.isFinite(max) ? max : undefined}\n aria-valuemin={min}\n aria-valuenow={target}\n aria-valuetext={`${target} pixels`}\n data-border={showBorder}\n data-placement={placement}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\n className={\n styleProps(\n [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n clsx(panel('handle'), className),\n ).className\n }\n style={\n {\n '--draggable-panel-handle-size': `${size}px`,\n [EDGE_INSET[axis.edge]]: -size / 2,\n ...style,\n } as CSSProperties\n }\n onKeyDown={(event) => controller.resizeByKey(event)}\n onDoubleClick={() => {\n if (!draggedRef.current) controller.reset();\n }}\n // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n // cursor) and the pointerup then never reaches us; the pointer is wherever the\n // user last dragged it, so commit rather than snap back.\n onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerCancel={() => {\n controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerDown={(event) => {\n draggedRef.current = false;\n pressedRef.current = { x: event.clientX, y: event.clientY };\n // A synthetic pointerdown carries no active pointer, and capturing throws.\n try {\n event.currentTarget.setPointerCapture(event.pointerId);\n } catch {\n /* empty */\n }\n }}\n onPointerMove={(event) => {\n if (!pressedRef.current) return;\n const offset = {\n x: event.clientX - pressedRef.current.x,\n y: event.clientY - pressedRef.current.y,\n };\n if (!draggingRef.current) {\n if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n draggingRef.current = true;\n draggedRef.current = true;\n controller.drag.start();\n }\n controller.drag.move(offset);\n }}\n onPointerUp={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n {...rest}\n />\n );\n },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n useDraggablePanelContext();\n const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n if (!expandable) return null;\n\n const bend = bendSign(placement, expand);\n const edgeOpacity = expand && showBorder ? 1 : 0;\n\n return (\n <div\n data-placement={placement}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n className={\n styleProps(\n [styles.toggleRoot, toggleStyles[placement]],\n clsx(panel('toggle'), className),\n ).className\n }\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n {...stylex.props(\n styles.toggleButton,\n axis.vertical && styles.toggleButtonHorizontal,\n draggablePanelToggleMarker,\n )}\n >\n <svg\n {...stylex.props(styles.toggleSvg)}\n fill=\"none\"\n height={ARROW_BOX}\n style={{ '--seam-bend': bend } as CSSProperties}\n viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n width={ARROW_BOX}\n >\n <defs>\n <linearGradient\n gradientUnits=\"userSpaceOnUse\"\n id={gradientId}\n x1={ARROW_C}\n x2={ARROW_C}\n y1={0}\n y2={ARROW_BOX}\n >\n <stop\n data-end=\"\"\n offset={0}\n stopOpacity={edgeOpacity}\n {...stylex.props(styles.toggleStopEnd)}\n />\n <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n <stop\n data-end=\"\"\n offset={1}\n stopOpacity={edgeOpacity}\n {...stylex.props(styles.toggleStopEnd)}\n />\n </linearGradient>\n </defs>\n <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n <path\n {...stylex.props(styles.togglePath)}\n d={ARROW_PATH}\n stroke={`url(#${gradientId})`}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={SEAM_ARROW.stroke}\n />\n </g>\n </svg>\n </button>\n </div>\n );\n },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n ({ className, ...rest }) => (\n <div className={styleProps(styles.container, className).className} {...rest} />\n ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n extra?: ReactNode;\n onCollapse?: () => void;\n title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n ({ className, extra, onCollapse, title, ...rest }) => {\n const { toggleExpand } = useDraggablePanelContext();\n\n return (\n <div className={styleProps(styles.header, className).className} {...rest}>\n <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n {title}\n {extra}\n </div>\n );\n },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,QAAQ,IAAI,iBAAiB;AACnC,MAAM,cAAc;CAClB,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AACA,MAAM,eAAe;CACnB,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AACA,MAAM,gBAAgB;AACtB,MAAM,aAAa,WAAW,OAAO,WAAW,QAAQ;AACxD,MAAM,UAAU,YAAY;AAC5B,MAAM,oBAAoB;CACxB,MAAM,EACJ,OAAO,GACP,MAAM,GACN,SACE;CACJ,MAAM,IAAI;CACV,MAAM,IAAI;CACV,OAAO;EAAC,IAAI,EAAE,GAAG,IAAI,IAAI;EAAQ,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAAK,IAAI,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAAK,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAAK,IAAI,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAAK,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI;CAAM,CAAC,CAAC,KAAK,GAAG;AAC1P,EAAA,CAAG;AAGH,MAAM,YAAY,WAAsB,YAAqB,cAAc,UAAU,cAAc,QAAQ,IAAI,OAAO,SAAS,IAAI;AACnI,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AACA,MAAM,kBAAkB;AACxB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAkBA,MAAa,qBAAqB,MAA+B,EAC/D,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAC3C,MAAM,CAAC,UAAU,eAAe,mBAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAK5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAXiB,aAAa,MAAc,UAAkB;GAC9D,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GAAG,CAAC,cAAc,IAAI,CAQG;EACvB;EACA;EACA,MAAM;CACR;CACA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAC3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CACD,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CACf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CACtC,MAAM,UAAU,eAAe;EAC7B;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IAAI;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CAAC;CACxF,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAC/B,UAAA,oBAAC,SAAD;GAAO,eAAa;GAAU,mBAAiB;GAAY,kBAAgB;GAAW,iBAAe,MAAM;GAAU,KAAK;GAAY,WAAW,WAAW;IAAC,OAAO;IAAM,SAAS,UAAU,YAAY,aAAa,OAAO;IAAO;GAAoB,GAAGA,OAAK,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC;GAAW,OAAO;IAC7S,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAAoB,GAAI;GACjB;EACI,CAAA;CACc,CAAA;AAC7B,CAAC;AACD,mBAAmB,cAAc;AAEjC,MAAa,wBAAwB,MAAkC,EACrE,UACA,WACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,mBAAmB;CAClC,MAAM,EACJ,MACA,YACA,QACA,WACA,UACE,yBAAyB;CAC7B,MAAM,SAAS,aAAa,WAAW,OAAO,OAAM,UAAS,KAAK,IAAI,GAAG,KAAK,CAAC;CAG/E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CACpC,OAAO,oBAAC,OAAO,KAAR;EAAY,OAAO,CAAC;EAAQ,OAAO;GACxC,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EACM,UAAA,oBAAC,OAAO,KAAR;GAAY,SAAS,EACvB,OAAO,SAAS,kBAAkB,EACpC;GAAG,WAAW,WAAW,OAAO,SAASA,OAAK,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;GAAW,YAAY,OAAO;GAAG,OAAO;IAClH,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAAkB,GAAI;GACf;EACS,CAAA;CACF,CAAA;AAClB,CAAC;AACD,sBAAsB,cAAc;AAIpC,MAAa,uBAAuB,MAAiC,EACnE,WACA,OACA,WAAW,MACX,GAAG,WACC;CACJ,MAAM,EACJ,MACA,YACA,QACA,WACA,YACA,UACE,yBAAyB;CAC7B,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAC5D,MAAM,aAAa,OAGT,IAAI;CACd,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EACJ,KACA,QACE,WAAW,OAAO;CACtB,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,oBAAC,OAAD;EAAK,oBAAkB,KAAK;EAAiB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAAW,iBAAe;EAAK,iBAAe;EAAQ,kBAAgB,GAAG,OAAO;EAAU,eAAa;EAAY,kBAAgB;EAAW,iBAAe,MAAM,YAAY,KAAA;EAAW,MAAK;EAAY,UAAU;EAAG,WAAW,WAAW,CAAC,OAAO,QAAQ,KAAK,WAAW,OAAO,mBAAmB,OAAO,cAAc,GAAGD,OAAK,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;EAAW,OAAO;GACld,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAAoB,YAAW,UAAS,WAAW,YAAY,KAAK;EAAG,qBAAqB;GAC1F,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EAIA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,uBAAuB;GACxB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,gBAAe,UAAS;GACzB,WAAW,UAAU;GACrB,WAAW,UAAU;IACnB,GAAG,MAAM;IACT,GAAG,MAAM;GACX;GAEA,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EAAG,gBAAe,UAAS;GACzB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EAAG,mBAAmB;GACpB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EAAG,GAAI;CAAO,CAAA;AAChB,CAAC;AACD,qBAAqB,cAAc;AAInC,MAAa,uBAAuB,MAAiC,EACnE,WACA,yBACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,MACA,QACA,YACA,WACA,YACA,iBACE,yBAAyB;CAC7B,MAAM,aAAa,cAAc,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CACjE,IAAI,CAAC,YAAY,OAAO;CACxB,MAAM,OAAO,SAAS,WAAW,MAAM;CACvC,MAAM,cAAc,UAAU,aAAa,IAAI;CAC/C,OAAO,oBAAC,OAAD;EAAK,kBAAgB;EAAW,OAAO;GAC5C,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAC5D,GAAG;EACL;EAAG,WAAW,WAAW,CAAC,OAAO,YAAY,aAAa,UAAU,GAAGA,OAAK,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;EAAW,GAAI;EAClH,UAAA,oBAAC,UAAD;GAAQ,cAAY,SAAS,mBAAmB;GAAgB,MAAK;GAAS,SAAS;GAAc,GAAI,OAAO,MAAM,OAAO,cAAc,KAAK,YAAY,OAAO,wBAAwB,0BAA0B;GACnN,UAAA,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,SAAS;IAAG,MAAK;IAAO,QAAQ;IAAW,OAAO,EACjF,eAAe,KACjB;IAAoB,SAAS,OAAO,UAAU,GAAG;IAAa,OAAO;IAFjE,UAAA,CAGE,oBAAC,QAAD,EAAA,UACE,qBAAC,kBAAD;KAAgB,eAAc;KAAiB,IAAI;KAAY,IAAI;KAAS,IAAI;KAAS,IAAI;KAAG,IAAI;KAApG,UAAA;MACE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;OAAa,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MAChG,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAK,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MACxE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAK,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;MACxE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;OAAa,GAAI,OAAO,MAAM,OAAO,aAAa;MAAI,CAAA;KAClF;IACZ,CAAA,EAAA,CAAA,GACN,oBAAC,KAAD;KAAG,WAAW,KAAK,WAAW,aAAa,QAAQ,GAAG,QAAQ,KAAK,KAAA;KACjE,UAAA,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAM,OAAO,UAAU;MAAG,GAAG;MAAY,QAAQ,QAAQ,WAAW;MAAI,eAAc;MAAQ,gBAAe;MAAQ,aAAa,WAAW;KAAS,CAAA;IACtK,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AACX,CAAC;AACD,qBAAqB,cAAc;AAEnC,MAAa,0BAA0B,MAAoC,EACzE,WACA,GAAG,WACC,oBAAC,OAAD;CAAK,WAAW,WAAW,OAAO,WAAW,SAAS,CAAC,CAAC;CAAW,GAAI;AAAO,CAAA,CAAC;AACrF,wBAAwB,cAAc;AAEtC,MAAa,qBAAqB,MAA+B,EAC/D,WACA,OACA,GAAG,WACC,oBAAC,OAAD;CAAK,GAAI,WAAW,OAAO,MAAM,WAAW;EAChD,MAAM;EACN,GAAG;CACL,CAAC;CAAG,GAAI;AAAO,CAAA,CAAC;AAChB,mBAAmB,cAAc;AAEjC,MAAa,uBAAuB,MAAiC,EACnE,WACA,GAAG,WACC,oBAAC,OAAD;CAAK,WAAW,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC;CAAW,GAAI;AAAO,CAAA,CAAC;AAClF,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MAAiC,EACnE,WACA,OACA,YACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,iBACE,yBAAyB;CAC7B,OAAO,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC;EAAW,GAAI;EAApE,UAAA;GACD,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AACX,CAAC;AACD,qBAAqB,cAAc"}
|
package/es/Text/style.d.mts
CHANGED
|
@@ -14,13 +14,13 @@ export declare const textStyles: {
|
|
|
14
14
|
text: string;
|
|
15
15
|
disabled: string;
|
|
16
16
|
danger: string;
|
|
17
|
-
success: string;
|
|
18
|
-
warning: string;
|
|
19
|
-
info: string;
|
|
20
17
|
delete: string;
|
|
21
18
|
ellipsis: string;
|
|
22
19
|
italic: string;
|
|
23
20
|
underline: string;
|
|
21
|
+
success: string;
|
|
22
|
+
warning: string;
|
|
23
|
+
info: string;
|
|
24
24
|
ellipsisMulti: string;
|
|
25
25
|
secondary: string;
|
|
26
26
|
};
|
package/es/utils/bem.mjs
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
//#region src/utils/bem.ts
|
|
2
|
+
const BLOCK_PREFIX = "lobe-";
|
|
3
|
+
const cache = /* @__PURE__ */ new Map();
|
|
4
|
+
/**
|
|
5
|
+
* Builds the stable class names of one component block, following the
|
|
6
|
+
* `lobe-<block>` / `lobe-<block>__<element>` BEM convention.
|
|
7
|
+
*
|
|
8
|
+
* Element names must match the component's `classNames` / `styles` slot keys, so
|
|
9
|
+
* a consumer reads the same part name in CSS and in props. State and variants
|
|
10
|
+
* belong on `data-*` attributes, never on `--modifier` classes: one source of
|
|
11
|
+
* truth beats two.
|
|
12
|
+
*
|
|
13
|
+
* Generated StyleX hashes are not stable between releases, so these names are
|
|
14
|
+
* the only surface integrations and e2e selectors may target.
|
|
15
|
+
*
|
|
16
|
+
* The factory is cached per block, so calling it at module scope, inside render,
|
|
17
|
+
* or from a test all hand back the same instance.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* const slider = bem('slider');
|
|
22
|
+
*
|
|
23
|
+
* slider(); // 'lobe-slider'
|
|
24
|
+
* slider('thumb'); // 'lobe-slider__thumb'
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
const bem = (block) => {
|
|
28
|
+
const cached = cache.get(block);
|
|
29
|
+
if (cached) return cached;
|
|
30
|
+
const base = `${BLOCK_PREFIX}${block}`;
|
|
31
|
+
const factory = ((element) => element ? `${base}__${element}` : base);
|
|
32
|
+
factory.block = base;
|
|
33
|
+
cache.set(block, factory);
|
|
34
|
+
return factory;
|
|
35
|
+
};
|
|
36
|
+
//#endregion
|
|
37
|
+
export { bem };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=bem.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bem.mjs","names":[],"sources":["../../src/utils/bem.ts"],"sourcesContent":["const BLOCK_PREFIX = 'lobe-';\n\nexport interface BEM {\n /** The block class name, e.g. `lobe-slider`. */\n block: string;\n /** The block itself, or `block__element` when a name is passed. */\n (element?: string): string;\n}\n\nconst cache = new Map<string, BEM>();\n\n/**\n * Builds the stable class names of one component block, following the\n * `lobe-<block>` / `lobe-<block>__<element>` BEM convention.\n *\n * Element names must match the component's `classNames` / `styles` slot keys, so\n * a consumer reads the same part name in CSS and in props. State and variants\n * belong on `data-*` attributes, never on `--modifier` classes: one source of\n * truth beats two.\n *\n * Generated StyleX hashes are not stable between releases, so these names are\n * the only surface integrations and e2e selectors may target.\n *\n * The factory is cached per block, so calling it at module scope, inside render,\n * or from a test all hand back the same instance.\n *\n * @example\n * ```tsx\n * const slider = bem('slider');\n *\n * slider(); // 'lobe-slider'\n * slider('thumb'); // 'lobe-slider__thumb'\n * ```\n */\nexport const bem = (block: string): BEM => {\n const cached = cache.get(block);\n if (cached) return cached;\n\n const base = `${BLOCK_PREFIX}${block}`;\n const factory = ((element?: string) => (element ? `${base}__${element}` : base)) as BEM;\n factory.block = base;\n\n cache.set(block, factory);\n return factory;\n};\n"],"mappings":";AAAA,MAAM,eAAe;AASrB,MAAM,wBAAQ,IAAI,IAAiB;;;;;;;;;;;;;;;;;;;;;;;;AAyBnC,MAAa,OAAO,UAAuB;CACzC,MAAM,SAAS,MAAM,IAAI,KAAK;CAC9B,IAAI,QAAQ,OAAO;CAEnB,MAAM,OAAO,GAAG,eAAe;CAC/B,MAAM,YAAY,YAAsB,UAAU,GAAG,KAAK,IAAI,YAAY;CAC1E,QAAQ,QAAQ;CAEhB,MAAM,IAAI,OAAO,OAAO;CACxB,OAAO;AACT"}
|