moduix 0.11.0 → 0.11.2

package/dist/components/Bleed/Bleed.js

@@ -0,0 +1,15 @@
+import Bleed_module_default from "./Bleed.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Bleed/Bleed.tsx
+function Bleed({ as: Root = "div", inline = "full", block = "none", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		...props,
+		"data-slot": "bleed-root",
+		"data-inline": inline,
+		"data-block": block,
+		className: clsx$1(Bleed_module_default.root, className)
+	});
+}
+//#endregion
+export { Bleed };

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

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

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

@@ -1 +1 @@
-export * from './Bleed';
+import { Bleed } from "./Bleed.js";

package/dist/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,88 @@
+@layer ui.components {
+  .twF6Fa_root {
+    max-width: var(--breadcrumbs-max-width, 100%);
+    color: var(--breadcrumbs-color, var(--color-muted-foreground));
+    font-size: var(--breadcrumbs-font-size, var(--text-sm));
+    line-height: var(--breadcrumbs-line-height, var(--line-height-text-sm));
+  }
+
+  .twF6Fa_list {
+    align-items: center;
+    gap: var(--breadcrumbs-gap, var(--spacing-1));
+    white-space: nowrap;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .twF6Fa_item {
+    flex: none;
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .twF6Fa_list > .twF6Fa_item:last-child {
+    max-width: var(--breadcrumbs-item-max-width, 16rem);
+    flex: auto;
+  }
+
+  .twF6Fa_link, .twF6Fa_page {
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+  }
+
+  .twF6Fa_link, .twF6Fa_page, .twF6Fa_ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .twF6Fa_link {
+    color: var(--breadcrumbs-link-color, var(--color-muted-foreground));
+    text-decoration: var(--breadcrumbs-link-text-decoration, none);
+    text-underline-offset: var(--breadcrumbs-link-underline-offset, .2em);
+    border-radius: var(--breadcrumbs-link-radius, var(--radius-sm));
+    transition: var(--breadcrumbs-link-transition, var(--transition-default));
+    outline: none;
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--breadcrumbs-link-color-hover, var(--color-foreground));
+        text-decoration: var(--breadcrumbs-link-text-decoration-hover, none);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--breadcrumbs-focus-ring-width, var(--border-width-sm))
+        var(--breadcrumbs-focus-ring-color, var(--color-ring));
+    }
+  }
+
+  .twF6Fa_page {
+    color: var(--breadcrumbs-page-color, var(--color-foreground));
+    font-weight: var(--breadcrumbs-page-font-weight, var(--weight-medium));
+  }
+
+  .twF6Fa_separator {
+    color: var(--breadcrumbs-separator-color, var(--color-muted-foreground));
+    font-size: var(--breadcrumbs-separator-font-size, .875em);
+    user-select: none;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .twF6Fa_ellipsis {
+    min-width: var(--breadcrumbs-ellipsis-size, 1rem);
+    min-height: var(--breadcrumbs-ellipsis-size, 1rem);
+    color: var(--breadcrumbs-ellipsis-color, var(--color-muted-foreground));
+    border-radius: var(--breadcrumbs-ellipsis-radius, var(--radius-sm));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,10 +1,38 @@
-import { ComponentProps } from 'react';
-import { useRender } from '@base-ui/react/use-render';
-declare function Breadcrumbs({ className, 'aria-label': ariaLabel, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
-declare function BreadcrumbsList({ className, ...props }: ComponentProps<'ol'>): import("react").JSX.Element;
-declare function BreadcrumbsItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
-declare function BreadcrumbsLink({ className, render, ...props }: useRender.ComponentProps<'a'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-declare function BreadcrumbsPage({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function BreadcrumbsSeparator({ className, children, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
-declare function BreadcrumbsEllipsis({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { Breadcrumbs, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsPage, BreadcrumbsSeparator, BreadcrumbsEllipsis, };
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Breadcrumbs/Breadcrumbs.d.ts
+declare function Breadcrumbs({
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: ComponentProps<'nav'>): import("react").JSX.Element;
+declare function BreadcrumbsList({
+  className,
+  ...props
+}: ComponentProps<'ol'>): import("react").JSX.Element;
+declare function BreadcrumbsItem({
+  className,
+  ...props
+}: ComponentProps<'li'>): import("react").JSX.Element;
+declare function BreadcrumbsLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'a'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function BreadcrumbsPage({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function BreadcrumbsSeparator({
+  className,
+  children,
+  ...props
+}: ComponentProps<'li'>): import("react").JSX.Element;
+declare function BreadcrumbsEllipsis({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsPage, BreadcrumbsSeparator };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,66 @@
+import Breadcrumbs_module_default from "./Breadcrumbs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Breadcrumbs/Breadcrumbs.tsx
+function Breadcrumbs({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "breadcrumbs-root",
+		"aria-label": ariaLabel,
+		className: clsx(Breadcrumbs_module_default.root, className),
+		...props
+	});
+}
+function BreadcrumbsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumbs-list",
+		className: clsx(Breadcrumbs_module_default.list, className),
+		...props
+	});
+}
+function BreadcrumbsItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumbs-item",
+		className: clsx(Breadcrumbs_module_default.item, className),
+		...props
+	});
+}
+function BreadcrumbsLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-slot": "breadcrumbs-link",
+			className: clsx(Breadcrumbs_module_default.link, className)
+		}
+	});
+}
+function BreadcrumbsPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumbs-page",
+		"aria-current": "page",
+		className: clsx(Breadcrumbs_module_default.page, className),
+		...props
+	});
+}
+function BreadcrumbsSeparator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumbs-separator",
+		"aria-hidden": "true",
+		className: clsx(Breadcrumbs_module_default.separator, className),
+		...props,
+		children: children ?? "/"
+	});
+}
+function BreadcrumbsEllipsis({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumbs-ellipsis",
+		"aria-hidden": "true",
+		className: clsx(Breadcrumbs_module_default.ellipsis, className),
+		...props,
+		children: children ?? "..."
+	});
+}
+//#endregion
+export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsPage, BreadcrumbsSeparator };

package/dist/components/Breadcrumbs/Breadcrumbs.module.js

@@ -0,0 +1,13 @@
+import './Breadcrumbs.css';
+//#region src/components/Breadcrumbs/Breadcrumbs.module.css
+var Breadcrumbs_module_default = {
+	"ellipsis": "twF6Fa_ellipsis",
+	"item": "twF6Fa_item",
+	"link": "twF6Fa_link",
+	"list": "twF6Fa_list",
+	"page": "twF6Fa_page",
+	"root": "twF6Fa_root",
+	"separator": "twF6Fa_separator"
+};
+//#endregion
+export { Breadcrumbs_module_default as default };

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

@@ -1 +1 @@
-export { Breadcrumbs, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsPage, BreadcrumbsSeparator, BreadcrumbsEllipsis, } from './Breadcrumbs';
+import { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsPage, BreadcrumbsSeparator } from "./Breadcrumbs.js";

package/dist/components/Button/Button.css

@@ -0,0 +1,194 @@
+@layer ui.components {
+  ._1ruXdW_root {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--button-content-gap, var(--spacing-2));
+    border: var(--button-border-width, var(--border-width-sm)) solid transparent;
+    border-radius: var(--button-radius, var(--radius-md));
+    color: var(--button-color, var(--color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--button-font-size, var(--text-sm));
+    font-weight: var(--button-font-weight, var(--weight-medium));
+    line-height: var(--button-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--button-transition, var(--transition-default)),
+      border-color var(--button-transition, var(--transition-default)),
+      color var(--button-transition, var(--transition-default)),
+      opacity var(--button-transition, var(--transition-default)),
+      box-shadow var(--button-transition, var(--transition-default));
+    background-color: #0000;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+
+    &:focus-visible {
+      outline: var(--button-focus-ring-width, var(--border-width-md)) solid
+        var(--button-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--button-focus-ring-offset, var(--button-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--button-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    & :where(svg) {
+      width: var(--button-icon-size, 1rem);
+      height: var(--button-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+
+    &[data-variant="default"] {
+      border-color: var(--button-default-border-color, var(--color-primary));
+      background-color: var(--button-default-bg, var(--color-primary));
+      color: var(--button-default-color, var(--color-primary-foreground));
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--button-default-bg-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--button-outline-border-color, var(--color-border));
+      background-color: var(--button-outline-bg, var(--color-background));
+      color: var(--button-outline-color, var(--color-foreground));
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--button-outline-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="secondary"] {
+      border-color: var(--button-secondary-border-color, var(--color-secondary));
+      background-color: var(--button-secondary-bg, var(--color-secondary));
+      color: var(--button-secondary-color, var(--color-secondary-foreground));
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--button-secondary-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="destructive"] {
+      border-color: var(--button-destructive-border-color, var(--color-destructive));
+      background-color: var(--button-destructive-bg, var(--color-destructive));
+      color: var(--button-destructive-color, var(--color-primary-foreground));
+
+      @media (hover: hover) {
+        &:hover {
+          filter: brightness(var(--button-destructive-hover-brightness, .96));
+        }
+      }
+    }
+
+    &[data-variant="destructive-outline"] {
+      border-color: var(--button-destructive-outline-border-color, var(--color-destructive));
+      background-color: var(--button-destructive-outline-bg, var(--color-background));
+      color: var(--button-destructive-outline-color, var(--color-destructive));
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--button-destructive-outline-bg-hover, var(--color-destructive));
+          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-primary-foreground)));
+        }
+      }
+    }
+
+    &[data-variant="ghost"] {
+      border-color: var(--button-ghost-border-color, transparent);
+      background-color: var(--button-ghost-bg, transparent);
+      color: var(--button-ghost-color, var(--color-foreground));
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--button-ghost-bg-hover, var(--color-accent));
+        }
+      }
+    }
+
+    &[data-variant="link"] {
+      color: var(--button-link-color, var(--color-primary));
+      text-decoration: var(--button-link-text-decoration, underline);
+      text-underline-offset: var(--button-link-underline-offset, .25em);
+      background-color: #0000;
+      border-color: #0000;
+      padding-inline: 0;
+
+      @media (hover: hover) {
+        &:hover {
+          color: var(--button-link-color-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &[data-size="xs"] {
+      min-height: var(--button-size-xs, var(--size-xs));
+      padding-block: var(--button-padding-y-xs, .25rem);
+      padding-inline: var(--button-padding-x-xs, .625rem);
+      font-size: var(--button-font-size-xs, var(--text-xs));
+      line-height: var(--button-line-height-xs, var(--line-height-text-xs));
+    }
+
+    &[data-size="sm"] {
+      min-height: var(--button-size-sm, var(--size-sm));
+      padding-block: var(--button-padding-y-sm, .375rem);
+      padding-inline: var(--button-padding-x-sm, .75rem);
+    }
+
+    &[data-size="md"] {
+      min-height: var(--button-size-md, var(--size-lg));
+      padding-block: var(--button-padding-y-md, .5rem);
+      padding-inline: var(--button-padding-x-md, 1rem);
+    }
+
+    &[data-size="lg"] {
+      min-height: var(--button-size-lg, var(--size-xl));
+      padding-block: var(--button-padding-y-lg, .625rem);
+      padding-inline: var(--button-padding-x-lg, 1.25rem);
+      font-size: var(--button-font-size-lg, var(--text-md));
+      line-height: var(--button-line-height-lg, var(--line-height-text-md));
+    }
+
+    &[data-size="xl"] {
+      min-height: var(--button-size-xl, 3.5rem);
+      padding-block: var(--button-padding-y-xl, .75rem);
+      padding-inline: var(--button-padding-x-xl, 1.5rem);
+      font-size: var(--button-font-size-xl, var(--text-lg));
+      line-height: var(--button-line-height-xl, var(--line-height-text-lg));
+    }
+
+    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
+      gap: 0;
+      padding: 0;
+    }
+
+    &[data-size="icon-sm"] {
+      width: var(--button-size-icon-sm, var(--size-sm));
+      min-width: var(--button-size-icon-sm, var(--size-sm));
+      height: var(--button-size-icon-sm, var(--size-sm));
+    }
+
+    &[data-size="icon-md"] {
+      width: var(--button-size-icon-md, var(--size-lg));
+      min-width: var(--button-size-icon-md, var(--size-lg));
+      height: var(--button-size-icon-md, var(--size-lg));
+    }
+
+    &[data-size="icon-lg"] {
+      width: var(--button-size-icon-lg, var(--size-xl));
+      min-width: var(--button-size-icon-lg, var(--size-xl));
+      height: var(--button-size-icon-lg, var(--size-xl));
+    }
+  }
+}

package/dist/components/Button/Button.d.ts

@@ -1,10 +1,12 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { Button } from "@base-ui/react/button";
+
+//#region src/components/Button/Button.d.ts
 type ButtonVariant = 'default' | 'outline' | 'secondary' | 'destructive' | 'destructive-outline' | 'ghost' | 'link';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon-sm' | 'icon-md' | 'icon-lg';
-type ButtonProps = ButtonPrimitive.Props & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
+type ButtonProps = Button.Props & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
 };
-declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { Button };
-export type { ButtonProps, ButtonSize, ButtonVariant };
+declare const Button$1: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Button$1 as Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/Button/Button.js

@@ -0,0 +1,18 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Button_module_default from "./Button.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Button/Button.tsx
+const Button$1 = forwardRef(function Button$2({ className, size = "md", variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		"data-slot": "button-root",
+		"data-variant": variant,
+		"data-size": size,
+		className: mergeClassName(className, Button_module_default.root),
+		...props
+	});
+});
+//#endregion
+export { Button$1 as Button };

package/dist/components/Button/Button.module.js

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

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

@@ -1,2 +1 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
+import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./Button.js";

package/dist/components/Card/Card.css

@@ -0,0 +1,136 @@
+@layer ui.components {
+  ._06ECia_root {
+    --card-padding-default: var(--card-padding, var(--spacing-6));
+    --card-title-font-size-default: var(--card-title-font-size, var(--text-lg));
+    --card-title-line-height-default: var(--card-title-line-height, var(--line-height-text-lg));
+    box-sizing: border-box;
+    border: var(--card-border-width, var(--border-width-sm)) solid
+      var(--card-border-color, var(--color-border));
+    border-radius: var(--card-radius, var(--radius-lg));
+    background-color: var(--card-bg, var(--color-card));
+    width: 100%;
+    min-width: 0;
+    color: var(--card-color, var(--color-card-foreground));
+    box-shadow: var(--card-shadow, none);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+
+    &:where(a) {
+      text-decoration: none;
+    }
+
+    &[data-size="sm"] {
+      --card-padding-default: var(--card-padding-sm, var(--spacing-4));
+      --card-title-font-size-default: var(--card-title-font-size-sm, var(--text-md));
+      --card-title-line-height-default: var(--card-title-line-height-sm, var(--line-height-text-md));
+    }
+
+    &:has(._06ECia_link) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not(._06ECia_link) {
+      z-index: 1;
+      position: relative;
+    }
+
+    & ._06ECia_link {
+      position: static;
+    }
+  }
+
+  ._06ECia_header, ._06ECia_content, ._06ECia_footer {
+    box-sizing: border-box;
+    min-width: 0;
+    padding-inline: var(--card-padding-default);
+  }
+
+  ._06ECia_header {
+    column-gap: var(--card-action-gap, var(--spacing-2));
+    row-gap: var(--card-header-gap, var(--spacing-1));
+    padding-block: var(--card-padding-default) 0;
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  ._06ECia_content {
+    padding-block: var(--card-content-padding-top, var(--spacing-4)) var(--card-padding-default);
+    color: var(--card-content-color, var(--color-muted-foreground));
+    font-size: var(--card-content-font-size, var(--text-sm));
+    line-height: var(--card-content-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+
+    &:first-child {
+      padding-block-start: var(--card-padding-default);
+    }
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ._06ECia_footer {
+    align-items: center;
+    gap: var(--card-footer-gap, var(--spacing-2));
+    padding-block: 0 var(--card-padding-default);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  ._06ECia_title {
+    min-width: 0;
+    color: var(--card-title-color, currentColor);
+    font-size: var(--card-title-font-size-default);
+    font-weight: var(--card-title-font-weight, var(--weight-semibold));
+    line-height: var(--card-title-line-height-default);
+    overflow-wrap: anywhere;
+    grid-column: 1;
+    margin: 0;
+  }
+
+  ._06ECia_description {
+    min-width: 0;
+    color: var(--card-description-color, var(--color-muted-foreground));
+    font-size: var(--card-description-font-size, var(--text-sm));
+    line-height: var(--card-description-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+    grid-column: 1;
+    margin: 0;
+  }
+
+  ._06ECia_action {
+    z-index: 1;
+    justify-content: flex-end;
+    align-items: start;
+    gap: var(--card-action-gap, var(--spacing-2));
+    grid-area: 1 / 2 / span 2;
+    justify-self: end;
+    display: inline-flex;
+    position: relative;
+  }
+
+  ._06ECia_link {
+    color: inherit;
+    text-decoration: none;
+    position: relative;
+
+    &:after {
+      content: "";
+      z-index: 0;
+      border-radius: var(--card-radius, var(--radius-lg));
+      position: absolute;
+      inset: 0;
+    }
+
+    &:focus-visible {
+      outline: 0;
+    }
+
+    &:focus-visible:after {
+      outline: var(--card-focus-ring-width, var(--border-width-md)) solid
+        var(--card-focus-ring-color, var(--color-ring));
+      outline-offset: var(--card-focus-ring-offset, var(--border-width-sm));
+    }
+  }
+}