moduix 0.10.0 → 0.11.1

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,5 +1,12 @@
-declare const Button: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ButtonProps & {
-    variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
-}, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { 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 = Button.Props & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+};
+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.cjs

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

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 +1 @@
-export { Button } from './Button';
+import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./Button.js";

package/dist/components/Card/Card.cjs

@@ -0,0 +1,81 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Card_module = require("./Card.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+//#region src/components/Card/Card.tsx
+function Card({ className, render, size = "default", ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-slot": "card",
+			"data-size": size,
+			className: (0, clsx.default)(require_Card_module.default.root, className)
+		}
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-header",
+		className: (0, clsx.default)(require_Card_module.default.header, className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-content",
+		className: (0, clsx.default)(require_Card_module.default.content, className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-footer",
+		className: (0, clsx.default)(require_Card_module.default.footer, className),
+		...props
+	});
+}
+function CardTitle({ as: Root = "h3", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Root, {
+		"data-slot": "card-title",
+		className: (0, clsx.default)(require_Card_module.default.title, className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-slot": "card-description",
+		className: (0, clsx.default)(require_Card_module.default.description, className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card-action",
+		className: (0, clsx.default)(require_Card_module.default.action, className),
+		...props
+	});
+}
+function CardLink({ className, render, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-slot": "card-link",
+			className: (0, clsx.default)(require_Card_module.default.link, className)
+		}
+	});
+}
+//#endregion
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardLink = CardLink;
+exports.CardTitle = CardTitle;

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

package/dist/components/Card/Card.d.ts

@@ -1,13 +1,48 @@
-import { ComponentProps, ComponentPropsWithoutRef } from 'react';
-declare function Card({ className, size, ...props }: ComponentProps<'div'> & {
-    size?: 'default' | 'sm';
-}): import("react/jsx-runtime").JSX.Element;
-declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function CardTitle({ as: Root, className, ...props }: ComponentPropsWithoutRef<'h3'> & {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-}): import("react/jsx-runtime").JSX.Element;
-declare function CardDescription({ className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
-declare function CardAction({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription, CardAction };
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Card/Card.d.ts
+type CardSize = 'default' | 'sm';
+type CardTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare function Card({
+  className,
+  render,
+  size,
+  ...props
+}: useRender.ComponentProps<'div'> & {
+  size?: CardSize;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardContent({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardTitle({
+  as: Root,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'h3'> & {
+  as?: CardTitleElement;
+}): import("react").JSX.Element;
+declare function CardDescription({
+  className,
+  ...props
+}: ComponentProps<'p'>): import("react").JSX.Element;
+declare function CardAction({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'a'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, type CardSize, CardTitle, type CardTitleElement };

package/dist/components/Card/Card.js

@@ -0,0 +1,72 @@
+import Card_module_default from "./Card.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Card/Card.tsx
+function Card({ className, render, size = "default", ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-slot": "card",
+			"data-size": size,
+			className: clsx$1(Card_module_default.root, className)
+		}
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: clsx$1(Card_module_default.header, className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: clsx$1(Card_module_default.content, className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: clsx$1(Card_module_default.footer, className),
+		...props
+	});
+}
+function CardTitle({ as: Root = "h3", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		"data-slot": "card-title",
+		className: clsx$1(Card_module_default.title, className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: clsx$1(Card_module_default.description, className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: clsx$1(Card_module_default.action, className),
+		...props
+	});
+}
+function CardLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-slot": "card-link",
+			className: clsx$1(Card_module_default.link, className)
+		}
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, CardTitle };

package/dist/components/Card/Card.module.cjs

@@ -0,0 +1,14 @@
+import './Card.css';
+//#region src/components/Card/Card.module.css
+var Card_module_default = {
+	"action": "_06ECia_action",
+	"content": "_06ECia_content",
+	"description": "_06ECia_description",
+	"footer": "_06ECia_footer",
+	"header": "_06ECia_header",
+	"link": "_06ECia_link",
+	"root": "_06ECia_root",
+	"title": "_06ECia_title"
+};
+//#endregion
+exports.default = Card_module_default;

package/dist/components/Card/Card.module.js

@@ -0,0 +1,14 @@
+import './Card.css';
+//#region src/components/Card/Card.module.css
+var Card_module_default = {
+	"action": "_06ECia_action",
+	"content": "_06ECia_content",
+	"description": "_06ECia_description",
+	"footer": "_06ECia_footer",
+	"header": "_06ECia_header",
+	"link": "_06ECia_link",
+	"root": "_06ECia_root",
+	"title": "_06ECia_title"
+};
+//#endregion
+export { Card_module_default as default };

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

@@ -1 +1 @@
-export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription, CardAction, } from './Card';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, CardSize, CardTitle, CardTitleElement } from "./Card.js";