@moduix/react 2.1.0 → 2.2.4

package/dist/components/card/Card.js

@@ -1,112 +1,110 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Card_module_default from "./Card.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/card/Card.tsx
-const CardRoot = forwardRef(function CardRoot({ className, size = "md", variant = "outline", ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "root",
-		"data-slot": "card-root",
-		"data-size": size,
-		"data-variant": variant,
-		className: clsx(Card_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Card_module from "./Card.module.js";
+const Card_CardRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', variant = 'outline', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "root",
+        "data-slot": "card-root",
+        "data-size": size,
+        "data-variant": variant,
+        className: clsx(Card_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardHeader = forwardRef(function CardHeader({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "header",
-		"data-slot": "card-header",
-		className: clsx(Card_module_default.header, normalizeClassName(className)),
-		...props
-	});
+const Card_CardHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "header",
+        "data-slot": "card-header",
+        className: clsx(Card_module.header, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardBody = forwardRef(function CardBody({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "body",
-		"data-slot": "card-body",
-		className: clsx(Card_module_default.body, normalizeClassName(className)),
-		...props
-	});
+const Card_CardBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "body",
+        "data-slot": "card-body",
+        className: clsx(Card_module.body, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardMedia = forwardRef(function CardMedia({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "media",
-		"data-slot": "card-media",
-		className: clsx(Card_module_default.media, normalizeClassName(className)),
-		...props
-	});
+const Card_CardMedia = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "media",
+        "data-slot": "card-media",
+        className: clsx(Card_module.media, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardFooter = forwardRef(function CardFooter({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "footer",
-		"data-slot": "card-footer",
-		className: clsx(Card_module_default.footer, normalizeClassName(className)),
-		...props
-	});
+const Card_CardFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "footer",
+        "data-slot": "card-footer",
+        className: clsx(Card_module.footer, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardTitle = forwardRef(function CardTitle({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.h3, {
-		ref,
-		"data-scope": "card",
-		"data-part": "title",
-		"data-slot": "card-title",
-		className: clsx(Card_module_default.title, normalizeClassName(className)),
-		...props
-	});
+const Card_CardTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.h3, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "title",
+        "data-slot": "card-title",
+        className: clsx(Card_module.title, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardDescription = forwardRef(function CardDescription({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.p, {
-		ref,
-		"data-scope": "card",
-		"data-part": "description",
-		"data-slot": "card-description",
-		className: clsx(Card_module_default.description, normalizeClassName(className)),
-		...props
-	});
+const Card_CardDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.p, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "description",
+        "data-slot": "card-description",
+        className: clsx(Card_module.description, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardAction = forwardRef(function CardAction({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "card",
-		"data-part": "action",
-		"data-slot": "card-action",
-		className: clsx(Card_module_default.action, normalizeClassName(className)),
-		...props
-	});
+const Card_CardAction = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "action",
+        "data-slot": "card-action",
+        className: clsx(Card_module.action, normalizeClassName(className)),
+        ...props
+    });
 });
-const CardLink = forwardRef(function CardLink({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.a, {
-		ref,
-		"data-scope": "card",
-		"data-part": "link",
-		"data-slot": "card-link",
-		className: clsx(Card_module_default.link, normalizeClassName(className)),
-		...props
-	});
+const Card_CardLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.a, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "link",
+        "data-slot": "card-link",
+        className: clsx(Card_module.link, normalizeClassName(className)),
+        ...props
+    });
 });
-const Card = Object.assign(CardRoot, {
-	Root: CardRoot,
-	Header: CardHeader,
-	Body: CardBody,
-	Media: CardMedia,
-	Footer: CardFooter,
-	Title: CardTitle,
-	Description: CardDescription,
-	Action: CardAction,
-	Link: CardLink
+const Card = Object.assign(Card_CardRoot, {
+    Root: Card_CardRoot,
+    Header: Card_CardHeader,
+    Body: Card_CardBody,
+    Media: Card_CardMedia,
+    Footer: Card_CardFooter,
+    Title: Card_CardTitle,
+    Description: Card_CardDescription,
+    Action: Card_CardAction,
+    Link: Card_CardLink
 });
-//#endregion
 export { Card };

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

@@ -1,15 +1,13 @@
-import './Card.css';
-//#region src/components/card/Card.module.css
-var Card_module_default = {
-	"action": "_2rXk6G_action",
-	"body": "_2rXk6G_body",
-	"description": "_2rXk6G_description",
-	"footer": "_2rXk6G_footer",
-	"header": "_2rXk6G_header",
-	"link": "_2rXk6G_link",
-	"media": "_2rXk6G_media",
-	"root": "_2rXk6G_root",
-	"title": "_2rXk6G_title"
+import "./Card_module.css";
+const Card_module = {
+    root: "root-aWX0Lo",
+    header: "header-F5Ms8N",
+    body: "body-eUwDjL",
+    footer: "footer-QbUloO",
+    media: "media-ARRUMe",
+    title: "title-E5XltJ",
+    description: "description-sVGJRZ",
+    action: "action-LB386d",
+    link: "link-HfS5Tb"
 };
-//#endregion
-export { Card_module_default as default };
+export default Card_module;

package/dist/components/card/Card_module.css

@@ -0,0 +1,169 @@
+@layer moduix.components {
+  .root-aWX0Lo {
+    --moduix-card-padding-default: var(--moduix-card-spacing, var(--moduix-card-padding, var(--moduix-spacing-6)));
+    --moduix-card-section-spacing-default: var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4)));
+    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size, var(--moduix-text-lg));
+    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height, var(--moduix-line-height-text-lg));
+    box-sizing: border-box;
+    border: var(--moduix-card-border-width, var(--moduix-card-border-width-default, var(--moduix-border-width-sm)))
+      solid var(--moduix-card-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-card-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-card-bg, var(--moduix-card-bg-default, var(--moduix-color-card)));
+    width: 100%;
+    min-width: 0;
+    color: var(--moduix-card-color, var(--moduix-color-card-foreground));
+    box-shadow: var(--moduix-card-shadow, var(--moduix-card-shadow-default, none));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .root-aWX0Lo:where(a) {
+    text-decoration: none;
+  }
+
+  .root-aWX0Lo[data-size="sm"] {
+    --moduix-card-padding-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-padding-sm, var(--moduix-spacing-4))));
+    --moduix-card-section-spacing-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
+    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-sm, var(--moduix-text-md));
+    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-sm, var(--moduix-line-height-text-md));
+  }
+
+  .root-aWX0Lo[data-size="lg"] {
+    --moduix-card-padding-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-padding-lg, var(--moduix-spacing-8))));
+    --moduix-card-section-spacing-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
+    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-lg, var(--moduix-text-xl));
+    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-lg, var(--moduix-line-height-text-xl));
+  }
+
+  .root-aWX0Lo[data-variant="elevated"] {
+    --moduix-card-border-width-default: 0;
+    --moduix-card-shadow-default: var(--moduix-shadow-md);
+  }
+
+  .root-aWX0Lo[data-variant="subtle"] {
+    --moduix-card-border-width-default: 0;
+    --moduix-card-bg-default: var(--moduix-color-muted);
+  }
+
+  .root-aWX0Lo:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
+    z-index: 1;
+    position: relative;
+  }
+
+  .header-F5Ms8N, .body-eUwDjL, .footer-QbUloO {
+    box-sizing: border-box;
+    min-width: 0;
+    padding-inline: var(--moduix-card-padding-default);
+  }
+
+  .header-F5Ms8N {
+    column-gap: var(--moduix-card-action-gap, var(--moduix-spacing-2));
+    row-gap: var(--moduix-card-header-gap, var(--moduix-spacing-1));
+    padding-block: var(--moduix-card-padding-default) 0;
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .media-ARRUMe {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .media-ARRUMe > :where(img, picture, video, canvas, svg, iframe) {
+    width: 100%;
+    max-width: 100%;
+    display: block;
+  }
+
+  .media-ARRUMe > picture > img {
+    display: block;
+  }
+
+  .body-eUwDjL {
+    padding-block: var(--moduix-card-section-spacing-default) var(--moduix-card-padding-default);
+    color: var(--moduix-card-body-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-card-body-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-card-body-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
+  }
+
+  .body-eUwDjL:first-child {
+    padding-block-start: var(--moduix-card-padding-default);
+  }
+
+  .body-eUwDjL > :first-child {
+    margin-top: 0;
+  }
+
+  .body-eUwDjL > :last-child {
+    margin-bottom: 0;
+  }
+
+  .footer-QbUloO {
+    align-items: center;
+    gap: var(--moduix-card-footer-gap, var(--moduix-spacing-2));
+    padding-block: 0 var(--moduix-card-padding-default);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .title-E5XltJ {
+    min-width: 0;
+    color: var(--moduix-card-title-color, currentColor);
+    font-size: var(--moduix-card-title-font-size-default);
+    font-weight: var(--moduix-card-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-card-title-line-height-default);
+    overflow-wrap: anywhere;
+    grid-column: 1;
+    margin: 0;
+  }
+
+  .description-sVGJRZ {
+    min-width: 0;
+    color: var(--moduix-card-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-card-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-card-description-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
+    grid-column: 1;
+    margin: 0;
+  }
+
+  .action-LB386d {
+    z-index: 1;
+    justify-content: flex-end;
+    align-items: start;
+    gap: var(--moduix-card-action-gap, var(--moduix-spacing-2));
+    grid-area: 1 / 2 / span 2;
+    justify-self: end;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .link-HfS5Tb {
+    color: inherit;
+    text-decoration: none;
+    position: static;
+  }
+
+  .link-HfS5Tb:after {
+    content: "";
+    z-index: 0;
+    border-radius: var(--moduix-card-radius, var(--moduix-radius-lg));
+    position: absolute;
+    inset: 0;
+  }
+
+  .link-HfS5Tb:focus-visible {
+    outline: 0;
+  }
+
+  .link-HfS5Tb:focus-visible:after {
+    outline: var(--moduix-card-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-card-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-card-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Card } from './Card.js';

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from "./Card.js";

package/dist/components/carousel/Carousel.d.ts

@@ -1,23 +1,20 @@
-import { Carousel } from "@ark-ui/react/carousel";
-
-//#region src/components/carousel/Carousel.d.ts
-declare const Carousel$1: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Carousel.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Context: (props: Carousel.ContextProps) => import("react").ReactNode;
-  Control: import("react").ForwardRefExoticComponent<Omit<Carousel.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemGroup: import("react").ForwardRefExoticComponent<Omit<Carousel.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<Carousel.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  PrevTrigger: import("react").ForwardRefExoticComponent<Omit<Carousel.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  NextTrigger: import("react").ForwardRefExoticComponent<Omit<Carousel.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  IndicatorGroup: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Indicators: import("react").ForwardRefExoticComponent<Omit<Carousel.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement> & {
-    indicatorClassName?: string;
-  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  AutoplayTrigger: import("react").ForwardRefExoticComponent<Omit<Carousel.AutoplayTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  AutoplayIndicator: import("react").ForwardRefExoticComponent<Omit<Carousel.AutoplayIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  ProgressText: import("react").ForwardRefExoticComponent<Omit<Carousel.ProgressTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+import { Carousel as CarouselPrimitive, useCarousel, useCarouselContext } from '@ark-ui/react/carousel';
+declare const Carousel: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: CarouselPrimitive.ContextProps) => import("react").ReactNode;
+    Control: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    PrevTrigger: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    NextTrigger: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    IndicatorGroup: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicators: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement> & {
+        indicatorClassName?: string;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    AutoplayTrigger: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.AutoplayTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    AutoplayIndicator: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.AutoplayIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    ProgressText: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.ProgressTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
-//#endregion
-export { Carousel$1 as Carousel };
+export { Carousel, useCarousel, useCarouselContext };