moduix 0.11.3 → 1.0.0

package/dist/components/{Heading → heading}/Heading.js

@@ -1,7 +1,7 @@
 import Heading_module_default from "./Heading.module.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-//#region src/components/Heading/Heading.tsx
+//#region src/components/heading/Heading.tsx
 const defaultSizeByElement = {
 	h1: "2xl",
 	h2: "xl",

package/dist/components/heading/Heading.module.js

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

package/dist/components/{Input → input}/Input.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .ek-HaW_root {
+  .D49G_G_root {
     box-sizing: border-box;
     width: var(--input-width, 100%);
     max-width: var(--input-max-width, none);
@@ -44,7 +44,7 @@
     }
   }
 
-  .ek-HaW_root[data-size="xs"] {
+  .D49G_G_root[data-size="xs"] {
     --input-height: var(--input-height-xs, var(--size-sm));
     --input-padding-x: var(--input-padding-x-xs, .625rem);
     --input-padding-y: var(--input-padding-y-xs, .25rem);
@@ -52,7 +52,7 @@
     --input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
   }
 
-  .ek-HaW_root[data-size="sm"] {
+  .D49G_G_root[data-size="sm"] {
     --input-height: var(--input-height-sm, 2rem);
     --input-padding-x: var(--input-padding-x-sm, .75rem);
     --input-padding-y: var(--input-padding-y-sm, .3125rem);
@@ -60,7 +60,7 @@
     --input-line-height: var(--input-line-height-sm, var(--line-height-text-sm));
   }
 
-  .ek-HaW_root[data-size="lg"] {
+  .D49G_G_root[data-size="lg"] {
     --input-height: var(--input-height-lg, var(--size-xl));
     --input-padding-x: var(--input-padding-x-lg, 1rem);
     --input-padding-y: var(--input-padding-y-lg, .625rem);
@@ -68,7 +68,7 @@
     --input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
   }
 
-  .ek-HaW_root[data-size="xl"] {
+  .D49G_G_root[data-size="xl"] {
     --input-height: var(--input-height-xl, 3rem);
     --input-padding-x: var(--input-padding-x-xl, 1.125rem);
     --input-padding-y: var(--input-padding-y-xl, .75rem);

package/dist/components/{Input → input}/Input.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 import { Input } from "@base-ui/react/input";
 
-//#region src/components/Input/Input.d.ts
+//#region src/components/input/Input.d.ts
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type InputProps = Omit<Input.Props, 'size'> & {
   size?: InputSize;

package/dist/components/{Input → input}/Input.js

@@ -1,9 +1,9 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
 import Input_module_default from "./Input.module.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Input } from "@base-ui/react/input";
-//#region src/components/Input/Input.tsx
+//#region src/components/input/Input.tsx
 const Input$1 = forwardRef(function Input$2({ className, size = "md", htmlSize, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Input, {
 		ref,

package/dist/components/input/Input.module.js

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

package/dist/components/{InputGroup → input-group}/InputGroup.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .jSOrbG_root {
+  .csZHjG_root {
     box-sizing: border-box;
     width: var(--input-group-width, 100%);
     max-width: var(--input-group-max-width, none);
@@ -81,7 +81,7 @@
     }
   }
 
-  .jSOrbG_input {
+  .csZHjG_input {
     min-width: 0;
     min-height: 0;
     font-size: var(--input-group-font-size, var(--text-md));
@@ -95,7 +95,7 @@
     flex: auto;
   }
 
-  .jSOrbG_addon, .jSOrbG_text {
+  .csZHjG_addon, .csZHjG_text {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -116,7 +116,7 @@
     }
   }
 
-  .jSOrbG_addon {
+  .csZHjG_addon {
     border-inline: var(--input-group-separator-width, var(--border-width-sm)) solid
       var(--input-group-separator-color, var(--color-border));
 
@@ -129,11 +129,11 @@
     }
   }
 
-  .jSOrbG_text {
+  .csZHjG_text {
     background-color: #0000;
   }
 
-  .jSOrbG_button {
+  .csZHjG_button {
     height: auto;
     min-height: auto;
     padding-block: 0;

package/dist/components/{InputGroup → input-group}/InputGroup.d.ts

@@ -1,8 +1,8 @@
-import { ButtonProps } from "../Button/Button.js";
-import { Input, InputProps } from "../Input/Input.js";
+import { ButtonProps } from "../button/Button.js";
+import { Input, InputProps } from "../input/Input.js";
 import { ComponentProps } from "react";
 
-//#region src/components/InputGroup/InputGroup.d.ts
+//#region src/components/input-group/InputGroup.d.ts
 declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   size?: ComponentProps<typeof Input>["size"];
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/{InputGroup → input-group}/InputGroup.js

@@ -1,11 +1,11 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
-import { Button } from "../Button/Button.js";
-import { Input } from "../Input/Input.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
+import { Button } from "../button/Button.js";
+import { Input } from "../input/Input.js";
 import InputGroup_module_default from "./InputGroup.module.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-//#region src/components/InputGroup/InputGroup.tsx
+//#region src/components/input-group/InputGroup.tsx
 const InputGroupSizeContext = createContext("md");
 const InputGroup = forwardRef(function InputGroup({ children, className, onMouseDown, size = "md", ...props }, ref) {
 	const handleMouseDown = (event) => {

package/dist/components/input-group/InputGroup.module.js

@@ -0,0 +1,11 @@
+import './InputGroup.css';
+//#region src/components/input-group/InputGroup.module.css
+var InputGroup_module_default = {
+	"addon": "csZHjG_addon",
+	"button": "csZHjG_button",
+	"input": "csZHjG_input",
+	"root": "csZHjG_root",
+	"text": "csZHjG_text"
+};
+//#endregion
+export { InputGroup_module_default as default };

package/dist/components/{Kbd → kbd}/Kbd.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .qUSm7q_root {
+  ._6mPSYa_root {
     box-sizing: border-box;
     min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
     height: var(--kbd-height, 1.5rem);
@@ -12,7 +12,7 @@
     background-color: var(--kbd-bg, var(--color-muted));
     box-shadow: var(--kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--color-foreground) 12%, transparent));
     color: var(--kbd-color, var(--color-foreground));
-    font-family: var(--kbd-font-family, var(--font-mono));
+    font-family: var(--kbd-font-family, var(--font-mono)), monospace;
     font-size: var(--kbd-font-size, var(--text-xs));
     font-weight: var(--kbd-font-weight, var(--weight-medium));
     line-height: var(--kbd-line-height, var(--line-height-text-xs));
@@ -28,7 +28,7 @@
     overflow: hidden;
   }
 
-  .qUSm7q_group {
+  ._6mPSYa_group {
     box-sizing: border-box;
     align-items: center;
     gap: var(--kbd-group-gap, .25rem);

package/dist/components/{Kbd → kbd}/Kbd.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 
-//#region src/components/Kbd/Kbd.d.ts
+//#region src/components/kbd/Kbd.d.ts
 declare function Kbd({
   className,
   ...props

package/dist/components/{Kbd → kbd}/Kbd.js

@@ -1,7 +1,7 @@
 import Kbd_module_default from "./Kbd.module.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-//#region src/components/Kbd/Kbd.tsx
+//#region src/components/kbd/Kbd.tsx
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd-root",

package/dist/components/{Kbd → kbd}/Kbd.module.js

@@ -1,8 +1,8 @@
 import './Kbd.css';
-//#region src/components/Kbd/Kbd.module.css
+//#region src/components/kbd/Kbd.module.css
 var Kbd_module_default = {
-	"group": "qUSm7q_group",
-	"root": "qUSm7q_root"
+	"group": "_6mPSYa_group",
+	"root": "_6mPSYa_root"
 };
 //#endregion
 export { Kbd_module_default as default };

package/dist/components/{Lightbox → lightbox}/Lightbox.css

@@ -1,9 +1,9 @@
 @layer ui.components {
-  .LTYCWG_trigger {
+  .fxf4Xq_trigger {
     cursor: zoom-in;
   }
 
-  .LTYCWG_backdrop {
+  .fxf4Xq_backdrop {
     z-index: var(--z-backdrop);
     background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -19,7 +19,7 @@
     }
   }
 
-  .LTYCWG_viewport {
+  .fxf4Xq_viewport {
     box-sizing: border-box;
     z-index: var(--z-modal);
     padding: var(--lightbox-viewport-padding, var(--spacing-4));
@@ -30,7 +30,7 @@
     overflow: hidden;
   }
 
-  .LTYCWG_popup {
+  .fxf4Xq_popup {
     box-sizing: border-box;
     width: auto;
     max-width: min(var(--lightbox-max-width, 80vw),
@@ -49,18 +49,18 @@
     }
   }
 
-  .LTYCWG_frame {
+  .fxf4Xq_frame {
     width: fit-content;
     max-width: min(var(--lightbox-width, 80vw), 100%);
     height: min(var(--lightbox-height, 80dvh), 100%);
     max-height: min(var(--lightbox-height, 80dvh), 100%);
-    animation: LTYCWG_lightbox-image-enter var(--lightbox-image-enter-duration, .24s) ease;
+    animation: fxf4Xq_lightbox-image-enter var(--lightbox-image-enter-duration, .24s) ease;
     place-items: center;
     display: grid;
     position: relative;
   }
 
-  .LTYCWG_closeButton {
+  .fxf4Xq_closeButton {
     --close-button-size: var(--lightbox-close-size, 2rem);
     --close-button-radius: var(--lightbox-close-radius, var(--radius-sm));
     --close-button-icon-size: var(--lightbox-close-icon-size, .875rem);
@@ -79,11 +79,11 @@
     position: fixed;
   }
 
-  .LTYCWG_viewport[data-starting-style] > .LTYCWG_closeButton, .LTYCWG_viewport[data-ending-style] > .LTYCWG_closeButton {
+  .fxf4Xq_viewport[data-starting-style] > .fxf4Xq_closeButton, .fxf4Xq_viewport[data-ending-style] > .fxf4Xq_closeButton {
     opacity: 0;
   }
 
-  .LTYCWG_frame img, .LTYCWG_frame picture > img {
+  .fxf4Xq_frame img, .fxf4Xq_frame picture > img {
     width: auto;
     height: auto;
     max-width: min(var(--lightbox-image-max-width, 80vw), 100%);
@@ -95,12 +95,12 @@
     display: block;
   }
 
-  .LTYCWG_contentClose {
+  .fxf4Xq_contentClose {
     cursor: zoom-out;
     display: contents;
   }
 
-  @keyframes LTYCWG_lightbox-image-enter {
+  @keyframes fxf4Xq_lightbox-image-enter {
     from {
       opacity: .35;
       transform: scale(var(--lightbox-image-enter-scale, .9));

package/dist/components/{Lightbox → lightbox}/Lightbox.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, RefObject } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 
-//#region src/components/Lightbox/Lightbox.d.ts
+//#region src/components/lightbox/Lightbox.d.ts
 declare const createLightboxHandle: typeof Dialog.createHandle;
 declare function Lightbox<Payload = unknown>(props: Dialog.Root.Props<Payload>): import("react").JSX.Element;
 declare function LightboxTrigger({

package/dist/components/{Lightbox → lightbox}/Lightbox.js

@@ -1,11 +1,11 @@
-import { mergeClassName } from "../../utils/mergeClassName.js";
-import { CloseButton } from "../CloseButton/CloseButton.js";
+import { mergeClassName } from "../../lib/moduix/mergeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Lightbox_module_default from "./Lightbox.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/Lightbox/Lightbox.tsx
+//#region src/components/lightbox/Lightbox.tsx
 const DEFAULT_CLOSE_LABEL = "Close image";
 const createLightboxHandle = Dialog.createHandle;
 const LightboxImageContext = createContext(null);

package/dist/components/lightbox/Lightbox.module.js

@@ -0,0 +1,14 @@
+import './Lightbox.css';
+//#region src/components/lightbox/Lightbox.module.css
+var Lightbox_module_default = {
+	"backdrop": "fxf4Xq_backdrop",
+	"closeButton": "fxf4Xq_closeButton",
+	"contentClose": "fxf4Xq_contentClose",
+	"frame": "fxf4Xq_frame",
+	"lightbox-image-enter": "fxf4Xq_lightbox-image-enter",
+	"popup": "fxf4Xq_popup",
+	"trigger": "fxf4Xq_trigger",
+	"viewport": "fxf4Xq_viewport"
+};
+//#endregion
+export { Lightbox_module_default as default };

package/dist/components/{List → list}/List.css

@@ -1,12 +1,12 @@
 @layer ui.components {
-  .-Rq0Vq_root {
+  .U2Gd-q_root {
     --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
     --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
     --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
     --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
     box-sizing: border-box;
     color: var(--_list-color);
-    font-family: var(--list-font-family, var(--font-sans));
+    font-family: var(--list-font-family, inherit);
     font-size: var(--_list-font-size);
     font-weight: var(--list-font-weight, var(--weight-regular));
     line-height: var(--_list-line-height);
@@ -88,27 +88,27 @@
     }
   }
 
-  .-Rq0Vq_root[data-gap="xs"] {
+  .U2Gd-q_root[data-gap="xs"] {
     --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
   }
 
-  .-Rq0Vq_root[data-gap="sm"] {
+  .U2Gd-q_root[data-gap="sm"] {
     --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
   }
 
-  .-Rq0Vq_root[data-gap="md"] {
+  .U2Gd-q_root[data-gap="md"] {
     --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
   }
 
-  .-Rq0Vq_root[data-gap="lg"] {
+  .U2Gd-q_root[data-gap="lg"] {
     --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
   }
 
-  .-Rq0Vq_root[data-gap="xl"] {
+  .U2Gd-q_root[data-gap="xl"] {
     --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
   }
 
-  .-Rq0Vq_root[data-gap="2xl"] {
+  .U2Gd-q_root[data-gap="2xl"] {
     --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
   }
 }

package/dist/components/{List → list}/List.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 
-//#region src/components/List/List.d.ts
+//#region src/components/list/List.d.ts
 type ListAs = 'ul' | 'ol';
 type ListMarker = 'none' | 'disc' | 'decimal';
 type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/dist/components/{List → list}/List.js

@@ -1,7 +1,7 @@
 import List_module_default from "./List.module.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-//#region src/components/List/List.tsx
+//#region src/components/list/List.tsx
 function List({ as = "ul", marker, gap = "sm", size = "md", tone = "default", className, role, ...props }) {
 	const Component = as;
 	const resolvedMarker = marker ?? (as === "ol" ? "decimal" : "disc");

package/dist/components/list/List.module.js

@@ -0,0 +1,5 @@
+import './List.css';
+//#region src/components/list/List.module.css
+var List_module_default = { "root": "U2Gd-q_root" };
+//#endregion
+export { List_module_default as default };