moduix 0.10.0 → 0.11.1

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -0,0 +1,122 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_AlertDialog_module = require("./AlertDialog.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let _base_ui_react_alert_dialog = require("@base-ui/react/alert-dialog");
+//#region src/components/AlertDialog/AlertDialog.tsx
+const AlertDialog = _base_ui_react_alert_dialog.AlertDialog.Root;
+const createAlertDialogHandle = _base_ui_react_alert_dialog.AlertDialog.createHandle;
+function AlertDialogPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		className,
+		...props
+	});
+}
+function AlertDialogTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		render,
+		className: render ? className : require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.trigger),
+		...props
+	});
+}
+function AlertDialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.backdrop),
+		...props
+	});
+}
+function AlertDialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Viewport, {
+		"data-slot": "alert-dialog-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.viewport),
+		...props
+	});
+}
+function AlertDialogPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Popup, {
+		"data-slot": "alert-dialog-popup",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.popup),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.title),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.description),
+		...props
+	});
+}
+function AlertDialogClose({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_alert_dialog.AlertDialog.Close, {
+		"data-slot": "alert-dialog-close",
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.close),
+		...props
+	});
+}
+function AlertDialogContent({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogViewport, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogPopup, {
+		className,
+		...props,
+		children
+	}) })] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "alert-dialog-header",
+		className: (0, clsx.clsx)(require_AlertDialog_module.default.header, className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "alert-dialog-footer",
+		className: (0, clsx.clsx)(require_AlertDialog_module.default.footer, className),
+		...props
+	});
+}
+function AlertDialogBody({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "alert-dialog-body",
+		className: (0, clsx.clsx)(require_AlertDialog_module.default.body, className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogClose, {
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.action),
+		...props
+	});
+}
+function AlertDialogCancel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogClose, {
+		className: require_mergeClassName.mergeClassName(className, require_AlertDialog_module.default.cancel),
+		...props
+	});
+}
+//#endregion
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogBackdrop = AlertDialogBackdrop;
+exports.AlertDialogBody = AlertDialogBody;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogClose = AlertDialogClose;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogPopup = AlertDialogPopup;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.AlertDialogViewport = AlertDialogViewport;
+exports.createAlertDialogHandle = createAlertDialogHandle;

package/dist/components/AlertDialog/AlertDialog.css

@@ -0,0 +1,159 @@
+@layer ui.components {
+  .ktfPPa_trigger, .ktfPPa_close {
+    box-sizing: border-box;
+    min-height: var(--alert-dialog-control-height, var(--size-lg));
+    padding: var(--alert-dialog-control-padding-y, .5rem)
+      var(--alert-dialog-control-padding-x, .875rem);
+    border: var(--alert-dialog-control-border-width, var(--border-width-sm)) solid
+      var(--alert-dialog-control-border-color, var(--color-border));
+    border-radius: var(--alert-dialog-control-radius, var(--radius-md));
+    background-color: var(--alert-dialog-control-bg, var(--color-background));
+    color: var(--alert-dialog-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--alert-dialog-control-font-size, var(--text-md));
+    line-height: var(--alert-dialog-control-line-height, var(--line-height-text-md));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--alert-dialog-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--alert-dialog-focus-ring-width, var(--alert-dialog-control-border-width, var(--border-width-sm)))
+        solid var(--alert-dialog-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--alert-dialog-focus-ring-width, var(--alert-dialog-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--opacity-disabled);
+    }
+  }
+
+  .ktfPPa_trigger {
+    color: var(--alert-dialog-trigger-color, var(--color-destructive));
+  }
+
+  .ktfPPa_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--alert-dialog-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--alert-dialog-backdrop-blur, 4px)));
+    transition: opacity var(--alert-dialog-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--alert-dialog-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .ktfPPa_viewport {
+    box-sizing: border-box;
+    z-index: var(--z-modal);
+    overscroll-behavior: contain;
+    padding: var(--alert-dialog-viewport-padding, var(--spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow-y: auto;
+  }
+
+  .ktfPPa_popup {
+    box-sizing: border-box;
+    gap: var(--spacing-4);
+    width: min(var(--alert-dialog-width, 24rem),
+      var(--alert-dialog-max-width, calc(100vw - var(--spacing-8, 2rem))),
+      var(--available-width, calc(100vw - var(--spacing-8, 2rem))));
+    max-width: 100%;
+    padding: var(--alert-dialog-padding, var(--spacing-6));
+    border: var(--alert-dialog-border-width, var(--border-width-sm)) solid
+      var(--alert-dialog-border-color, var(--color-border));
+    border-radius: var(--alert-dialog-radius, var(--radius-lg));
+    background-color: var(--alert-dialog-bg, var(--color-popover));
+    color: var(--alert-dialog-color, var(--color-popover-foreground));
+    box-shadow: var(--alert-dialog-shadow, var(--shadow-lg));
+    transition: opacity var(--alert-dialog-transition, var(--transition-default)),
+      transform var(--alert-dialog-transition, var(--transition-default));
+    display: grid;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--alert-dialog-scale, var(--scale-popup)));
+    }
+  }
+
+  .ktfPPa_header {
+    gap: var(--alert-dialog-header-gap, var(--spacing-1));
+    display: grid;
+  }
+
+  .ktfPPa_title {
+    color: var(--alert-dialog-title-color, var(--alert-dialog-color, var(--color-popover-foreground)));
+    font-size: var(--alert-dialog-title-font-size, var(--text-lg));
+    font-weight: var(--alert-dialog-title-font-weight, var(--weight-semibold));
+    line-height: var(--alert-dialog-title-line-height, var(--line-height-text-lg));
+  }
+
+  .ktfPPa_description {
+    color: var(--alert-dialog-description-color, var(--alert-dialog-muted-color, var(--color-muted-foreground)));
+    font-size: var(--alert-dialog-description-font-size, var(--text-md));
+    line-height: var(--alert-dialog-description-line-height, var(--line-height-text-md));
+  }
+
+  .ktfPPa_title, .ktfPPa_description {
+    margin: 0;
+  }
+
+  .ktfPPa_footer {
+    justify-content: flex-end;
+    gap: var(--alert-dialog-footer-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .ktfPPa_cancel {
+    border-color: var(--alert-dialog-cancel-border-color, var(--color-border));
+    background-color: var(--alert-dialog-cancel-bg, var(--alert-dialog-control-bg, var(--color-background)));
+    color: var(--alert-dialog-cancel-color, var(--alert-dialog-control-color, var(--color-foreground)));
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--alert-dialog-cancel-bg-hover, var(--alert-dialog-control-bg-hover, var(--color-accent)));
+      }
+    }
+  }
+
+  .ktfPPa_action {
+    border-color: var(--alert-dialog-action-border-color, var(--color-primary));
+    background-color: var(--alert-dialog-action-bg, var(--color-primary));
+    color: var(--alert-dialog-action-color, var(--color-primary-foreground));
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--alert-dialog-action-bg-hover, var(--color-foreground));
+      }
+    }
+  }
+
+  .ktfPPa_body {
+    color: var(--alert-dialog-description-color, var(--alert-dialog-muted-color, var(--color-muted-foreground)));
+    font-size: var(--alert-dialog-description-font-size, var(--text-md));
+    line-height: var(--alert-dialog-description-line-height, var(--line-height-text-md));
+  }
+}

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,15 +1,66 @@
-import { ComponentProps } from 'react';
-import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
-declare const AlertDialog: typeof AlertDialogPrimitive.Root;
-declare const createAlertDialogHandle: typeof AlertDialogPrimitive.createHandle;
-declare function AlertDialogTrigger({ className, render, ...props }: AlertDialogPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogClose({ className, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
-export { AlertDialog, createAlertDialogHandle, AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, };
+import { ComponentProps } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+
+//#region src/components/AlertDialog/AlertDialog.d.ts
+declare const AlertDialog$1: typeof AlertDialog.Root;
+declare const createAlertDialogHandle: typeof AlertDialog.createHandle;
+declare function AlertDialogPortal({
+  className,
+  ...props
+}: AlertDialog.Portal.Props): import("react").JSX.Element;
+declare function AlertDialogTrigger({
+  className,
+  render,
+  ...props
+}: AlertDialog.Trigger.Props): import("react").JSX.Element;
+declare function AlertDialogBackdrop({
+  className,
+  ...props
+}: AlertDialog.Backdrop.Props): import("react").JSX.Element;
+declare function AlertDialogViewport({
+  className,
+  ...props
+}: AlertDialog.Viewport.Props): import("react").JSX.Element;
+declare function AlertDialogPopup({
+  className,
+  ...props
+}: AlertDialog.Popup.Props): import("react").JSX.Element;
+declare function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialog.Title.Props): import("react").JSX.Element;
+declare function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialog.Description.Props): import("react").JSX.Element;
+declare function AlertDialogClose({
+  className,
+  ...props
+}: AlertDialog.Close.Props): import("react").JSX.Element;
+declare function AlertDialogContent({
+  className,
+  children,
+  ...props
+}: AlertDialog.Popup.Props): import("react").JSX.Element;
+declare function AlertDialogHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function AlertDialogFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function AlertDialogBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function AlertDialogAction({
+  className,
+  ...props
+}: AlertDialog.Close.Props): import("react").JSX.Element;
+declare function AlertDialogCancel({
+  className,
+  ...props
+}: AlertDialog.Close.Props): import("react").JSX.Element;
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, createAlertDialogHandle };

package/dist/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,107 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import AlertDialog_module_default from "./AlertDialog.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/components/AlertDialog/AlertDialog.tsx
+const AlertDialog$1 = AlertDialog.Root;
+const createAlertDialogHandle = AlertDialog.createHandle;
+function AlertDialogPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		className,
+		...props
+	});
+}
+function AlertDialogTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		render,
+		className: render ? className : mergeClassName(className, AlertDialog_module_default.trigger),
+		...props
+	});
+}
+function AlertDialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-backdrop",
+		className: mergeClassName(className, AlertDialog_module_default.backdrop),
+		...props
+	});
+}
+function AlertDialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Viewport, {
+		"data-slot": "alert-dialog-viewport",
+		className: mergeClassName(className, AlertDialog_module_default.viewport),
+		...props
+	});
+}
+function AlertDialogPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-popup",
+		className: mergeClassName(className, AlertDialog_module_default.popup),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: mergeClassName(className, AlertDialog_module_default.title),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: mergeClassName(className, AlertDialog_module_default.description),
+		...props
+	});
+}
+function AlertDialogClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-close",
+		className: mergeClassName(className, AlertDialog_module_default.close),
+		...props
+	});
+}
+function AlertDialogContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+		className,
+		...props,
+		children
+	}) })] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: clsx(AlertDialog_module_default.header, className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: clsx(AlertDialog_module_default.footer, className),
+		...props
+	});
+}
+function AlertDialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-body",
+		className: clsx(AlertDialog_module_default.body, className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialogClose, {
+		className: mergeClassName(className, AlertDialog_module_default.action),
+		...props
+	});
+}
+function AlertDialogCancel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialogClose, {
+		className: mergeClassName(className, AlertDialog_module_default.cancel),
+		...props
+	});
+}
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, createAlertDialogHandle };

package/dist/components/AlertDialog/AlertDialog.module.cjs

@@ -0,0 +1,18 @@
+import './AlertDialog.css';
+//#region src/components/AlertDialog/AlertDialog.module.css
+var AlertDialog_module_default = {
+	"action": "ktfPPa_action",
+	"backdrop": "ktfPPa_backdrop",
+	"body": "ktfPPa_body",
+	"cancel": "ktfPPa_cancel",
+	"close": "ktfPPa_close",
+	"description": "ktfPPa_description",
+	"footer": "ktfPPa_footer",
+	"header": "ktfPPa_header",
+	"popup": "ktfPPa_popup",
+	"title": "ktfPPa_title",
+	"trigger": "ktfPPa_trigger",
+	"viewport": "ktfPPa_viewport"
+};
+//#endregion
+exports.default = AlertDialog_module_default;

package/dist/components/AlertDialog/AlertDialog.module.js

@@ -0,0 +1,18 @@
+import './AlertDialog.css';
+//#region src/components/AlertDialog/AlertDialog.module.css
+var AlertDialog_module_default = {
+	"action": "ktfPPa_action",
+	"backdrop": "ktfPPa_backdrop",
+	"body": "ktfPPa_body",
+	"cancel": "ktfPPa_cancel",
+	"close": "ktfPPa_close",
+	"description": "ktfPPa_description",
+	"footer": "ktfPPa_footer",
+	"header": "ktfPPa_header",
+	"popup": "ktfPPa_popup",
+	"title": "ktfPPa_title",
+	"trigger": "ktfPPa_trigger",
+	"viewport": "ktfPPa_viewport"
+};
+//#endregion
+export { AlertDialog_module_default as default };

package/dist/components/AlertDialog/index.d.ts

@@ -1 +1 @@
-export { AlertDialog, createAlertDialogHandle, AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, } from './AlertDialog';
+import { AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, createAlertDialogHandle } from "./AlertDialog.js";

package/dist/components/AspectRatio/AspectRatio.cjs

@@ -0,0 +1,24 @@
+const require_AspectRatio_module = require("./AspectRatio.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+//#region src/components/AspectRatio/AspectRatio.tsx
+const PRESETS = {
+	square: 1,
+	video: 16 / 9,
+	portrait: 9 / 16,
+	photo: 4 / 3
+};
+function AspectRatio({ ratio, className, style, ...props }) {
+	const resolvedRatio = typeof ratio === "string" ? PRESETS[ratio] : ratio;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "aspect-ratio-root",
+		className: (0, clsx.clsx)(require_AspectRatio_module.default.root, className),
+		style: {
+			aspectRatio: resolvedRatio,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+exports.AspectRatio = AspectRatio;

package/dist/components/AspectRatio/AspectRatio.css

@@ -0,0 +1,14 @@
+@layer ui.components {
+  ._700akW_root {
+    border-radius: var(--aspect-ratio-radius, var(--radius-md));
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    & > :where(img, video, iframe, canvas, svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/AspectRatio/AspectRatio.d.ts
+type RatioPreset = 'square' | 'video' | 'portrait' | 'photo';
+declare function AspectRatio({
+  ratio,
+  className,
+  style,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
+  ratio: number | RatioPreset;
+}): import("react").JSX.Element;
+//#endregion
+export { AspectRatio, type RatioPreset };

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,24 @@
+import AspectRatio_module_default from "./AspectRatio.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/AspectRatio/AspectRatio.tsx
+const PRESETS = {
+	square: 1,
+	video: 16 / 9,
+	portrait: 9 / 16,
+	photo: 4 / 3
+};
+function AspectRatio({ ratio, className, style, ...props }) {
+	const resolvedRatio = typeof ratio === "string" ? PRESETS[ratio] : ratio;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio-root",
+		className: clsx(AspectRatio_module_default.root, className),
+		style: {
+			aspectRatio: resolvedRatio,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { AspectRatio };

package/dist/components/AspectRatio/AspectRatio.module.cjs

@@ -0,0 +1,5 @@
+import './AspectRatio.css';
+//#region src/components/AspectRatio/AspectRatio.module.css
+var AspectRatio_module_default = { "root": "_700akW_root" };
+//#endregion
+exports.default = AspectRatio_module_default;

package/dist/components/AspectRatio/AspectRatio.module.js

@@ -0,0 +1,5 @@
+import './AspectRatio.css';
+//#region src/components/AspectRatio/AspectRatio.module.css
+var AspectRatio_module_default = { "root": "_700akW_root" };
+//#endregion
+export { AspectRatio_module_default as default };

package/dist/components/AspectRatio/index.d.ts

@@ -0,0 +1 @@
+import { AspectRatio, RatioPreset } from "./AspectRatio.js";