@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/overlays/dialog/dialog-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/utils';\nimport {\n  DialogContextProvider,\n  type DialogVariants,\n} from './use-dialog-context';\n\nexport type DialogRootProps<Payload = unknown> = MergeOverride<\n  BaseDialog.Root.Props<Payload>,\n  DialogVariants\n>;\n\nexport type DialogRootState = BaseDialog.Root.State;\n\nexport type DialogRootActions = BaseDialog.Root.Actions;\n\nexport type DialogRootChangeEventDetails = BaseDialog.Root.ChangeEventDetails;\n\nexport type DialogRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<DialogVariants>();\n\n/**\n * Estado do dialog. Não renderiza elemento.\n *\n * Modal por padrão: o foco fica preso no popup, a rolagem da página trava, e o clique fora, no\n * backdrop ou no viewport, fecha o dialog.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={<Button />}>Editar cliente</Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Backdrop />\n *     <Dialog.Viewport>\n *       <Dialog.Popup>\n *         <Dialog.Header>\n *           <Dialog.Title>Editar cliente</Dialog.Title>\n *           <Dialog.Description>Os dados valem para os próximos pedidos.</Dialog.Description>\n *         </Dialog.Header>\n *         <Dialog.Body>…</Dialog.Body>\n *         <Dialog.Footer>\n *           <Dialog.Close render={<Button variant=\"outline\" />}>Cancelar</Dialog.Close>\n *           <Button>Salvar</Button>\n *         </Dialog.Footer>\n *       </Dialog.Popup>\n *     </Dialog.Viewport>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nexport const DialogRoot = <Payload extends AnyType = unknown>(\n  props: DialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <DialogContextProvider value={variantProps}>\n      <BaseDialog.Root {...elementProps} />\n    </DialogContextProvider>\n  );\n};\n\nDialogRoot.displayName = 'Dialog.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B3D,MAAa,cACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAACA,OAAW,MAAZ,EAAiB,GAAI,aAAe,CAAA;CACf,CAAA;AAE3B;AAEA,WAAW,cAAc"}
+{"version":3,"file":"dialog-root.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-root.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport {\n  type AnyType,\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport {\n  DialogContextProvider,\n  type DialogVariants,\n} from './use-dialog-context';\n\nexport type DialogRootProps<Payload = unknown> = MergeOverride<\n  BaseDialog.Root.Props<Payload>,\n  DialogVariants\n>;\n\nexport type DialogRootState = BaseDialog.Root.State;\n\nexport type DialogRootActions = BaseDialog.Root.Actions;\n\nexport type DialogRootChangeEventDetails = BaseDialog.Root.ChangeEventDetails;\n\nexport type DialogRootChangeEventReason = BaseDialog.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<DialogVariants>();\n\n/**\n * Estado do dialog. Não renderiza elemento.\n *\n * Modal por padrão: o foco fica preso no popup, a rolagem da página trava, e o clique fora, no\n * backdrop ou no viewport, fecha o dialog.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={<Button />}>Editar cliente</Dialog.Trigger>\n *   <Dialog.Portal>\n *     <Dialog.Backdrop />\n *     <Dialog.Viewport>\n *       <Dialog.Popup>\n *         <Dialog.Header>\n *           <Dialog.Title>Editar cliente</Dialog.Title>\n *           <Dialog.Description>Os dados valem para os próximos pedidos.</Dialog.Description>\n *         </Dialog.Header>\n *         <Dialog.Body>…</Dialog.Body>\n *         <Dialog.Footer>\n *           <Dialog.Close render={<Button variant=\"outline\" />}>Cancelar</Dialog.Close>\n *           <Button>Salvar</Button>\n *         </Dialog.Footer>\n *       </Dialog.Popup>\n *     </Dialog.Viewport>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nexport const DialogRoot = <Payload extends AnyType = unknown>(\n  props: DialogRootProps<Payload>,\n) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['size']);\n\n  return (\n    <DialogContextProvider value={variantProps}>\n      <BaseDialog.Root {...elementProps} />\n    </DialogContextProvider>\n  );\n};\n\nDialogRoot.displayName = 'Dialog.Root';\n"],"mappings":";;;;;AAwBA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B3D,MAAa,cACX,UACG;CACH,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,MAAM,CAAC;CAEtE,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAACA,OAAW,MAAZ,EAAiB,GAAI,aAAe,CAAA;CACf,CAAA;AAE3B;AAEA,WAAW,cAAc"}

package/dist/components/overlays/dialog/dialog-title.d.ts

@@ -5,9 +5,8 @@ export type DialogTitleState = Dialog.Title.State;
 /**
  * Título do dialog, um `h2` ligado ao popup por `aria-labelledby`.
  *
- * Cópia de `CardTitle` (tabela no README de `display`). As diferenças: tamanho e entrelinha fixos
- * no `sm` da escala (ver `dialogPopupVariants`), e a tag vem do Base UI (`h2`), sem a prop
- * `level`; outra tag vai por `render`.
+ * Cópia de `CardTitle` (tabela no README de `display`). A diferença: a tag vem do Base UI (`h2`),
+ * sem a prop `level`; outra tag vai por `render`.
  *
  * Origem do `AlertDialog.Title` e do `Drawer.Title`, que copiam estas classes
  * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na

package/dist/components/overlays/dialog/dialog-title.js

@@ -5,9 +5,8 @@ import { Dialog } from "@base-ui/react/dialog";
 /**
 * Título do dialog, um `h2` ligado ao popup por `aria-labelledby`.
 *
-* Cópia de `CardTitle` (tabela no README de `display`). As diferenças: tamanho e entrelinha fixos
-* no `sm` da escala (ver `dialogPopupVariants`), e a tag vem do Base UI (`h2`), sem a prop
-* `level`; outra tag vai por `render`.
+* Cópia de `CardTitle` (tabela no README de `display`). A diferença: a tag vem do Base UI (`h2`),
+* sem a prop `level`; outra tag vai por `render`.
 *
 * Origem do `AlertDialog.Title` e do `Drawer.Title`, que copiam estas classes
 * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na
@@ -18,9 +17,9 @@ const DialogTitle = (props) => {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-component": "Dialog.Title",
 		className: mergeStateClassNames([
-			"text-lg",
+			"text-base",
 			"leading-6",
-			"font-semibold",
+			"font-medium",
 			"text-gray-12",
 			"text-balance"
 		], className),

package/dist/components/overlays/dialog/dialog-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-title.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-title.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogTitleProps = BaseDialog.Title.Props;\n\nexport type DialogTitleState = BaseDialog.Title.State;\n\n/**\n * Título do dialog, um `h2` ligado ao popup por `aria-labelledby`.\n *\n * Cópia de `CardTitle` (tabela no README de `display`). As diferenças: tamanho e entrelinha fixos\n * no `sm` da escala (ver `dialogPopupVariants`), e a tag vem do Base UI (`h2`), sem a prop\n * `level`; outra tag vai por `render`.\n *\n * Origem do `AlertDialog.Title` e do `Drawer.Title`, que copiam estas classes\n * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na\n * mesma rodada.\n */\nexport const DialogTitle = (props: DialogTitleProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Title\n      data-component=\"Dialog.Title\"\n      className={mergeStateClassNames(\n        [\n          'text-lg',\n          'leading-6',\n          'font-semibold',\n          'text-gray-12',\n          'text-balance',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDialogTitle.displayName = 'Dialog.Title';\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}
+{"version":3,"file":"dialog-title.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-title.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogTitleProps = BaseDialog.Title.Props;\n\nexport type DialogTitleState = BaseDialog.Title.State;\n\n/**\n * Título do dialog, um `h2` ligado ao popup por `aria-labelledby`.\n *\n * Cópia de `CardTitle` (tabela no README de `display`). A diferença: a tag vem do Base UI (`h2`),\n * sem a prop `level`; outra tag vai por `render`.\n *\n * Origem do `AlertDialog.Title` e do `Drawer.Title`, que copiam estas classes\n * (tabela no README de `overlays`, com as diferenças). Uma mudança aqui vale para as cópias na\n * mesma rodada.\n */\nexport const DialogTitle = (props: DialogTitleProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Title\n      data-component=\"Dialog.Title\"\n      className={mergeStateClassNames(\n        [\n          'text-base',\n          'leading-6',\n          'font-medium',\n          'text-gray-12',\n          'text-balance',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDialogTitle.displayName = 'Dialog.Title';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/overlays/dialog/dialog-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-trigger.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-trigger.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { AnyType } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogTriggerProps<Payload = unknown> =\n  BaseDialog.Trigger.Props<Payload>;\n\nexport type DialogTriggerState = BaseDialog.Trigger.State;\n\n/**\n * Elemento que abre o dialog. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const DialogTrigger = <Payload extends AnyType = unknown>(\n  props: DialogTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Trigger\n      data-component=\"Dialog.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nDialogTrigger.displayName = 'Dialog.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,iBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,SAAZ;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
+{"version":3,"file":"dialog-trigger.js","names":["BaseDialog"],"sources":["../../../../src/components/overlays/dialog/dialog-trigger.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DialogTriggerProps<Payload = unknown> =\n  BaseDialog.Trigger.Props<Payload>;\n\nexport type DialogTriggerState = BaseDialog.Trigger.State;\n\n/**\n * Elemento que abre o dialog. Sem estilo próprio; passe um botão da lib em `render`.\n */\nexport const DialogTrigger = <Payload extends AnyType = unknown>(\n  props: DialogTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDialog.Trigger\n      data-component=\"Dialog.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nDialogTrigger.displayName = 'Dialog.Trigger';\n"],"mappings":";;;;;;;AAYA,MAAa,iBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,SAAZ;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}

package/dist/components/overlays/drawer/drawer-backdrop.js

@@ -24,10 +24,9 @@ const DrawerBackdrop = (props) => {
 			"bg-black/40",
 			"opacity-[calc(1-var(--drawer-swipe-progress,0))]",
 			"not-motion-reduced:transition-opacity",
+			"not-motion-reduced:duration-450",
 			"not-motion-reduced:ease-enter-emphasized",
-			"not-motion-reduced:duration-400",
-			"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]",
-			"not-motion-reduced:data-ending-style:ease-exit-emphasized",
+			"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]",
 			"data-swiping:duration-0",
 			"data-ending-style:opacity-0",
 			"data-starting-style:opacity-0"

package/dist/components/overlays/drawer/drawer-backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-backdrop.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-backdrop.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBackdropProps = BaseDrawer.Backdrop.Props;\n\nexport type DrawerBackdropState = BaseDrawer.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num drawer aninhado, o Base UI não a\n * renderiza: quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups (tabela no README de `overlays`).\n * As diferenças: clareia enquanto o drawer é arrastado para fechar (`--drawer-swipe-progress`,\n * de 0 a 1), sem transição durante o arrasto, e usa as durações do `Drawer.Popup`. Com\n * `snapPoints`, fica transparente no ponto mais baixo e escurece conforme o drawer sobe: parado\n * embaixo, a página continua à vista.\n */\nexport const DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Backdrop\n      data-component=\"Drawer.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n          'opacity-[calc(1-var(--drawer-swipe-progress,0))]',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter-emphasized',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-400',\n          'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]',\n          'not-motion-reduced:data-ending-style:ease-exit-emphasized',\n          'data-swiping:duration-0',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBackdrop.displayName = 'Drawer.Backdrop';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"drawer-backdrop.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-backdrop.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerBackdropProps = BaseDrawer.Backdrop.Props;\n\nexport type DrawerBackdropState = BaseDrawer.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num drawer aninhado, o Base UI não a\n * renderiza: quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups (tabela no README de `overlays`).\n * As diferenças: clareia enquanto o drawer é arrastado para fechar (`--drawer-swipe-progress`,\n * de 0 a 1), sem transição durante o arrasto, e usa as durações do `Drawer.Popup`. Com\n * `snapPoints`, fica transparente no ponto mais baixo e escurece conforme o drawer sobe: parado\n * embaixo, a página continua à vista.\n */\nexport const DrawerBackdrop = (props: DrawerBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Backdrop\n      data-component=\"Drawer.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n          'opacity-[calc(1-var(--drawer-swipe-progress,0))]',\n\n          'not-motion-reduced:transition-opacity',\n          // Os tempos do `Popup` em cada sentido, para os dois sumirem juntos (ver\n          // `drawerPopupVariants`).\n          'not-motion-reduced:duration-450',\n          'not-motion-reduced:ease-enter-emphasized',\n          'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]',\n          'data-swiping:duration-0',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerBackdrop.displayName = 'Drawer.Backdrop';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GAGA;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/drawer/drawer-footer.js

@@ -18,10 +18,9 @@ const DrawerFooter = (props) => {
 			"justify-end",
 			"gap-2",
 			"px-(--drawer-padding)",
-			"pt-4",
+			"pt-2",
 			"pb-(--drawer-padding)",
-			"first:pt-(--drawer-padding)",
-			"[[data-component='Drawer.Header']+&]:pt-2"
+			"first:pt-(--drawer-padding)"
 		], className)
 	};
 	return useRender({

package/dist/components/overlays/drawer/drawer-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-footer.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DrawerFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do drawer, alinhadas à direita. Num drawer lateral, fica no pé da tela,\n * porque o `Body` ocupa o espaço que sobra.\n *\n * Cópia de `DialogFooter`, com o respiro em `--drawer-padding` (tabela no README de\n * `overlays`); o mecanismo está explicado lá.\n */\nexport const DrawerFooter = (props: DrawerFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Drawer.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--drawer-padding)',\n        'pt-4',\n        'pb-(--drawer-padding)',\n        // Abrindo o drawer, fecha o respiro de cima; logo depois do `Header`, completa os 16px\n        // dele até os 24px, sem somar os dois.\n        'first:pt-(--drawer-padding)',\n        \"[[data-component='Drawer.Header']+&]:pt-2\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"drawer-footer.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DrawerFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do drawer, alinhadas à direita. Num drawer lateral, fica no pé da tela,\n * porque o `Body` ocupa o espaço que sobra.\n *\n * Cópia de `DialogFooter`, com o respiro em `--drawer-padding` (tabela no README de\n * `overlays`); o mecanismo está explicado lá.\n */\nexport const DrawerFooter = (props: DrawerFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Drawer.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--drawer-padding)',\n        'pt-2',\n        'pb-(--drawer-padding)',\n        // Abrindo o drawer, fecha o respiro de cima.\n        'first:pt-(--drawer-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDrawerFooter.displayName = 'Drawer.Footer';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/overlays/drawer/drawer-header.js

@@ -17,7 +17,7 @@ const DrawerHeader = (props) => {
 			"gap-0.5",
 			"px-(--drawer-padding)",
 			"pt-(--drawer-padding)",
-			"pb-4",
+			"pb-2",
 			"[&:not(:has(~[data-component='Drawer.Body'],~[data-component='Drawer.Footer']))]:pb-(--drawer-padding)"
 		], className)
 	};

package/dist/components/overlays/drawer/drawer-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-header.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DrawerHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do drawer, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, com o respiro em `--drawer-padding` (tabela no README de\n * `overlays`); o mecanismo está explicado lá.\n */\nexport const DrawerHeader = (props: DrawerHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Drawer.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--drawer-padding)',\n        'pt-(--drawer-padding)',\n        'pb-4',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do drawer embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='Drawer.Body'],~[data-component='Drawer.Footer']))]:pb-(--drawer-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDrawerHeader.displayName = 'Drawer.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"drawer-header.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type DrawerHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do drawer, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, com o respiro em `--drawer-padding` (tabela no README de\n * `overlays`); o mecanismo está explicado lá.\n */\nexport const DrawerHeader = (props: DrawerHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Drawer.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--drawer-padding)',\n        'pt-(--drawer-padding)',\n        'pb-2',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do drawer embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='Drawer.Body'],~[data-component='Drawer.Footer']))]:pb-(--drawer-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDrawerHeader.displayName = 'Drawer.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/overlays/drawer/drawer-indent-background.d.ts

@@ -0,0 +1,17 @@
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent-background.d.ts
+export type DrawerIndentBackgroundProps = Drawer.IndentBackground.Props;
+export type DrawerIndentBackgroundState = Drawer.IndentBackground.State;
+/**
+ * Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa
+ * que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).
+ *
+ * Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é
+ * pequeno e desenha os cantos sem chamar atenção.
+ */
+export declare const DrawerIndentBackground: {
+  (props: DrawerIndentBackgroundProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=drawer-indent-background.d.ts.map

package/dist/components/overlays/drawer/drawer-indent-background.js

@@ -0,0 +1,28 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent-background.tsx
+/**
+* Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa
+* que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).
+*
+* Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é
+* pequeno e desenha os cantos sem chamar atenção.
+*/
+const DrawerIndentBackground = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+		"data-component": "Drawer.IndentBackground",
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"bg-black"
+		], className),
+		...rest
+	});
+};
+DrawerIndentBackground.displayName = "Drawer.IndentBackground";
+//#endregion
+export { DrawerIndentBackground };
+
+//# sourceMappingURL=drawer-indent-background.js.map

package/dist/components/overlays/drawer/drawer-indent-background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-indent-background.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-indent-background.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerIndentBackgroundProps = BaseDrawer.IndentBackground.Props;\n\nexport type DrawerIndentBackgroundState = BaseDrawer.IndentBackground.State;\n\n/**\n * Fundo que aparece atrás da página recuada, nos cantos que o `Drawer.Indent` arredonda e na faixa\n * que abre em cima. Vai antes do `Indent`, preenchendo o mesmo contêiner (ver `Drawer.Indent`).\n *\n * Preto nos dois temas, como o sheet do iOS: no escuro, o contraste com a página (`gray-1`) é\n * pequeno e desenha os cantos sem chamar atenção.\n */\nexport const DrawerIndentBackground = (props: DrawerIndentBackgroundProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.IndentBackground\n      data-component=\"Drawer.IndentBackground\"\n      className={mergeStateClassNames(\n        ['absolute', 'inset-0', 'bg-black'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerIndentBackground.displayName = 'Drawer.IndentBackground';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,kBAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAY;GAAW;EAAU,GAClC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}

package/dist/components/overlays/drawer/drawer-indent.d.ts

@@ -0,0 +1,31 @@
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent.d.ts
+export type DrawerIndentProps = Drawer.Indent.Props;
+export type DrawerIndentState = Drawer.Indent.State;
+/**
+ * Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e
+ * arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai
+ * dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com
+ * `overflow-hidden`, que é onde o fundo aparece.
+ *
+ * Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`
+ * dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.
+ *
+ * Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Provider>
+ *   <div className="relative overflow-hidden">
+ *     <Drawer.IndentBackground />
+ *     <Drawer.Indent>…o app…</Drawer.Indent>
+ *   </div>
+ * </Drawer.Provider>
+ * ```
+ */
+export declare const DrawerIndent: {
+  (props: DrawerIndentProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=drawer-indent.d.ts.map

package/dist/components/overlays/drawer/drawer-indent.js

@@ -0,0 +1,49 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/overlays/drawer/drawer-indent.tsx
+/**
+* Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e
+* arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai
+* dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com
+* `overflow-hidden`, que é onde o fundo aparece.
+*
+* Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`
+* dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.
+*
+* Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.
+*
+* @example
+* ```tsx
+* <Drawer.Provider>
+*   <div className="relative overflow-hidden">
+*     <Drawer.IndentBackground />
+*     <Drawer.Indent>…o app…</Drawer.Indent>
+*   </div>
+* </Drawer.Provider>
+* ```
+*/
+const DrawerIndent = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.Indent, {
+		"data-component": "Drawer.Indent",
+		className: mergeStateClassNames([
+			"[--indent-radius:calc(--spacing(4)*(1-var(--drawer-swipe-progress,0)))]",
+			"[--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress,0)*100000),1))]",
+			"relative",
+			"origin-top",
+			"bg-gray-1",
+			"not-motion-reduced:transition-[transform,border-radius]",
+			"not-motion-reduced:ease-enter-emphasized",
+			"not-motion-reduced:duration-[calc(var(--indent-transition)*400ms),calc(var(--indent-transition)*250ms)]",
+			"data-active:[transform:scale(calc(0.98+0.02*var(--drawer-swipe-progress,0)))_translateY(calc(--spacing(2)*(1-var(--drawer-swipe-progress,0))))]",
+			"data-active:rounded-t-(--indent-radius)"
+		], className),
+		...rest
+	});
+};
+DrawerIndent.displayName = "Drawer.Indent";
+//#endregion
+export { DrawerIndent };
+
+//# sourceMappingURL=drawer-indent.js.map

package/dist/components/overlays/drawer/drawer-indent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-indent.js","names":["BaseDrawer"],"sources":["../../../../src/components/overlays/drawer/drawer-indent.tsx"],"sourcesContent":["import { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { mergeStateClassNames } from '#utils';\n\nexport type DrawerIndentProps = BaseDrawer.Indent.Props;\n\nexport type DrawerIndentState = BaseDrawer.Indent.State;\n\n/**\n * Envolve o conteúdo do app e o faz recuar quando um drawer abre: encolhe um pouco, desce 8px e\n * arredonda os cantos de cima, e volta com o arrasto de fechar (`--drawer-swipe-progress`). Vai\n * dentro do `Drawer.Provider`, depois do `Drawer.IndentBackground`, num contêiner `relative` com\n * `overflow-hidden`, que é onde o fundo aparece.\n *\n * Atenção: o `transform` do recuo faz do `Indent` o referencial dos elementos `position: fixed`\n * dentro dele, que passam a se posicionar em relação ao `Indent`, e não à tela.\n *\n * Tem o fundo da página (`gray-1`): sem ele, o `IndentBackground` apareceria através do conteúdo.\n *\n * @example\n * ```tsx\n * <Drawer.Provider>\n *   <div className=\"relative overflow-hidden\">\n *     <Drawer.IndentBackground />\n *     <Drawer.Indent>…o app…</Drawer.Indent>\n *   </div>\n * </Drawer.Provider>\n * ```\n */\nexport const DrawerIndent = (props: DrawerIndentProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseDrawer.Indent\n      data-component=\"Drawer.Indent\"\n      className={mergeStateClassNames(\n        [\n          '[--indent-radius:calc(--spacing(4)*(1-var(--drawer-swipe-progress,0)))]',\n          // Sem arrasto, o progresso é 0 e a transição roda inteira; durante o arrasto o\n          // progresso passa de 0 e a duração cai a 0, para o recuo seguir o dedo.\n          '[--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress,0)*100000),1))]',\n\n          'relative',\n          'origin-top',\n          'bg-gray-1',\n\n          'not-motion-reduced:transition-[transform,border-radius]',\n          'not-motion-reduced:ease-enter-emphasized',\n          'not-motion-reduced:duration-[calc(var(--indent-transition)*400ms),calc(var(--indent-transition)*250ms)]',\n\n          'data-active:[transform:scale(calc(0.98+0.02*var(--drawer-swipe-progress,0)))_translateY(calc(--spacing(2)*(1-var(--drawer-swipe-progress,0))))]',\n          'data-active:rounded-t-(--indent-radius)',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDrawerIndent.displayName = 'Drawer.Indent';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,QAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAGA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/overlays/drawer/drawer-popup-variants.d.ts

@@ -1,32 +1,8 @@
 //#region src/components/overlays/drawer/drawer-popup-variants.d.ts
-/**
- * Cópia de `dialogPopupVariants`, a superfície e o respiro de uma janela modal (tabela no README
- * de `overlays`). As diferenças:
- * - preso à borda do `side`, sem arredondar o lado da borda; nos lados, ocupa a altura da tela e
- *   tem a largura do `size` (em `--drawer-size`); em cima e embaixo, a altura do conteúdo até 85%
- *   da tela;
- * - entra e sai deslizando da borda, em 400ms; a saída dura menos quanto mais forte o gesto
- *   (`--drawer-swipe-strength`), e durante o arrasto não há transição, para o popup seguir o dedo;
- * - o aninhamento, a folga e a alça, abaixo.
- *
- * O deslocamento soma as variáveis que o Base UI escreve: o arrasto (`--drawer-swipe-movement-x`
- * ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`). Embaixo, o `padding-bottom`
- * cresce junto com o deslocamento, para o fim do conteúdo ficar na parte visível do popup.
- *
- * Folga: arrastando para dentro, o popup se afasta da borda. O `::after`, da cor do popup, se
- * estende 3rem além da borda e cobre o vão.
- *
- * Aninhamento: com outro drawer aberto à frente, o de trás recua 24px por nível
- * (`--nested-drawers`) para dentro da tela, encolhe 5% e escurece por `brightness`, já que o
- * `::after` está ocupado pela folga. O encolhimento parte da borda de dentro, para os 24px
- * aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga.
- *
- * Embaixo, um `::before` desenha a alça no topo, que só indica o gesto: o arrasto vale no popup
- * inteiro.
- */
 export declare const drawerPopupVariants: (props?: ({
-  side?: "bottom" | "right" | "left" | "top" | null | undefined;
+  side?: "bottom" | "top" | "right" | "left" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;
+  snapPoints?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=drawer-popup-variants.d.ts.map

package/dist/components/overlays/drawer/drawer-popup-variants.js

@@ -7,13 +7,35 @@ import { cva } from "class-variance-authority";
 * - preso à borda do `side`, sem arredondar o lado da borda; nos lados, ocupa a altura da tela e
 *   tem a largura do `size` (em `--drawer-size`); em cima e embaixo, a altura do conteúdo até 85%
 *   da tela;
-* - entra e sai deslizando da borda, em 400ms; a saída dura menos quanto mais forte o gesto
+* - entra e sai deslizando da borda (tempos abaixo); a saída dura menos quanto mais forte o gesto
 *   (`--drawer-swipe-strength`), e durante o arrasto não há transição, para o popup seguir o dedo;
 * - o aninhamento, a folga e a alça, abaixo.
 *
-* O deslocamento soma as variáveis que o Base UI escreve: o arrasto (`--drawer-swipe-movement-x`
-* ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`). Embaixo, o `padding-bottom`
-* cresce junto com o deslocamento, para o fim do conteúdo ficar na parte visível do popup.
+* **Posição.** O deslocamento soma as variáveis que o Base UI escreve: o arrasto
+* (`--drawer-swipe-movement-x` ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`),
+* mais o recuo do aninhamento (`--drawer-nested-*`). Ao entrar e sair, `--drawer-x` ou `--drawer-y`
+* vira 100% do tamanho, para fora da borda.
+*
+* Embaixo, com `snapPoints`, o `padding-bottom` cresce junto com o deslocamento, para o fim do
+* conteúdo ficar na parte visível do popup. Só com eles: num popup que não chegou à altura
+* máxima, o padding aumenta a altura para cima na mesma medida em que o arrasto o empurra para
+* baixo, e a borda de cima não acompanharia o dedo.
+*
+* **Área segura.** Cada lado soma ao respiro os `env(safe-area-inset-*)` das bordas que o popup
+* toca: o indicador de início e o entalhe do iPhone cobririam o rodapé e o título. Vale 0 fora
+* deles, e só tem valor se a página declarar `viewport-fit=cover` no `<meta name="viewport">`.
+*
+* **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um
+* `transform` inline (`translate3d() scale()`) para prender o popup ao dedo. As propriedades
+* `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao `transform` em vez de
+* serem trocadas por ele: o popup andaria o dobro do dedo e, ao soltar, pularia de volta a
+* metade. O `transform` daqui usa as mesmas funções, na mesma ordem: ao soltar, a transição parte
+* do inline e interpola função por função.
+*
+* **Tempos.** Entra em 450ms e sai em 400ms, os dois na curva que desacelera: a saída começa a
+* andar na hora, sem hesitar, e a saída pelo arrasto continua o movimento do dedo em vez de partir
+* do repouso, o que pareceria um tranco ao soltar. O `Drawer.Backdrop` usa os mesmos tempos, para
+* os dois andarem juntos.
 *
 * Folga: arrastando para dentro, o popup se afasta da borda. O `::after`, da cor do popup, se
 * estende 3rem além da borda e cobre o vão.
@@ -21,13 +43,34 @@ import { cva } from "class-variance-authority";
 * Aninhamento: com outro drawer aberto à frente, o de trás recua 24px por nível
 * (`--nested-drawers`) para dentro da tela, encolhe 5% e escurece por `brightness`, já que o
 * `::after` está ocupado pela folga. O encolhimento parte da borda de dentro, para os 24px
-* aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga.
+* aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga. Enquanto o da
+* frente é arrastado, o Base UI escreve o progresso dele (0 a 1) em `--drawer-swipe-progress` nos
+* de trás: `--drawer-nested-depth` desconta esse progresso da profundidade, e recuo, escala e
+* brilho voltam junto com o gesto, em vez de esperar o drawer da frente sair.
 *
 * Embaixo, um `::before` desenha a alça no topo, que só indica o gesto: o arrasto vale no popup
 * inteiro.
 */
+/**
+* Em cima e embaixo, a altura segue o conteúdo, e os drawers empilhados têm alturas diferentes:
+* sem acerto, o de trás, mais baixo, sumiria atrás do da frente, e o mais alto mostraria uma faixa
+* maior que o recuo. Com outro drawer à frente, o de trás passa a ter a altura do da frente
+* (`--drawer-frontmost-height`, escrita pelo Base UI) e corta o que passa dela. A altura anima
+* a partir de `--drawer-height`, que o Base UI escreve em px enquanto há drawer aninhado; antes
+* disso fica `auto`. O conteúdo some, porque cortado pela metade pareceria quebrado, e volta
+* enquanto o da frente é arrastado.
+*/
+const nestedHeights = [
+	"h-(--drawer-height,auto)",
+	"data-nested-drawer-open:h-[var(--drawer-frontmost-height,var(--drawer-height))]",
+	"data-nested-drawer-open:overflow-hidden",
+	"*:not-motion-reduced:transition-opacity",
+	"*:not-motion-reduced:duration-300",
+	"data-nested-drawer-open:*:opacity-0",
+	"data-nested-drawer-swiping:*:opacity-100"
+];
 const drawerPopupVariants = cva([
-	"[--drawer-padding:--spacing(6)]",
+	"[--drawer-padding:--spacing(4)]",
 	"[--drawer-peek:--spacing(6)]",
 	"relative",
 	"flex",
@@ -35,7 +78,6 @@ const drawerPopupVariants = cva([
 	"w-full",
 	"outline-1",
 	"outline-gray-6",
-	"corner-squircle",
 	"bg-white",
 	"dark:bg-gray-2",
 	"shadow-lg",
@@ -47,27 +89,33 @@ const drawerPopupVariants = cva([
 	"after:absolute",
 	"after:bg-inherit",
 	"after:pointer-events-none",
-	"not-motion-reduced:transition-[translate,scale,filter]",
+	"[--drawer-x:calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-nested-x,0px))]",
+	"[--drawer-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)+var(--drawer-nested-y,0px))]",
+	"[--drawer-nested-depth:max(0,calc(var(--nested-drawers,0)-var(--drawer-swipe-progress,0)))]",
+	"[--drawer-scale:1]",
+	"[transform:translate3d(var(--drawer-x),var(--drawer-y),0)_scale(var(--drawer-scale))]",
+	"not-motion-reduced:transition-[transform,filter,height,max-height]",
+	"not-motion-reduced:duration-450",
 	"not-motion-reduced:ease-enter-emphasized",
-	"not-motion-reduced:duration-400",
-	"not-motion-reduced:data-ending-style:ease-exit-emphasized",
-	"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]",
+	"not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]",
 	"data-swiping:duration-0",
 	"data-nested-drawer-swiping:duration-0",
 	"data-swiping:select-none",
-	"data-nested-drawer-open:scale-[calc(1-0.05*var(--nested-drawers))]",
-	"data-nested-drawer-open:brightness-80"
+	"data-nested-drawer-open:[--drawer-scale:calc(1-0.05*var(--drawer-nested-depth))]",
+	"data-nested-drawer-open:[filter:brightness(calc(1-0.2*min(1,var(--drawer-nested-depth))))]"
 ], {
 	variants: {
 		side: {
 			right: [
 				"h-full",
 				"max-w-(--drawer-size)",
-				"rounded-l-lg",
 				"origin-left",
-				"translate-x-[calc(var(--drawer-swipe-movement-x,0px)-var(--nested-drawers,0)*var(--drawer-peek))]",
-				"data-starting-style:translate-x-full",
-				"data-ending-style:translate-x-full",
+				"pt-[env(safe-area-inset-top)]",
+				"pr-[env(safe-area-inset-right)]",
+				"pb-[env(safe-area-inset-bottom)]",
+				"[--drawer-nested-x:calc(var(--drawer-nested-depth)*var(--drawer-peek)*-1)]",
+				"data-starting-style:[--drawer-x:100%]",
+				"data-ending-style:[--drawer-x:100%]",
 				"after:inset-y-0",
 				"after:left-full",
 				"after:w-12"
@@ -75,36 +123,38 @@ const drawerPopupVariants = cva([
 			left: [
 				"h-full",
 				"max-w-(--drawer-size)",
-				"rounded-r-lg",
 				"origin-right",
-				"translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--nested-drawers,0)*var(--drawer-peek))]",
-				"data-starting-style:-translate-x-full",
-				"data-ending-style:-translate-x-full",
+				"pt-[env(safe-area-inset-top)]",
+				"pl-[env(safe-area-inset-left)]",
+				"pb-[env(safe-area-inset-bottom)]",
+				"[--drawer-nested-x:calc(var(--drawer-nested-depth)*var(--drawer-peek))]",
+				"data-starting-style:[--drawer-x:-100%]",
+				"data-ending-style:[--drawer-x:-100%]",
 				"after:inset-y-0",
 				"after:right-full",
 				"after:w-12"
 			],
 			top: [
 				"max-h-[85dvh]",
-				"rounded-b-lg",
 				"origin-bottom",
-				"translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--nested-drawers,0)*var(--drawer-peek))]",
-				"data-starting-style:-translate-y-full",
-				"data-ending-style:-translate-y-full",
+				...nestedHeights,
+				"pt-[env(safe-area-inset-top)]",
+				"px-[env(safe-area-inset-left)]",
+				"[--drawer-nested-y:calc(var(--drawer-nested-depth)*var(--drawer-peek))]",
+				"data-starting-style:[--drawer-y:-100%]",
+				"data-ending-style:[--drawer-y:-100%]",
 				"after:inset-x-0",
 				"after:bottom-full",
 				"after:h-12"
 			],
 			bottom: [
-				"max-h-[85dvh]",
-				"rounded-t-lg",
+				"max-h-[calc(85dvh-var(--drawer-keyboard-inset,0px))]",
 				"origin-top",
-				"translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)-var(--nested-drawers,0)*var(--drawer-peek))]",
-				"pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]",
-				"data-starting-style:translate-y-full",
-				"data-ending-style:translate-y-full",
-				"data-starting-style:pb-0",
-				"data-ending-style:pb-0",
+				...nestedHeights,
+				"px-[env(safe-area-inset-left)]",
+				"[--drawer-nested-y:calc(var(--drawer-nested-depth)*var(--drawer-peek)*-1)]",
+				"data-starting-style:[--drawer-y:100%]",
+				"data-ending-style:[--drawer-y:100%]",
 				"after:inset-x-0",
 				"after:top-full",
 				"after:h-12",
@@ -132,11 +182,29 @@ const drawerPopupVariants = cva([
 			"6xl": ["[--drawer-size:var(--container-6xl)]"],
 			"7xl": ["[--drawer-size:var(--container-7xl)]"],
 			full: ["[--drawer-size:100%]"]
+		},
+		snapPoints: {
+			true: [],
+			false: []
 		}
 	},
+	compoundVariants: [{
+		side: "bottom",
+		snapPoints: false,
+		className: ["pb-[env(safe-area-inset-bottom)]"]
+	}, {
+		side: "bottom",
+		snapPoints: true,
+		className: [
+			"pb-[calc(max(0px,var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))+env(safe-area-inset-bottom))]",
+			"data-starting-style:pb-[env(safe-area-inset-bottom)]",
+			"data-ending-style:pb-[env(safe-area-inset-bottom)]"
+		]
+	}],
 	defaultVariants: {
 		side: drawerDefaultVariants.side,
-		size: drawerDefaultVariants.size
+		size: drawerDefaultVariants.size,
+		snapPoints: false
 	}
 });
 //#endregion

package/dist/components/overlays/drawer/drawer-popup-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { drawerDefaultVariants } from './use-drawer-context';\n\n/**\n * Cópia de `dialogPopupVariants`, a superfície e o respiro de uma janela modal (tabela no README\n * de `overlays`). As diferenças:\n * - preso à borda do `side`, sem arredondar o lado da borda; nos lados, ocupa a altura da tela e\n *   tem a largura do `size` (em `--drawer-size`); em cima e embaixo, a altura do conteúdo até 85%\n *   da tela;\n * - entra e sai deslizando da borda, em 400ms; a saída dura menos quanto mais forte o gesto\n *   (`--drawer-swipe-strength`), e durante o arrasto não há transição, para o popup seguir o dedo;\n * - o aninhamento, a folga e a alça, abaixo.\n *\n * O deslocamento soma as variáveis que o Base UI escreve: o arrasto (`--drawer-swipe-movement-x`\n * ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`). Embaixo, o `padding-bottom`\n * cresce junto com o deslocamento, para o fim do conteúdo ficar na parte visível do popup.\n *\n * Folga: arrastando para dentro, o popup se afasta da borda. O `::after`, da cor do popup, se\n * estende 3rem além da borda e cobre o vão.\n *\n * Aninhamento: com outro drawer aberto à frente, o de trás recua 24px por nível\n * (`--nested-drawers`) para dentro da tela, encolhe 5% e escurece por `brightness`, já que o\n * `::after` está ocupado pela folga. O encolhimento parte da borda de dentro, para os 24px\n * aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga.\n *\n * Embaixo, um `::before` desenha a alça no topo, que só indica o gesto: o arrasto vale no popup\n * inteiro.\n */\nexport const drawerPopupVariants = cva(\n  [\n    '[--drawer-padding:--spacing(6)]',\n    '[--drawer-peek:--spacing(6)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n\n    'outline-1',\n    'outline-gray-6',\n    'corner-squircle',\n\n    'bg-white',\n    'dark:bg-gray-2',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    \"after:content-['']\",\n    'after:absolute',\n    'after:bg-inherit',\n    'after:pointer-events-none',\n\n    'not-motion-reduced:transition-[translate,scale,filter]',\n    'not-motion-reduced:ease-enter-emphasized',\n    'not-motion-reduced:duration-400',\n    'not-motion-reduced:data-ending-style:ease-exit-emphasized',\n    'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*300ms)]',\n    'data-swiping:duration-0',\n    'data-nested-drawer-swiping:duration-0',\n    'data-swiping:select-none',\n\n    'data-nested-drawer-open:scale-[calc(1-0.05*var(--nested-drawers))]',\n    'data-nested-drawer-open:brightness-80',\n  ],\n  {\n    variants: {\n      side: {\n        right: [\n          'h-full',\n          'max-w-(--drawer-size)',\n          'rounded-l-lg',\n          'origin-left',\n\n          'translate-x-[calc(var(--drawer-swipe-movement-x,0px)-var(--nested-drawers,0)*var(--drawer-peek))]',\n          'data-starting-style:translate-x-full',\n          'data-ending-style:translate-x-full',\n\n          'after:inset-y-0',\n          'after:left-full',\n          'after:w-12',\n        ],\n        left: [\n          'h-full',\n          'max-w-(--drawer-size)',\n          'rounded-r-lg',\n          'origin-right',\n\n          'translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--nested-drawers,0)*var(--drawer-peek))]',\n          'data-starting-style:-translate-x-full',\n          'data-ending-style:-translate-x-full',\n\n          'after:inset-y-0',\n          'after:right-full',\n          'after:w-12',\n        ],\n        top: [\n          'max-h-[85dvh]',\n          'rounded-b-lg',\n          'origin-bottom',\n\n          'translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--nested-drawers,0)*var(--drawer-peek))]',\n          'data-starting-style:-translate-y-full',\n          'data-ending-style:-translate-y-full',\n\n          'after:inset-x-0',\n          'after:bottom-full',\n          'after:h-12',\n        ],\n        bottom: [\n          'max-h-[85dvh]',\n          'rounded-t-lg',\n          'origin-top',\n\n          'translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)-var(--nested-drawers,0)*var(--drawer-peek))]',\n          'pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]',\n          'data-starting-style:translate-y-full',\n          'data-ending-style:translate-y-full',\n          'data-starting-style:pb-0',\n          'data-ending-style:pb-0',\n\n          'after:inset-x-0',\n          'after:top-full',\n          'after:h-12',\n\n          \"before:content-['']\",\n          'before:absolute',\n          'before:top-2',\n          'before:left-1/2',\n          'before:-translate-x-1/2',\n          'before:h-1',\n          'before:w-10',\n          'before:rounded-full',\n          'before:bg-gray-6',\n        ],\n      },\n      size: {\n        xs: ['[--drawer-size:var(--container-xs)]'],\n        sm: ['[--drawer-size:var(--container-sm)]'],\n        md: ['[--drawer-size:var(--container-md)]'],\n        lg: ['[--drawer-size:var(--container-lg)]'],\n        xl: ['[--drawer-size:var(--container-xl)]'],\n        '2xl': ['[--drawer-size:var(--container-2xl)]'],\n        '3xl': ['[--drawer-size:var(--container-3xl)]'],\n        '4xl': ['[--drawer-size:var(--container-4xl)]'],\n        '5xl': ['[--drawer-size:var(--container-5xl)]'],\n        '6xl': ['[--drawer-size:var(--container-6xl)]'],\n        '7xl': ['[--drawer-size:var(--container-7xl)]'],\n        full: ['[--drawer-size:100%]'],\n      },\n    },\n    defaultVariants: {\n      side: drawerDefaultVariants.side,\n      size: drawerDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,sBAAsB,IACjC;CACE;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;IACL;IACA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,MAAM,CAAC,sBAAsB;EAC/B;CACF;CACA,iBAAiB;EACf,MAAM,sBAAsB;EAC5B,MAAM,sBAAsB;CAC9B;AACF,CACF"}
+{"version":3,"file":"drawer-popup-variants.js","names":[],"sources":["../../../../src/components/overlays/drawer/drawer-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { drawerDefaultVariants } from './use-drawer-context';\n\n/**\n * Cópia de `dialogPopupVariants`, a superfície e o respiro de uma janela modal (tabela no README\n * de `overlays`). As diferenças:\n * - preso à borda do `side`, sem arredondar o lado da borda; nos lados, ocupa a altura da tela e\n *   tem a largura do `size` (em `--drawer-size`); em cima e embaixo, a altura do conteúdo até 85%\n *   da tela;\n * - entra e sai deslizando da borda (tempos abaixo); a saída dura menos quanto mais forte o gesto\n *   (`--drawer-swipe-strength`), e durante o arrasto não há transição, para o popup seguir o dedo;\n * - o aninhamento, a folga e a alça, abaixo.\n *\n * **Posição.** O deslocamento soma as variáveis que o Base UI escreve: o arrasto\n * (`--drawer-swipe-movement-x` ou `-y`) e, embaixo, o snap point (`--drawer-snap-point-offset`),\n * mais o recuo do aninhamento (`--drawer-nested-*`). Ao entrar e sair, `--drawer-x` ou `--drawer-y`\n * vira 100% do tamanho, para fora da borda.\n *\n * Embaixo, com `snapPoints`, o `padding-bottom` cresce junto com o deslocamento, para o fim do\n * conteúdo ficar na parte visível do popup. Só com eles: num popup que não chegou à altura\n * máxima, o padding aumenta a altura para cima na mesma medida em que o arrasto o empurra para\n * baixo, e a borda de cima não acompanharia o dedo.\n *\n * **Área segura.** Cada lado soma ao respiro os `env(safe-area-inset-*)` das bordas que o popup\n * toca: o indicador de início e o entalhe do iPhone cobririam o rodapé e o título. Vale 0 fora\n * deles, e só tem valor se a página declarar `viewport-fit=cover` no `<meta name=\"viewport\">`.\n *\n * **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um\n * `transform` inline (`translate3d() scale()`) para prender o popup ao dedo. As propriedades\n * `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao `transform` em vez de\n * serem trocadas por ele: o popup andaria o dobro do dedo e, ao soltar, pularia de volta a\n * metade. O `transform` daqui usa as mesmas funções, na mesma ordem: ao soltar, a transição parte\n * do inline e interpola função por função.\n *\n * **Tempos.** Entra em 450ms e sai em 400ms, os dois na curva que desacelera: a saída começa a\n * andar na hora, sem hesitar, e a saída pelo arrasto continua o movimento do dedo em vez de partir\n * do repouso, o que pareceria um tranco ao soltar. O `Drawer.Backdrop` usa os mesmos tempos, para\n * os dois andarem juntos.\n *\n * Folga: arrastando para dentro, o popup se afasta da borda. O `::after`, da cor do popup, se\n * estende 3rem além da borda e cobre o vão.\n *\n * Aninhamento: com outro drawer aberto à frente, o de trás recua 24px por nível\n * (`--nested-drawers`) para dentro da tela, encolhe 5% e escurece por `brightness`, já que o\n * `::after` está ocupado pela folga. O encolhimento parte da borda de dentro, para os 24px\n * aparecerem inteiros; o vão que abre na borda da tela fica coberto pela folga. Enquanto o da\n * frente é arrastado, o Base UI escreve o progresso dele (0 a 1) em `--drawer-swipe-progress` nos\n * de trás: `--drawer-nested-depth` desconta esse progresso da profundidade, e recuo, escala e\n * brilho voltam junto com o gesto, em vez de esperar o drawer da frente sair.\n *\n * Embaixo, um `::before` desenha a alça no topo, que só indica o gesto: o arrasto vale no popup\n * inteiro.\n */\n/**\n * Em cima e embaixo, a altura segue o conteúdo, e os drawers empilhados têm alturas diferentes:\n * sem acerto, o de trás, mais baixo, sumiria atrás do da frente, e o mais alto mostraria uma faixa\n * maior que o recuo. Com outro drawer à frente, o de trás passa a ter a altura do da frente\n * (`--drawer-frontmost-height`, escrita pelo Base UI) e corta o que passa dela. A altura anima\n * a partir de `--drawer-height`, que o Base UI escreve em px enquanto há drawer aninhado; antes\n * disso fica `auto`. O conteúdo some, porque cortado pela metade pareceria quebrado, e volta\n * enquanto o da frente é arrastado.\n */\nconst nestedHeights = [\n  'h-(--drawer-height,auto)',\n  'data-nested-drawer-open:h-[var(--drawer-frontmost-height,var(--drawer-height))]',\n  'data-nested-drawer-open:overflow-hidden',\n\n  '*:not-motion-reduced:transition-opacity',\n  '*:not-motion-reduced:duration-300',\n  'data-nested-drawer-open:*:opacity-0',\n  'data-nested-drawer-swiping:*:opacity-100',\n];\n\nexport const drawerPopupVariants = cva(\n  [\n    '[--drawer-padding:--spacing(4)]',\n    '[--drawer-peek:--spacing(6)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'w-full',\n\n    'outline-1',\n    'outline-gray-6',\n\n    'bg-white',\n    'dark:bg-gray-2',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    \"after:content-['']\",\n    'after:absolute',\n    'after:bg-inherit',\n    'after:pointer-events-none',\n\n    '[--drawer-x:calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-nested-x,0px))]',\n    '[--drawer-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)+var(--drawer-nested-y,0px))]',\n    '[--drawer-nested-depth:max(0,calc(var(--nested-drawers,0)-var(--drawer-swipe-progress,0)))]',\n    '[--drawer-scale:1]',\n    '[transform:translate3d(var(--drawer-x),var(--drawer-y),0)_scale(var(--drawer-scale))]',\n\n    'not-motion-reduced:transition-[transform,filter,height,max-height]',\n    'not-motion-reduced:duration-450',\n    'not-motion-reduced:ease-enter-emphasized',\n    'not-motion-reduced:data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]',\n    'data-swiping:duration-0',\n    'data-nested-drawer-swiping:duration-0',\n    'data-swiping:select-none',\n\n    'data-nested-drawer-open:[--drawer-scale:calc(1-0.05*var(--drawer-nested-depth))]',\n    'data-nested-drawer-open:[filter:brightness(calc(1-0.2*min(1,var(--drawer-nested-depth))))]',\n  ],\n  {\n    variants: {\n      side: {\n        right: [\n          'h-full',\n          'max-w-(--drawer-size)',\n          'origin-left',\n\n          'pt-[env(safe-area-inset-top)]',\n          'pr-[env(safe-area-inset-right)]',\n          'pb-[env(safe-area-inset-bottom)]',\n\n          '[--drawer-nested-x:calc(var(--drawer-nested-depth)*var(--drawer-peek)*-1)]',\n          'data-starting-style:[--drawer-x:100%]',\n          'data-ending-style:[--drawer-x:100%]',\n\n          'after:inset-y-0',\n          'after:left-full',\n          'after:w-12',\n        ],\n        left: [\n          'h-full',\n          'max-w-(--drawer-size)',\n          'origin-right',\n\n          'pt-[env(safe-area-inset-top)]',\n          'pl-[env(safe-area-inset-left)]',\n          'pb-[env(safe-area-inset-bottom)]',\n\n          '[--drawer-nested-x:calc(var(--drawer-nested-depth)*var(--drawer-peek))]',\n          'data-starting-style:[--drawer-x:-100%]',\n          'data-ending-style:[--drawer-x:-100%]',\n\n          'after:inset-y-0',\n          'after:right-full',\n          'after:w-12',\n        ],\n        top: [\n          'max-h-[85dvh]',\n          'origin-bottom',\n          ...nestedHeights,\n\n          'pt-[env(safe-area-inset-top)]',\n          'px-[env(safe-area-inset-left)]',\n\n          '[--drawer-nested-y:calc(var(--drawer-nested-depth)*var(--drawer-peek))]',\n          'data-starting-style:[--drawer-y:-100%]',\n          'data-ending-style:[--drawer-y:-100%]',\n\n          'after:inset-x-0',\n          'after:bottom-full',\n          'after:h-12',\n        ],\n        bottom: [\n          'max-h-[calc(85dvh-var(--drawer-keyboard-inset,0px))]',\n          'origin-top',\n          ...nestedHeights,\n\n          'px-[env(safe-area-inset-left)]',\n\n          '[--drawer-nested-y:calc(var(--drawer-nested-depth)*var(--drawer-peek)*-1)]',\n          'data-starting-style:[--drawer-y:100%]',\n          'data-ending-style:[--drawer-y:100%]',\n\n          'after:inset-x-0',\n          'after:top-full',\n          'after:h-12',\n\n          \"before:content-['']\",\n          'before:absolute',\n          'before:top-2',\n          'before:left-1/2',\n          'before:-translate-x-1/2',\n          'before:h-1',\n          'before:w-10',\n          'before:rounded-full',\n          'before:bg-gray-6',\n        ],\n      },\n      size: {\n        xs: ['[--drawer-size:var(--container-xs)]'],\n        sm: ['[--drawer-size:var(--container-sm)]'],\n        md: ['[--drawer-size:var(--container-md)]'],\n        lg: ['[--drawer-size:var(--container-lg)]'],\n        xl: ['[--drawer-size:var(--container-xl)]'],\n        '2xl': ['[--drawer-size:var(--container-2xl)]'],\n        '3xl': ['[--drawer-size:var(--container-3xl)]'],\n        '4xl': ['[--drawer-size:var(--container-4xl)]'],\n        '5xl': ['[--drawer-size:var(--container-5xl)]'],\n        '6xl': ['[--drawer-size:var(--container-6xl)]'],\n        '7xl': ['[--drawer-size:var(--container-7xl)]'],\n        full: ['[--drawer-size:100%]'],\n      },\n      snapPoints: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'bottom',\n        snapPoints: false,\n        className: ['pb-[env(safe-area-inset-bottom)]'],\n      },\n      {\n        side: 'bottom',\n        snapPoints: true,\n        className: [\n          'pb-[calc(max(0px,var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))+env(safe-area-inset-bottom))]',\n          'data-starting-style:pb-[env(safe-area-inset-bottom)]',\n          'data-ending-style:pb-[env(safe-area-inset-bottom)]',\n        ],\n      },\n    ],\n    defaultVariants: {\n      side: drawerDefaultVariants.side,\n      size: drawerDefaultVariants.size,\n      snapPoints: false,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,gBAAgB;CACpB;CACA;CACA;CAEA;CACA;CACA;CACA;AACF;AAEA,MAAa,sBAAsB,IACjC;CACE;CACA;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;IACL;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,KAAK;IACH;IACA;IACA,GAAG;IAEH;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA,GAAG;IAEH;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,IAAI,CAAC,qCAAqC;GAC1C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,OAAO,CAAC,sCAAsC;GAC9C,MAAM,CAAC,sBAAsB;EAC/B;EACA,YAAY;GACV,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,MAAM;EACN,YAAY;EACZ,WAAW,CAAC,kCAAkC;CAChD,GACA;EACE,MAAM;EACN,YAAY;EACZ,WAAW;GACT;GACA;GACA;EACF;CACF,CACF;CACA,iBAAiB;EACf,MAAM,sBAAsB;EAC5B,MAAM,sBAAsB;EAC5B,YAAY;CACd;AACF,CACF"}

package/dist/components/overlays/drawer/drawer-popup.js

@@ -13,12 +13,13 @@ import { Drawer } from "@base-ui/react/drawer";
 */
 const DrawerPopup = (props) => {
 	const { className, ...rest } = props;
-	const { side, size } = useDrawerContext();
+	const { side, size, hasSnapPoints } = useDrawerContext();
 	return /* @__PURE__ */ jsx(Drawer.Popup, {
 		"data-component": "Drawer.Popup",
 		className: mergeStateClassNames(drawerPopupVariants({
 			side,
-			size
+			size,
+			snapPoints: hasSnapPoints
 		}), className),
 		...rest
 	});