moduix 0.11.0 → 0.11.2

package/dist/components/Text/Text.css

@@ -0,0 +1,73 @@
+@layer ui.components {
+  .wivAhq_root {
+    font-family: var(--text-font-family, var(--font-sans));
+    font-size: var(--text-font-size-md, var(--text-md));
+    font-weight: var(--text-font-weight-regular, var(--weight-regular));
+    line-height: var(--text-line-height-md, var(--line-height-text-md));
+    letter-spacing: var(--text-letter-spacing, 0);
+    color: var(--text-default-color, var(--color-foreground));
+    text-align: start;
+    overflow-wrap: break-word;
+    margin: 0;
+
+    &[data-size="xs"] {
+      font-size: var(--text-font-size-xs, var(--text-xs));
+      line-height: var(--text-line-height-xs, var(--line-height-text-xs));
+    }
+
+    &[data-size="sm"] {
+      font-size: var(--text-font-size-sm, var(--text-sm));
+      line-height: var(--text-line-height-sm, var(--line-height-text-sm));
+    }
+
+    &[data-size="lg"] {
+      font-size: var(--text-font-size-lg, var(--text-lg));
+      line-height: var(--text-line-height-lg, var(--line-height-text-lg));
+    }
+
+    &[data-size="xl"] {
+      font-size: var(--text-font-size-xl, var(--text-xl));
+      line-height: var(--text-line-height-xl, var(--line-height-text-xl));
+    }
+
+    &[data-weight="medium"] {
+      font-weight: var(--text-font-weight-medium, var(--weight-medium));
+    }
+
+    &[data-weight="semibold"] {
+      font-weight: var(--text-font-weight-semibold, var(--weight-semibold));
+    }
+
+    &[data-weight="bold"] {
+      font-weight: var(--text-font-weight-bold, var(--weight-bold));
+    }
+
+    &[data-tone="muted"] {
+      color: var(--text-muted-color, var(--color-muted-foreground));
+    }
+
+    &[data-tone="subtle"] {
+      color: var(--text-subtle-color, var(--color-secondary-foreground));
+    }
+
+    &[data-tone="primary"] {
+      color: var(--text-primary-color, var(--color-primary));
+    }
+
+    &[data-tone="destructive"] {
+      color: var(--text-destructive-color, var(--color-destructive));
+    }
+
+    &[data-align="left"] {
+      text-align: left;
+    }
+
+    &[data-align="center"] {
+      text-align: center;
+    }
+
+    &[data-align="right"] {
+      text-align: right;
+    }
+  }
+}

package/dist/components/Text/Text.d.ts

@@ -1,16 +1,27 @@
-import { useRender } from '@base-ui/react/use-render';
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Text/Text.d.ts
 type TextElement = 'p' | 'span' | 'small' | 'strong' | 'em' | 'div';
 type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 type TextTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
 type TextAlign = 'left' | 'center' | 'right';
 type TextProps = useRender.ComponentProps<'p'> & {
-    as?: TextElement;
-    size?: TextSize;
-    weight?: TextWeight;
-    tone?: TextTone;
-    align?: TextAlign;
+  as?: TextElement;
+  size?: TextSize;
+  weight?: TextWeight;
+  tone?: TextTone;
+  align?: TextAlign;
 };
-declare function Text({ as, render, size, weight, tone, align, className, ...props }: TextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-export { Text };
-export type { TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight };
+declare function Text({
+  as,
+  render,
+  size,
+  weight,
+  tone,
+  align,
+  className,
+  ...props
+}: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Text, type TextAlign, type TextElement, type TextProps, type TextSize, type TextTone, type TextWeight };

package/dist/components/Text/Text.js

@@ -0,0 +1,42 @@
+import Text_module_default from "./Text.module.js";
+import { clsx } from "clsx";
+import { createElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Text/Text.tsx
+const defaultVariants = {
+	size: "md",
+	weight: "regular"
+};
+const defaultVariantsByTagName = {
+	small: {
+		size: "sm",
+		weight: "regular"
+	},
+	strong: {
+		size: "md",
+		weight: "semibold"
+	}
+};
+function getDefaultVariants(tagName) {
+	if (!tagName) return defaultVariants;
+	return defaultVariantsByTagName[tagName] ?? defaultVariants;
+}
+function Text({ as, render, size, weight, tone = "default", align, className, ...props }) {
+	const resolvedRender = render ?? (as ? createElement(as) : void 0);
+	const defaults = getDefaultVariants(typeof resolvedRender === "function" ? void 0 : typeof resolvedRender?.type === "string" ? resolvedRender.type : void 0);
+	return useRender({
+		defaultTagName: "p",
+		render: resolvedRender,
+		props: {
+			...props,
+			"data-slot": "text-root",
+			"data-size": size ?? defaults.size,
+			"data-weight": weight ?? defaults.weight,
+			"data-tone": tone,
+			"data-align": align,
+			className: clsx(Text_module_default.root, className)
+		}
+	});
+}
+//#endregion
+export { Text };

package/dist/components/Text/Text.module.js

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

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

@@ -1 +1 @@
-export * from './Text';
+import { Text, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight } from "./Text.js";

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,59 @@
+@layer ui.components {
+  .Wcx2Va_root {
+    box-sizing: border-box;
+    width: var(--textarea-width, 100%);
+    max-width: var(--textarea-max-width, none);
+    min-height: var(--textarea-min-height, 6rem);
+    border: var(--textarea-border-width, var(--border-width-sm)) var(--textarea-border-style, solid)
+      var(--textarea-border-color, var(--color-border));
+    border-radius: var(--textarea-radius, var(--radius-md));
+    padding: var(--textarea-padding-y, .5rem) var(--textarea-padding-x, .875rem);
+    background-color: var(--textarea-bg, var(--color-background));
+    color: var(--textarea-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--textarea-font-size, var(--text-md));
+    line-height: var(--textarea-line-height, var(--line-height-text-md));
+    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--textarea-focus-ring-offset, calc(0px - var(--textarea-border-width, var(--border-width-sm))));
+    resize: var(--textarea-resize, vertical);
+    transition: border-color var(--textarea-transition, var(--transition-default)),
+      outline-color var(--textarea-transition, var(--transition-default)),
+      opacity var(--textarea-transition, var(--transition-default));
+    margin: 0;
+  }
+
+  .Wcx2Va_root::placeholder {
+    color: var(--textarea-placeholder-color, var(--color-muted-foreground));
+  }
+
+  .Wcx2Va_root:focus-visible {
+    outline-color: var(--textarea-focus-ring-color, var(--color-ring));
+  }
+
+  .Wcx2Va_root[data-invalid] {
+    border-color: var(--textarea-border-color-invalid, var(--color-destructive));
+  }
+
+  .Wcx2Va_root[data-invalid]:focus-visible {
+    outline-color: var(--textarea-border-color-invalid, var(--color-destructive));
+  }
+
+  .Wcx2Va_root:is([disabled], [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--textarea-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .Wcx2Va_root:is(:read-only, [data-readonly]) {
+    background-color: var(--textarea-readonly-bg, var(--textarea-bg, var(--color-background)));
+    color: var(--textarea-readonly-color, var(--textarea-color, var(--color-foreground)));
+  }
+
+  @supports (field-sizing: content) {
+    .Wcx2Va_root[data-auto-resize] {
+      field-sizing: content;
+      resize: none;
+      overflow-y: hidden;
+    }
+  }
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,7 +1,9 @@
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+
+//#region src/components/Textarea/Textarea.d.ts
 type TextareaProps = ComponentProps<'textarea'> & {
-    autoResize?: boolean;
+  autoResize?: boolean;
 };
-declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
-export type { TextareaProps };
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Textarea, type TextareaProps };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,28 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Textarea_module_default from "./Textarea.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Field } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/Textarea/Textarea.tsx
+const assignForwardedRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+};
+const Textarea = forwardRef(function Textarea({ autoResize = false, className, ...props }, forwardedRef) {
+	const setTextareaRef = useCallback((node) => {
+		assignForwardedRef(forwardedRef, node instanceof HTMLTextAreaElement ? node : null);
+	}, [forwardedRef]);
+	return /* @__PURE__ */ jsx(Field.Control, {
+		ref: setTextareaRef,
+		"data-slot": "textarea-root",
+		"data-auto-resize": autoResize ? "" : void 0,
+		className: mergeClassName(className, Textarea_module_default.root),
+		render: (controlProps) => /* @__PURE__ */ jsx("textarea", { ...mergeProps(controlProps, props) })
+	});
+});
+//#endregion
+export { Textarea };

package/dist/components/Textarea/Textarea.module.js

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

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

@@ -1,2 +1 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';
+import { Textarea, TextareaProps } from "./Textarea.js";

package/dist/components/Toast/Toast.css

@@ -0,0 +1,351 @@
+@layer ui.components {
+  .xGZ1aG_portal {
+    z-index: var(--toast-z-index, var(--z-toast));
+  }
+
+  .xGZ1aG_viewport {
+    z-index: var(--toast-z-index, var(--z-toast));
+    width: var(--toast-viewport-width, 20rem);
+    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
+    min-height: 1px;
+    margin: 0 auto;
+    position: fixed;
+
+    &[data-placement^="top"] {
+      top: var(--toast-viewport-inset, 1rem);
+      bottom: auto;
+    }
+
+    &[data-placement^="bottom"] {
+      top: auto;
+      bottom: var(--toast-viewport-inset, 1rem);
+    }
+
+    &[data-placement$="left"] {
+      left: var(--toast-viewport-inset, 1rem);
+      right: auto;
+    }
+
+    &[data-placement$="center"] {
+      left: 50%;
+      right: auto;
+      translate: -50%;
+    }
+
+    &[data-placement$="right"] {
+      left: auto;
+      right: var(--toast-viewport-inset, 1rem);
+    }
+  }
+
+  .xGZ1aG_anchoredViewport {
+    outline: 0;
+  }
+
+  .xGZ1aG_anchoredPositioner {
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+  }
+
+  .xGZ1aG_anchoredRoot {
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(var(--toast-anchored-max-width, 20rem),
+      calc(100vw - (var(--toast-viewport-inset, 1rem) * 2)));
+    border-radius: var(--toast-radius, var(--radius-md));
+    background-color: var(--toast-bg, var(--color-popover));
+    color: var(--toast-color, var(--color-popover-foreground));
+    padding: var(--toast-anchored-padding-y, .25rem) var(--toast-anchored-padding-x, .5rem);
+    font-size: var(--toast-anchored-font-size, var(--text-sm));
+    line-height: var(--toast-anchored-line-height, var(--line-height-text-sm));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    outline: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    pointer-events: auto;
+    transform-origin: var(--transform-origin);
+    transition: var(--toast-anchored-transition, transform .15s, opacity .15s);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--toast-anchored-scale, .9));
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_anchoredArrow {
+    color: var(--toast-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: -90deg;
+    }
+  }
+
+  .xGZ1aG_anchoredArrowSvg {
+    width: var(--toast-anchored-arrow-width, 1.25rem);
+    height: var(--toast-anchored-arrow-height, .625rem);
+    shape-rendering: geometricprecision;
+    display: block;
+  }
+
+  .xGZ1aG_anchoredArrowFill {
+    fill: currentColor;
+  }
+
+  .xGZ1aG_anchoredArrowOuterStroke {
+    fill: var(--toast-border-color, var(--color-border));
+  }
+
+  .xGZ1aG_anchoredArrowInnerStroke {
+    fill: var(--toast-bg, var(--color-popover));
+  }
+
+  .xGZ1aG_anchoredContent {
+    align-items: center;
+    gap: var(--toast-content-gap, .25rem);
+    display: grid;
+  }
+
+  .xGZ1aG_anchoredDescription {
+    color: inherit;
+    margin: 0;
+  }
+
+  .xGZ1aG_root {
+    --gap: var(--toast-stack-gap, .75rem);
+    --peek: var(--toast-stack-peek, .75rem);
+    --scale: calc(max(0, 1 - (var(--toast-index) * .1)));
+    --shrink: calc(1 - var(--scale));
+    --height: var(--toast-frontmost-height, var(--toast-height));
+    --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+        var(--toast-swipe-movement-y));
+    box-sizing: border-box;
+    border: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    border-radius: var(--toast-radius, var(--radius-lg));
+    background-color: var(--toast-bg, var(--color-popover));
+    width: 100%;
+    color: var(--toast-color, var(--color-popover-foreground));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    padding: var(--toast-padding, 1rem);
+    user-select: none;
+    pointer-events: auto;
+    transition: transform var(--toast-transition, .5s cubic-bezier(.22, 1, .36, 1)),
+      opacity .5s,
+      height .15s ease;
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+    height: var(--height);
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+            (var(--shrink) * var(--height))))
+      scale(var(--scale));
+    transform-origin: bottom;
+    background-clip: padding-box;
+    margin-right: 0;
+    position: absolute;
+    bottom: 0;
+    left: auto;
+    right: 0;
+
+    &[data-placement^="top"] {
+      --offset-y: calc(var(--toast-offset-y) + (var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y));
+      transform: translateX(var(--toast-swipe-movement-x))
+        translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek)) +
+              (var(--shrink) * var(--height))))
+        scale(var(--scale));
+      transform-origin: top;
+      margin-left: auto;
+      margin-right: auto;
+      inset: 0 0 auto;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"]:not([data-starting-style]):not([data-ending-style]) {
+      transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+      height: var(--toast-height);
+    }
+
+    &[data-starting-style] {
+      transform: translateY(150%);
+
+      &[data-placement^="top"] {
+        transform: translateY(-150%);
+      }
+    }
+
+    &[data-limited] {
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      opacity: 0;
+
+      &:not([data-limited]):not([data-swipe-direction]) {
+        transform: translateY(150%);
+
+        &[data-placement^="top"] {
+          transform: translateY(-150%);
+        }
+      }
+
+      &[data-swipe-direction="up"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+      }
+
+      &[data-swipe-direction="left"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="right"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="down"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+      }
+    }
+
+    &:after {
+      content: "";
+      width: 100%;
+      height: calc(var(--gap) + var(--toast-border-width, var(--border-width-sm)));
+      position: absolute;
+      top: 100%;
+      left: 0;
+    }
+
+    &[data-placement^="top"] {
+      &:after {
+        top: auto;
+        bottom: 100%;
+      }
+    }
+  }
+
+  .xGZ1aG_content {
+    gap: var(--toast-content-gap, .25rem);
+    padding-inline-end: calc(var(--toast-close-offset-right, .5rem) + var(--toast-close-size, 1.25rem) + var(--spacing-2));
+    transition: opacity .25s;
+    display: grid;
+    overflow: hidden;
+
+    &[data-behind] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .xGZ1aG_title {
+    color: inherit;
+    font-size: var(--toast-title-font-size, var(--text-sm));
+    font-weight: var(--toast-title-font-weight, var(--weight-semibold));
+    line-height: var(--toast-title-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_description {
+    color: var(--toast-description-color, var(--color-muted-foreground));
+    font-size: var(--toast-description-font-size, var(--text-sm));
+    line-height: var(--toast-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_action {
+    margin-top: var(--toast-action-margin-top, .5rem);
+    border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
+      solid var(--toast-action-border-color, var(--color-border));
+    border-radius: var(--toast-action-radius, var(--radius-sm));
+    background: var(--toast-action-bg, var(--color-background));
+    color: var(--toast-action-color, var(--color-foreground));
+    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    font-size: var(--toast-action-font-size, var(--text-xs));
+    line-height: var(--toast-action-line-height, var(--line-height-text-xs));
+    font-weight: var(--toast-action-font-weight, var(--weight-medium));
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &:disabled, &[data-disabled] {
+      cursor: default;
+      opacity: var(--opacity-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--toast-action-bg-hover, var(--color-accent));
+      }
+    }
+  }
+
+  .xGZ1aG_close {
+    top: var(--toast-close-offset-top, .5rem);
+    right: var(--toast-close-offset-right, .5rem);
+    width: var(--toast-close-size, 1.25rem);
+    height: var(--toast-close-size, 1.25rem);
+    border-radius: var(--toast-close-radius, var(--radius-sm));
+    background: var(--toast-close-bg, transparent);
+    color: var(--toast-close-color, var(--color-muted-foreground));
+    padding: var(--toast-close-padding, 0);
+    cursor: pointer;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: absolute;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toast-close-bg-hover, var(--color-accent));
+        color: var(--toast-close-color-hover, var(--color-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-close-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_closeIcon {
+    width: var(--toast-close-icon-size, 1rem);
+    height: var(--toast-close-icon-size, 1rem);
+  }
+
+  .xGZ1aG_positioner {
+    pointer-events: none;
+  }
+}