@moduix/react 2.2.0 → 2.2.4

package/dist/components/avatar/Avatar.js

@@ -1,56 +1,55 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Avatar_module_default from "./Avatar.module.js";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
-//#region src/components/avatar/Avatar.tsx
-const getInitials = (name) => {
-	const parts = name.trim().split(/\s+/).filter(Boolean);
-	const firstName = parts[0] ?? "";
-	const lastName = parts.length > 1 ? parts[parts.length - 1] : "";
-	return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0] ?? "";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Avatar_module from "./Avatar.module.js";
+const getInitials = (name)=>{
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    const firstName = parts[0] ?? '';
+    const lastName = parts.length > 1 ? parts[parts.length - 1] : '';
+    return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0] ?? '';
 };
-const AvatarRoot = forwardRef(function AvatarRoot({ className, size, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.Root, {
-		ref,
-		"data-slot": "avatar-root",
-		"data-size": size,
-		className: clsx(Avatar_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Root, {
+        ref: ref,
+        "data-slot": "avatar-root",
+        "data-size": size,
+        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AvatarRootProvider = forwardRef(function AvatarRootProvider({ className, size, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.RootProvider, {
-		ref,
-		"data-slot": "avatar-root-provider",
-		"data-size": size,
-		className: clsx(Avatar_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.RootProvider, {
+        ref: ref,
+        "data-slot": "avatar-root-provider",
+        "data-size": size,
+        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const AvatarImage = forwardRef(function AvatarImage({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.Image, {
-		ref,
-		"data-slot": "avatar-image",
-		className: clsx(Avatar_module_default.image, normalizeClassName(className)),
-		...props
-	});
+const Avatar_AvatarImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        ref: ref,
+        "data-slot": "avatar-image",
+        className: clsx(Avatar_module.image, normalizeClassName(className)),
+        ...props
+    });
 });
-const AvatarFallback = forwardRef(function AvatarFallback({ children, className, name, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Avatar.Fallback, {
-		ref,
-		"data-slot": "avatar-fallback",
-		className: clsx(Avatar_module_default.fallback, normalizeClassName(className)),
-		...props,
-		children: children ?? (name ? getInitials(name) : void 0)
-	});
+const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, name, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        ref: ref,
+        "data-slot": "avatar-fallback",
+        className: clsx(Avatar_module.fallback, normalizeClassName(className)),
+        ...props,
+        children: children ?? (name ? getInitials(name) : void 0)
+    });
 });
-const Avatar$1 = Object.assign(AvatarRoot, {
-	Root: AvatarRoot,
-	RootProvider: AvatarRootProvider,
-	Image: AvatarImage,
-	Fallback: AvatarFallback
+const Avatar_Avatar = Object.assign(Avatar_AvatarRoot, {
+    Root: Avatar_AvatarRoot,
+    RootProvider: Avatar_AvatarRootProvider,
+    Context: Avatar.Context,
+    Image: Avatar_AvatarImage,
+    Fallback: Avatar_AvatarFallback
 });
-//#endregion
-export { Avatar$1 as Avatar, useAvatar, useAvatarContext };
+export { Avatar_Avatar as Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.module.js

@@ -1,9 +1,7 @@
-import './Avatar.css';
-//#region src/components/avatar/Avatar.module.css
-var Avatar_module_default = {
-	"fallback": "qCmyuq_fallback",
-	"image": "qCmyuq_image",
-	"root": "qCmyuq_root"
+import "./Avatar_module.css";
+const Avatar_module = {
+    root: "root-qlUdBE",
+    image: "image-eMihfZ",
+    fallback: "fallback-UO951k"
 };
-//#endregion
-export { Avatar_module_default as default };
+export default Avatar_module;

package/dist/components/avatar/{Avatar.css → Avatar_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  .qCmyuq_root {
+  .root-qlUdBE {
     box-sizing: border-box;
     width: var(--moduix-avatar-size, var(--moduix-size-md));
     height: var(--moduix-avatar-size, var(--moduix-size-md));
@@ -9,6 +9,7 @@
     font-size: var(--moduix-avatar-font-size, var(--moduix-text-md));
     font-weight: var(--moduix-avatar-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-avatar-line-height, var(--moduix-line-height-text-md));
+    -webkit-user-select: none;
     user-select: none;
     vertical-align: middle;
     flex-shrink: 0;
@@ -17,46 +18,46 @@
     display: inline-flex;
     position: relative;
     overflow: hidden;
+  }
 
-    &:where([data-size="xs"]) {
-      --moduix-avatar-size: var(--moduix-size-xs);
-      --moduix-avatar-font-size: var(--moduix-text-xs);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-xs);
-    }
+  .root-qlUdBE:where([data-size="xs"]) {
+    --moduix-avatar-size: var(--moduix-size-xs);
+    --moduix-avatar-font-size: var(--moduix-text-xs);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-xs);
+  }
 
-    &:where([data-size="sm"]) {
-      --moduix-avatar-size: var(--moduix-size-sm);
-      --moduix-avatar-font-size: var(--moduix-text-sm);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-sm);
-    }
+  .root-qlUdBE:where([data-size="sm"]) {
+    --moduix-avatar-size: var(--moduix-size-sm);
+    --moduix-avatar-font-size: var(--moduix-text-sm);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-sm);
+  }
 
-    &:where([data-size="lg"]) {
-      --moduix-avatar-size: var(--moduix-size-lg);
-      --moduix-avatar-font-size: var(--moduix-text-lg);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
-    }
+  .root-qlUdBE:where([data-size="lg"]) {
+    --moduix-avatar-size: var(--moduix-size-lg);
+    --moduix-avatar-font-size: var(--moduix-text-lg);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
+  }
 
-    &:where([data-size="xl"]) {
-      --moduix-avatar-size: var(--moduix-size-xl);
-      --moduix-avatar-font-size: var(--moduix-text-lg);
-      --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
-    }
+  .root-qlUdBE:where([data-size="xl"]) {
+    --moduix-avatar-size: var(--moduix-size-xl);
+    --moduix-avatar-font-size: var(--moduix-text-lg);
+    --moduix-avatar-line-height: var(--moduix-line-height-text-lg);
   }
 
-  .qCmyuq_image {
+  .image-eMihfZ {
     object-fit: var(--moduix-avatar-image-object-fit, cover);
     object-position: var(--moduix-avatar-image-object-position, center);
     border-radius: inherit;
     width: 100%;
     height: 100%;
     display: block;
+  }
 
-    &[data-state="hidden"] {
-      display: none;
-    }
+  .image-eMihfZ[data-state="hidden"] {
+    display: none;
   }
 
-  .qCmyuq_fallback {
+  .fallback-UO951k {
     width: 100%;
     height: 100%;
     padding: var(--moduix-avatar-fallback-padding, 0);
@@ -67,9 +68,10 @@
     align-items: center;
     line-height: 1;
     display: inline-flex;
+  }
 
-    &[data-state="hidden"] {
-      display: none;
-    }
+  .fallback-UO951k[data-state="hidden"] {
+    display: none;
   }
 }
+

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

@@ -1,2 +1 @@
-import { Avatar, useAvatar, useAvatarContext } from "./Avatar.js";
-export { Avatar, useAvatar, useAvatarContext };
+export { Avatar, useAvatar, useAvatarContext } from './Avatar.js';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from "./Avatar.js";

package/dist/components/badge/Badge.d.ts

@@ -1,11 +1,9 @@
-//#region src/components/badge/Badge.d.ts
 declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
-} & import("react").RefAttributes<HTMLSpanElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
-  } & import("react").RefAttributes<HTMLSpanElement>>;
-  Dot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+    } & import("react").RefAttributes<HTMLSpanElement>>;
+    Dot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
-export { Badge };
+export { Badge };

package/dist/components/badge/Badge.js

@@ -1,35 +1,38 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Badge_module_default from "./Badge.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/badge/Badge.tsx
-const BadgeRoot = forwardRef(function BadgeRoot({ className, variant = "default", ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.span, {
-		ref,
-		"data-scope": "badge",
-		"data-part": "root",
-		"data-slot": "badge-root",
-		"data-variant": variant,
-		className: clsx(Badge_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { Children, forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Badge_module from "./Badge.module.js";
+const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, variant = 'default', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "badge",
+        "data-part": "root",
+        "data-slot": "badge-root",
+        "data-variant": variant,
+        className: clsx(Badge_module.root, normalizeClassName(className)),
+        asChild: asChild,
+        ...props,
+        children: asChild ? children : Children.map(children, (child)=>'string' == typeof child || 'number' == typeof child ? /*#__PURE__*/ jsx("span", {
+                className: Badge_module.label,
+                children: child
+            }) : child)
+    });
 });
-const BadgeDot = forwardRef(function BadgeDot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.span, {
-		ref,
-		"data-scope": "badge",
-		"data-part": "dot",
-		"data-slot": "badge-dot",
-		"aria-hidden": "true",
-		className: clsx(Badge_module_default.dot, normalizeClassName(className)),
-		...props
-	});
+const Badge_BadgeDot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "badge",
+        "data-part": "dot",
+        "data-slot": "badge-dot",
+        "aria-hidden": "true",
+        className: clsx(Badge_module.dot, normalizeClassName(className)),
+        ...props
+    });
 });
-const Badge = Object.assign(BadgeRoot, {
-	Root: BadgeRoot,
-	Dot: BadgeDot
+const Badge = Object.assign(Badge_BadgeRoot, {
+    Root: Badge_BadgeRoot,
+    Dot: Badge_BadgeDot
 });
-//#endregion
 export { Badge };

package/dist/components/badge/Badge.module.js

@@ -1,8 +1,7 @@
-import './Badge.css';
-//#region src/components/badge/Badge.module.css
-var Badge_module_default = {
-	"dot": "NXa69G_dot",
-	"root": "NXa69G_root"
+import "./Badge_module.css";
+const Badge_module = {
+    root: "root-qRQEjV",
+    dot: "dot-V00V3q",
+    label: "label-FgBsAj"
 };
-//#endregion
-export { Badge_module_default as default };
+export default Badge_module;

package/dist/components/badge/Badge_module.css

@@ -0,0 +1,115 @@
+@layer moduix.components {
+  .root-qRQEjV {
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-badge-gap, var(--moduix-spacing-1-5));
+    border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-badge-border-color, transparent);
+    border-radius: var(--moduix-badge-radius, var(--moduix-radius-full));
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    padding-block: var(--moduix-badge-padding-y, 0);
+    padding-inline: var(--moduix-badge-padding-x, var(--moduix-spacing-2-5));
+    background-color: var(--moduix-badge-bg, var(--moduix-color-primary));
+    color: var(--moduix-badge-color, var(--moduix-color-primary-foreground));
+    font-size: var(--moduix-badge-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-badge-font-weight, var(--moduix-weight-medium));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--moduix-badge-line-height, var(--moduix-line-height-text-xs));
+    min-height: var(--moduix-badge-height, 1.25rem);
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    transition: color var(--moduix-transition-default),
+      background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default);
+    text-decoration: none;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .root-qRQEjV:is(a, button, [role="button"]) {
+    cursor: pointer;
+  }
+
+  .root-qRQEjV:is(a, button, [role="button"]):focus-visible {
+    outline: var(--moduix-badge-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+          solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  :is(.root-qRQEjV:is(a, button, [role="button"])[data-variant="default"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="secondary"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="destructive"]):hover {
+    opacity: .9;
+  }
+
+  :is(.root-qRQEjV:is(a, button, [role="button"])[data-variant="outline"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="ghost"]):hover {
+    border-color: var(--moduix-badge-border-color, var(--moduix-color-primary));
+    color: var(--moduix-badge-color, var(--moduix-color-primary));
+  }
+
+  .root-qRQEjV:is(a, button, [role="button"])[data-variant="link"]:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .root-qRQEjV > svg {
+    width: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .root-qRQEjV[data-variant="secondary"] {
+    background-color: var(--moduix-badge-bg, var(--moduix-color-secondary));
+    color: var(--moduix-badge-color, var(--moduix-color-secondary-foreground));
+  }
+
+  .root-qRQEjV[data-variant="destructive"] {
+    background-color: var(--moduix-badge-bg, var(--moduix-color-destructive));
+    color: var(--moduix-badge-color, var(--moduix-color-destructive-foreground));
+  }
+
+  .root-qRQEjV[data-variant="outline"], .root-qRQEjV[data-variant="ghost"], .root-qRQEjV[data-variant="link"] {
+    background-color: var(--moduix-badge-bg, transparent);
+  }
+
+  .root-qRQEjV[data-variant="outline"], .root-qRQEjV[data-variant="ghost"] {
+    color: var(--moduix-badge-color, var(--moduix-color-foreground));
+  }
+
+  .root-qRQEjV[data-variant="outline"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-color-border));
+  }
+
+  .root-qRQEjV[data-variant="link"] {
+    min-height: auto;
+    color: var(--moduix-badge-color, var(--moduix-color-primary));
+    text-decoration: underline;
+    -webkit-text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
+    text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
+    text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
+    border-color: #0000;
+    border-radius: 0;
+    padding-block: .125em;
+    padding-inline: 0;
+    text-decoration-thickness: from-font;
+  }
+
+  .dot-V00V3q {
+    width: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
+    height: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
+    background-color: currentColor;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .label-FgBsAj {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './Badge.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export * from "./Badge.js";

package/dist/components/bleed/Bleed.d.ts

@@ -1,14 +1,12 @@
-//#region src/components/bleed/Bleed.d.ts
 type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type BleedInline = BleedAmount | 'full';
 declare const Bleed: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
-  inline?: BleedInline;
-  block?: BleedAmount;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     inline?: BleedInline;
     block?: BleedAmount;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        inline?: BleedInline;
+        block?: BleedAmount;
+    } & import("react").RefAttributes<HTMLElement>>;
 };
-//#endregion
-export { Bleed };
+export { Bleed };

package/dist/components/bleed/Bleed.js

@@ -1,22 +1,22 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Bleed_module_default from "./Bleed.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/bleed/Bleed.tsx
-const BleedRoot = forwardRef(function BleedRoot({ inline = "full", block = "none", className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		...props,
-		"data-scope": "bleed",
-		"data-part": "root",
-		"data-slot": "bleed-root",
-		"data-inline": inline,
-		"data-block": block,
-		className: clsx(Bleed_module_default.root, normalizeClassName(className))
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Bleed_module from "./Bleed.module.js";
+const Bleed_BleedRoot = /*#__PURE__*/ forwardRef(function({ inline = 'full', block = 'none', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        ...props,
+        "data-scope": "bleed",
+        "data-part": "root",
+        "data-slot": "bleed-root",
+        "data-inline": inline,
+        "data-block": block,
+        className: clsx(Bleed_module.root, normalizeClassName(className))
+    });
+});
+const Bleed = Object.assign(Bleed_BleedRoot, {
+    Root: Bleed_BleedRoot
 });
-const Bleed = Object.assign(BleedRoot, { Root: BleedRoot });
-//#endregion
 export { Bleed };

package/dist/components/bleed/Bleed.module.js

@@ -1,5 +1,5 @@
-import './Bleed.css';
-//#region src/components/bleed/Bleed.module.css
-var Bleed_module_default = { "root": "m38JbW_root" };
-//#endregion
-export { Bleed_module_default as default };
+import "./Bleed_module.css";
+const Bleed_module = {
+    root: "root-t9_f9j"
+};
+export default Bleed_module;

package/dist/components/bleed/Bleed_module.css

@@ -0,0 +1,52 @@
+@layer moduix.components {
+  .root-t9_f9j {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .root-t9_f9j[data-inline="xs"] {
+    margin-inline: calc(var(--moduix-bleed-inline-xs, var(--moduix-spacing-1)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="sm"] {
+    margin-inline: calc(var(--moduix-bleed-inline-sm, var(--moduix-spacing-2)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="md"] {
+    margin-inline: calc(var(--moduix-bleed-inline-md, var(--moduix-spacing-3)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="lg"] {
+    margin-inline: calc(var(--moduix-bleed-inline-lg, var(--moduix-spacing-4)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="xl"] {
+    margin-inline: calc(var(--moduix-bleed-inline-xl, var(--moduix-spacing-6)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="full"] {
+    inline-size: var(--moduix-bleed-inline-full-size, 100vi);
+    margin-inline: var(--moduix-bleed-inline-full, calc(50% - 50vi));
+  }
+
+  .root-t9_f9j[data-block="xs"] {
+    margin-block: calc(var(--moduix-bleed-block-xs, var(--moduix-spacing-1)) * -1);
+  }
+
+  .root-t9_f9j[data-block="sm"] {
+    margin-block: calc(var(--moduix-bleed-block-sm, var(--moduix-spacing-2)) * -1);
+  }
+
+  .root-t9_f9j[data-block="md"] {
+    margin-block: calc(var(--moduix-bleed-block-md, var(--moduix-spacing-3)) * -1);
+  }
+
+  .root-t9_f9j[data-block="lg"] {
+    margin-block: calc(var(--moduix-bleed-block-lg, var(--moduix-spacing-4)) * -1);
+  }
+
+  .root-t9_f9j[data-block="xl"] {
+    margin-block: calc(var(--moduix-bleed-block-xl, var(--moduix-spacing-6)) * -1);
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './Bleed.js';

package/dist/components/bleed/index.js

@@ -0,0 +1 @@
+export * from "./Bleed.js";