@lobehub/ui 5.9.0 → 5.9.2

package/es/Markdown/markdown.style.mjs

@@ -18,7 +18,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
 
     font-size: var(--lobe-markdown-font-size);
     line-height: var(--lobe-markdown-line-height);
-    word-break: break-word;
+    overflow-wrap: break-word;
   `;
 	const a = css`
     a {
@@ -54,7 +54,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
         font-family: ${cssVar.fontFamilyCode};
         font-size: 0.875em;
         line-height: 1;
-        word-break: break-word;
+        overflow-wrap: break-word;
         white-space: break-spaces;
 
         background: ${cssVar.colorFillSecondary};
@@ -295,11 +295,10 @@ const styles = createStaticStyles(({ cssVar, css }) => {
       word-break: auto-phrase;
       overflow-wrap: break-word;
 
-      background: ${cssVar.colorFillQuaternary};
       box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
 
       code {
-        word-break: break-word;
+        overflow-wrap: break-word;
       }
 
       thead {

package/es/Markdown/markdown.style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n  const __root = css`\n    --lobe-markdown-font-size: 16px;\n    --lobe-markdown-header-multiple: 1;\n    --lobe-markdown-margin-multiple: 2;\n    --lobe-markdown-line-height: 1.8;\n    --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n    --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n    position: relative;\n\n    width: 100%;\n    max-width: 100%;\n    padding-inline: 1px;\n\n    font-size: var(--lobe-markdown-font-size);\n    line-height: var(--lobe-markdown-line-height);\n    word-break: break-word;\n  `;\n  const a = css`\n    a {\n      color: ${cssVar.colorInfoText};\n\n      &:hover {\n        color: ${cssVar.colorInfoHover};\n      }\n    }\n  `;\n\n  const blockquote = css`\n    blockquote {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline: 0;\n      padding-block: 0;\n      padding-inline: 1em;\n      border-inline-start: solid 4px ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextSecondary};\n    }\n  `;\n\n  const code = css`\n    code {\n      &:not(:has(span)) {\n        display: inline;\n\n        margin-inline: 0.25em;\n        padding-block: 0.2em;\n        padding-inline: 0.4em;\n        border: 1px solid var(--lobe-markdown-border-color);\n        border-radius: 0.25em;\n\n        font-family: ${cssVar.fontFamilyCode};\n        font-size: 0.875em;\n        line-height: 1;\n        word-break: break-word;\n        white-space: break-spaces;\n\n        background: ${cssVar.colorFillSecondary};\n      }\n    }\n  `;\n\n  const del = css`\n    del {\n      color: ${cssVar.colorTextDescription};\n      text-decoration: line-through;\n    }\n  `;\n\n  const details = css`\n    details {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      background: ${cssVar.colorFillTertiary};\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n      summary {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        list-style: none;\n\n        &::before {\n          content: '';\n\n          position: absolute;\n          inset-inline-end: 1.25em;\n          transform: rotateZ(-45deg);\n\n          display: block;\n\n          width: 0.4em;\n          height: 0.4em;\n          border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n          border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n          font-family: ${cssVar.fontFamily};\n\n          transition: transform 200ms ${cssVar.motionEaseOut};\n        }\n      }\n\n      &[open] {\n        summary {\n          padding-block-end: 0.75em;\n          border-block-end: 1px dashed ${cssVar.colorBorder};\n\n          &::before {\n            transform: rotateZ(45deg);\n          }\n        }\n      }\n    }\n  `;\n  const header = css`\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-block: max(\n        calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n        var(--lobe-markdown-font-size)\n      );\n      font-weight: bold;\n      line-height: 1.25;\n    }\n\n    h1 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h2 {\n      font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n    }\n\n    h3 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h4 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h5,\n    h6 {\n      font-size: calc(var(--lobe-markdown-font-size) * 1);\n    }\n  `;\n  const hr = css`\n    hr {\n      width: 100%;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n      border-color: ${cssVar.colorBorder};\n      border-style: dashed;\n      border-width: 1px;\n      border-block-start: none;\n      border-inline-start: none;\n      border-inline-end: none;\n    }\n  `;\n  const img = css`\n    img {\n      max-width: 100%;\n    }\n\n    > img,\n    > p > img {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    }\n  `;\n\n  const list = css`\n    li {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n      p:first-child {\n        display: inline;\n      }\n    }\n\n    ul,\n    ol {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline-start: 1em;\n      padding-inline-start: 0;\n      list-style-position: outside;\n\n      > ul,\n      > ol {\n        margin-block: 0;\n      }\n\n      > li {\n        margin-inline-start: 1em;\n      }\n    }\n\n    ol {\n      list-style: auto;\n    }\n\n    ul {\n      list-style-type: none;\n\n      > li {\n        &::before {\n          content: '-';\n\n          position: absolute;\n\n          display: inline-block;\n\n          margin-inline: -1em 0.5em;\n\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .task-list-item {\n      &::before {\n        display: none !important;\n      }\n\n      input[type='checkbox'] {\n        margin-block: 0 0.25em;\n        margin-inline: -1.6em 0.2em;\n        vertical-align: middle;\n      }\n\n      input[type='checkbox']:dir(rtl) {\n        margin: 0 -1.6em 0.25em 0.2em;\n      }\n    }\n  `;\n  const p = css`\n    p {\n      margin-block: 4px;\n      line-height: var(--lobe-markdown-line-height);\n      letter-spacing: 0.02em;\n\n      &:not(:first-child) {\n        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n\n      &:not(:last-child) {\n        margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n    }\n  `;\n  const pre = css`\n    pre {\n      font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n    }\n  `;\n  const strong = css`\n    strong {\n      font-weight: 600;\n    }\n  `;\n  const svg = css`\n    svg {\n      line-height: 1;\n    }\n  `;\n  const table = css`\n    table {\n      unicode-bidi: isolate;\n      overflow: auto hidden;\n      display: block;\n      border-spacing: 0;\n      border-collapse: collapse;\n\n      box-sizing: border-box;\n      width: max-content;\n      max-width: 100%;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      text-align: start;\n      text-indent: initial;\n      text-wrap: pretty;\n      word-break: auto-phrase;\n      overflow-wrap: break-word;\n\n      background: ${cssVar.colorFillQuaternary};\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      code {\n        word-break: break-word;\n      }\n\n      thead {\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      tr {\n        box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n      }\n\n      th,\n      td {\n        min-width: 120px;\n        padding-block: 0.75em;\n        padding-inline: 1em;\n        text-align: start;\n      }\n    }\n  `;\n  const video = css`\n    > video,\n    > p > video {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    }\n\n    video {\n      max-width: 100%;\n    }\n  `;\n\n  const footnote = css`\n    .footnotes {\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      font-size: smaller;\n      color: #8b949e;\n\n      #footnote-label {\n        display: none;\n      }\n\n      > ol {\n        margin: 0 !important;\n      }\n    }\n  `;\n\n  const sup = css`\n    sup {\n      position: relative;\n      inset-block-start: -0.25em;\n\n      font-size: 0.75em;\n      line-height: var(--lobe-markdown-line-height);\n      vertical-align: baseline;\n    }\n  `;\n\n  const sub = css`\n    sub {\n      position: relative;\n      inset-block-end: -0.25em;\n\n      font-size: 0.75em;\n      line-height: var(--lobe-markdown-line-height);\n      vertical-align: baseline;\n    }\n  `;\n\n  return {\n    root: css`\n      :not(:has(${IGNORE_CLASSNAME})),\n      .markdown {\n        ${[\n          __root,\n          a,\n          blockquote,\n          code,\n          del,\n          details,\n          header,\n          hr,\n          img,\n          list,\n          p,\n          pre,\n          strong,\n          svg,\n          table,\n          video,\n          footnote,\n          sub,\n          sup,\n        ]}\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;oBAoBC,OAAO,oBAAoB;8BACjB,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;AAsBf,QAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAhCI,GAAG;;;;;;;;;;EAkCP;EACD,CAAC;;OAGP;EACD"}
+{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n  const __root = css`\n    --lobe-markdown-font-size: 16px;\n    --lobe-markdown-header-multiple: 1;\n    --lobe-markdown-margin-multiple: 2;\n    --lobe-markdown-line-height: 1.8;\n    --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n    --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n    position: relative;\n\n    width: 100%;\n    max-width: 100%;\n    padding-inline: 1px;\n\n    font-size: var(--lobe-markdown-font-size);\n    line-height: var(--lobe-markdown-line-height);\n    overflow-wrap: break-word;\n  `;\n  const a = css`\n    a {\n      color: ${cssVar.colorInfoText};\n\n      &:hover {\n        color: ${cssVar.colorInfoHover};\n      }\n    }\n  `;\n\n  const blockquote = css`\n    blockquote {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline: 0;\n      padding-block: 0;\n      padding-inline: 1em;\n      border-inline-start: solid 4px ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextSecondary};\n    }\n  `;\n\n  const code = css`\n    code {\n      &:not(:has(span)) {\n        display: inline;\n\n        margin-inline: 0.25em;\n        padding-block: 0.2em;\n        padding-inline: 0.4em;\n        border: 1px solid var(--lobe-markdown-border-color);\n        border-radius: 0.25em;\n\n        font-family: ${cssVar.fontFamilyCode};\n        font-size: 0.875em;\n        line-height: 1;\n        overflow-wrap: break-word;\n        white-space: break-spaces;\n\n        background: ${cssVar.colorFillSecondary};\n      }\n    }\n  `;\n\n  const del = css`\n    del {\n      color: ${cssVar.colorTextDescription};\n      text-decoration: line-through;\n    }\n  `;\n\n  const details = css`\n    details {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      background: ${cssVar.colorFillTertiary};\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n      summary {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        list-style: none;\n\n        &::before {\n          content: '';\n\n          position: absolute;\n          inset-inline-end: 1.25em;\n          transform: rotateZ(-45deg);\n\n          display: block;\n\n          width: 0.4em;\n          height: 0.4em;\n          border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n          border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n          font-family: ${cssVar.fontFamily};\n\n          transition: transform 200ms ${cssVar.motionEaseOut};\n        }\n      }\n\n      &[open] {\n        summary {\n          padding-block-end: 0.75em;\n          border-block-end: 1px dashed ${cssVar.colorBorder};\n\n          &::before {\n            transform: rotateZ(45deg);\n          }\n        }\n      }\n    }\n  `;\n  const header = css`\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-block: max(\n        calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n        var(--lobe-markdown-font-size)\n      );\n      font-weight: bold;\n      line-height: 1.25;\n    }\n\n    h1 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h2 {\n      font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n    }\n\n    h3 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h4 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h5,\n    h6 {\n      font-size: calc(var(--lobe-markdown-font-size) * 1);\n    }\n  `;\n  const hr = css`\n    hr {\n      width: 100%;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n      border-color: ${cssVar.colorBorder};\n      border-style: dashed;\n      border-width: 1px;\n      border-block-start: none;\n      border-inline-start: none;\n      border-inline-end: none;\n    }\n  `;\n  const img = css`\n    img {\n      max-width: 100%;\n    }\n\n    > img,\n    > p > img {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    }\n  `;\n\n  const list = css`\n    li {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n      p:first-child {\n        display: inline;\n      }\n    }\n\n    ul,\n    ol {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline-start: 1em;\n      padding-inline-start: 0;\n      list-style-position: outside;\n\n      > ul,\n      > ol {\n        margin-block: 0;\n      }\n\n      > li {\n        margin-inline-start: 1em;\n      }\n    }\n\n    ol {\n      list-style: auto;\n    }\n\n    ul {\n      list-style-type: none;\n\n      > li {\n        &::before {\n          content: '-';\n\n          position: absolute;\n\n          display: inline-block;\n\n          margin-inline: -1em 0.5em;\n\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .task-list-item {\n      &::before {\n        display: none !important;\n      }\n\n      input[type='checkbox'] {\n        margin-block: 0 0.25em;\n        margin-inline: -1.6em 0.2em;\n        vertical-align: middle;\n      }\n\n      input[type='checkbox']:dir(rtl) {\n        margin: 0 -1.6em 0.25em 0.2em;\n      }\n    }\n  `;\n  const p = css`\n    p {\n      margin-block: 4px;\n      line-height: var(--lobe-markdown-line-height);\n      letter-spacing: 0.02em;\n\n      &:not(:first-child) {\n        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n\n      &:not(:last-child) {\n        margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n    }\n  `;\n  const pre = css`\n    pre {\n      font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n    }\n  `;\n  const strong = css`\n    strong {\n      font-weight: 600;\n    }\n  `;\n  const svg = css`\n    svg {\n      line-height: 1;\n    }\n  `;\n  const table = css`\n    table {\n      unicode-bidi: isolate;\n      overflow: auto hidden;\n      display: block;\n      border-spacing: 0;\n      border-collapse: collapse;\n\n      box-sizing: border-box;\n      width: max-content;\n      max-width: 100%;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n      text-align: start;\n      text-indent: initial;\n      text-wrap: pretty;\n      word-break: auto-phrase;\n      overflow-wrap: break-word;\n\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      code {\n        overflow-wrap: break-word;\n      }\n\n      thead {\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      tr {\n        box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n      }\n\n      th,\n      td {\n        min-width: 120px;\n        padding-block: 0.75em;\n        padding-inline: 1em;\n        text-align: start;\n      }\n    }\n  `;\n  const video = css`\n    > video,\n    > p > video {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    }\n\n    video {\n      max-width: 100%;\n    }\n  `;\n\n  const footnote = css`\n    .footnotes {\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      font-size: smaller;\n      color: #8b949e;\n\n      #footnote-label {\n        display: none;\n      }\n\n      > ol {\n        margin: 0 !important;\n      }\n    }\n  `;\n\n  const sup = css`\n    sup {\n      position: relative;\n      inset-block-start: -0.25em;\n\n      font-size: 0.75em;\n      line-height: var(--lobe-markdown-line-height);\n      vertical-align: baseline;\n    }\n  `;\n\n  const sub = css`\n    sub {\n      position: relative;\n      inset-block-end: -0.25em;\n\n      font-size: 0.75em;\n      line-height: var(--lobe-markdown-line-height);\n      vertical-align: baseline;\n    }\n  `;\n\n  return {\n    root: css`\n      :not(:has(${IGNORE_CLASSNAME})),\n      .markdown {\n        ${[\n          __root,\n          a,\n          blockquote,\n          code,\n          del,\n          details,\n          header,\n          hr,\n          img,\n          list,\n          p,\n          pre,\n          strong,\n          svg,\n          table,\n          video,\n          footnote,\n          sub,\n          sup,\n        ]}\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;8BAoBW,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;AAsBf,QAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAhCI,GAAG;;;;;;;;;;EAkCP;EACD,CAAC;;OAGP;EACD"}

package/es/SortableList/SortableList.mjs

@@ -6,15 +6,19 @@ import DragHandle from "./components/DragHandle.mjs";
 import SortableOverlay from "./components/SortableOverlay.mjs";
 import { Fragment, memo, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/SortableList/SortableList.tsx
-const SortableListParent = memo(({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {
+const measuringConfig = { droppable: { strategy: MeasuringStrategy.Always } };
+const SortableListParent = memo(({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {
 	const [active, setActive] = useState(null);
 	const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const overlayRenderer = renderOverlay ?? renderItem;
 	return /* @__PURE__ */ jsxs(DndContext, {
+		collisionDetection: closestCenter,
+		measuring: measuringConfig,
 		modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
 		sensors,
 		onDragCancel: () => {
@@ -38,7 +42,7 @@ const SortableListParent = memo(({ ref, items, onChange, renderItem, gap = 8, ..
 				...rest,
 				children: items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item) }, item.id))
 			})
-		}), /* @__PURE__ */ jsx(SortableOverlay, { children: activeItem ? renderItem(activeItem) : null })]
+		}), /* @__PURE__ */ jsx(SortableOverlay, { children: activeItem ? overlayRenderer(activeItem) : null })]
 	});
 });
 SortableListParent.displayName = "SortableList";

package/es/SortableList/SortableList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.mjs","names":["Flexbox"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type Active,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport { type SortableListItem, type SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n    const [active, setActive] = useState<Active | null>(null);\n    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n    const sensors = useSensors(\n      useSensor(PointerSensor),\n      useSensor(KeyboardSensor, {\n        coordinateGetter: sortableKeyboardCoordinates,\n      }),\n    );\n\n    return (\n      <DndContext\n        modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n        sensors={sensors}\n        onDragCancel={() => {\n          setActive(null);\n        }}\n        onDragEnd={({ active, over }) => {\n          if (over && active.id !== over?.id) {\n            const activeIndex = items.findIndex(({ id }) => id === active.id);\n            const overIndex = items.findIndex(({ id }) => id === over.id);\n\n            onChange(arrayMove(items, activeIndex, overIndex));\n          }\n          setActive(null);\n        }}\n        onDragStart={({ active }) => {\n          setActive(active);\n        }}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n            {items.map((item) => (\n              <Fragment key={item.id}>{renderItem(item)}</Fragment>\n            ))}\n          </Flexbox>\n        </SortableContext>\n        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>\n      </DndContext>\n    );\n  },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n  <T extends SortableListItem = SortableListItem>(props: SortableListProps<T>): ReactNode;\n  DragHandle: typeof DragHandle;\n  Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,MAAM,GAAG,GAAG,WAAW;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;AAED,QACE,qBAAC,YAAD;EACE,WAAW,CAAC,wBAAwB,sBAAsB;EACjD;EACT,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,QAAQ,WAAW;AAC/B,OAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,aAAa;AAC3B,aAAU,OAAO;;YAhBrB,CAmBE,oBAAC,iBAAD;GAAwB;GAAO,UAAU;aACvC,oBAACA,mBAAD;IAAS,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,UAAD,EAAA,UAAyB,WAAW,KAAK,EAAY,EAAtC,KAAK,GAAiC,CACrD;IACM,CAAA;GACM,CAAA,EAClB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,WAAW,WAAW,GAAG,MAAuB,CAAA,CACpE;;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAO;AACpB,aAAa,aAAa"}
+{"version":3,"file":"SortableList.mjs","names":["Flexbox"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type Active,\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MeasuringStrategy,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport { type SortableListItem, type SortableListProps } from './type';\n\nconst measuringConfig = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst SortableListParent = memo<SortableListProps>(\n  ({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {\n    const [active, setActive] = useState<Active | null>(null);\n    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n    const sensors = useSensors(\n      useSensor(PointerSensor),\n      useSensor(KeyboardSensor, {\n        coordinateGetter: sortableKeyboardCoordinates,\n      }),\n    );\n\n    const overlayRenderer = renderOverlay ?? renderItem;\n\n    return (\n      <DndContext\n        collisionDetection={closestCenter}\n        measuring={measuringConfig}\n        modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n        sensors={sensors}\n        onDragCancel={() => {\n          setActive(null);\n        }}\n        onDragEnd={({ active, over }) => {\n          if (over && active.id !== over?.id) {\n            const activeIndex = items.findIndex(({ id }) => id === active.id);\n            const overIndex = items.findIndex(({ id }) => id === over.id);\n\n            onChange(arrayMove(items, activeIndex, overIndex));\n          }\n          setActive(null);\n        }}\n        onDragStart={({ active }) => {\n          setActive(active);\n        }}\n      >\n        <SortableContext items={items} strategy={verticalListSortingStrategy}>\n          <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n            {items.map((item) => (\n              <Fragment key={item.id}>{renderItem(item)}</Fragment>\n            ))}\n          </Flexbox>\n        </SortableContext>\n        <SortableOverlay>{activeItem ? overlayRenderer(activeItem) : null}</SortableOverlay>\n      </DndContext>\n    );\n  },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n  <T extends SortableListItem = SortableListItem>(props: SortableListProps<T>): ReactNode;\n  DragHandle: typeof DragHandle;\n  Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,kBAAkB,EACtB,WAAW,EACT,UAAU,kBAAkB,QAC7B,EACF;AAED,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,eAAe,MAAM,GAAG,GAAG,WAAW;CACzE,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,kBAAkB,iBAAiB;AAEzC,QACE,qBAAC,YAAD;EACE,oBAAoB;EACpB,WAAW;EACX,WAAW,CAAC,wBAAwB,sBAAsB;EACjD;EACT,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,QAAQ,WAAW;AAC/B,OAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,aAAa;AAC3B,aAAU,OAAO;;YAlBrB,CAqBE,oBAAC,iBAAD;GAAwB;GAAO,UAAU;aACvC,oBAACA,mBAAD;IAAS,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,UAAD,EAAA,UAAyB,WAAW,KAAK,EAAY,EAAtC,KAAK,GAAiC,CACrD;IACM,CAAA;GACM,CAAA,EAClB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,gBAAgB,WAAW,GAAG,MAAuB,CAAA,CACzE;;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAO;AACpB,aAAa,aAAa"}

package/es/SortableList/type.d.mts

@@ -11,6 +11,11 @@ interface SortableListProps<T extends SortableListItem = SortableListItem> exten
   onChange: (items: T[]) => void;
   ref?: Ref<HTMLUListElement>;
   renderItem: (item: T) => ReactNode;
+  /**
+   * Custom render function for the drag overlay
+   * If not provided, renderItem will be used
+   */
+  renderOverlay?: (item: T) => ReactNode;
 }
 //#endregion
 export { SortableListItem, SortableListProps };

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

@@ -0,0 +1,27 @@
+import { FloatingSheetProps } from "./type.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/base-ui/FloatingSheet/FloatingSheet.d.ts
+declare function FloatingSheet({
+  open: openProp,
+  onOpenChange,
+  defaultOpen,
+  snapPoints: snapPointsProp,
+  activeSnapPoint: activeSnapPointProp,
+  onSnapPointChange,
+  minHeight: minHeightProp,
+  maxHeight: maxHeightProp,
+  restingHeight: restingHeightProp,
+  mode,
+  variant,
+  width,
+  title,
+  headerActions,
+  dismissible,
+  closeThreshold,
+  children,
+  className
+}: FloatingSheetProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FloatingSheet };
+//# sourceMappingURL=FloatingSheet.d.mts.map

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

@@ -0,0 +1,197 @@
+import { styles } from "./style.mjs";
+import { FloatingSheetHeader } from "./FloatingSheetHeader.mjs";
+import { clamp, dampenValue, resolveSize } from "./helpers.mjs";
+import { useSheetDrag } from "./useSheetDrag.mjs";
+import { useSnapPoints } from "./useSnapPoints.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/FloatingSheet/FloatingSheet.tsx
+const ANIMATION_MS = 300;
+function FloatingSheet({ open: openProp, onOpenChange, defaultOpen = false, snapPoints: snapPointsProp, activeSnapPoint: activeSnapPointProp, onSnapPointChange, minHeight: minHeightProp = 200, maxHeight: maxHeightProp = .8, restingHeight: restingHeightProp, mode = "overlay", variant = "elevated", width = "100%", title, headerActions, dismissible = true, closeThreshold = .25, children, className }) {
+	const s = styles;
+	const isControlled = openProp !== void 0;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = isControlled ? openProp : internalOpen;
+	const setOpen = useCallback((value) => {
+		if (!isControlled) setInternalOpen(value);
+		onOpenChange?.(value);
+	}, [isControlled, onOpenChange]);
+	const containerRef = useRef(null);
+	const sheetRef = useRef(null);
+	const [containerHeight, setContainerHeight] = useState(0);
+	useEffect(() => {
+		const parent = sheetRef.current?.parentElement;
+		if (!parent) return;
+		containerRef.current = parent;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setContainerHeight(entry.contentRect.height);
+		});
+		observer.observe(parent);
+		setContainerHeight(parent.getBoundingClientRect().height);
+		return () => observer.disconnect();
+	}, []);
+	const minHeightPx = useMemo(() => resolveSize(minHeightProp, containerHeight), [minHeightProp, containerHeight]);
+	const maxHeightPx = useMemo(() => resolveSize(maxHeightProp, containerHeight), [maxHeightProp, containerHeight]);
+	const restingHeightPx = useMemo(() => restingHeightProp !== void 0 ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx) : minHeightPx, [
+		restingHeightProp,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx
+	]);
+	const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;
+	const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({
+		closeThreshold,
+		containerHeight,
+		containerRef,
+		maxHeightPx,
+		minHeightPx,
+		snapPoints: snapPointsProp ?? []
+	});
+	const restingHeight = useMemo(() => {
+		if (!containerHeight) return 0;
+		if (hasSnapPoints && activeSnapPointProp !== void 0) return clamp(resolveSize(activeSnapPointProp, containerHeight), minHeightPx, maxHeightPx);
+		if (hasSnapPoints && snapPointHeights.length > 0) return snapPointHeights[0];
+		return restingHeightPx;
+	}, [
+		containerHeight,
+		hasSnapPoints,
+		activeSnapPointProp,
+		snapPointHeights,
+		minHeightPx,
+		maxHeightPx,
+		restingHeightPx
+	]);
+	const [height, setHeight] = useState(isOpen ? restingHeight : 0);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const [isClosing, setIsClosing] = useState(false);
+	const heightBeforeDrag = useRef(0);
+	const prevOpenRef = useRef(isOpen);
+	useEffect(() => {
+		const wasOpen = prevOpenRef.current;
+		prevOpenRef.current = isOpen;
+		if (isOpen && !wasOpen) {
+			setIsClosing(false);
+			setIsAnimating(true);
+			setHeight(restingHeight);
+			const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+			return () => clearTimeout(timer);
+		}
+		if (!isOpen && wasOpen) {
+			setIsClosing(true);
+			setIsAnimating(true);
+			setHeight(0);
+			const timer = setTimeout(() => {
+				setIsAnimating(false);
+				setIsClosing(false);
+			}, ANIMATION_MS);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		if (isOpen && !isDragging) setHeight(restingHeight);
+	}, [restingHeight]);
+	const onDragChange = useCallback((draggedDistance) => {
+		const newHeight = heightBeforeDrag.current + draggedDistance;
+		if (hasSnapPoints) {
+			const highest = snapPointHeights.at(-1) ?? maxHeightPx;
+			const lowest = snapPointHeights[0] ?? minHeightPx;
+			if (newHeight > highest) setHeight(highest + dampenValue(newHeight - highest));
+			else if (newHeight < lowest) {
+				const undershoot = lowest - newHeight;
+				setHeight(Math.max(0, lowest - dampenValue(undershoot)));
+			} else setHeight(newHeight);
+		} else setHeight(clamp(newHeight, 0, maxHeightPx));
+	}, [
+		hasSnapPoints,
+		snapPointHeights,
+		maxHeightPx,
+		minHeightPx
+	]);
+	const onDragEnd = useCallback((draggedDistance, velocity) => {
+		setIsAnimating(true);
+		const currentHeight = heightBeforeDrag.current + draggedDistance;
+		if (hasSnapPoints) {
+			const result = getSnapRelease({
+				activeIndex: findActiveIndex(heightBeforeDrag.current),
+				currentHeight,
+				dismissible,
+				draggedDistance,
+				velocity
+			});
+			if (result.type === "dismiss") {
+				setIsClosing(true);
+				setHeight(0);
+				const timer = setTimeout(() => {
+					setOpen(false);
+					setIsAnimating(false);
+					setIsClosing(false);
+				}, ANIMATION_MS);
+				return () => clearTimeout(timer);
+			}
+			setHeight(result.height);
+			const originalSnapValue = snapPointsProp?.find((sp) => resolveSize(sp, containerHeight) === result.height || clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height);
+			if (originalSnapValue !== void 0) onSnapPointChange?.(originalSnapValue);
+		} else {
+			if (dismissible && currentHeight < minHeightPx * closeThreshold) {
+				setIsClosing(true);
+				setHeight(0);
+				const timer = setTimeout(() => {
+					setOpen(false);
+					setIsAnimating(false);
+					setIsClosing(false);
+				}, ANIMATION_MS);
+				return () => clearTimeout(timer);
+			}
+			setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));
+		}
+		setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+	}, [
+		hasSnapPoints,
+		findActiveIndex,
+		getSnapRelease,
+		dismissible,
+		snapPointsProp,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx,
+		closeThreshold,
+		setOpen,
+		onSnapPointChange
+	]);
+	const { isDragging, handleProps } = useSheetDrag({
+		enabled: isOpen ?? false,
+		onDragChange,
+		onDragEnd
+	});
+	useEffect(() => {
+		if (isDragging) heightBeforeDrag.current = height;
+	}, [isDragging]);
+	const isVisible = isOpen || isClosing || height > 0;
+	const shouldAnimate = !isDragging && isAnimating;
+	const inlineOverflowUp = mode === "inline" && isVisible ? Math.max(0, height - restingHeightPx) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-floating-sheet": "",
+		"data-state": isOpen ? "open" : "closed",
+		ref: sheetRef,
+		className: cx(s.root, variant === "embedded" ? s.embedded : s.elevated, mode === "overlay" ? s.overlay : s.inline, mode === "overlay" ? s.overlayRadius : s.inlineRadius, shouldAnimate && s.transition, !isVisible && s.hidden, className),
+		style: {
+			height: isVisible ? height : 0,
+			marginTop: inlineOverflowUp ? -inlineOverflowUp : void 0,
+			width
+		},
+		children: [/* @__PURE__ */ jsx(FloatingSheetHeader, {
+			handleProps,
+			headerActions,
+			isDragging,
+			title
+		}), /* @__PURE__ */ jsx("div", {
+			className: s.content,
+			children
+		})]
+	});
+}
+//#endregion
+export { FloatingSheet };
+
+//# sourceMappingURL=FloatingSheet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingSheet.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/FloatingSheet.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FloatingSheetHeader } from './FloatingSheetHeader';\nimport { clamp, dampenValue, resolveSize } from './helpers';\nimport { styles } from './style';\nimport type { FloatingSheetProps } from './type';\nimport { useSheetDrag } from './useSheetDrag';\nimport { useSnapPoints } from './useSnapPoints';\n\nconst ANIMATION_MS = 300;\n\nexport function FloatingSheet({\n  open: openProp,\n  onOpenChange,\n  defaultOpen = false,\n  snapPoints: snapPointsProp,\n  activeSnapPoint: activeSnapPointProp,\n  onSnapPointChange,\n  minHeight: minHeightProp = 200,\n  maxHeight: maxHeightProp = 0.8,\n  restingHeight: restingHeightProp,\n  mode = 'overlay',\n  variant = 'elevated',\n  width = '100%',\n  title,\n  headerActions,\n  dismissible = true,\n  closeThreshold = 0.25,\n  children,\n  className,\n}: FloatingSheetProps) {\n  const s = styles;\n\n  // Controlled / uncontrolled open state\n  const isControlled = openProp !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = isControlled ? openProp : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Container measurement via ResizeObserver\n  const containerRef = useRef<HTMLElement | null>(null);\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  useEffect(() => {\n    const parent = sheetRef.current?.parentElement;\n    if (!parent) return;\n    containerRef.current = parent;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setContainerHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(parent);\n    setContainerHeight(parent.getBoundingClientRect().height);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Resolve min/max to px\n  const minHeightPx = useMemo(\n    () => resolveSize(minHeightProp, containerHeight),\n    [minHeightProp, containerHeight],\n  );\n  const maxHeightPx = useMemo(\n    () => resolveSize(maxHeightProp, containerHeight),\n    [maxHeightProp, containerHeight],\n  );\n  const restingHeightPx = useMemo(\n    () =>\n      restingHeightProp !== undefined\n        ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx)\n        : minHeightPx,\n    [restingHeightProp, containerHeight, minHeightPx, maxHeightPx],\n  );\n\n  // Snap points\n  const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;\n  const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({\n    closeThreshold,\n    containerHeight,\n    containerRef,\n    maxHeightPx,\n    minHeightPx,\n    snapPoints: snapPointsProp ?? [],\n  });\n\n  // Compute the \"resting\" height for the current open + snap state\n  const restingHeight = useMemo(() => {\n    if (!containerHeight) return 0;\n    if (hasSnapPoints && activeSnapPointProp !== undefined) {\n      const resolved = resolveSize(activeSnapPointProp, containerHeight);\n      return clamp(resolved, minHeightPx, maxHeightPx);\n    }\n    if (hasSnapPoints && snapPointHeights.length > 0) {\n      return snapPointHeights[0];\n    }\n    return restingHeightPx;\n  }, [\n    containerHeight,\n    hasSnapPoints,\n    activeSnapPointProp,\n    snapPointHeights,\n    minHeightPx,\n    maxHeightPx,\n    restingHeightPx,\n  ]);\n\n  const [height, setHeight] = useState(isOpen ? restingHeight : 0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  // Keeps sheet visible during close animation (height → 0)\n  const [isClosing, setIsClosing] = useState(false);\n  const heightBeforeDrag = useRef(0);\n  const prevOpenRef = useRef(isOpen);\n\n  // Handle open/close transitions\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current;\n    prevOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Opening: animate from 0 → resting height\n      setIsClosing(false);\n      setIsAnimating(true);\n      setHeight(restingHeight);\n      const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n\n    if (!isOpen && wasOpen) {\n      // Closing: animate from current height → 0, then hide\n      setIsClosing(true);\n      setIsAnimating(true);\n      setHeight(0);\n      const timer = setTimeout(() => {\n        setIsAnimating(false);\n        setIsClosing(false);\n      }, ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync height when resting height changes (container resize, snap point change)\n  useEffect(() => {\n    if (isOpen && !isDragging) {\n      setHeight(restingHeight);\n    }\n  }, [restingHeight]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Drag handlers\n  const onDragChange = useCallback(\n    (draggedDistance: number) => {\n      const newHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const highest = snapPointHeights.at(-1) ?? maxHeightPx;\n        const lowest = snapPointHeights[0] ?? minHeightPx;\n\n        if (newHeight > highest) {\n          const overshoot = newHeight - highest;\n          setHeight(highest + dampenValue(overshoot));\n        } else if (newHeight < lowest) {\n          const undershoot = lowest - newHeight;\n          setHeight(Math.max(0, lowest - dampenValue(undershoot)));\n        } else {\n          setHeight(newHeight);\n        }\n      } else {\n        setHeight(clamp(newHeight, 0, maxHeightPx));\n      }\n    },\n    [hasSnapPoints, snapPointHeights, maxHeightPx, minHeightPx],\n  );\n\n  const onDragEnd = useCallback(\n    (draggedDistance: number, velocity: number) => {\n      setIsAnimating(true);\n      const currentHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const activeIndex = findActiveIndex(heightBeforeDrag.current);\n        const result = getSnapRelease({\n          activeIndex,\n          currentHeight,\n          dismissible,\n          draggedDistance,\n          velocity,\n        });\n\n        if (result.type === 'dismiss') {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n\n        setHeight(result.height);\n        const originalSnapValue = snapPointsProp?.find(\n          (sp) =>\n            resolveSize(sp, containerHeight) === result.height ||\n            clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height,\n        );\n        if (originalSnapValue !== undefined) {\n          onSnapPointChange?.(originalSnapValue);\n        }\n      } else {\n        if (dismissible && currentHeight < minHeightPx * closeThreshold) {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n        setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));\n      }\n\n      setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    },\n    [\n      hasSnapPoints,\n      findActiveIndex,\n      getSnapRelease,\n      dismissible,\n      snapPointsProp,\n      containerHeight,\n      minHeightPx,\n      maxHeightPx,\n      closeThreshold,\n      setOpen,\n      onSnapPointChange,\n    ],\n  );\n\n  const { isDragging, handleProps } = useSheetDrag({\n    enabled: isOpen ?? false,\n    onDragChange,\n    onDragEnd,\n  });\n\n  // Record height at drag start\n  useEffect(() => {\n    if (isDragging) {\n      heightBeforeDrag.current = height;\n    }\n  }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const isVisible = isOpen || isClosing || height > 0;\n  const shouldAnimate = !isDragging && isAnimating;\n  const inlineOverflowUp =\n    mode === 'inline' && isVisible ? Math.max(0, height - restingHeightPx) : 0;\n\n  return (\n    <div\n      data-floating-sheet=\"\"\n      data-state={isOpen ? 'open' : 'closed'}\n      ref={sheetRef}\n      className={cx(\n        s.root,\n        variant === 'embedded' ? s.embedded : s.elevated,\n        mode === 'overlay' ? s.overlay : s.inline,\n        mode === 'overlay' ? s.overlayRadius : s.inlineRadius,\n        shouldAnimate && s.transition,\n        !isVisible && s.hidden,\n        className,\n      )}\n      style={{\n        height: isVisible ? height : 0,\n        marginTop: inlineOverflowUp ? -inlineOverflowUp : undefined,\n        width,\n      }}\n    >\n      <FloatingSheetHeader\n        handleProps={handleProps}\n        headerActions={headerActions}\n        isDragging={isDragging}\n        title={title}\n      />\n      <div className={s.content}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/es/base-ui/FloatingSheet/FloatingSheetHeader.mjs

@@ -0,0 +1,26 @@
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/FloatingSheet/FloatingSheetHeader.tsx
+function FloatingSheetHeader({ title, headerActions, isDragging, handleProps }) {
+	const s = styles;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(s.header, isDragging && s.headerDragging),
+		...handleProps,
+		children: [/* @__PURE__ */ jsx("div", { className: s.handle }), /* @__PURE__ */ jsxs("div", {
+			className: s.headerContent,
+			children: [title && /* @__PURE__ */ jsx("div", {
+				className: s.headerTitle,
+				children: title
+			}), headerActions && /* @__PURE__ */ jsx("div", {
+				className: s.headerActions,
+				"data-no-drag": "",
+				children: headerActions
+			})]
+		})]
+	});
+}
+//#endregion
+export { FloatingSheetHeader };
+
+//# sourceMappingURL=FloatingSheetHeader.mjs.map

package/es/base-ui/FloatingSheet/FloatingSheetHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingSheetHeader.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/FloatingSheetHeader.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport { styles } from './style';\n\ninterface FloatingSheetHeaderProps {\n  handleProps: {\n    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;\n  };\n  headerActions?: ReactNode;\n  isDragging: boolean;\n  title?: ReactNode;\n}\n\nexport function FloatingSheetHeader({\n  title,\n  headerActions,\n  isDragging,\n  handleProps,\n}: FloatingSheetHeaderProps) {\n  const s = styles;\n\n  return (\n    <div className={cx(s.header, isDragging && s.headerDragging)} {...handleProps}>\n      <div className={s.handle} />\n      <div className={s.headerContent}>\n        {title && <div className={s.headerTitle}>{title}</div>}\n        {headerActions && (\n          <div className={s.headerActions} data-no-drag=\"\">\n            {headerActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAcA,SAAgB,oBAAoB,EAClC,OACA,eACA,YACA,eAC2B;CAC3B,MAAM,IAAI;AAEV,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,EAAE,QAAQ,cAAc,EAAE,eAAe;EAAE,GAAI;YAAlE,CACE,oBAAC,OAAD,EAAK,WAAW,EAAE,QAAU,CAAA,EAC5B,qBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,SAAS,oBAAC,OAAD;IAAK,WAAW,EAAE;cAAc;IAAY,CAAA,EACrD,iBACC,oBAAC,OAAD;IAAK,WAAW,EAAE;IAAe,gBAAa;cAC3C;IACG,CAAA,CAEJ;KACF"}

package/es/base-ui/FloatingSheet/helpers.mjs

@@ -0,0 +1,30 @@
+//#region src/base-ui/FloatingSheet/helpers.ts
+/**
+* Clamp a value between min and max.
+*/
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Rubber-band damping for drag resistance beyond snap bounds.
+* Returns 0 when v <= 0, near 1:1 for small v, then grows logarithmically.
+*/
+function dampenValue(v) {
+	if (v <= 0) return 0;
+	return 8 * Math.log1p(v / 8);
+}
+/**
+* Resolve a size value to pixels.
+* 0 < v <= 1 → fraction of containerHeight.
+* v > 1 → pixel value.
+* v === 0 → 0.
+*/
+function resolveSize(value, containerHeight) {
+	if (value === 0) return 0;
+	if (value > 0 && value <= 1) return value * containerHeight;
+	return value;
+}
+//#endregion
+export { clamp, dampenValue, resolveSize };
+
+//# sourceMappingURL=helpers.mjs.map

package/es/base-ui/FloatingSheet/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/helpers.ts"],"sourcesContent":["/**\n * Clamp a value between min and max.\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Rubber-band damping for drag resistance beyond snap bounds.\n * Returns 0 when v <= 0, near 1:1 for small v, then grows logarithmically.\n */\nexport function dampenValue(v: number): number {\n  if (v <= 0) return 0;\n  return 8 * Math.log1p(v / 8);\n}\n\n/**\n * Resolve a size value to pixels.\n * 0 < v <= 1 → fraction of containerHeight.\n * v > 1 → pixel value.\n * v === 0 → 0.\n */\nexport function resolveSize(value: number, containerHeight: number): number {\n  if (value === 0) return 0;\n  if (value > 0 && value <= 1) return value * containerHeight;\n  return value;\n}\n"],"mappings":";;;;AAGA,SAAgB,MAAM,OAAe,KAAa,KAAqB;AACrE,QAAO,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;;;;;;AAO5C,SAAgB,YAAY,GAAmB;AAC7C,KAAI,KAAK,EAAG,QAAO;AACnB,QAAO,IAAI,KAAK,MAAM,IAAI,EAAE;;;;;;;;AAS9B,SAAgB,YAAY,OAAe,iBAAiC;AAC1E,KAAI,UAAU,EAAG,QAAO;AACxB,KAAI,QAAQ,KAAK,SAAS,EAAG,QAAO,QAAQ;AAC5C,QAAO"}

package/es/base-ui/FloatingSheet/index.d.mts

@@ -0,0 +1,2 @@
+import { FloatingSheetProps } from "./type.mjs";
+import { FloatingSheet } from "./FloatingSheet.mjs";

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

@@ -0,0 +1,94 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/FloatingSheet/style.ts
+const transitionDuration = "0.3s";
+const transitionEasing = "cubic-bezier(0.32, 0.72, 0, 1)";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	root: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: ${cssVar.colorBgContainer};
+  `,
+	overlayRadius: css`
+    border-radius: 12px 12px 0 0;
+  `,
+	inlineRadius: css`
+    border-radius: 12px;
+  `,
+	elevated: css`
+    box-shadow: ${cssVar.boxShadowSecondary};
+  `,
+	embedded: css`
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    box-shadow: none;
+  `,
+	overlay: css`
+    position: absolute;
+    z-index: 10;
+    inset-block-end: 0;
+    inset-inline: 0;
+  `,
+	inline: css`
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+  `,
+	transition: css`
+    transition:
+      height ${transitionDuration} ${transitionEasing},
+      margin-block-start ${transitionDuration} ${transitionEasing};
+  `,
+	hidden: css`
+    visibility: hidden;
+  `,
+	header: css`
+    cursor: grab;
+    user-select: none;
+
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: center;
+
+    padding-block: 8px 4px;
+    padding-inline: 16px;
+  `,
+	headerDragging: css`
+    cursor: grabbing;
+  `,
+	handle: css`
+    width: 32px;
+    height: 4px;
+    margin-block-end: 8px;
+    border-radius: 2px;
+
+    background: ${cssVar.colorBorderSecondary};
+  `,
+	headerContent: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    min-height: 24px;
+  `,
+	headerTitle: css`
+    flex: 1;
+    min-width: 0;
+  `,
+	headerActions: css`
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+  `,
+	content: css`
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst transitionDuration = '0.3s';\nconst transitionEasing = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    background: ${cssVar.colorBgContainer};\n  `,\n  overlayRadius: css`\n    border-radius: 12px 12px 0 0;\n  `,\n  inlineRadius: css`\n    border-radius: 12px;\n  `,\n  elevated: css`\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  embedded: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    box-shadow: none;\n  `,\n  overlay: css`\n    position: absolute;\n    z-index: 10;\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n  inline: css`\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n  `,\n  transition: css`\n    transition:\n      height ${transitionDuration} ${transitionEasing},\n      margin-block-start ${transitionDuration} ${transitionEasing};\n  `,\n  hidden: css`\n    visibility: hidden;\n  `,\n  header: css`\n    cursor: grab;\n    user-select: none;\n\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    align-items: center;\n\n    padding-block: 8px 4px;\n    padding-inline: 16px;\n  `,\n  headerDragging: css`\n    cursor: grabbing;\n  `,\n  handle: css`\n    width: 32px;\n    height: 4px;\n    margin-block-end: 8px;\n    border-radius: 2px;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n  headerContent: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    min-height: 24px;\n  `,\n  headerTitle: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  headerActions: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n  `,\n  content: css`\n    overflow: auto;\n    flex: 1;\n    min-height: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;kBAIO,OAAO,iBAAiB;;CAExC,eAAe,GAAG;;;CAGlB,cAAc,GAAG;;;CAGjB,UAAU,GAAG;kBACG,OAAO,mBAAmB;;CAE1C,UAAU,GAAG;wBACS,OAAO,qBAAqB;;;CAGlD,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;;;;CAKX,YAAY,GAAG;;eAEF,mBAAmB,GAAG,iBAAiB;2BAC3B,mBAAmB,GAAG,iBAAiB;;CAEhE,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;;;;;;;;;;CAYX,gBAAgB,GAAG;;;CAGnB,QAAQ,GAAG;;;;;;kBAMK,OAAO,qBAAqB;;CAE5C,eAAe,GAAG;;;;;;;;CAQlB,aAAa,GAAG;;;;CAIhB,eAAe,GAAG;;;;;;CAMlB,SAAS,GAAG;;;;;CAKb,EAAE"}

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

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+//#region src/base-ui/FloatingSheet/type.d.ts
+interface FloatingSheetProps {
+  activeSnapPoint?: number;
+  children?: ReactNode;
+  className?: string;
+  closeThreshold?: number;
+  defaultOpen?: boolean;
+  dismissible?: boolean;
+  headerActions?: ReactNode;
+  maxHeight?: number;
+  minHeight?: number;
+  mode?: 'overlay' | 'inline';
+  onOpenChange?: (open: boolean) => void;
+  onSnapPointChange?: (snapPoint: number) => void;
+  open?: boolean;
+  restingHeight?: number;
+  snapPoints?: number[];
+  title?: ReactNode;
+  variant?: 'elevated' | 'embedded';
+  width?: number | string;
+}
+//#endregion
+export { FloatingSheetProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/FloatingSheet/useSheetDrag.mjs

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/base-ui/FloatingSheet/useSheetDrag.ts
+function useSheetDrag({ onDragChange, onDragEnd, enabled }) {
+	const [isDragging, setIsDragging] = useState(false);
+	const startY = useRef(0);
+	const startTime = useRef(0);
+	const draggingRef = useRef(false);
+	const onDragChangeRef = useRef(onDragChange);
+	const onDragEndRef = useRef(onDragEnd);
+	onDragChangeRef.current = onDragChange;
+	onDragEndRef.current = onDragEnd;
+	useEffect(() => {
+		if (!draggingRef.current) return;
+		const onMouseMove = (e) => {
+			e.preventDefault();
+			const draggedDistance = startY.current - e.clientY;
+			onDragChangeRef.current(draggedDistance);
+		};
+		const onMouseUp = (e) => {
+			draggingRef.current = false;
+			setIsDragging(false);
+			const draggedDistance = startY.current - e.clientY;
+			const elapsed = Date.now() - startTime.current;
+			const velocity = elapsed > 0 ? Math.abs(draggedDistance) / elapsed : 0;
+			onDragEndRef.current(draggedDistance, velocity);
+		};
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [isDragging]);
+	return {
+		isDragging,
+		handleProps: { onMouseDown: useCallback((event) => {
+			if (!enabled) return;
+			if (event.button !== 0) return;
+			if (event.target.closest?.("[data-no-drag]")) return;
+			event.preventDefault();
+			startY.current = event.clientY;
+			startTime.current = Date.now();
+			draggingRef.current = true;
+			setIsDragging(true);
+		}, [enabled]) }
+	};
+}
+//#endregion
+export { useSheetDrag };
+
+//# sourceMappingURL=useSheetDrag.mjs.map

package/es/base-ui/FloatingSheet/useSheetDrag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetDrag.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/useSheetDrag.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseSheetDragOptions {\n  enabled: boolean;\n  onDragChange: (draggedDistance: number) => void;\n  onDragEnd: (draggedDistance: number, velocity: number) => void;\n}\n\nexport function useSheetDrag({ onDragChange, onDragEnd, enabled }: UseSheetDragOptions) {\n  const [isDragging, setIsDragging] = useState(false);\n  const startY = useRef(0);\n  const startTime = useRef(0);\n  const draggingRef = useRef(false);\n\n  // Store latest callbacks in refs to avoid stale closures in document listeners\n  const onDragChangeRef = useRef(onDragChange);\n  const onDragEndRef = useRef(onDragEnd);\n  onDragChangeRef.current = onDragChange;\n  onDragEndRef.current = onDragEnd;\n\n  useEffect(() => {\n    if (!draggingRef.current) return;\n\n    const onMouseMove = (e: MouseEvent) => {\n      e.preventDefault();\n      const draggedDistance = startY.current - e.clientY;\n      onDragChangeRef.current(draggedDistance);\n    };\n\n    const onMouseUp = (e: MouseEvent) => {\n      draggingRef.current = false;\n      setIsDragging(false);\n\n      const draggedDistance = startY.current - e.clientY;\n      const elapsed = Date.now() - startTime.current;\n      const velocity = elapsed > 0 ? Math.abs(draggedDistance) / elapsed : 0;\n      onDragEndRef.current(draggedDistance, velocity);\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [isDragging]);\n\n  const onMouseDown = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!enabled) return;\n      if (event.button !== 0) return; // left click only\n\n      const target = event.target as HTMLElement;\n      if (target.closest?.('[data-no-drag]')) return;\n\n      event.preventDefault(); // prevent text selection during drag\n\n      startY.current = event.clientY;\n      startTime.current = Date.now();\n      draggingRef.current = true;\n      setIsDragging(true);\n    },\n    [enabled],\n  );\n\n  return {\n    isDragging,\n    handleProps: {\n      onMouseDown,\n    },\n  };\n}\n"],"mappings":";;AAQA,SAAgB,aAAa,EAAE,cAAc,WAAW,WAAgC;CACtF,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,SAAS,OAAO,EAAE;CACxB,MAAM,YAAY,OAAO,EAAE;CAC3B,MAAM,cAAc,OAAO,MAAM;CAGjC,MAAM,kBAAkB,OAAO,aAAa;CAC5C,MAAM,eAAe,OAAO,UAAU;AACtC,iBAAgB,UAAU;AAC1B,cAAa,UAAU;AAEvB,iBAAgB;AACd,MAAI,CAAC,YAAY,QAAS;EAE1B,MAAM,eAAe,MAAkB;AACrC,KAAE,gBAAgB;GAClB,MAAM,kBAAkB,OAAO,UAAU,EAAE;AAC3C,mBAAgB,QAAQ,gBAAgB;;EAG1C,MAAM,aAAa,MAAkB;AACnC,eAAY,UAAU;AACtB,iBAAc,MAAM;GAEpB,MAAM,kBAAkB,OAAO,UAAU,EAAE;GAC3C,MAAM,UAAU,KAAK,KAAK,GAAG,UAAU;GACvC,MAAM,WAAW,UAAU,IAAI,KAAK,IAAI,gBAAgB,GAAG,UAAU;AACrE,gBAAa,QAAQ,iBAAiB,SAAS;;AAGjD,WAAS,iBAAiB,aAAa,YAAY;AACnD,WAAS,iBAAiB,WAAW,UAAU;AAC/C,eAAa;AACX,YAAS,oBAAoB,aAAa,YAAY;AACtD,YAAS,oBAAoB,WAAW,UAAU;;IAEnD,CAAC,WAAW,CAAC;AAoBhB,QAAO;EACL;EACA,aAAa,EACX,aArBgB,aACjB,UAA4C;AAC3C,OAAI,CAAC,QAAS;AACd,OAAI,MAAM,WAAW,EAAG;AAGxB,OADe,MAAM,OACV,UAAU,iBAAiB,CAAE;AAExC,SAAM,gBAAgB;AAEtB,UAAO,UAAU,MAAM;AACvB,aAAU,UAAU,KAAK,KAAK;AAC9B,eAAY,UAAU;AACtB,iBAAc,KAAK;KAErB,CAAC,QAAQ,CACV,EAME;EACF"}

package/es/base-ui/FloatingSheet/useSnapPoints.mjs

@@ -0,0 +1,69 @@
+import { clamp, resolveSize } from "./helpers.mjs";
+import { useMemo } from "react";
+//#region src/base-ui/FloatingSheet/useSnapPoints.ts
+const VELOCITY_THRESHOLD = .4;
+const DRAG_DISTANCE_RATIO = .4;
+function useSnapPoints({ closeThreshold, snapPoints, containerHeight, minHeightPx, maxHeightPx }) {
+	const snapPointHeights = useMemo(() => {
+		if (!containerHeight) return [];
+		const resolved = snapPoints.map((sp) => clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx)).sort((a, b) => a - b);
+		return [...new Set(resolved)];
+	}, [
+		snapPoints,
+		containerHeight,
+		minHeightPx,
+		maxHeightPx
+	]);
+	function findClosestSnapPoint(height) {
+		if (snapPointHeights.length === 0) return clamp(height, minHeightPx, maxHeightPx);
+		return snapPointHeights.reduce((prev, curr) => Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev);
+	}
+	function findActiveIndex(height) {
+		const closest = findClosestSnapPoint(height);
+		return snapPointHeights.indexOf(closest);
+	}
+	function getSnapRelease({ currentHeight, activeIndex, draggedDistance, velocity, dismissible }) {
+		const isFirst = activeIndex === 0;
+		const isLast = activeIndex === snapPointHeights.length - 1;
+		const isDraggingUp = draggedDistance > 0;
+		const highestSnapPoint = snapPointHeights.at(-1) ?? maxHeightPx;
+		const lowestSnapPoint = snapPointHeights[0] ?? minHeightPx;
+		const nextHigherSnapPoint = snapPointHeights[Math.min(activeIndex + 1, snapPointHeights.length - 1)] ?? highestSnapPoint;
+		const nextLowerSnapPoint = snapPointHeights[Math.max(activeIndex - 1, 0)] ?? lowestSnapPoint;
+		const sheetHeight = snapPointHeights[activeIndex] ?? currentHeight;
+		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < sheetHeight * DRAG_DISTANCE_RATIO) if (isDraggingUp) {
+			if (isLast) return {
+				type: "snap",
+				height: highestSnapPoint
+			};
+			return {
+				type: "snap",
+				height: nextHigherSnapPoint
+			};
+		} else {
+			if (isFirst) return dismissible ? { type: "dismiss" } : {
+				type: "snap",
+				height: lowestSnapPoint
+			};
+			return {
+				type: "snap",
+				height: nextLowerSnapPoint
+			};
+		}
+		if (dismissible && isFirst && !isDraggingUp && currentHeight < lowestSnapPoint * closeThreshold) return { type: "dismiss" };
+		return {
+			type: "snap",
+			height: findClosestSnapPoint(currentHeight)
+		};
+	}
+	return {
+		snapPointHeights,
+		findClosestSnapPoint,
+		findActiveIndex,
+		getSnapRelease
+	};
+}
+//#endregion
+export { useSnapPoints };
+
+//# sourceMappingURL=useSnapPoints.mjs.map

package/es/base-ui/FloatingSheet/useSnapPoints.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapPoints.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/useSnapPoints.ts"],"sourcesContent":["import { type RefObject, useMemo } from 'react';\n\nimport { clamp, resolveSize } from './helpers';\n\nconst VELOCITY_THRESHOLD = 0.4;\nconst DRAG_DISTANCE_RATIO = 0.4;\n\ninterface UseSnapPointsOptions {\n  closeThreshold: number;\n  containerHeight: number;\n  containerRef: RefObject<HTMLElement | null>;\n  maxHeightPx: number;\n  minHeightPx: number;\n  snapPoints: number[];\n}\n\ninterface SnapReleaseParams {\n  activeIndex: number;\n  currentHeight: number;\n  dismissible: boolean;\n  draggedDistance: number; // positive = upward (growing), negative = downward (shrinking)\n  velocity: number;\n}\n\ntype SnapReleaseResult = { type: 'snap'; height: number } | { type: 'dismiss' };\n\nexport function useSnapPoints({\n  closeThreshold,\n  snapPoints,\n  containerHeight,\n  minHeightPx,\n  maxHeightPx,\n}: UseSnapPointsOptions) {\n  const snapPointHeights = useMemo(() => {\n    if (!containerHeight) return [];\n\n    const resolved = snapPoints\n      .map((sp) => clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx))\n      .sort((a, b) => a - b);\n\n    // Remove duplicates\n    return [...new Set(resolved)];\n  }, [snapPoints, containerHeight, minHeightPx, maxHeightPx]);\n\n  function findClosestSnapPoint(height: number): number {\n    if (snapPointHeights.length === 0) return clamp(height, minHeightPx, maxHeightPx);\n\n    return snapPointHeights.reduce((prev, curr) =>\n      Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev,\n    );\n  }\n\n  function findActiveIndex(height: number): number {\n    const closest = findClosestSnapPoint(height);\n    return snapPointHeights.indexOf(closest);\n  }\n\n  function getSnapRelease({\n    currentHeight,\n    activeIndex,\n    draggedDistance,\n    velocity,\n    dismissible,\n  }: SnapReleaseParams): SnapReleaseResult {\n    const isFirst = activeIndex === 0;\n    const isLast = activeIndex === snapPointHeights.length - 1;\n    const isDraggingUp = draggedDistance > 0;\n    const highestSnapPoint = snapPointHeights.at(-1) ?? maxHeightPx;\n    const lowestSnapPoint = snapPointHeights[0] ?? minHeightPx;\n    const nextHigherSnapPoint =\n      snapPointHeights[Math.min(activeIndex + 1, snapPointHeights.length - 1)] ?? highestSnapPoint;\n    const nextLowerSnapPoint = snapPointHeights[Math.max(activeIndex - 1, 0)] ?? lowestSnapPoint;\n    const sheetHeight = snapPointHeights[activeIndex] ?? currentHeight;\n\n    // High velocity handling\n    if (\n      velocity > VELOCITY_THRESHOLD &&\n      Math.abs(draggedDistance) < sheetHeight * DRAG_DISTANCE_RATIO\n    ) {\n      if (isDraggingUp) {\n        // Fling upward: go to next higher snap, cap at highest\n        if (isLast) return { type: 'snap', height: highestSnapPoint };\n\n        return { type: 'snap', height: nextHigherSnapPoint };\n      } else {\n        // Fling downward: go to next lower snap, or dismiss if at lowest\n        if (isFirst) {\n          return dismissible ? { type: 'dismiss' } : { type: 'snap', height: lowestSnapPoint };\n        }\n\n        return { type: 'snap', height: nextLowerSnapPoint };\n      }\n    }\n\n    if (\n      dismissible &&\n      isFirst &&\n      !isDraggingUp &&\n      currentHeight < lowestSnapPoint * closeThreshold\n    ) {\n      return { type: 'dismiss' };\n    }\n\n    // Low velocity: snap to closest\n    const closest = findClosestSnapPoint(currentHeight);\n    return { type: 'snap', height: closest };\n  }\n\n  return {\n    snapPointHeights,\n    findClosestSnapPoint,\n    findActiveIndex,\n    getSnapRelease,\n  };\n}\n"],"mappings":";;;AAIA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAqB5B,SAAgB,cAAc,EAC5B,gBACA,YACA,iBACA,aACA,eACuB;CACvB,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,gBAAiB,QAAO,EAAE;EAE/B,MAAM,WAAW,WACd,KAAK,OAAO,MAAM,YAAY,IAAI,gBAAgB,EAAE,aAAa,YAAY,CAAC,CAC9E,MAAM,GAAG,MAAM,IAAI,EAAE;AAGxB,SAAO,CAAC,GAAG,IAAI,IAAI,SAAS,CAAC;IAC5B;EAAC;EAAY;EAAiB;EAAa;EAAY,CAAC;CAE3D,SAAS,qBAAqB,QAAwB;AACpD,MAAI,iBAAiB,WAAW,EAAG,QAAO,MAAM,QAAQ,aAAa,YAAY;AAEjF,SAAO,iBAAiB,QAAQ,MAAM,SACpC,KAAK,IAAI,OAAO,OAAO,GAAG,KAAK,IAAI,OAAO,OAAO,GAAG,OAAO,KAC5D;;CAGH,SAAS,gBAAgB,QAAwB;EAC/C,MAAM,UAAU,qBAAqB,OAAO;AAC5C,SAAO,iBAAiB,QAAQ,QAAQ;;CAG1C,SAAS,eAAe,EACtB,eACA,aACA,iBACA,UACA,eACuC;EACvC,MAAM,UAAU,gBAAgB;EAChC,MAAM,SAAS,gBAAgB,iBAAiB,SAAS;EACzD,MAAM,eAAe,kBAAkB;EACvC,MAAM,mBAAmB,iBAAiB,GAAG,GAAG,IAAI;EACpD,MAAM,kBAAkB,iBAAiB,MAAM;EAC/C,MAAM,sBACJ,iBAAiB,KAAK,IAAI,cAAc,GAAG,iBAAiB,SAAS,EAAE,KAAK;EAC9E,MAAM,qBAAqB,iBAAiB,KAAK,IAAI,cAAc,GAAG,EAAE,KAAK;EAC7E,MAAM,cAAc,iBAAiB,gBAAgB;AAGrD,MACE,WAAW,sBACX,KAAK,IAAI,gBAAgB,GAAG,cAAc,oBAE1C,KAAI,cAAc;AAEhB,OAAI,OAAQ,QAAO;IAAE,MAAM;IAAQ,QAAQ;IAAkB;AAE7D,UAAO;IAAE,MAAM;IAAQ,QAAQ;IAAqB;SAC/C;AAEL,OAAI,QACF,QAAO,cAAc,EAAE,MAAM,WAAW,GAAG;IAAE,MAAM;IAAQ,QAAQ;IAAiB;AAGtF,UAAO;IAAE,MAAM;IAAQ,QAAQ;IAAoB;;AAIvD,MACE,eACA,WACA,CAAC,gBACD,gBAAgB,kBAAkB,eAElC,QAAO,EAAE,MAAM,WAAW;AAK5B,SAAO;GAAE,MAAM;GAAQ,QADP,qBAAqB,cAAc;GACX;;AAG1C,QAAO;EACL;EACA;EACA;EACA;EACD"}

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

@@ -19,6 +19,8 @@ import { ScrollAreaProps } from "./ScrollArea/type.mjs";
 import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
 import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./Toast/type.mjs";
 import { ToastHost, ToastHostProps, toast, useToast } from "./Toast/imperative.mjs";
+import { FloatingSheetProps } from "./FloatingSheet/type.mjs";
+import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalContent, ModalContentProps, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, useModalActions, useModalOpen } from "./Modal/atoms.mjs";
 import { backdropTransition, modalMotionConfig } from "./Modal/constants.mjs";
 import { BaseModalProps, ImperativeModalProps, ModalComponentProps, ModalConfirmConfig, ModalContextValue, ModalInstance } from "./Modal/type.mjs";
@@ -32,4 +34,4 @@ import { SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, Sw
 import { styles } from "./Switch/style.mjs";
 import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
 import { Switch } from "./Switch/Switch.mjs";
-export { BaseModalProps, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, backdropTransition, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };
+export { BaseModalProps, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuItem, ContextMenuTrigger, DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, FloatingSheet, FloatingSheetProps, IconSpaceMode, ImperativeModalProps, Modal, ModalBackdrop, ModalBackdropProps, ModalClose, ModalCloseProps, ModalComponentProps, ModalConfirmConfig, ModalContent, ModalContentProps, ModalContext, ModalContextValue, ModalDescription, ModalDescriptionProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalHost, ModalHostProps, ModalInstance, ModalPopup, ModalPopupProps, ModalPortal, ModalPortalProps, ModalRoot, ModalRootProps, ModalSystem, ModalTitle, ModalTitleProps, ModalTrigger, ModalTriggerProps, ModalViewport, ModalViewportProps, PopoverArrow, PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, PopoverBackdropProps, PopoverContextValue, PopoverGroup, PopoverPlacement, PopoverPopup, PopoverPopupAtomProps, PopoverPopupProps, PopoverPortal, PopoverPortalAtomProps, PopoverPortalProps, PopoverPositioner, PopoverPositionerAtomProps, PopoverPositionerProps, PopoverProps, PopoverProvider, PopoverRoot, PopoverTrigger, PopoverTriggerComponentProps, PopoverTriggerElement, PopoverTriggerElementProps, PopoverViewport, PopoverViewportAtomProps, ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, Select, SelectArrow, SelectArrowProps, SelectBackdrop, SelectBehaviorVariant, SelectClassNames, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectIndicatorVariant, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptions, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectRoot, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps, SelectVariant, Switch, SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIcon, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRoot, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumb, SwitchThumbProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, backdropTransition, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };

package/es/base-ui/index.mjs

@@ -13,6 +13,7 @@ import PopoverGroup from "./Popover/PopoverGroup.mjs";
 import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
 import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
 import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
+import { FloatingSheet } from "./FloatingSheet/FloatingSheet.mjs";
 import { backdropTransition, modalMotionConfig } from "./Modal/constants.mjs";
 import { ModalBackdrop, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, useModalActions, useModalOpen } from "./Modal/atoms.mjs";
 import { ModalContext, useModalContext } from "./Modal/context.mjs";
@@ -23,4 +24,4 @@ import Select from "./Select/Select.mjs";
 import { styles } from "./Switch/style.mjs";
 import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
 import Switch from "./Switch/Switch.mjs";
-export { ContextMenuHost, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Switch, SwitchIcon, SwitchRoot, SwitchThumb, ToastHost, backdropTransition, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };
+export { ContextMenuHost, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingSheet, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Switch, SwitchIcon, SwitchRoot, SwitchThumb, ToastHost, backdropTransition, closeContextMenu, confirmModal, createModal, createModalSystem, modalMotionConfig, parseTrigger, renderDropdownMenuItems, showContextMenu, styles as switchStyles, toast, updateContextMenuItems, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverPortalContainer, useSwitchContext, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.9.0",
+  "version": "5.9.2",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",