@lobehub/ui 5.48.0 → 5.48.1

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.
Files changed (7) hide show
  1. package/es/base-ui/Accordion/style.mjs +14 -0
  2. package/es/base-ui/Accordion/style.mjs.map +1 -1
  3. package/es/base-ui/DraggablePanel/atoms.mjs +1 -1
  4. package/es/base-ui/DraggablePanel/atoms.mjs.map +1 -1
  5. package/es/base-ui/Input/style.d.mts +2 -2
  6. package/es/base-ui/Text/style.d.mts +1 -1
  7. package/package.json +1 -1
package/es/base-ui/Accordion/style.mjs CHANGED
@@ -39,6 +39,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
39
39
  opacity: 0;
40
40
  }
41
41
 
42
+ /* Base UI sets animation-name: none on initially-open panels */
43
+ [style*='animation-name: none'] &,
44
+ [style*='animation-name:none'] & {
45
+ translate: none;
46
+ opacity: 1;
47
+ transition: none;
48
+ }
49
+
42
50
  @media (prefers-reduced-motion: reduce) {
43
51
  transition-duration: 0s;
44
52
  }
@@ -156,6 +164,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
156
164
  height: 0;
157
165
  }
158
166
 
167
+ &[data-starting-style][style*='animation-name: none'],
168
+ &[data-starting-style][style*='animation-name:none'] {
169
+ height: auto;
170
+ transition: none;
171
+ }
172
+
159
173
  @media (prefers-reduced-motion: reduce) {
160
174
  transition-duration: 0s;
161
175
  }
package/es/base-ui/Accordion/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n display: flex;\n flex-shrink: 0;\n gap: 4px;\n align-items: center;\n\n opacity: 0;\n\n transition: opacity 150ms ${cssVar.motionEaseOut};\n `,\n actionAlwaysVisible: css`\n opacity: 1;\n `,\n actionBorderless: css`\n padding-inline-end: var(--accordion-hover-inset, 8px);\n `,\n actionOutlined: css`\n padding-inline-end: 16px;\n `,\n content: css`\n font-size: 14px;\n line-height: 1.6;\n transition:\n opacity 200ms ${cssVar.motionEaseOut},\n translate 200ms ${cssVar.motionEaseOut};\n\n [data-starting-style] & {\n translate: 0 6px;\n opacity: 0;\n }\n\n [data-ending-style] & {\n translate: 0 -6px;\n opacity: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n contentBorderless: css`\n padding-block: 0 12px;\n `,\n contentIndent: css`\n padding-inline-start: 24px;\n `,\n contentIndentOutlined: css`\n padding-inline-start: 40px;\n `,\n contentOutlined: css`\n padding-block: 4px 14px;\n padding-inline: 16px;\n `,\n header: css`\n position: relative;\n\n display: flex;\n align-items: center;\n\n margin: 0;\n\n font-size: inherit;\n font-weight: inherit;\n\n transition: background 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:hover .accordion-action,\n &:focus-within .accordion-action {\n opacity: 1;\n }\n `,\n headerBorderless: css`\n margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n border-radius: ${cssVar.borderRadius};\n `,\n headerFilled: css`\n border-radius: ${cssVar.borderRadius};\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n headerInline: css`\n margin-inline: 0;\n\n > .accordion-action {\n padding-block: 4px;\n }\n `,\n contentInline: css`\n padding-block: 0;\n `,\n indicator: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n color: ${cssVar.colorTextDescription};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorInline: css`\n justify-content: center;\n width: 18px;\n height: 18px;\n margin-inline-start: -6px;\n\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n indicatorEnd: css`\n margin-inline-start: auto;\n\n [data-panel-open] & {\n transform: rotate(180deg);\n }\n `,\n indicatorStart: css`\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n item: css`\n display: flex;\n flex-direction: column;\n `,\n itemOutlined: css`\n & + & {\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n overflow: hidden;\n height: auto;\n transition: height 200ms ${cssVar.motionEaseOut};\n\n interpolate-size: allow-keywords;\n\n &[data-starting-style],\n &[data-ending-style] {\n height: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n rootOutlined: css`\n overflow: hidden;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n `,\n trigger: css`\n cursor: pointer;\n user-select: none;\n\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n\n min-width: 0;\n border: 0;\n border-radius: inherit;\n\n font: inherit;\n font-size: 14px;\n color: ${cssVar.colorText};\n text-align: start;\n\n background: none;\n outline: none;\n\n ${focusRing};\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n `,\n triggerBorderless: css`\n padding-block: 8px;\n padding-inline: var(--accordion-hover-inset, 8px);\n `,\n triggerFilled: css`\n padding-block: 8px;\n padding-inline: 16px;\n `,\n triggerOutlined: css`\n padding-block: 12px;\n padding-inline: 16px;\n\n &[data-panel-open] {\n padding-block-end: 8px;\n }\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.rootOutlined,\n },\n },\n});\n\nexport const itemVariants = cva(styles.item, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.itemOutlined,\n },\n },\n});\n\nexport const headerVariants = cva(styles.header, {\n compoundVariants: [\n { class: styles.headerInline, inline: true, variant: 'borderless' },\n { class: styles.headerInline, inline: true, variant: 'filled' },\n ],\n defaultVariants: { inline: false, variant: 'borderless' },\n variants: {\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.headerBorderless,\n filled: styles.headerFilled,\n outlined: null,\n },\n },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: styles.triggerBorderless,\n filled: styles.triggerFilled,\n outlined: styles.triggerOutlined,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: { placement: 'start' },\n variants: {\n placement: {\n end: styles.indicatorEnd,\n inline: styles.indicatorInline,\n start: styles.indicatorStart,\n },\n },\n});\n\nexport const contentVariants = cva(styles.content, {\n compoundVariants: [\n {\n class: styles.contentInline,\n inline: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'filled',\n },\n {\n class: styles.contentIndentOutlined,\n indent: true,\n variant: 'outlined',\n },\n ],\n defaultVariants: { indent: true, inline: false, variant: 'borderless' },\n variants: {\n indent: {\n false: null,\n true: null,\n },\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.contentBorderless,\n filled: styles.contentBorderless,\n outlined: styles.contentOutlined,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n variants: {\n alwaysVisible: {\n false: null,\n true: styles.actionAlwaysVisible,\n },\n variant: {\n borderless: styles.actionBorderless,\n filled: styles.actionOutlined,\n outlined: styles.actionOutlined,\n },\n },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;sBAIQ,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;;;;;;;;;CAgB3C,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,cAAc,GAAG;qBACE,OAAO,aAAa;kBACvB,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,cAAc,GAAG;;;;;;;CAOjB,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,iBAAiB,GAAG;;;;;;;;;;CAUpB,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;;;CAalD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;aAeD,OAAO,UAAU;;;;;;MAMxB,UAAU;;;;eAID,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,eAAe,GAAG;;;;CAIlB,iBAAiB,GAAG;;;;;;;;AAQtB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,kBAAkB,CAChB;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAa,GAClE;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAS,CAChE;CACA,iBAAiB;EAAE,QAAQ;EAAO,SAAS;CAAa;CACxD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU;EACZ;CACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ,OAAO;EACf,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,QAAQ,OAAO;EACf,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,QAAQ;EAAO,SAAS;CAAa;CACtE,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n display: flex;\n flex-shrink: 0;\n gap: 4px;\n align-items: center;\n\n opacity: 0;\n\n transition: opacity 150ms ${cssVar.motionEaseOut};\n `,\n actionAlwaysVisible: css`\n opacity: 1;\n `,\n actionBorderless: css`\n padding-inline-end: var(--accordion-hover-inset, 8px);\n `,\n actionOutlined: css`\n padding-inline-end: 16px;\n `,\n content: css`\n font-size: 14px;\n line-height: 1.6;\n transition:\n opacity 200ms ${cssVar.motionEaseOut},\n translate 200ms ${cssVar.motionEaseOut};\n\n [data-starting-style] & {\n translate: 0 6px;\n opacity: 0;\n }\n\n [data-ending-style] & {\n translate: 0 -6px;\n opacity: 0;\n }\n\n /* Base UI sets animation-name: none on initially-open panels */\n [style*='animation-name: none'] &,\n [style*='animation-name:none'] & {\n translate: none;\n opacity: 1;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n contentBorderless: css`\n padding-block: 0 12px;\n `,\n contentIndent: css`\n padding-inline-start: 24px;\n `,\n contentIndentOutlined: css`\n padding-inline-start: 40px;\n `,\n contentOutlined: css`\n padding-block: 4px 14px;\n padding-inline: 16px;\n `,\n header: css`\n position: relative;\n\n display: flex;\n align-items: center;\n\n margin: 0;\n\n font-size: inherit;\n font-weight: inherit;\n\n transition: background 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:hover .accordion-action,\n &:focus-within .accordion-action {\n opacity: 1;\n }\n `,\n headerBorderless: css`\n margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n border-radius: ${cssVar.borderRadius};\n `,\n headerFilled: css`\n border-radius: ${cssVar.borderRadius};\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n headerInline: css`\n margin-inline: 0;\n\n > .accordion-action {\n padding-block: 4px;\n }\n `,\n contentInline: css`\n padding-block: 0;\n `,\n indicator: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n color: ${cssVar.colorTextDescription};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorInline: css`\n justify-content: center;\n width: 18px;\n height: 18px;\n margin-inline-start: -6px;\n\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n indicatorEnd: css`\n margin-inline-start: auto;\n\n [data-panel-open] & {\n transform: rotate(180deg);\n }\n `,\n indicatorStart: css`\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n item: css`\n display: flex;\n flex-direction: column;\n `,\n itemOutlined: css`\n & + & {\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n overflow: hidden;\n height: auto;\n transition: height 200ms ${cssVar.motionEaseOut};\n\n interpolate-size: allow-keywords;\n\n &[data-starting-style],\n &[data-ending-style] {\n height: 0;\n }\n\n &[data-starting-style][style*='animation-name: none'],\n &[data-starting-style][style*='animation-name:none'] {\n height: auto;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n rootOutlined: css`\n overflow: hidden;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n `,\n trigger: css`\n cursor: pointer;\n user-select: none;\n\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n\n min-width: 0;\n border: 0;\n border-radius: inherit;\n\n font: inherit;\n font-size: 14px;\n color: ${cssVar.colorText};\n text-align: start;\n\n background: none;\n outline: none;\n\n ${focusRing};\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n `,\n triggerBorderless: css`\n padding-block: 8px;\n padding-inline: var(--accordion-hover-inset, 8px);\n `,\n triggerFilled: css`\n padding-block: 8px;\n padding-inline: 16px;\n `,\n triggerOutlined: css`\n padding-block: 12px;\n padding-inline: 16px;\n\n &[data-panel-open] {\n padding-block-end: 8px;\n }\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.rootOutlined,\n },\n },\n});\n\nexport const itemVariants = cva(styles.item, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n filled: null,\n outlined: styles.itemOutlined,\n },\n },\n});\n\nexport const headerVariants = cva(styles.header, {\n compoundVariants: [\n { class: styles.headerInline, inline: true, variant: 'borderless' },\n { class: styles.headerInline, inline: true, variant: 'filled' },\n ],\n defaultVariants: { inline: false, variant: 'borderless' },\n variants: {\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.headerBorderless,\n filled: styles.headerFilled,\n outlined: null,\n },\n },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: styles.triggerBorderless,\n filled: styles.triggerFilled,\n outlined: styles.triggerOutlined,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: { placement: 'start' },\n variants: {\n placement: {\n end: styles.indicatorEnd,\n inline: styles.indicatorInline,\n start: styles.indicatorStart,\n },\n },\n});\n\nexport const contentVariants = cva(styles.content, {\n compoundVariants: [\n {\n class: styles.contentInline,\n inline: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'filled',\n },\n {\n class: styles.contentIndentOutlined,\n indent: true,\n variant: 'outlined',\n },\n ],\n defaultVariants: { indent: true, inline: false, variant: 'borderless' },\n variants: {\n indent: {\n false: null,\n true: null,\n },\n inline: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.contentBorderless,\n filled: styles.contentBorderless,\n outlined: styles.contentOutlined,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n variants: {\n alwaysVisible: {\n false: null,\n true: styles.actionAlwaysVisible,\n },\n variant: {\n borderless: styles.actionBorderless,\n filled: styles.actionOutlined,\n outlined: styles.actionOutlined,\n },\n },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;sBAIQ,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;CAwB3C,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,cAAc,GAAG;qBACE,OAAO,aAAa;kBACvB,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,cAAc,GAAG;;;;;;;CAOjB,eAAe,GAAG;;;CAGlB,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,iBAAiB,GAAG;;;;;;;;;;CAUpB,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;CAmBlD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;aAeD,OAAO,UAAU;;;;;;MAMxB,UAAU;;;;eAID,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,eAAe,GAAG;;;;CAIlB,iBAAiB,GAAG;;;;;;;;AAQtB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,kBAAkB,CAChB;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAa,GAClE;EAAE,OAAO,OAAO;EAAc,QAAQ;EAAM,SAAS;CAAS,CAChE;CACA,iBAAiB;EAAE,QAAQ;EAAO,SAAS;CAAa;CACxD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU;EACZ;CACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,QAAQ,OAAO;EACf,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,QAAQ,OAAO;EACf,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;EACA;GACE,OAAO,OAAO;GACd,QAAQ;GACR,SAAS;EACX;CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,QAAQ;EAAO,SAAS;CAAa;CACtE,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
package/es/base-ui/DraggablePanel/atoms.mjs CHANGED
@@ -205,7 +205,7 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
205
205
  if (!draggedRef.current) controller.reset();
206
206
  },
207
207
  onLostPointerCapture: () => {
208
- if (draggingRef.current) controller.drag.cancel();
208
+ if (draggingRef.current) controller.drag.end();
209
209
  pressedRef.current = null;
210
210
  draggingRef.current = false;
211
211
  },
package/es/base-ui/DraggablePanel/atoms.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\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 useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\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 { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n const k = BOW.half * BOW.curve;\n const b = BOW_CX + BOW.bulge * direction;\n const a0 = BOW_CY - BOW.half;\n const a1 = BOW_CY + BOW.half;\n // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n const pt = (along: number, across: number) =>\n verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n return [\n `M${pt(BOW_CX, a0)}`,\n `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n ].join(' ');\n};\n\nconst BOW_PATHS = {\n horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\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 className={cx(rootVariants({ mode, placement }), className)}\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\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={cx(styles.content, 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 className={cx(handleVariants({ edge: axis.edge }), className)}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\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 onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.cancel();\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, toggleExpand } = useDraggablePanelContext();\n\n if (!expandable) return null;\n\n const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n const chevX = axis.vertical ? BOW_CY : BOW_CX;\n const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n return (\n <div\n className={cx(toggleVariants({ placement }), className)}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n >\n <svg\n fill=\"none\"\n height={axis.vertical ? BOW_W : BOW_H}\n viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n width={axis.vertical ? BOW_H : BOW_W}\n >\n {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n ))}\n <g\n style={{\n rotate: `${turn}deg`,\n transformOrigin: `${chevX}px ${chevY}px`,\n transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n }}\n >\n <path\n d={chevronPath(chevX, chevY)}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.6}\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 }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div className={cx(styles.body, className)} style={{ 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={cx(styles.footer, 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={cx(styles.header, 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":";;;;;;;;;;;;;;;;;AAgCA,MAAM,gBAAgB;AAEtB,MAAM,SAAS;AACf,MAAM,SAAS,IAAI,OAAO;AAC1B,MAAM,QAAQ;AACd,MAAM,QAAQ,SAAS;AAEvB,MAAM,WAAW,WAAmB,iBAA0B;CAC5D,MAAM,IAAI,IAAI,OAAO,IAAI;CACzB,MAAM,IAAI,SAAS,IAAI,QAAQ;CAC/B,MAAM,KAAK,SAAS,IAAI;CACxB,MAAM,KAAK,SAAS,IAAI;CAExB,MAAM,MAAM,OAAe,WACzB,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG;CACrD,OAAO;EACL,IAAI,GAAG,QAAQ,EAAE;EACjB,IAAI,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,MAAM;EAC3D,IAAI,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,QAAQ,EAAE;CAC9D,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,MAAM,YAAY;CAChB,gBAAgB,CAAC,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;CACtD,cAAc,CAAC,QAAQ,IAAI,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AACpD;;AAGA,MAAM,eAAe;CAAE,QAAQ;CAAK,MAAM;CAAG,OAAO;CAAK,KAAK;AAAG;AAEjE,MAAM,eAAe,IAAY,OAC/B,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,KAAK;AAEnE,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,kBAAkB;AAExB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAoBA,MAAa,qBAAqB,MAC/B,EACC,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;CAE3C,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAU5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAfiB,aAChB,MAAc,UAAkB;GAC/B,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GACA,CAAC,cAAc,IAAI,CAUI;EACvB;EACA;EACA,MAAM;CACR;CAEA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAE3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CAED,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,UAAU,eACP;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CACrF;CAEA,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,aAAa;IAAE;IAAM;GAAU,CAAC,GAAG,SAAS;GAC1D,eAAa;GACb,mBAAiB;GACjB,iBAAe,MAAM;GACrB,KAAK;GACL,OACE;IACE,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAEF,GAAI;GAEH;EACI,CAAA;CACc,CAAA;AAE3B,CACF;AAEA,mBAAmB,cAAc;AAIjC,MAAa,wBAAwB,MAClC,EAAE,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3C,MAAM,SAAS,mBAAmB;CAClC,MAAM,EAAE,MAAM,YAAY,QAAQ,WAAW,UAAU,yBAAyB;CAChF,MAAM,SAAS,aAAa,WAAW,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;CAGjF,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CAEpC,OACE,oBAAC,OAAO,KAAR;EACE,OAAO,CAAC;EACR,OACE;GACE,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EAGF,UAAA,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,OAAO,SAAS,kBAAkB,EAAE;GAC/C,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,YAAY,OAAO;GACnB,OACE;IACE,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAEF,GAAK;GAEJ;EACS,CAAA;CACF,CAAA;AAEhB,CACF;AAEA,sBAAsB,cAAc;AAMpC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,WAAW,MAAM,GAAG,WAAW;CAClD,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,UAAU,yBAAyB;CACjF,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;CAE5D,MAAM,aAAa,OAAwC,IAAI;CAC/D,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO;CAEvC,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,oBAAkB,KAAK;EACvB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAC5C,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,OAAO;EAC1B,WAAW,GAAG,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,SAAS;EAC5D,eAAa;EACb,iBAAe,MAAM,YAAY,KAAA;EACjC,MAAK;EACL,UAAU;EACV,OACE;GACE,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAEF,YAAY,UAAU,WAAW,YAAY,KAAK;EAClD,qBAAqB;GACnB,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EACA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,OAAO;GAChD,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,uBAAuB;GACrB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,gBAAgB,UAAU;GACxB,WAAW,UAAU;GACrB,WAAW,UAAU;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;GAAQ;GAE1D,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EACA,gBAAgB,UAAU;GACxB,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;EACA,mBAAmB;GACjB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,yBAAyB,OAAO,GAAG,WAAW;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,WAAW,iBAAiB,yBAAyB;CAEvF,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,OAAO,aAAa,cAAc,SAAS,IAAI;CACrD,MAAM,QAAQ,KAAK,WAAW,SAAS;CACvC,MAAM,QAAQ,KAAK,WAAW,SAAS;CAEvC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe,EAAE,UAAU,CAAC,GAAG,SAAS;EACtD,OAAO;GAAE,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAAG,GAAG;EAAM;EACjF,GAAI;EAEJ,UAAA,oBAAC,UAAD;GACE,cAAY,SAAS,mBAAmB;GACxC,MAAK;GACL,SAAS;GAET,UAAA,qBAAC,OAAD;IACE,MAAK;IACL,QAAQ,KAAK,WAAW,QAAQ;IAChC,SAAS,OAAO,KAAK,WAAW,QAAQ,MAAM,GAAG,KAAK,WAAW,QAAQ;IACzE,OAAO,KAAK,WAAW,QAAQ;IAJjC,UAAA,CAMG,UAAU,KAAK,WAAW,mBAAmB,eAAe,CAAC,KAAK,MACjE,oBAAC,QAAD;KAAS;KAAG,YAAS;KAAW,eAAc;KAAQ,aAAa,IAAI;IAAS,GAAnD,CAAmD,CACjF,GACD,oBAAC,KAAD;KACE,OAAO;MACL,QAAQ,GAAG,KAAK;MAChB,iBAAiB,GAAG,MAAM,KAAK,MAAM;MACrC,YAAY;KACd;KAEA,UAAA,oBAAC,QAAD;MACE,GAAG,YAAY,OAAO,KAAK;MAC3B,QAAO;MACP,eAAc;MACd,gBAAe;MACf,aAAa;KACd,CAAA;IACA,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc;AAInC,MAAa,0BAA0B,MACpC,EAAE,WAAW,GAAG,WAAW,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,WAAW,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1F;AAEA,wBAAwB,cAAc;AAItC,MAAa,qBAAqB,MAA+B,EAAE,WAAW,OAAO,GAAG,WACtF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAG,OAAO;EAAE,MAAM;EAAG,GAAG;CAAM;CAAG,GAAI;AAAO,CAAA,CACtF;AAED,mBAAmB,cAAc;AAIjC,MAAa,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WACnF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1D;AAED,qBAAqB,cAAc;AAQnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,YAAY,OAAO,GAAG,WAAW;CACpD,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAAlD,UAAA;GACE,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AAET,CACF;AAEA,qBAAqB,cAAc"}
1
+ {"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\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 useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\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 { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n const k = BOW.half * BOW.curve;\n const b = BOW_CX + BOW.bulge * direction;\n const a0 = BOW_CY - BOW.half;\n const a1 = BOW_CY + BOW.half;\n // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n const pt = (along: number, across: number) =>\n verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n return [\n `M${pt(BOW_CX, a0)}`,\n `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n ].join(' ');\n};\n\nconst BOW_PATHS = {\n horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\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 className={cx(rootVariants({ mode, placement }), className)}\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\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={cx(styles.content, 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 className={cx(handleVariants({ edge: axis.edge }), className)}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\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, toggleExpand } = useDraggablePanelContext();\n\n if (!expandable) return null;\n\n const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n const chevX = axis.vertical ? BOW_CY : BOW_CX;\n const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n return (\n <div\n className={cx(toggleVariants({ placement }), className)}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n >\n <svg\n fill=\"none\"\n height={axis.vertical ? BOW_W : BOW_H}\n viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n width={axis.vertical ? BOW_H : BOW_W}\n >\n {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n ))}\n <g\n style={{\n rotate: `${turn}deg`,\n transformOrigin: `${chevX}px ${chevY}px`,\n transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n }}\n >\n <path\n d={chevronPath(chevX, chevY)}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.6}\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 }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div className={cx(styles.body, className)} style={{ 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={cx(styles.footer, 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={cx(styles.header, 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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"}
package/es/base-ui/Input/style.d.mts CHANGED
@@ -23,8 +23,8 @@ declare const styles: {
23
23
  };
24
24
  declare const rootVariants: (props?: ({
25
25
  shadow?: boolean | null | undefined;
26
- size?: "small" | "middle" | "large" | null | undefined;
27
- variant?: "filled" | "outlined" | "borderless" | null | undefined;
26
+ size?: "large" | "middle" | "small" | null | undefined;
27
+ variant?: "filled" | "borderless" | "outlined" | null | undefined;
28
28
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
29
29
  //#endregion
30
30
  export { rootVariants, styles };
package/es/base-ui/Text/style.d.mts CHANGED
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
42
42
  mark?: boolean | null | undefined;
43
43
  shiny?: boolean | null | undefined;
44
44
  strong?: boolean | null | undefined;
45
- type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
45
+ type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
46
46
  underline?: boolean | null | undefined;
47
47
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
48
48
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "5.48.0",
3
+ "version": "5.48.1",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",