@vinyasa/overlay 1.0.23

package/README.md

@@ -0,0 +1,54 @@
+# @vinyasa/overlay
+
+Overlay primitives: Dialog (+ `Modal` alias), Alert Dialog, Drawer, Sheet, Popover, Tooltip, Hover Card, Context Menu, Dropdown Menu, Command Palette. Delivered in phases — this package currently ships Dialog and Modal.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/overlay @vinyasa/layout @vinyasa/typography @vinyasa/icons @vinyasa/button @vinyasa/tokens react react-dom
+```
+
+Rendering requires a `VinyasaProvider` (from `@vinyasa/tokens`) above these components in the tree. None of these components render through a portal — `VinyasaProvider` injects theme tokens as an inline style on its own wrapper element (not `:root`), so anything portaled to `document.body` would fall outside that subtree and lose every `var(--vinyasa-*)` token. Each overlay's content instead uses `position: fixed` to float above the rest of the page while staying inside the themed subtree — the same fix already used by `@vinyasa/form`'s Select/Combobox/Date Picker/Color Picker and `@vinyasa/feedback`'s Toaster. This means your app must not wrap `VinyasaProvider`'s subtree in an ancestor with its own `transform`/`filter`/`perspective` (which would give `position: fixed` descendants a new containing block other than the viewport).
+
+## Composition
+
+Every component in this package is **compound**, not a single props-driven component — the same shape `@radix-ui/react-dialog` (and shadcn/ui, built on top of it) already use, and the standard for every overlay this package ships. `Dialog`/`DialogTrigger` are Radix's own primitives re-exported directly; `DialogContent`/`DialogHeader`/`DialogBody`/`DialogFooter`/`DialogTitle`/`DialogDescription` compose them with this system's own styling. An earlier single-`<Dialog trigger= title= footer=>` shape was tried and dropped — it couldn't express something as simple as an icon next to the title without stuffing a whole layout primitive into the `title` prop; assembling the pieces by hand instead handles that naturally.
+
+## Usage
+
+### Dialog
+
+```tsx
+<Dialog>
+	<DialogTrigger asChild>
+		<Button>Open dialog</Button>
+	</DialogTrigger>
+	<DialogContent size="lg">
+		<DialogHeader>
+			<DialogTitle>Edit profile</DialogTitle>
+			<DialogDescription>Make changes to your profile here.</DialogDescription>
+		</DialogHeader>
+		<DialogBody>
+			<Input label="Name" />
+		</DialogBody>
+		<DialogFooter>
+			<DialogClose asChild>
+				<Button variant="outline">Cancel</Button>
+			</DialogClose>
+			<Button>Save changes</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+```
+
+- `size` on `DialogContent` picks a max-width preset: `'sm' | 'md' | 'lg' | 'xl'` (defaults to `'md'`, 28rem).
+- `DialogContent` renders its own close (X) button in the corner automatically; pass `hideCloseButton` to omit it.
+- `DialogClose asChild` wraps any element (typically a `Button`) to close the dialog on click without wiring your own `onClick`/state — useful for a footer's "Cancel" button.
+- Every part accepts its own `className`, merged onto (not replacing) the built-in styling.
+- Uncontrolled by default (`DialogTrigger` opens it); pass `open`/`onOpenChange` to `Dialog` to control it yourself, e.g. to open it from somewhere other than its own trigger (see the `SavingState` story).
+
+Also available with `Modal`/`ModalTrigger`/`ModalContent`/`ModalHeader`/`ModalBody`/`ModalFooter`/`ModalTitle`/`ModalDescription`/`ModalClose` — `Modal` and `Dialog` are the same implementation under two names, not two components.
+
+## Subpath imports
+
+Every component also has its own subpath export for finer-grained bundling, e.g. `import { Dialog, DialogTrigger, DialogContent } from '@vinyasa/overlay/dialog'`.

package/dist/cjs/alert-dialog.cjs

@@ -0,0 +1,339 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    AlertDialog: ()=>AlertDialog,
+    AlertDialogAction: ()=>AlertDialogAction,
+    AlertDialogBody: ()=>AlertDialogBody,
+    AlertDialogCancel: ()=>AlertDialogCancel,
+    AlertDialogContent: ()=>AlertDialogContent,
+    AlertDialogDescription: ()=>AlertDialogDescription,
+    AlertDialogFooter: ()=>AlertDialogFooter,
+    AlertDialogHeader: ()=>AlertDialogHeader,
+    AlertDialogTitle: ()=>AlertDialogTitle,
+    AlertDialogTrigger: ()=>AlertDialogTrigger
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_alert_dialog_namespaceObject = require("@radix-ui/react-alert-dialog");
+const external_react_namespaceObject = require("react");
+var body = '_13owy337';
+var descriptionText = '_13owy335';
+var footer = '_13owy338';
+var header = '_13owy333';
+var scrim = '_13owy332';
+var titleText = '_13owy334';
+function toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+        var i = e.call(t, r || "default");
+        if ("object" != typeof i) return i;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+    var i = toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+    key = toPropertyKey(key);
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function createRuntimeFn_62c9670f_esm_ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+        var o = Object.getOwnPropertySymbols(e);
+        r && (o = o.filter(function(r) {
+            return Object.getOwnPropertyDescriptor(e, r).enumerable;
+        })), t.push.apply(t, o);
+    }
+    return t;
+}
+function _objectSpread2(e) {
+    for(var r = 1; r < arguments.length; r++){
+        var t = null != arguments[r] ? arguments[r] : {};
+        r % 2 ? createRuntimeFn_62c9670f_esm_ownKeys(Object(t), !0).forEach(function(r) {
+            _defineProperty(e, r, t[r]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : createRuntimeFn_62c9670f_esm_ownKeys(Object(t)).forEach(function(r) {
+            Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+        });
+    }
+    return e;
+}
+function mapValues(input, fn) {
+    var result = {};
+    for(var _key in input)result[_key] = fn(input[_key], _key);
+    return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
+    for (var key of Object.keys(compoundCheck)){
+        var _selections$key;
+        if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
+    }
+    return true;
+};
+var createRuntimeFn = (config)=>{
+    var runtimeFn = (options)=>{
+        var className = config.defaultClassName;
+        var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+        for(var variantName in selections){
+            var _selections$variantNa;
+            var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
+            if (null != variantSelection) {
+                var selection = variantSelection;
+                if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
+                var selectionClassName = config.variantClassNames[variantName][selection];
+                if (selectionClassName) className += ' ' + selectionClassName;
+            }
+        }
+        for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
+        return className;
+    };
+    runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
+    runtimeFn.classNames = {
+        get base () {
+            return config.defaultClassName.split(' ')[0];
+        },
+        get variants () {
+            return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
+        }
+    };
+    return runtimeFn;
+};
+var content = createRuntimeFn({
+    defaultClassName: '_1neyrrq2',
+    variantClassNames: {
+        size: {
+            sm: '_1neyrrq3',
+            md: '_1neyrrq4',
+            lg: '_1neyrrq5',
+            xl: '_1neyrrq6'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    },
+    compoundVariants: []
+});
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function AlertDialog_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else AlertDialog_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const AlertDialog = react_alert_dialog_namespaceObject.Root;
+const AlertDialogTrigger = react_alert_dialog_namespaceObject.Trigger;
+const AlertDialogAction = react_alert_dialog_namespaceObject.Action;
+const AlertDialogCancel = react_alert_dialog_namespaceObject.Cancel;
+const AlertDialogContent = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { size = 'md', className, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "size",
+        "className",
+        "children"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Overlay, {
+                className: scrim
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Content, _object_spread_props(_object_spread({
+                ref: ref,
+                className: className ? `${content({
+                    size
+                })} ${className}` : content({
+                    size
+                })
+            }, rest), {
+                children: children
+            }))
+        ]
+    });
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+const AlertDialogHeader = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        className: className ? `${header} ${className}` : header
+    }, rest));
+};
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+const AlertDialogBody = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        className: className ? `${body} ${className}` : body
+    }, rest));
+};
+AlertDialogBody.displayName = 'AlertDialogBody';
+const AlertDialogFooter = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        className: className ? `${footer} ${className}` : footer
+    }, rest));
+};
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+const AlertDialogTitle = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Title, _object_spread({
+        ref: ref,
+        className: className ? `${titleText} ${className}` : titleText
+    }, rest));
+});
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+const AlertDialogDescription = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Description, _object_spread({
+        ref: ref,
+        className: className ? `${descriptionText} ${className}` : descriptionText
+    }, rest));
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+exports.AlertDialog = __webpack_exports__.AlertDialog;
+exports.AlertDialogAction = __webpack_exports__.AlertDialogAction;
+exports.AlertDialogBody = __webpack_exports__.AlertDialogBody;
+exports.AlertDialogCancel = __webpack_exports__.AlertDialogCancel;
+exports.AlertDialogContent = __webpack_exports__.AlertDialogContent;
+exports.AlertDialogDescription = __webpack_exports__.AlertDialogDescription;
+exports.AlertDialogFooter = __webpack_exports__.AlertDialogFooter;
+exports.AlertDialogHeader = __webpack_exports__.AlertDialogHeader;
+exports.AlertDialogTitle = __webpack_exports__.AlertDialogTitle;
+exports.AlertDialogTrigger = __webpack_exports__.AlertDialogTrigger;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AlertDialog",
+    "AlertDialogAction",
+    "AlertDialogBody",
+    "AlertDialogCancel",
+    "AlertDialogContent",
+    "AlertDialogDescription",
+    "AlertDialogFooter",
+    "AlertDialogHeader",
+    "AlertDialogTitle",
+    "AlertDialogTrigger"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/alert-dialog.css

@@ -0,0 +1,168 @@
+@keyframes _13owy330 {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes _13owy331 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+._13owy332 {
+  z-index: var(--vinyasa-z-index-overlay);
+  background-color: rgba(0, 0, 0, .5);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+._13owy332[data-state="open"] {
+  animation: _13owy330 var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-out);
+}
+
+._13owy332[data-state="closed"] {
+  animation: _13owy331 var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-in);
+}
+
+._13owy333 {
+  gap: var(--vinyasa-space1);
+  padding: var(--vinyasa-space4);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  flex-direction: column;
+  padding-right: 2.75rem;
+  display: flex;
+}
+
+._13owy334 {
+  font-size: var(--vinyasa-font-size-lg);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  color: var(--vinyasa-on-secondary);
+  margin: 0;
+}
+
+._13owy335 {
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-text-muted);
+  margin: 0;
+}
+
+._13owy336 {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._13owy336:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-on-secondary);
+}
+
+._13owy336:focus-visible {
+  border-color: var(--vinyasa-focus);
+  box-shadow: 0 0 0 1px var(--vinyasa-focus), 0 0 0 4px color-mix(in srgb, var(--vinyasa-focus) 16%, transparent);
+  outline: none;
+}
+
+._13owy337 {
+  padding: var(--vinyasa-space4);
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+  overflow-y: auto;
+}
+
+._13owy338 {
+  justify-content: flex-end;
+  gap: var(--vinyasa-space2);
+  padding: var(--vinyasa-space4);
+  border-top: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  display: flex;
+}
+
+@keyframes _1neyrrq0 {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes _1neyrrq1 {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(.96);
+  }
+}
+
+._1neyrrq2 {
+  z-index: var(--vinyasa-z-index-modal);
+  background-color: var(--vinyasa-surface);
+  border-radius: var(--vinyasa-radius-md);
+  width: calc(100vw - 2rem);
+  max-height: 85vh;
+  box-shadow: var(--vinyasa-elevation-modal);
+  flex-direction: column;
+  display: flex;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  overflow: hidden;
+  transform: translate(-50%, -50%);
+}
+
+._1neyrrq2:focus-visible {
+  outline: none;
+}
+
+._1neyrrq2[data-state="open"] {
+  animation: _1neyrrq0 var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-out);
+}
+
+._1neyrrq2[data-state="closed"] {
+  animation: _1neyrrq1 var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-in);
+}
+
+._1neyrrq3 {
+  max-width: 24rem;
+}
+
+._1neyrrq4 {
+  max-width: 28rem;
+}
+
+._1neyrrq5 {
+  max-width: 36rem;
+}
+
+._1neyrrq6 {
+  max-width: 48rem;
+}
+