moduix 0.11.0 → 0.11.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blinks44
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -51,12 +51,22 @@ bundle, so moduix does not ship duplicate React or Base UI runtimes.
 
 ## Usage
 
-Import the library styles once in your application entry point:
+Import the required foundation stylesheet once in your application entry point:
 
 ```tsx
 import 'moduix/style.css';
 ```
 
+This stylesheet is required. It provides the shared design tokens and base styles that component
+CSS depends on.
+
+If you want the optional reset, import it explicitly before the main stylesheet:
+
+```tsx
+import 'moduix/reset.css';
+import 'moduix/style.css';
+```
+
 Then import and compose the components you need:
 
 ```tsx
@@ -74,8 +84,8 @@ export function Example() {
 }
 ```
 
-The distributed stylesheet includes component styles and design tokens. It does not force a
-global application theme or utility CSS runtime.
+`style.css` ships the shared design tokens and base styles. Component imports still bring along only
+the component CSS they use.
 
 ## Styling
 

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,99 @@
+@layer ui.components {
+  .BP0x5G_root {
+    box-sizing: border-box;
+    min-width: 0;
+    color: var(--accordion-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .BP0x5G_item:not(:last-child) {
+    border-bottom: var(--accordion-item-border-width, var(--border-width-sm)) solid
+      var(--accordion-item-border-color, var(--color-border));
+  }
+
+  .BP0x5G_header {
+    margin: 0;
+  }
+
+  .BP0x5G_trigger {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--accordion-trigger-gap, var(--spacing-4));
+    width: 100%;
+    padding-block: var(--accordion-trigger-padding-y, var(--spacing-2));
+    padding-inline: var(--accordion-trigger-padding-x, var(--spacing-3));
+    background-color: var(--accordion-trigger-bg, var(--color-muted));
+    color: inherit;
+    font: inherit;
+    font-size: var(--accordion-trigger-font-size, var(--text-md));
+    line-height: var(--accordion-trigger-line-height, var(--line-height-text-md));
+    text-align: left;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--transition-default),
+      color var(--transition-default);
+    border: 0;
+    outline: 0;
+    margin: 0;
+    display: flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--accordion-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      z-index: 1;
+      outline: var(--accordion-focus-ring-width, var(--border-width-md)) solid
+        var(--accordion-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--accordion-focus-ring-offset, var(--border-width-sm)) * -1);
+      position: relative;
+    }
+
+    &[disabled], &[data-disabled] {
+      cursor: default;
+      opacity: var(--accordion-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .BP0x5G_triggerIcon {
+    box-sizing: border-box;
+    width: var(--accordion-icon-size, .75rem);
+    height: var(--accordion-icon-size, .75rem);
+    transition: transform var(--accordion-icon-transition, var(--transition-default));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    [data-panel-open] > & {
+      transform: var(--accordion-icon-open-transform, rotate(45deg) scale(1.1));
+    }
+  }
+
+  .BP0x5G_panel {
+    box-sizing: border-box;
+    height: var(--accordion-panel-height);
+    color: var(--accordion-panel-color, var(--color-muted-foreground));
+    font-size: var(--accordion-panel-font-size, var(--text-md));
+    line-height: var(--accordion-panel-line-height, var(--line-height-text-md));
+    transition: height var(--accordion-panel-transition, var(--transition-default));
+    overflow: hidden;
+
+    &[hidden]:not([hidden="until-found"]) {
+      display: none;
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      height: 0;
+    }
+  }
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,9 +1,17 @@
-import { ComponentProps } from 'react';
-import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
-declare const Accordion: import('react').ForwardRefExoticComponent<Omit<AccordionPrimitive.Root.Props<any>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const AccordionHeader: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionHeaderProps, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
-declare const AccordionTrigger: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-declare function AccordionTriggerIcon({ className, children, 'aria-hidden': ariaHidden, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare const AccordionPanel: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTriggerIcon, AccordionPanel, };
+import { Accordion } from "@base-ui/react/accordion";
+import { ComponentProps } from "react";
+
+//#region src/components/Accordion/Accordion.d.ts
+declare const Accordion$1: import("react").ForwardRefExoticComponent<Omit<Accordion.Root.Props<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare function AccordionTriggerIcon({
+  className,
+  children,
+  'aria-hidden': ariaHidden,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare const AccordionPanel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, AccordionTriggerIcon };

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,60 @@
+import { PlusIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Accordion } from "@base-ui/react/accordion";
+import { forwardRef } from "react";
+//#region src/components/Accordion/Accordion.tsx
+const Accordion$1 = forwardRef(function Accordion$2({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		ref,
+		"data-slot": "accordion-root",
+		className: mergeClassName(className, Accordion_module_default.root),
+		...props
+	});
+});
+const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		ref,
+		"data-slot": "accordion-item",
+		className: mergeClassName(className, Accordion_module_default.item),
+		...props
+	});
+});
+const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		ref,
+		"data-slot": "accordion-header",
+		className: mergeClassName(className, Accordion_module_default.header),
+		...props
+	});
+});
+const AccordionTrigger = forwardRef(function AccordionTrigger({ className, render, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		ref,
+		"data-slot": "accordion-trigger",
+		render,
+		className: render ? className : mergeClassName(className, Accordion_module_default.trigger),
+		...props
+	});
+});
+function AccordionTriggerIcon({ className, children, "aria-hidden": ariaHidden = true, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "accordion-trigger-icon",
+		"aria-hidden": ariaHidden,
+		className: clsx(Accordion_module_default.triggerIcon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+const AccordionPanel = forwardRef(function AccordionPanel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		ref,
+		"data-slot": "accordion-panel",
+		className: mergeClassName(className, Accordion_module_default.panel),
+		...props
+	});
+});
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, AccordionTriggerIcon };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,12 @@
+import './Accordion.css';
+//#region src/components/Accordion/Accordion.module.css
+var Accordion_module_default = {
+	"header": "BP0x5G_header",
+	"item": "BP0x5G_item",
+	"panel": "BP0x5G_panel",
+	"root": "BP0x5G_root",
+	"trigger": "BP0x5G_trigger",
+	"triggerIcon": "BP0x5G_triggerIcon"
+};
+//#endregion
+export { Accordion_module_default as default };

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

@@ -1 +1 @@
-export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTriggerIcon, AccordionPanel, } from './Accordion';
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, AccordionTriggerIcon } from "./Accordion.js";

package/dist/components/Alert/Alert.css

@@ -0,0 +1,114 @@
+@layer ui.components {
+  .Rbv-4q_root {
+    box-sizing: border-box;
+    align-items: start;
+    gap: var(--alert-gap, var(--spacing-3));
+    border: var(--alert-border-width, var(--border-width-sm)) solid
+      var(--alert-border-color, var(--alert-border-color-default, var(--color-border)));
+    border-radius: var(--alert-radius, var(--radius-lg));
+    width: 100%;
+    min-width: 0;
+    padding: var(--alert-padding, var(--spacing-4));
+    background-color: var(--alert-bg, var(--alert-bg-default, var(--color-card)));
+    color: var(--alert-color, var(--alert-color-default, var(--color-card-foreground)));
+    box-shadow: var(--alert-shadow, none);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+
+    &[data-variant="default"] {
+      --alert-bg-default: var(--color-card);
+      --alert-border-color-default: var(--color-border);
+      --alert-color-default: var(--color-card-foreground);
+      --alert-icon-color-default: var(--color-muted-foreground);
+    }
+
+    &[data-variant="info"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-primary) 4%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-primary) 32%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-icon-color-default: var(--color-primary);
+    }
+
+    &[data-variant="success"] {
+      --alert-bg-default: color-mix(in oklab,
+        var(--alert-success-color, #16a34a) 10%,
+        var(--color-background));
+      --alert-border-color-default: color-mix(in oklab,
+        var(--alert-success-color, #16a34a) 34%,
+        transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-icon-color-default: var(--alert-success-color, #16a34a);
+    }
+
+    &[data-variant="warning"] {
+      --alert-bg-default: color-mix(in oklab,
+        var(--alert-warning-color, #ca8a04) 13%,
+        var(--color-background));
+      --alert-border-color-default: color-mix(in oklab,
+        var(--alert-warning-color, #ca8a04) 38%,
+        transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-icon-color-default: var(--alert-warning-color, #ca8a04);
+    }
+
+    &[data-variant="destructive"] {
+      --alert-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
+      --alert-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
+      --alert-color-default: var(--color-foreground);
+      --alert-icon-color-default: var(--color-destructive);
+    }
+  }
+
+  .Rbv-4q_icon {
+    width: var(--alert-icon-size, 1rem);
+    height: var(--alert-icon-size, 1rem);
+    color: var(--alert-icon-color, var(--alert-icon-color-default, currentColor));
+    justify-content: center;
+    align-items: center;
+    margin-block-start: var(--alert-icon-offset, .125rem);
+    display: inline-flex;
+
+    & :where(svg), &:where(svg) {
+      width: var(--alert-icon-size, 1rem);
+      height: var(--alert-icon-size, 1rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+  }
+
+  .Rbv-4q_content {
+    gap: var(--alert-content-gap, var(--spacing-1));
+    min-width: 0;
+    display: grid;
+  }
+
+  .Rbv-4q_title {
+    min-width: 0;
+    color: var(--alert-title-color, var(--alert-color, var(--alert-color-default)));
+    font-size: var(--alert-title-font-size, var(--text-sm));
+    font-weight: var(--alert-title-font-weight, var(--weight-semibold));
+    line-height: var(--alert-title-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .Rbv-4q_description {
+    min-width: 0;
+    color: var(--alert-description-color, var(--color-muted-foreground));
+    font-size: var(--alert-description-font-size, var(--text-sm));
+    line-height: var(--alert-description-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .Rbv-4q_root:not(:has([data-slot="alert-icon"])) .Rbv-4q_content {
+    grid-column: 1 / -1;
+  }
+}

package/dist/components/Alert/Alert.d.ts

@@ -1,14 +1,34 @@
-import { ComponentProps, ComponentPropsWithoutRef } from 'react';
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+//#region src/components/Alert/Alert.d.ts
 type AlertVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
 type AlertTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-declare function Alert({ className, role, variant, ...props }: ComponentProps<'div'> & {
-    variant?: AlertVariant;
+declare function Alert({
+  className,
+  role,
+  variant,
+  ...props
+}: ComponentProps<'div'> & {
+  variant?: AlertVariant;
 }): import("react").JSX.Element;
-declare function AlertIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function AlertContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function AlertTitle({ as: Root, className, ...props }: ComponentPropsWithoutRef<'h3'> & {
-    as?: AlertTitleElement;
+declare function AlertIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function AlertContent({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function AlertTitle({
+  as: Root,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'h3'> & {
+  as?: AlertTitleElement;
 }): import("react").JSX.Element;
-declare function AlertDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export { Alert, AlertIcon, AlertContent, AlertTitle, AlertDescription };
-export type { AlertVariant, AlertTitleElement };
+declare function AlertDescription({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle, type AlertTitleElement, type AlertVariant };

package/dist/components/Alert/Alert.js

@@ -0,0 +1,44 @@
+import Alert_module_default from "./Alert.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Alert/Alert.tsx
+function Alert({ className, role, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: role ?? (variant === "destructive" ? "alert" : "status"),
+		"data-slot": "alert-root",
+		"data-variant": variant,
+		className: clsx$1(Alert_module_default.root, className),
+		...props
+	});
+}
+function AlertIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "alert-icon",
+		"aria-hidden": "true",
+		className: clsx$1(Alert_module_default.icon, className),
+		...props
+	});
+}
+function AlertContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-content",
+		className: clsx$1(Alert_module_default.content, className),
+		...props
+	});
+}
+function AlertTitle({ as: Root = "h3", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		"data-slot": "alert-title",
+		className: clsx$1(Alert_module_default.title, className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: clsx$1(Alert_module_default.description, className),
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle };

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,11 @@
+import './Alert.css';
+//#region src/components/Alert/Alert.module.css
+var Alert_module_default = {
+	"content": "Rbv-4q_content",
+	"description": "Rbv-4q_description",
+	"icon": "Rbv-4q_icon",
+	"root": "Rbv-4q_root",
+	"title": "Rbv-4q_title"
+};
+//#endregion
+export { Alert_module_default as default };

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

@@ -1 +1 @@
-export * from './Alert';
+import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle, AlertTitleElement, AlertVariant } from "./Alert.js";

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));
+  }
+}