@veracity/vui 3.0.0-beta.5 → 3.0.0-beta.6

package/dist/dialog/dialog.js

@@ -0,0 +1,9 @@
+import{isJsx as e,isReactText as t}from"../utils/assertion.js";import{random as n}from"../utils/number.js";import{useIds as r}from"../utils/react.js";import{cs as i}from"../utils/styles.js";import{useStyleConfig as a}from"../core/theme.js";import{styled as o}from"../core/styled.js";import{vui as s}from"../core/vui.js";import{modalAnimation as c,modalJustifyContent as l}from"./consts.js";import{DialogProvider as u}from"./context.js";import d from"../modal/modal.js";import f from"./dialogBody.js";import p from"./dialogCancelButton.js";import m from"./dialogCloseButton.js";import h from"./dialogSubmitButton.js";import g from"./dialogFooter.js";import _ from"./dialogIcon.js";import v from"./dialogTitle.js";import y from"./dialogHeader.js";import{useRef as b}from"react";import{Fragment as x,jsx as S,jsxs as C}from"react/jsx-runtime";const w=o.divBox`
+  background-color: white;
+  border-radius: 1px;
+  box-shadow: modal;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,T=s((o,s)=>{let{body:p,cancelButton:m,children:h,className:_,closeButton:v,disableBackdropClose:T,footer:E,header:D,icon:O,id:k,isOpen:A,modalProps:j,placement:M=`center`,onClose:N,size:P,status:F,submitButton:I,title:L,variant:R,...z}=o,B=a(`Dialog`,o),V=b(k??n().toString()),[H,U,W]=r(V.current,[`dialog`,`dialog-body`,`dialog-title`]),G=t(p)?{children:p}:p,K=!!(D||v||O||L),q=!!(E||m||I),J={"aria-describedby":U,"aria-labelledby":W},Y={animation:c[M],contentProps:{alignItems:M===`center`?`center`:`auto`,justifyContent:l[M],...j?.contentProps},...j};return S(u,{value:{bodyId:U,icon:O,isOpen:A,onClose:N,size:P,status:F,titleId:W,variant:R},children:S(d,{isOpen:A,onClose:N,...Y,disableBackdropClose:T,children:S(w,{className:i(`vui-dialog`,_),id:H,maxH:M===`center`?`calc(100vh - 32px)`:`100%`,ref:s,role:`dialog`,...J,...B.container,...z,children:h??C(x,{children:[e(D)?D:K&&S(y,{closeButton:v,icon:O,title:L,...D}),e(G)?G:G&&S(f,{...G}),e(E)?E:q&&S(g,{cancelButton:m,submitButton:I,...E})]})})})})});T.Body=f,T.CancelButton=p,T.CloseButton=m,T.Footer=g,T.Header=y,T.Icon=_,T.SubmitButton=h,T.Title=v,T.displayName=`Dialog`;var E=T;export{w as DialogBase,E as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Modal","DialogHeader","DialogBody","DialogFooter","DialogCancelButton","DialogCloseButton","DialogIcon","DialogSubmitButton","DialogTitle"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Modal } from '../modal'\nimport { cs, isJsx, isReactText, random, useIds } from '../utils'\nimport { modalAnimation, modalJustifyContent } from './consts'\nimport { DialogProvider } from './context'\nimport type { DialogProps } from './dialog.types'\nimport DialogBody from './dialogBody'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogFooter from './dialogFooter'\nimport DialogHeader from './dialogHeader'\nimport DialogIcon from './dialogIcon'\nimport DialogSubmitButton from './dialogSubmitButton'\nimport DialogTitle from './dialogTitle'\n\nexport const DialogBase = styled.divBox`\n  background-color: white;\n  border-radius: 1px;\n  box-shadow: modal;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`\n\n/**\n * Displays content in a Modal window. Includes required accessibility configuration.\n *\n * Dialog is built upon `Modal`.\n *\n * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.\n */\nexport const Dialog = vui<'div', DialogProps>((props, ref) => {\n  const {\n    body: bodyProp,\n    cancelButton,\n    children,\n    className,\n    closeButton,\n    disableBackdropClose,\n    footer,\n    header,\n    icon,\n    id,\n    isOpen,\n    modalProps: modalPropsProp,\n    placement = 'center',\n    onClose,\n    size,\n    status,\n    submitButton,\n    title,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Dialog', props)\n\n  const idRef = useRef(id ?? random().toString())\n  const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title'])\n\n  const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp\n  const showHeader = Boolean(header || closeButton || icon || title)\n  const showFooter = Boolean(footer || cancelButton || submitButton)\n\n  const ariaProps = {\n    'aria-describedby': bodyId,\n    'aria-labelledby': titleId,\n  }\n\n  const modalProps = {\n    animation: modalAnimation[placement as keyof typeof modalAnimation],\n    contentProps: {\n      alignItems: placement === 'center' ? 'center' : 'auto',\n      justifyContent: modalJustifyContent[placement as keyof typeof modalJustifyContent],\n      ...modalPropsProp?.contentProps,\n    },\n    ...modalPropsProp,\n  }\n\n  const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }\n\n  return (\n    <DialogProvider value={context}>\n      <Modal {...{ isOpen, onClose }} {...{ ...modalProps, disableBackdropClose }}>\n        <DialogBase\n          className={cs('vui-dialog', className)}\n          id={dialogId}\n          maxH={placement === 'center' ? 'calc(100vh - 32px)' : '100%'}\n          ref={ref}\n          role=\"dialog\"\n          {...ariaProps}\n          {...styles.container}\n          {...rest}\n        >\n          {children ?? (\n            <>\n              {isJsx(header) ? header : showHeader && <DialogHeader {...{ closeButton, icon, title }} {...header} />}\n\n              {isJsx(body) ? body : body && <DialogBody {...body} />}\n\n              {isJsx(footer) ? footer : showFooter && <DialogFooter {...{ cancelButton, submitButton }} {...footer} />}\n            </>\n          )}\n        </DialogBase>\n      </Modal>\n    </DialogProvider>\n  )\n}) as VuiComponent<'div', DialogProps> & {\n  Body: typeof DialogBody\n  CancelButton: typeof DialogCancelButton\n  CloseButton: typeof DialogCloseButton\n  Footer: typeof DialogFooter\n  Header: typeof DialogHeader\n  Icon: typeof DialogIcon\n  SubmitButton: typeof DialogSubmitButton\n  Title: typeof DialogTitle\n}\n\nDialog.Body = DialogBody\nDialog.CancelButton = DialogCancelButton\nDialog.CloseButton = DialogCloseButton\nDialog.Footer = DialogFooter\nDialog.Header = DialogHeader\nDialog.Icon = DialogIcon\nDialog.SubmitButton = DialogSubmitButton\nDialog.Title = DialogTitle\nDialog.displayName = 'Dialog'\n\nexport default Dialog\n"],"mappings":"w0BAkBA,MAAa,EAAa,EAAO,MAAM;;;;;;;EAgB1B,EAAS,GAAyB,EAAO,IAAQ,CAC5D,GAAM,CACJ,KAAM,EACN,eACA,WACA,YACA,cACA,uBACA,SACA,SACA,OACA,KACA,SACA,WAAY,EACZ,YAAY,SACZ,UACA,OACA,SACA,eACA,QACA,UACA,GAAG,GACD,EACE,EAAS,EAAe,SAAU,EAAM,CAExC,EAAQ,EAAO,GAAM,GAAQ,CAAC,UAAU,CAAC,CACzC,CAAC,EAAU,EAAQ,GAAW,EAAO,EAAM,QAAS,CAAC,SAAU,cAAe,eAAe,CAAC,CAE9F,EAAO,EAAY,EAAS,CAAG,CAAE,SAAU,EAAU,CAAG,EACxD,EAAa,GAAQ,GAAU,GAAe,GAAQ,GACtD,EAAa,GAAQ,GAAU,GAAgB,GAE/C,EAAY,CAChB,mBAAoB,EACpB,kBAAmB,EACpB,CAEK,EAAa,CACjB,UAAW,EAAe,GAC1B,aAAc,CACZ,WAAY,IAAc,SAAW,SAAW,OAChD,eAAgB,EAAoB,GACpC,GAAG,GAAgB,aACpB,CACD,GAAG,EACJ,CAID,OACE,EAAC,EAAA,CAAe,MAHF,CAAE,SAAQ,OAAM,SAAQ,UAAS,OAAM,SAAQ,UAAS,UAAS,UAI7E,EAACA,EAAAA,CAAY,SAAQ,UAAiB,GAAG,EAAY,gCACnD,EAAC,EAAA,CACC,UAAW,EAAG,aAAc,EAAU,CACtC,GAAI,EACJ,KAAM,IAAc,SAAW,qBAAuB,OACjD,MACL,KAAK,SACL,GAAI,EACJ,GAAI,EAAO,UACX,GAAI,WAEH,GACC,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,EAAO,CAAG,EAAS,GAAc,EAACC,EAAAA,CAAmB,cAAa,OAAM,QAAS,GAAI,GAAU,CAErG,EAAM,EAAK,CAAG,EAAO,GAAQ,EAACC,EAAAA,CAAW,GAAI,EAAA,CAAQ,CAErD,EAAM,EAAO,CAAG,EAAS,GAAc,EAACC,EAAAA,CAAmB,eAAc,eAAgB,GAAI,GAAU,GACvG,EAEM,EACP,EACO,EAEnB,CAWF,EAAO,KAAOD,EACd,EAAO,aAAeE,EACtB,EAAO,YAAcC,EACrB,EAAO,OAASF,EAChB,EAAO,OAASF,EAChB,EAAO,KAAOK,EACd,EAAO,aAAeC,EACtB,EAAO,MAAQC,EACf,EAAO,YAAc,SAErB,IAAA,EAAe"}

package/dist/dialog/dialog.types.d.ts

@@ -0,0 +1,56 @@
+import { PropsOf } from "../utils/types.js";
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { BoxProps } from "../box/box.types.js";
+import { IconProp, IconProps } from "../icon/icon.types.js";
+import { ButtonProps, IconButtonProps } from "../button/button.types.js";
+import { HeadingProps } from "../heading/heading.types.js";
+import { ModalProps } from "../modal/modal.types.js";
+
+//#region src/dialog/dialog.types.d.ts
+type DialogBodyProps = PropsOf<'div', BoxProps>;
+type DialogCancelButtonProps = PropsOf<'button', ButtonProps>;
+type DialogCloseButtonProps = PropsOf<'button', IconButtonProps>;
+type DialogContext = Pick<DialogProps, 'icon' | 'isOpen' | 'onClose' | 'size' | 'status' | 'variant'> & {
+  bodyId?: string;
+  titleId?: string;
+};
+type DialogFooterProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'cancelButton' | 'submitButton'>>;
+type DialogHeaderProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'closeButton' | 'icon' | 'title'>>;
+type DialogIconProps = PropsOf<'svg', IconProps>;
+type DialogPlacement = 'left' | 'center' | 'right';
+type DialogProps = SystemProps & ThemingProps<'Dialog'> & Pick<ModalProps, 'isOpen' | 'onClose'> & {
+  /** Socket for the main Dialog content. */
+  body?: string | number | DialogBodyProps | JSX.Element;
+  /** Socket for a cancel button in the Dialog Footer. */
+  cancelButton?: DialogCancelButtonProps | JSX.Element;
+  /** Socket for a close icon button in the Dialog Header. */
+  closeButton?: boolean | DialogCloseButtonProps | JSX.Element;
+  /** Clicking Backdrop element will not trigger 'onClose'. */
+  disableBackdropClose?: boolean;
+  /** Socket for a footer with buttons below Dialog Body. */
+  footer?: DialogFooterProps | JSX.Element;
+  /** Socket for a header with title and icon above the Dialog Body */
+  header?: DialogHeaderProps | JSX.Element;
+  /** Socket for a custom icon in the Dialog Header. */
+  icon?: IconProp | DialogIconProps | JSX.Element;
+  /** The props being passed into the internal Modal component. */
+  modalProps?: ModalProps;
+  /** Position of the dialog @default center */
+  placement?: DialogPlacement;
+  /** Adds an icon for a given status, such as error or warning. */
+  status?: DialogStatus;
+  /** Socket for a submit button in the Dialog Footer. */
+  submitButton?: DialogSubmitButtonProps | JSX.Element;
+  /** Socket for a title in the Dialog Header. */
+  title?: HeadingProps['text'] | DialogTitleProps | JSX.Element;
+};
+type DialogStatus = 'danger' | 'error' | 'info' | 'warning';
+type DialogStatusMapping = Record<string, {
+  iconProps: IconProps;
+}>;
+type DialogSubmitButtonProps = PropsOf<'button', ButtonProps>;
+type DialogTitleProps = PropsOf<'h4', HeadingProps>;
+//#endregion
+export { DialogBodyProps, DialogCancelButtonProps, DialogCloseButtonProps, DialogContext, DialogFooterProps, DialogHeaderProps, DialogIconProps, DialogPlacement, DialogProps, DialogStatus, DialogStatusMapping, DialogSubmitButtonProps, DialogTitleProps };
+//# sourceMappingURL=dialog.types.d.ts.map

package/dist/dialog/dialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.types.d.ts","names":[],"sources":["../../src/dialog/dialog.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KASY,eAAA,GAAkB,eAAe;KAEjC,uBAAA,GAA0B,kBAAkB;AAF5C,KAIA,sBAAA,GAAyB,OAJV,CAAA,QAAA,EAI4B,eAJ5B,CAAA;AAAA,KAMf,aAAA,GAAgB,IAND,CAMM,WANN,EAAA,MAAA,GAAA,QAAA,GAAA,SAAA,GAAA,MAAA,GAAA,QAAA,GAAA,SAAA,CAAA,GAAA;QAAkB,CAAA,EAAA,MAAA;SAAf,CAAA,EAAA,MAAA;CAAO;AAEzB,KASA,iBAAA,GAAoB,OATG,CAAA,KAAA,EASY,QATZ,GASuB,IATvB,CAS4B,WAT5B,EAAA,cAAA,GAAA,cAAA,CAAA,CAAA;AAAA,KAWvB,iBAAA,GAAoB,OAXG,CAAA,KAAA,EAWY,QAXZ,GAWuB,IAXvB,CAW4B,WAX5B,EAAA,aAAA,GAAA,MAAA,GAAA,OAAA,CAAA,CAAA;AAAqB,KAa5C,eAAA,GAAkB,OAb0B,CAAA,KAAA,EAaX,SAbW,CAAA;AAAlB,KAe1B,eAAA,GAf0B,MAAA,GAAA,QAAA,GAAA,OAAA;AAAO,KAiBjC,WAAA,GAAc,WAjBmB,GAkB3C,YAlB2C,CAAA,QAAA,CAAA,GAmB3C,IAnB2C,CAmBtC,UAnBsC,EAAA,QAAA,GAAA,SAAA,CAAA,GAAA;EAEjC;EAAsB,IAAA,CAAA,EAAA,MAAA,GAAA,MAAA,GAmBL,eAnBK,GAmBa,GAAA,CAAI,OAnBjB;;cAAG,CAAA,EAqBlB,uBArBkB,GAqBQ,GAAA,CAAI,OArBZ;EAAO;EAEhC,WAAA,CAAA,EAAA,OAAa,GAqBG,sBArBH,GAqB4B,GAAA,CAAI,OArBhC;EAAA;sBAAQ,CAAA,EAAA,OAAA;;EAAD,MAAA,CAAA,EAyBnB,iBAzBmB,GAyBC,GAAA,CAAI,OAzBL;EAKpB;EAAiB,MAAA,CAAA,EAsBhB,iBAtBgB,GAsBI,GAAA,CAAI,OAtBR;;MAAkC,CAAA,EAwBpD,QAxBoD,GAwBzC,eAxByC,GAwBvB,GAAA,CAAI,OAxBmB;;YAA/B,CAAA,EA0Bf,UA1Be;EAAO;EAE3B,SAAA,CAAA,EA0BI,eA1Ba;EAAA;QAAkB,CAAA,EA4BlC,YA5BkC;;cAAW,CAAA,EA8BvC,uBA9BuC,GA8Bb,GAAA,CAAI,OA9BS;;EAAnB,KAAA,CAAA,EAgC3B,YAhC2B,CAAA,MAAA,CAAA,GAgCJ,gBAhCI,GAgCe,GAAA,CAAI,OAhCnB;AAEvC,CAAA;AAA2B,KAiCf,YAAA,GAjCe,QAAA,GAAA,OAAA,GAAA,MAAA,GAAA,SAAA;AAAkB,KAmCjC,mBAAA,GAAsB,MAnCW,CAAA,MAAA,EAAA;WAAf,EAmCgC,SAnChC;CAAO,CAAA;AAEzB,KAmCA,uBAAA,GAA0B,OAnCX,CAAA,QAAA,EAmC6B,WAnC7B,CAAA;AAEf,KAmCA,gBAAA,GAAmB,OAnCR,CAAA,IAAA,EAmCsB,YAnCtB,CAAA"}

package/dist/dialog/dialogBody.d.ts

@@ -0,0 +1,15 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogBodyProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogBody.d.ts
+
+/**
+ * Shows the main content between the Dialog Header and Footer.
+ * It becomes scrollable when content does not fit vertically. Borders are shown automatically.
+ * Receives more horizontal padding when Dialog has icon, so align text with title.
+ * Receives id linked to aria-describedby on the Dialog for accessibility.
+ */
+declare const DialogBody: VuiComponent<"div", DialogBodyProps>;
+//#endregion
+export { DialogBody };
+//# sourceMappingURL=dialogBody.d.ts.map

package/dist/dialog/dialogBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogBody.d.ts","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAcA;;;cAAa,gCAAU"}

package/dist/dialog/dialogBody.js

@@ -0,0 +1,2 @@
+import{mergeRefs as e}from"../utils/react.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import{Box as i}from"../box/box.js";import{useDialogContext as a}from"./context.js";import{useEffect as o,useRef as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";const u=r((r,u)=>{let{className:d,...f}=r,{bodyId:p,icon:m,status:h}=a()??{},g=n(`Dialog`,a()),[_,v]=c(!1),y=s(null),b=s(new ResizeObserver(()=>{if(y.current){let{clientHeight:e,scrollHeight:t}=y.current;v(t>e)}}));o(()=>{y.current&&b.current?.observe(y.current)},[]);let x=_?{borderColor:`grey.30`}:{},S=(m??h)===void 0?{px:3}:{px:8};return l(i,{borderBottom:`1px solid transparent`,borderTop:`1px solid transparent`,className:t(`vui-dialogBody`,d),column:!0,id:p,overflowY:`auto`,pb:2,pt:1.5,ref:e(u,y),...x,...S,...g.body,...f})});u.displayName=`DialogBody`;var d=u;export{u as DialogBody,d as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogBody.js.map

package/dist/dialog/dialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogBody.js","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogBodyProps } from './dialog.types'\n\n/**\n * Shows the main content between the Dialog Header and Footer.\n * It becomes scrollable when content does not fit vertically. Borders are shown automatically.\n * Receives more horizontal padding when Dialog has icon, so align text with title.\n * Receives id linked to aria-describedby on the Dialog for accessibility.\n */\nexport const DialogBody = vui<'div', DialogBodyProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { bodyId, icon, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const [isScrolled, setIsScrolled] = useState(false)\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  // Observe size changes of the body to detect if it becomes vertically scrollable\n  const observerRef = useRef(\n    new ResizeObserver(() => {\n      if (bodyRef.current) {\n        const { clientHeight, scrollHeight } = bodyRef.current\n        setIsScrolled(scrollHeight > clientHeight)\n      }\n    }),\n  )\n\n  useEffect(() => {\n    bodyRef.current && observerRef.current?.observe(bodyRef.current)\n  }, [])\n\n  // If body can be scrolled vertically, add dividing lines on top and bottom\n  const borderProps = isScrolled ? { borderColor: 'grey.30' } : {}\n\n  // Add more body padding when custom or status icon is displayed\n  const paddingProps = (icon ?? status) !== undefined ? { px: 8 } : { px: 3 }\n\n  return (\n    <Box\n      borderBottom=\"1px solid transparent\"\n      borderTop=\"1px solid transparent\"\n      className={cs('vui-dialogBody', className)}\n      column\n      id={bodyId}\n      overflowY=\"auto\"\n      pb={2}\n      pt={1.5}\n      ref={mergeRefs(ref, bodyRef)}\n      {...borderProps}\n      {...paddingProps}\n      {...styles.body}\n      {...rest}\n    />\n  )\n})\n\nDialogBody.displayName = 'DialogBody'\n\nexport default DialogBody\n"],"mappings":"qWAcA,MAAa,EAAa,GAA6B,EAAO,IAAQ,CACpE,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,CAAE,SAAQ,OAAM,UAAW,GAAkB,EAAI,EAAE,CACnD,EAAS,EAAe,SAAU,GAAkB,CAAC,CAErD,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAU,EAAuB,KAAK,CAGtC,EAAc,EAClB,IAAI,mBAAqB,CACvB,GAAI,EAAQ,QAAS,CACnB,GAAM,CAAE,eAAc,gBAAiB,EAAQ,QAC/C,EAAc,EAAe,EAAa,GAE5C,CACH,CAED,MAAgB,CACd,EAAQ,SAAW,EAAY,SAAS,QAAQ,EAAQ,QAAQ,EAC/D,EAAE,CAAC,CAGN,IAAM,EAAc,EAAa,CAAE,YAAa,UAAW,CAAG,EAAE,CAG1D,GAAgB,GAAQ,KAAY,IAAA,GAAwB,CAAE,GAAI,EAAG,CAArB,CAAE,GAAI,EAAG,CAE/D,OACE,EAAC,EAAA,CACC,aAAa,wBACb,UAAU,wBACV,UAAW,EAAG,iBAAkB,EAAU,CAC1C,OAAA,GACA,GAAI,EACJ,UAAU,OACV,GAAI,EACJ,GAAI,IACJ,IAAK,EAAU,EAAK,EAAQ,CAC5B,GAAI,EACJ,GAAI,EACJ,GAAI,EAAO,KACX,GAAI,GACJ,EAEJ,CAEF,EAAW,YAAc,aAEzB,IAAA,EAAe"}

package/dist/dialog/dialogCancelButton.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogCancelButtonProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogCancelButton.d.ts
+/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
+declare const DialogCancelButton: VuiComponent<"button", DialogCancelButtonProps>;
+//#endregion
+export { DialogCancelButton };
+//# sourceMappingURL=dialogCancelButton.d.ts.map

package/dist/dialog/dialogCancelButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogCancelButton.d.ts","names":[],"sources":["../../src/dialog/dialogCancelButton.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,2CAAkB"}

package/dist/dialog/dialogCancelButton.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{LineButton as r}from"../button/buttons.js";import{useDialogContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,{onClose:l}=i()??{},u=t(`Dialog`,i());return a(r,{className:e(`vui-dialogCancelButton`,s),onClick:l,ref:o,...u.cancelButton,...c})});o.displayName=`DialogCancelButton`;var s=o;export{o as DialogCancelButton,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogCancelButton.js.map

package/dist/dialog/dialogCancelButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogCancelButton.js","names":[],"sources":["../../src/dialog/dialogCancelButton.tsx"],"sourcesContent":["import { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCancelButtonProps } from './dialog.types'\n\n/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */\nexport const DialogCancelButton = vui<'button', DialogCancelButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <LineButton\n      className={cs('vui-dialogCancelButton', className)}\n      onClick={onClose}\n      ref={ref}\n      {...styles.cancelButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCancelButton.displayName = 'DialogCancelButton'\nexport default DialogCancelButton\n"],"mappings":"yQAOA,MAAa,EAAqB,GAAwC,EAAO,IAAQ,CACvF,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,CAAE,WAAY,GAAkB,EAAI,EAAE,CACtC,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OACE,EAAC,EAAA,CACC,UAAW,EAAG,yBAA0B,EAAU,CAClD,QAAS,EACJ,MACL,GAAI,EAAO,aACX,GAAI,GACJ,EAEJ,CAEF,EAAmB,YAAc,qBACjC,IAAA,EAAe"}

package/dist/dialog/dialogCloseButton.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogCloseButtonProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogCloseButton.d.ts
+/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
+declare const DialogCloseButton: VuiComponent<"button", DialogCloseButtonProps>;
+//#endregion
+export { DialogCloseButton };
+//# sourceMappingURL=dialogCloseButton.d.ts.map

package/dist/dialog/dialogCloseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogCloseButton.d.ts","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,0CAAiB"}

package/dist/dialog/dialogCloseButton.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{CloseButton as r}from"../button/buttons.js";import{useDialogContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,size:c=`md`,...l}=n,{onClose:u}=i()??{},d=t(`Dialog`,i());return a(r,{className:e(`vui-dialogCloseButton`,s),onClick:u,position:`absolute`,ref:o,right:16,size:c,top:16,variant:`tertiaryDark`,...d.closeButton,...l})});o.displayName=`DialogCloseButton`;var s=o;export{o as DialogCloseButton,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogCloseButton.js.map

package/dist/dialog/dialogCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogCloseButton.js","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":["import { CloseButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCloseButtonProps } from './dialog.types'\n\n/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */\nexport const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {\n  const { className, size = 'md', ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <CloseButton\n      className={cs('vui-dialogCloseButton', className)}\n      onClick={onClose}\n      position=\"absolute\"\n      ref={ref}\n      right={16}\n      size={size}\n      top={16}\n      variant=\"tertiaryDark\"\n      {...styles.closeButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCloseButton.displayName = 'DialogCloseButton'\n\nexport default DialogCloseButton\n"],"mappings":"0QAOA,MAAa,EAAoB,GAAuC,EAAO,IAAQ,CACrF,GAAM,CAAE,YAAW,OAAO,KAAM,GAAG,GAAS,EACtC,CAAE,WAAY,GAAkB,EAAI,EAAE,CACtC,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OACE,EAAC,EAAA,CACC,UAAW,EAAG,wBAAyB,EAAU,CACjD,QAAS,EACT,SAAS,WACJ,MACL,MAAO,GACD,OACN,IAAK,GACL,QAAQ,eACR,GAAI,EAAO,YACX,GAAI,GACJ,EAEJ,CAEF,EAAkB,YAAc,oBAEhC,IAAA,EAAe"}

package/dist/dialog/dialogFooter.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogFooterProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogFooter.d.ts
+/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
+declare const DialogFooter: VuiComponent<"div", DialogFooterProps>;
+//#endregion
+export { DialogFooter };
+//# sourceMappingURL=dialogFooter.d.ts.map

package/dist/dialog/dialogFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogFooter.d.ts","names":[],"sources":["../../src/dialog/dialogFooter.tsx"],"sourcesContent":[],"mappings":";;;;;cASa,kCAAY"}

package/dist/dialog/dialogFooter.js

@@ -0,0 +1,2 @@
+import{isJsx as e}from"../utils/assertion.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import{Box as i}from"../box/box.js";import{useDialogContext as a}from"./context.js";import o from"./dialogCancelButton.js";import s from"./dialogSubmitButton.js";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=r((r,d)=>{let{cancelButton:f,children:p,className:m,submitButton:h,...g}=r,_=n(`Dialog`,a());return l(i,{className:t(`vui-dialogFooter`,m),justifyContent:`flex-end`,p:3,pt:2,ref:d,..._.footer,...g,children:p??u(c,{children:[e(f)?f:f&&l(o,{...f}),e(h)?h:h&&l(s,{...h})]})})});d.displayName=`DialogFooter`;var f=d;export{d as DialogFooter,f as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogFooter.js.map

package/dist/dialog/dialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogFooter.js","names":["DialogCancelButton","DialogSubmitButton"],"sources":["../../src/dialog/dialogFooter.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogFooterProps } from './dialog.types'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogSubmitButton from './dialogSubmitButton'\n\n/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */\nexport const DialogFooter = vui<'div', DialogFooterProps>((props, ref) => {\n  const { cancelButton, children, className, submitButton, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Box\n      className={cs('vui-dialogFooter', className)}\n      justifyContent=\"flex-end\"\n      p={3}\n      pt={2}\n      ref={ref}\n      {...styles.footer}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(cancelButton) ? cancelButton : cancelButton && <DialogCancelButton {...cancelButton} />}\n\n          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogFooter.displayName = 'DialogFooter'\nexport default DialogFooter\n"],"mappings":"+YASA,MAAa,EAAe,GAA+B,EAAO,IAAQ,CACxE,GAAM,CAAE,eAAc,WAAU,YAAW,eAAc,GAAG,GAAS,EAC/D,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OACE,EAAC,EAAA,CACC,UAAW,EAAG,mBAAoB,EAAU,CAC5C,eAAe,WACf,EAAG,EACH,GAAI,EACC,MACL,GAAI,EAAO,OACX,GAAI,WAEH,GACC,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,EAAa,CAAG,EAAe,GAAgB,EAACA,EAAAA,CAAmB,GAAI,EAAA,CAAgB,CAE7F,EAAM,EAAa,CAAG,EAAe,GAAgB,EAACC,EAAAA,CAAmB,GAAI,EAAA,CAAgB,CAAA,CAAA,CAC7F,EAED,EAER,CAEF,EAAa,YAAc,eAC3B,IAAA,EAAe"}

package/dist/dialog/dialogHeader.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogHeaderProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogHeader.d.ts
+/** Shows title, status icon and close button above the Dialog Body. */
+declare const DialogHeader: VuiComponent<"div", DialogHeaderProps>;
+//#endregion
+export { DialogHeader };
+//# sourceMappingURL=dialogHeader.d.ts.map

package/dist/dialog/dialogHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogHeader.d.ts","names":[],"sources":["../../src/dialog/dialogHeader.tsx"],"sourcesContent":[],"mappings":";;;;;cAUa,kCAAY"}

package/dist/dialog/dialogHeader.js

@@ -0,0 +1,2 @@
+import{isJsx as e,isReactText as t,isString as n}from"../utils/assertion.js";import{cs as r}from"../utils/styles.js";import{useStyleConfig as i}from"../core/theme.js";import{vui as a}from"../core/vui.js";import{Box as o}from"../box/box.js";import{useDialogContext as s}from"./context.js";import c from"./dialogCloseButton.js";import l from"./dialogIcon.js";import u from"./dialogTitle.js";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";const m=a((a,m)=>{let{children:h,className:g,closeButton:_,icon:v,title:y,...b}=a,{onClose:x,status:S}=s()??{},C=i(`Dialog`,s()),w=n(v)?{name:v}:v,T=!!(_===void 0?x:_),E=!!(w||S),D=t(y)?{text:y}:y;return f(o,{className:r(`vui-dialogHeader`,g),icon:w,pb:1.5,pl:3,position:`relative`,pr:8,pt:3,ref:m,...C.header,...b,children:h??p(d,{children:[e(w)?w:E&&f(l,{...w}),e(D)?D:D&&f(u,{...D}),e(_)?_:T&&f(c,{})]})})});m.displayName=`DialogHeader`;var h=m;export{m as DialogHeader,h as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogHeader.js.map

package/dist/dialog/dialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogHeader.js","names":["DialogIcon","DialogTitle","DialogCloseButton"],"sources":["../../src/dialog/dialogHeader.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx, isReactText, isString } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogHeaderProps } from './dialog.types'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogIcon from './dialogIcon'\nimport DialogTitle from './dialogTitle'\n\n/** Shows title, status icon and close button above the Dialog Body. */\nexport const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {\n  const { children, className, closeButton, icon: iconProp, title: titleProp, ...rest } = props\n  const { onClose, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const icon = isString(iconProp) ? { name: iconProp } : iconProp\n  const showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose)\n  const showIcon = Boolean(icon || status)\n  const title = isReactText(titleProp) ? { text: titleProp } : titleProp\n\n  return (\n    <Box\n      className={cs('vui-dialogHeader', className)}\n      icon={icon}\n      pb={1.5}\n      pl={3}\n      position=\"relative\"\n      pr={8}\n      pt={3}\n      ref={ref}\n      {...styles.header}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}\n\n          {isJsx(title) ? title : title && <DialogTitle {...(title as any)} />}\n\n          {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogHeader.displayName = 'DialogHeader'\nexport default DialogHeader\n"],"mappings":"qcAUA,MAAa,EAAe,GAA+B,EAAO,IAAQ,CACxE,GAAM,CAAE,WAAU,YAAW,cAAa,KAAM,EAAU,MAAO,EAAW,GAAG,GAAS,EAClF,CAAE,UAAS,UAAW,GAAkB,EAAI,EAAE,CAC9C,EAAS,EAAe,SAAU,GAAkB,CAAC,CAErD,EAAO,EAAS,EAAS,CAAG,CAAE,KAAM,EAAU,CAAG,EACjD,EAAkB,GAAQ,IAAgB,IAAA,GAA0B,EAAd,GACtD,EAAW,GAAQ,GAAQ,GAC3B,EAAQ,EAAY,EAAU,CAAG,CAAE,KAAM,EAAW,CAAG,EAE7D,OACE,EAAC,EAAA,CACC,UAAW,EAAG,mBAAoB,EAAU,CACtC,OACN,GAAI,IACJ,GAAI,EACJ,SAAS,WACT,GAAI,EACJ,GAAI,EACC,MACL,GAAI,EAAO,OACX,GAAI,WAEH,GACC,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,EAAK,CAAG,EAAO,GAAY,EAACA,EAAAA,CAAW,GAAI,EAAA,CAAQ,CAEzD,EAAM,EAAM,CAAG,EAAQ,GAAS,EAACC,EAAAA,CAAY,GAAK,EAAA,CAAiB,CAEnE,EAAM,EAAY,CAAG,EAAc,GAAmB,EAACC,EAAAA,EAAAA,CAAoB,GAC3E,EAED,EAER,CAEF,EAAa,YAAc,eAC3B,IAAA,EAAe"}

package/dist/dialog/dialogIcon.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogIconProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogIcon.d.ts
+/** Shows an icon based on a given status. Optionally, can be a custom icon. */
+declare const DialogIcon: VuiComponent<"svg", DialogIconProps>;
+//#endregion
+export { DialogIcon };
+//# sourceMappingURL=dialogIcon.d.ts.map

package/dist/dialog/dialogIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogIcon.d.ts","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cAQa,gCAAU"}

package/dist/dialog/dialogIcon.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{Icon as r}from"../icon/icon.js";import{dialogStatusMapping as i}from"./consts.js";import{useDialogContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=n((n,s)=>{let{className:c,...l}=n,{status:u=``}=a()??{},d=t(`Dialog`,a()),{iconProps:f}=i[u]??{};return o(r,{className:e(`vui-dialogIcon`,c),mr:2,ref:s,...d.icon,...f,...l})});s.displayName=`DialogIcon`;var c=s;export{s as DialogIcon,c as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogIcon.js.map

package/dist/dialog/dialogIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogIcon.js","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport { dialogStatusMapping } from './consts'\nimport { useDialogContext } from './context'\nimport type { DialogIconProps } from './dialog.types'\n\n/** Shows an icon based on a given status. Optionally, can be a custom icon. */\nexport const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { status = '' } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n  const { iconProps } = dialogStatusMapping[status] ?? {}\n\n  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />\n})\n\nDialogIcon.displayName = 'DialogIcon'\n\nexport default DialogIcon\n"],"mappings":"gTAQA,MAAa,EAAa,GAA6B,EAAO,IAAQ,CACpE,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,CAAE,SAAS,IAAO,GAAkB,EAAI,EAAE,CAC1C,EAAS,EAAe,SAAU,GAAkB,CAAC,CACrD,CAAE,aAAc,EAAoB,IAAW,EAAE,CAEvD,OAAO,EAAC,EAAA,CAAK,UAAW,EAAG,iBAAkB,EAAU,CAAE,GAAI,EAAQ,MAAK,GAAI,EAAO,KAAM,GAAI,EAAW,GAAI,GAAQ,EACtH,CAEF,EAAW,YAAc,aAEzB,IAAA,EAAe"}

package/dist/dialog/dialogSubmitButton.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogSubmitButtonProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogSubmitButton.d.ts
+/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
+declare const DialogSubmitButton: VuiComponent<"button", DialogSubmitButtonProps>;
+//#endregion
+export { DialogSubmitButton };
+//# sourceMappingURL=dialogSubmitButton.d.ts.map

package/dist/dialog/dialogSubmitButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogSubmitButton.d.ts","names":[],"sources":["../../src/dialog/dialogSubmitButton.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,2CAAkB"}

package/dist/dialog/dialogSubmitButton.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{Button as r}from"../button/button.js";import{useDialogContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,l=t(`Dialog`,i());return a(r,{className:e(`vui-dialogSubmitButton`,s),ml:2,ref:o,text:`Submit`,...l.submitButton,...c})});o.displayName=`DialogSubmitButton`;var s=o;export{o as DialogSubmitButton,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogSubmitButton.js.map

package/dist/dialog/dialogSubmitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogSubmitButton.js","names":[],"sources":["../../src/dialog/dialogSubmitButton.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogSubmitButtonProps } from './dialog.types'\n\n/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */\nexport const DialogSubmitButton = vui<'button', DialogSubmitButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Button\n      className={cs('vui-dialogSubmitButton', className)}\n      ml={2}\n      ref={ref}\n      text=\"Submit\"\n      {...styles.submitButton}\n      {...rest}\n    />\n  )\n})\n\nDialogSubmitButton.displayName = 'DialogSubmitButton'\nexport default DialogSubmitButton\n"],"mappings":"oQAOA,MAAa,EAAqB,GAAwC,EAAO,IAAQ,CACvF,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OACE,EAAC,EAAA,CACC,UAAW,EAAG,yBAA0B,EAAU,CAClD,GAAI,EACC,MACL,KAAK,SACL,GAAI,EAAO,aACX,GAAI,GACJ,EAEJ,CAEF,EAAmB,YAAc,qBACjC,IAAA,EAAe"}

package/dist/dialog/dialogTitle.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DialogTitleProps } from "./dialog.types.js";
+
+//#region src/dialog/dialogTitle.d.ts
+/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
+declare const DialogTitle: VuiComponent<"h4", DialogTitleProps>;
+//#endregion
+export { DialogTitle };
+//# sourceMappingURL=dialogTitle.d.ts.map

package/dist/dialog/dialogTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTitle.d.ts","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,gCAAW"}

package/dist/dialog/dialogTitle.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import{useDialogContext as r}from"./context.js";import{H4 as i}from"../heading/headings.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,{titleId:l}=r()??{},u=t(`Dialog`,r());return a(i,{className:e(`vui-dialogTitle`,s),id:l,ref:o,...u.title,...c})});o.displayName=`DialogTitle`;var s=o;export{o as DialogTitle,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dialogTitle.js.map

package/dist/dialog/dialogTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTitle.js","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { H4 } from '../heading'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogTitleProps } from './dialog.types'\n\n/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */\nexport const DialogTitle = vui<'h4', DialogTitleProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { titleId } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />\n})\n\nDialogTitle.displayName = 'DialogTitle'\nexport default DialogTitle\n"],"mappings":"mQAOA,MAAa,EAAc,GAA6B,EAAO,IAAQ,CACrE,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,CAAE,WAAY,GAAkB,EAAI,EAAE,CACtC,EAAS,EAAe,SAAU,GAAkB,CAAC,CAE3D,OAAO,EAAC,EAAA,CAAG,UAAW,EAAG,kBAAmB,EAAU,CAAE,GAAI,EAAc,MAAK,GAAI,EAAO,MAAO,GAAI,GAAQ,EAC7G,CAEF,EAAY,YAAc,cAC1B,IAAA,EAAe"}

package/dist/dialog/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`},parts:[`container`,`body`,`cancelButton`,`closeButton`,`footer`,`header`,`icon`,`submitButton`,`title`],sizes:{md:{container:{maxW:520}},lg:{container:{maxW:640}},fullWidth:{}},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/dialog/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/dialog/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'body', 'cancelButton', 'closeButton', 'footer', 'header', 'icon', 'submitButton', 'title']\n\nconst sizes = {\n  md: {\n    container: {\n      maxW: 520,\n    },\n  },\n  lg: {\n    container: {\n      maxW: 640,\n    },\n  },\n  fullWidth: {},\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAwBA,IAAA,EAAe,CACb,UAzBgB,EAAE,CA0BlB,aAxBmB,CACnB,KAAM,KACP,CAuBC,MArBY,CAAC,YAAa,OAAQ,eAAgB,cAAe,SAAU,SAAU,OAAQ,eAAgB,QAAQ,CAsBrH,MApBY,CACZ,GAAI,CACF,UAAW,CACT,KAAM,IACP,CACF,CACD,GAAI,CACF,UAAW,CACT,KAAM,IACP,CACF,CACD,UAAW,EAAE,CACd,CASC,SAPe,EAAE,CAQlB"}

package/dist/dialog/useDialog.d.ts

@@ -0,0 +1,8 @@
+//#region src/dialog/useDialog.d.ts
+declare const useDialog: () => {
+  showConfirm: (title: string, message: string) => Promise<boolean>;
+  showPrompt: (title: string, value?: string) => Promise<string | false>;
+};
+//#endregion
+export { useDialog };
+//# sourceMappingURL=useDialog.d.ts.map

package/dist/dialog/useDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.d.ts","names":[],"sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":[],"mappings":";cAKa;EAAA,WAAA,EA6DZ,CAAA,KAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,GA1DuD,OA0DvD,CAAA,OAAA,CAAA;EAAA,UAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,KAAA,CAAA,EAAA,MAAA,EAAA,GAhCiD,OAgCjD,CAAA,MAAA,GAAA,KAAA,CAAA"}

package/dist/dialog/useDialog.js

@@ -0,0 +1,2 @@
+import{useVuiContext as e}from"../core/vuiProvider/context.js";import{Box as t}from"../box/box.js";import{Input as n}from"../input/input.js";import r from"./dialog.js";import{jsx as i}from"react/jsx-runtime";const a=()=>{let{setPortalSlot:a}=e();return{showConfirm:(e,t)=>new Promise(n=>a(i(r,{body:t,cancelButton:{onClick:()=>{n(!1),a(null)},text:`Cancel`},closeButton:!1,isOpen:!0,submitButton:{onClick:()=>{n(!0),a(null)},text:`Confirm`},title:e}))),showPrompt:(e,o=``)=>new Promise(s=>{let c=o;a(i(r,{body:i(t,{px:3,py:2,children:i(n,{onChange:e=>c=e.target.value,value:o})}),cancelButton:{onClick:()=>{s(!1),a(null)},text:`Cancel`},closeButton:!1,isOpen:!0,submitButton:{onClick:()=>{s(c),a(null)},text:`Submit`},title:e}))})}};export{a as useDialog};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=useDialog.js.map

package/dist/dialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.js","names":["Dialog"],"sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useVuiContext } from '../core'\nimport { Dialog } from '../dialog'\nimport { Input } from '../input'\n\nexport const useDialog = () => {\n  const { setPortalSlot } = useVuiContext()\n\n  const showConfirm = (title: string, message: string): Promise<boolean> =>\n    new Promise(resolve =>\n      setPortalSlot(\n        <Dialog\n          body={message}\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(true)\n              setPortalSlot(null)\n            },\n            text: 'Confirm',\n          }}\n          title={title}\n        />,\n      ),\n    )\n\n  const showPrompt = (title: string, value = ''): Promise<string | false> =>\n    new Promise(resolve => {\n      let inputValue = value\n      setPortalSlot(\n        <Dialog\n          body={\n            <Box px={3} py={2}>\n              <Input onChange={e => (inputValue = e.target.value)} value={value} />\n            </Box>\n          }\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(inputValue)\n              setPortalSlot(null)\n            },\n            text: 'Submit',\n          }}\n          title={title}\n        />,\n      )\n    })\n\n  return { showConfirm, showPrompt }\n}\n"],"mappings":"gNAKA,MAAa,MAAkB,CAC7B,GAAM,CAAE,iBAAkB,GAAe,CA2DzC,MAAO,CAAE,aAzDY,EAAe,IAClC,IAAI,QAAQ,GACV,EACE,EAACA,EAAAA,CACC,KAAM,EACN,aAAc,CACZ,YAAe,CACb,EAAQ,GAAM,CACd,EAAc,KAAK,EAErB,KAAM,SACP,CACD,YAAa,GACb,OAAA,GACA,aAAc,CACZ,YAAe,CACb,EAAQ,GAAK,CACb,EAAc,KAAK,EAErB,KAAM,UACP,CACM,SACP,CACH,CACF,CAiCmB,YA/BF,EAAe,EAAQ,KACzC,IAAI,QAAQ,GAAW,CACrB,IAAI,EAAa,EACjB,EACE,EAACA,EAAAA,CACC,KACE,EAAC,EAAA,CAAI,GAAI,EAAG,GAAI,WACd,EAAC,EAAA,CAAM,SAAU,GAAM,EAAa,EAAE,OAAO,MAAe,SAAS,EACjE,CAER,aAAc,CACZ,YAAe,CACb,EAAQ,GAAM,CACd,EAAc,KAAK,EAErB,KAAM,SACP,CACD,YAAa,GACb,OAAA,GACA,aAAc,CACZ,YAAe,CACb,EAAQ,EAAW,CACnB,EAAc,KAAK,EAErB,KAAM,SACP,CACM,SACP,CACH,EACD,CAE8B"}

package/dist/divider/divider.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { DividerProps } from "./divider.types.js";
+import * as styled_components378 from "styled-components";
+
+//#region src/divider/divider.d.ts
+declare const DividerBase: styled_components378.StyledComponent<"hr", styled_components378.DefaultTheme, SystemProps, never>;
+/** Visually separates content with a horizontal or vertical line. */
+declare const Divider: VuiComponent<"hr", DividerProps>;
+//#endregion
+export { Divider, DividerBase };
+//# sourceMappingURL=divider.d.ts.map

package/dist/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","names":[],"sources":["../../src/divider/divider.tsx"],"sourcesContent":[],"mappings":";;;;;;cAIa,aAAW,oBAAA,CAAA,sBAEvB,oBAAA,CAFuB,YAAA;;cAKX,4BAAO"}

package/dist/divider/divider.js

@@ -0,0 +1,4 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{omitThemingProps as n,useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import{jsx as o}from"react/jsx-runtime";const s=i.hrBox`
+  border-color: sandstone.90;
+`,c=a((i,a)=>{let{className:c,isVertical:l,width:u,...d}=n(i),f=r(`Divider`,i),p=`border${l?`Right`:`Bottom`}Width`,m=l?`100%`:``,h=e({[p]:u??1});return o(s,{className:t(`vui-divider`,c),h:m,ref:a,...f,...h,...d})});c.displayName=`Divider`;var l=c;export{c as Divider,s as DividerBase,l as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=divider.js.map

package/dist/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","names":[],"sources":["../../src/divider/divider.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { DividerProps } from './divider.types'\n\nexport const DividerBase = styled.hrBox`\n  border-color: sandstone.90;\n`\n\n/** Visually separates content with a horizontal or vertical line. */\nexport const Divider = vui<'hr', DividerProps>((props, ref) => {\n  const { className, isVertical, width, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Divider', props)\n\n  const borderSide = isVertical ? 'Right' : 'Bottom'\n  const borderWidth = `border${borderSide}Width`\n  const height = isVertical ? '100%' : ''\n\n  const aliasedProps = filterUndefined({\n    [borderWidth]: width ?? 1,\n  })\n\n  return (\n    <DividerBase\n      className={cs('vui-divider', className)}\n      h={height}\n      ref={ref}\n      {...styles}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nDivider.displayName = 'Divider'\nexport default Divider\n"],"mappings":"6RAIA,MAAa,EAAc,EAAO,KAAK;;EAK1B,EAAU,GAAyB,EAAO,IAAQ,CAC7D,GAAM,CAAE,YAAW,aAAY,QAAO,GAAG,GAAS,EAAiB,EAAM,CACnE,EAAS,EAAe,UAAW,EAAM,CAGzC,EAAc,SADD,EAAa,QAAU,SACF,OAClC,EAAS,EAAa,OAAS,GAE/B,EAAe,EAAgB,EAClC,GAAc,GAAS,EACzB,CAAC,CAEF,OACE,EAAC,EAAA,CACC,UAAW,EAAG,cAAe,EAAU,CACvC,EAAG,EACE,MACL,GAAI,EACJ,GAAI,EACJ,GAAI,GACJ,EAEJ,CAEF,EAAQ,YAAc,UACtB,IAAA,EAAe"}

package/dist/divider/divider.types.d.ts

@@ -0,0 +1,16 @@
+import { ThemingProps } from "../theme/types.js";
+import { BordersProps } from "../system/borders.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/divider/divider.types.d.ts
+type DividerProps = SystemProps & ThemingProps<'Divider'> & {
+  /** Children are disabled for this component. */
+  children?: never;
+  /** Renders the line vertically using 100% height. */
+  isVertical?: boolean;
+  /** Defines thickness of the line. */
+  width?: BordersProps['borderWidth'];
+};
+//#endregion
+export { DividerProps };
+//# sourceMappingURL=divider.types.d.ts.map

package/dist/divider/divider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.types.d.ts","names":[],"sources":["../../src/divider/divider.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,YAAA,GAAe,cACzB;;;EADU;EAAY,UAAA,CAAA,EAAA,OAAA;;OACtB,CAAA,EAMU,YANV,CAAA,aAAA,CAAA"}

package/dist/divider/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{},sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/divider/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/divider/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAQA,IAAA,EAAe,CACb,UATgB,EAAE,CAUlB,aARmB,EAAE,CASrB,MAPY,EAAE,CAQd,SANe,EAAE,CAOlB"}

package/dist/dragAndDrop/dragAndDrop.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DragAndDropProps } from "./dragAndDrop.types.js";
+
+//#region src/dragAndDrop/dragAndDrop.d.ts
+/** Prepares uploading files by selecting or dragging. */
+declare const DragAndDrop: VuiComponent<"label", DragAndDropProps>;
+//#endregion
+export { DragAndDrop };
+//# sourceMappingURL=dragAndDrop.d.ts.map

package/dist/dragAndDrop/dragAndDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.d.ts","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":[],"mappings":";;;;;cAwBa,mCAAW"}

package/dist/dragAndDrop/dragAndDrop.js

@@ -0,0 +1,7 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../icon/icon.js";import o from"../t/t.js";import{useRef as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=`file`,d=r.labelBox`
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+  justify-content: center;
+`,f=i((r,i)=>{let{accept:f,className:p,icon:m=`falCloudUpload`,selectFolderOnClick:h,selectFolderOnDrop:g,onFilesAdded:_,multiple:v=!0,text:y=`Click or drag files to this area`,children:b,disabled:x,...S}=t(r),C=s(null),w=n(`DragAndDrop`,r),T=e=>Array.from(e).map(e=>e),E=e=>{if(e.preventDefault(),x)return;let t=T(e?.currentTarget?.files);t?.length&&(_?.(t),e.currentTarget.type=``,e.currentTarget.type=u)},D=e=>{let t=(e,r=``)=>new Promise(i=>{if(e.isFile)e.file(e=>{e.filepath=r+e.name,n.push(e),i([e])});else if(e.isDirectory){let n=e;n.createReader().readEntries(e=>{let a=e.map(e=>t(e,r+n.name+`/`));i(Promise.all(a).then(e=>[].concat(...e)))})}}),n=[];return new Promise((r,i)=>{let a=[];for(let n=0;n<e.length;n++){let r=e[n].webkitGetAsEntry();r&&a.push(t(r))}Promise.all(a).then(()=>r(n)).catch(i)})},O=e=>{if(e.preventDefault(),x)return;if(g){let t=e.dataTransfer.items;D(t).then(e=>e?.length&&_?.(e));return}let t=e.dataTransfer?.files?T(e.dataTransfer.files):[];t?.length&&_?.(t)};return l(d,{className:e(`vui-drag-and-drop`,p),cursor:x?`not-allowed`:`pointer`,onDragEnter:e=>e.preventDefault(),onDragOver:e=>e.preventDefault(),onDrop:e=>O(e),opacity:x?.5:1,p:5,pointerEvents:x?`none`:`auto`,ref:i,...w,...S,children:[b||l(o,{display:`flex`,children:[c(a,{mr:1,name:m}),y]}),c(`input`,{accept:f,className:`vui-drag-and-drop-hidden-input`,multiple:v,onChange:E,ref:C,style:{display:`none`},type:u,...h&&{webkitdirectory:`true`,directory:`true`}})]})});f.displayName=`DragAndDrop`;export{f as DragAndDrop};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=dragAndDrop.js.map

package/dist/dragAndDrop/dragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.js","names":["defaultIcon: IconProp","entriesPromises: Promise<File[]>[]","entries","files: File[]","files","T","Icon"],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":["import type { ChangeEvent, DragEvent } from 'react'\nimport { useRef } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport type { DragAndDropProps } from './dragAndDrop.types'\n\nconst defaultIcon: IconProp = 'falCloudUpload'\n\nconst defaultText = 'Click or drag files to this area'\n\nconst inputType = 'file'\n\nconst DragAndDropBase = styled.labelBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n  justify-content: center;\n`\n\n/** Prepares uploading files by selecting or dragging. */\nexport const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {\n  const {\n    accept,\n    className,\n    icon = defaultIcon,\n    selectFolderOnClick,\n    selectFolderOnDrop,\n    onFilesAdded,\n    multiple = true,\n    text = defaultText,\n    children,\n    disabled,\n    ...rest\n  } = omitThemingProps(props)\n  const fileInput = useRef<HTMLInputElement>(null)\n  const styles = useStyleConfig('DragAndDrop', props)\n\n  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n    const files = processFiles(e?.currentTarget?.files as FileList)\n    if (files?.length) {\n      onFilesAdded?.(files)\n      // Reseting the input type to allow selecting the same file(s)\n      e.currentTarget.type = ''\n      e.currentTarget.type = inputType\n    }\n  }\n\n  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {\n    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>\n      new Promise(resolve => {\n        if (item.isFile) {\n          const fileEntry = item as FileSystemFileEntry\n          fileEntry.file(file => {\n            ;(file as any).filepath = path + file.name // Save full path with type casting\n            files.push(file)\n            resolve([file])\n          })\n        } else if (item.isDirectory) {\n          const dirEntry = item as FileSystemDirectoryEntry\n          const dirReader = dirEntry.createReader()\n          dirReader.readEntries(entries => {\n            const entriesPromises: Promise<File[]>[] = entries.map(entry =>\n              traverseFileTreePromise(entry, path + dirEntry.name + '/'),\n            )\n            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))\n          })\n        }\n      })\n\n    const files: File[] = []\n    return new Promise((resolve, reject) => {\n      const entriesPromises: Promise<File[]>[] = []\n      for (let i = 0; i < dataTransferItems.length; i++) {\n        const item = dataTransferItems[i].webkitGetAsEntry()\n        if (item) entriesPromises.push(traverseFileTreePromise(item))\n      }\n      Promise.all(entriesPromises)\n        .then(() => resolve(files))\n        .catch(reject)\n    })\n  }\n\n  const handleDrop = (e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n\n    if (selectFolderOnDrop) {\n      const items = e.dataTransfer.items\n      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))\n      return undefined\n    }\n\n    const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []\n    if (files?.length) onFilesAdded?.(files)\n  }\n\n  return (\n    <DragAndDropBase\n      className={cs('vui-drag-and-drop', className)}\n      cursor={disabled ? 'not-allowed' : 'pointer'}\n      onDragEnter={e => e.preventDefault()}\n      onDragOver={e => e.preventDefault()}\n      onDrop={e => handleDrop(e)}\n      opacity={disabled ? 0.5 : 1}\n      p={5}\n      pointerEvents={disabled ? 'none' : 'auto'}\n      ref={ref}\n      {...styles}\n      {...rest}\n    >\n      {children || (\n        <T display=\"flex\">\n          <Icon mr={1} name={icon} />\n          {text}\n        </T>\n      )}\n      <input\n        accept={accept}\n        className=\"vui-drag-and-drop-hidden-input\"\n        multiple={multiple}\n        onChange={handleFileInput}\n        ref={fileInput}\n        style={{ display: 'none' }}\n        type={inputType}\n        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}\n      />\n    </DragAndDropBase>\n  )\n})\n\nDragAndDrop.displayName = 'DragAndDrop'\nexport default DragAndDrop\n"],"mappings":"yUAUA,MAIM,EAAY,OAEZ,EAAkB,EAAO,QAAQ;;;;;EAQ1B,EAAc,GAAgC,EAAO,IAAQ,CACxE,GAAM,CACJ,SACA,YACA,OAAO,iBACP,sBACA,qBACA,eACA,WAAW,GACX,OAAO,mCACP,WACA,WACA,GAAG,GACD,EAAiB,EAAM,CACrB,EAAY,EAAyB,KAAK,CAC1C,EAAS,EAAe,cAAe,EAAM,CAE7C,EAAgB,GAA4B,MAAM,KAAK,EAAM,CAAC,IAAI,GAAQ,EAAK,CAE/E,EAAmB,GAAqC,CAE5D,GADA,EAAE,gBAAgB,CACd,EAAU,OACd,IAAM,EAAQ,EAAa,GAAG,eAAe,MAAkB,CAC3D,GAAO,SACT,IAAe,EAAM,CAErB,EAAE,cAAc,KAAO,GACvB,EAAE,cAAc,KAAO,IAIrB,EAAmC,GAA6D,CACpG,IAAM,GAA2B,EAAuB,EAAe,KACrE,IAAI,QAAQ,GAAW,CACrB,GAAI,EAAK,OACW,EACR,KAAK,GAAQ,CACnB,EAAa,SAAW,EAAO,EAAK,KACtC,EAAM,KAAK,EAAK,CAChB,EAAQ,CAAC,EAAK,CAAC,EACf,SACO,EAAK,YAAa,CAC3B,IAAM,EAAW,EACC,EAAS,cAAc,CAC/B,YAAY,GAAW,CAC/B,IAAMC,EAAqC,EAAQ,IAAI,GACrD,EAAwB,EAAO,EAAO,EAAS,KAAO,IAAI,CAC3D,CACD,EAAQ,QAAQ,IAAI,EAAgB,CAAC,KAAK,GAAW,EAAE,CAAC,OAAO,GAAIC,EAAkB,CAAC,CAAC,EACvF,GAEJ,CAEEC,EAAgB,EAAE,CACxB,OAAO,IAAI,SAAS,EAAS,IAAW,CACtC,IAAMF,EAAqC,EAAE,CAC7C,IAAK,IAAI,EAAI,EAAG,EAAI,EAAkB,OAAQ,IAAK,CACjD,IAAM,EAAO,EAAkB,GAAG,kBAAkB,CAChD,GAAM,EAAgB,KAAK,EAAwB,EAAK,CAAC,CAE/D,QAAQ,IAAI,EAAgB,CACzB,SAAW,EAAQ,EAAM,CAAC,CAC1B,MAAM,EAAO,EAChB,EAGE,EAAc,GAA8B,CAEhD,GADA,EAAE,gBAAgB,CACd,EAAU,OAEd,GAAI,EAAoB,CACtB,IAAM,EAAQ,EAAE,aAAa,MAC7B,EAAgC,EAAM,CAAC,KAAK,GAASG,GAAO,QAAU,IAAeA,EAAM,CAAC,CAC5F,OAGF,IAAM,EAAQ,EAAE,cAAc,MAAQ,EAAa,EAAE,aAAa,MAAM,CAAG,EAAE,CACzE,GAAO,QAAQ,IAAe,EAAM,EAG1C,OACE,EAAC,EAAA,CACC,UAAW,EAAG,oBAAqB,EAAU,CAC7C,OAAQ,EAAW,cAAgB,UACnC,YAAa,GAAK,EAAE,gBAAgB,CACpC,WAAY,GAAK,EAAE,gBAAgB,CACnC,OAAQ,GAAK,EAAW,EAAE,CAC1B,QAAS,EAAW,GAAM,EAC1B,EAAG,EACH,cAAe,EAAW,OAAS,OAC9B,MACL,GAAI,EACJ,GAAI,YAEH,GACC,EAACC,EAAAA,CAAE,QAAQ,iBACT,EAACC,EAAAA,CAAK,GAAI,EAAG,KAAM,GAAQ,CAC1B,EAAA,EACC,CAEN,EAAC,QAAA,CACS,SACR,UAAU,iCACA,WACV,SAAU,EACV,IAAK,EACL,MAAO,CAAE,QAAS,OAAQ,CAC1B,KAAM,EACN,GAAK,GAAuB,CAAE,gBAAiB,OAAQ,UAAW,OAAQ,EAC1E,CAAA,EACc,EAEpB,CAEF,EAAY,YAAc"}

package/dist/dragAndDrop/dragAndDrop.types.d.ts

@@ -0,0 +1,26 @@
+import { ThemingProps } from "../theme/types.js";
+import { BoxProps } from "../box/box.types.js";
+import { IconProp } from "../icon/icon.types.js";
+
+//#region src/dragAndDrop/dragAndDrop.types.d.ts
+type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAndDrop'> & {
+  /** Defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+  accept?: string;
+  /** Disabled. @default `false` */
+  disabled?: boolean;
+  /** The message icon. @default `falCloudUpload` */
+  icon?: IconProp;
+  /** Allows folder selection using click @default `false` */
+  selectFolderOnClick?: boolean;
+  /** Allows folder selection using drag and drop  @default `false` */
+  selectFolderOnDrop?: boolean;
+  /** Allows to select multiple files when the drop zone is clicked @default `true` */
+  multiple?: boolean;
+  /** The message text. @default `Click or drag files to this area` */
+  text?: string;
+  /** Drop or file select callback */
+  onFilesAdded?: (files: File[]) => void;
+};
+//#endregion
+export { DragAndDropProps };
+//# sourceMappingURL=dragAndDrop.types.d.ts.map

package/dist/dragAndDrop/dragAndDrop.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.types.d.ts","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,gBAAA,GAAmB,KAAK,uBAClC;;EADU,MAAA,CAAA,EAAA,MAAA;EAAgB;UAAQ,CAAA,EAAA,OAAA;;MAClC,CAAA,EAMS,QANT;;qBAgByB,CAAA,EAAA,OAAA;EAAI;;;;;;;yBAAJ"}

package/dist/dragAndDrop/theme.js

@@ -0,0 +1,2 @@
+const e={bg:`skyBlue.95`,main:`seaBlue.main`,hover:`skyBlue.90`},t={borderWidth:2,borderStyle:`solid`,borderColor:`transparent`,bg:e.bg,color:e.main,hoverBg:e.hover},n={variant:`default`},r={},i={default:{},outlined:{borderColor:e.main,borderStyle:`dashed`}};var a={baseStyle:t,defaultProps:n,sizes:r,variants:i};export{a as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/dragAndDrop/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/dragAndDrop/theme.ts"],"sourcesContent":["const colors = {\n  bg: 'skyBlue.95',\n  main: 'seaBlue.main',\n  hover: 'skyBlue.90',\n}\n\nconst baseStyle = {\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'transparent',\n  bg: colors.bg,\n  color: colors.main,\n  hoverBg: colors.hover,\n}\n\nconst defaultProps = {\n  variant: 'default',\n}\n\nconst sizes = {}\n\nconst variants = {\n  default: {},\n  outlined: {\n    borderColor: colors.main,\n    borderStyle: 'dashed',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAAA,MAAM,EAAS,CACb,GAAI,aACJ,KAAM,eACN,MAAO,aACR,CAEK,EAAY,CAChB,YAAa,EACb,YAAa,QACb,YAAa,cACb,GAAI,EAAO,GACX,MAAO,EAAO,KACd,QAAS,EAAO,MACjB,CAEK,EAAe,CACnB,QAAS,UACV,CAEK,EAAQ,EAAE,CAEV,EAAW,CACf,QAAS,EAAE,CACX,SAAU,CACR,YAAa,EAAO,KACpB,YAAa,SACd,CACF,CAED,IAAA,EAAe,CACb,YACA,eACA,QACA,WACD"}

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { DrawerProps } from "./drawer.types.js";
+
+//#region src/drawer/drawer.d.ts
+/** Drawer component based on Dialog. */
+declare const Drawer: VuiComponent<"div", DrawerProps>;
+//#endregion
+export { Drawer };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,4BAAM"}

package/dist/drawer/drawer.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../box/box.js";import a from"../dialog/dialog.js";import{jsx as o}from"react/jsx-runtime";const s=r((r,s)=>{let{children:c,className:l,dialogProps:u,isLeft:d,isOpen:f,onClose:p}=t(r),m=n(`Drawer`,r);return o(a,{isOpen:f,onClose:p,placement:d?`left`:`right`,ref:s,...u,children:o(i,{className:e(`vui-drawer`,l),column:!0,p:3,...m,h:`100vh`,overflow:`hidden`,children:c})})});s.displayName=`Drawer`;export{s as Drawer};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=drawer.js.map

package/dist/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["Dialog","Box"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { Dialog } from '../dialog'\nimport { cs } from '../utils'\nimport type { DrawerProps } from './drawer.types'\n\n/** Drawer component based on Dialog. */\nexport const Drawer = vui<'div', DrawerProps>((props, ref) => {\n  const { children, className, dialogProps, isLeft, isOpen, onClose } = omitThemingProps(props)\n  const styles = useStyleConfig('Drawer', props)\n\n  const placement = isLeft ? 'left' : 'right'\n\n  return (\n    <Dialog isOpen={isOpen} onClose={onClose} placement={placement} ref={ref} {...dialogProps}>\n      <Box className={cs('vui-drawer', className)} column p={3} {...styles} h=\"100vh\" overflow=\"hidden\">\n        {children}\n      </Box>\n    </Dialog>\n  )\n})\n\nDrawer.displayName = 'Drawer'\nexport default Drawer\n"],"mappings":"6PAOA,MAAa,EAAS,GAAyB,EAAO,IAAQ,CAC5D,GAAM,CAAE,WAAU,YAAW,cAAa,SAAQ,SAAQ,WAAY,EAAiB,EAAM,CACvF,EAAS,EAAe,SAAU,EAAM,CAI9C,OACE,EAACA,EAAAA,CAAe,SAAiB,UAAS,UAH1B,EAAS,OAAS,QAGmC,MAAK,GAAI,WAC5E,EAACC,EAAAA,CAAI,UAAW,EAAG,aAAc,EAAU,CAAE,OAAA,GAAO,EAAG,EAAG,GAAI,EAAQ,EAAE,QAAQ,SAAS,SACtF,YACG,EACC,EAEX,CAEF,EAAO,YAAc"}

package/dist/drawer/drawer.types.d.ts

@@ -0,0 +1,18 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { DialogProps } from "../dialog/dialog.types.js";
+
+//#region src/drawer/drawer.types.d.ts
+type DrawerProps = SystemProps & ThemingProps<'Drawer'> & {
+  /** The props being passed into the internal Dialog component. */
+  dialogProps?: DialogProps;
+  /** Determines if the drawer is on the left side of the screen. @default false */
+  isLeft?: boolean;
+  /** Determines if the drawer is open. @default false */
+  isOpen?: boolean;
+  /** Function to be called when the drawer is closed */
+  onClose?: () => void;
+};
+//#endregion
+export { DrawerProps };
+//# sourceMappingURL=drawer.types.d.ts.map

package/dist/drawer/drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.types.d.ts","names":[],"sources":["../../src/drawer/drawer.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,WAAA,GAAc,cACxB;;EADU,WAAA,CAAA,EAGM,WAHK;EAAA;QAAG,CAAA,EAAA,OAAA;;QAGR,CAAA,EAAA,OAAA;EAAW"}

package/dist/drawer/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{},sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/drawer/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/drawer/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAQA,IAAA,EAAe,CACb,UATgB,EAAE,CAUlB,aARmB,EAAE,CASrB,MAPY,EAAE,CAQd,SANe,EAAE,CAOlB"}

package/dist/focusLock/focusLock.d.ts

@@ -0,0 +1,15 @@
+import { ChildrenProp } from "../core/types.js";
+import { FocusLockProps } from "./focusLock.types.js";
+import { FC } from "react";
+
+//#region src/focusLock/focusLock.d.ts
+
+/**
+ * Traps the focus within the provided content.
+ *
+ * Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.
+ */
+declare const FocusLock: FC<FocusLockProps & ChildrenProp>;
+//#endregion
+export { FocusLock };
+//# sourceMappingURL=focusLock.d.ts.map

package/dist/focusLock/focusLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusLock.d.ts","names":[],"sources":["../../src/focusLock/focusLock.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAaA;;;AAA4C,cAA/B,SAA+B,EAApB,EAAoB,CAAjB,cAAiB,GAAA,YAAA,CAAA"}