moduix 0.11.0 → 0.11.2

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": "LTYCWG_backdrop",
+	"closeButton": "LTYCWG_closeButton",
+	"contentClose": "LTYCWG_contentClose",
+	"frame": "LTYCWG_frame",
+	"lightbox-image-enter": "LTYCWG_lightbox-image-enter",
+	"popup": "LTYCWG_popup",
+	"trigger": "LTYCWG_trigger",
+	"viewport": "LTYCWG_viewport"
+};
+//#endregion
+export { Lightbox_module_default as default };

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

@@ -1 +1 @@
-export * from './Lightbox';
+import { Lightbox, LightboxBackdrop, LightboxClose, LightboxCloseButton, LightboxContent, LightboxFrame, LightboxGallery, LightboxImage, LightboxPopup, LightboxPortal, LightboxTrigger, LightboxViewport, createLightboxHandle } from "./Lightbox.js";

package/dist/components/List/List.css

@@ -0,0 +1,114 @@
+@layer ui.components {
+  .-Rq0Vq_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-size: var(--_list-font-size);
+    font-weight: var(--list-font-weight, var(--weight-regular));
+    line-height: var(--_list-line-height);
+    letter-spacing: var(--list-letter-spacing, 0);
+    overflow-wrap: break-word;
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+
+    & > :where(li + li) {
+      margin-block-start: var(--_list-gap);
+    }
+
+    & > :where(li)::marker {
+      color: var(--list-marker-color, currentColor);
+      font-weight: var(--list-marker-font-weight, inherit);
+    }
+
+    &[data-marker="none"] {
+      padding-inline-start: 0;
+      list-style: none;
+    }
+
+    &[data-marker="disc"], &[data-marker="decimal"] {
+      padding-inline-start: var(--list-padding-x, var(--spacing-5));
+    }
+
+    &[data-marker="disc"] {
+      list-style-type: disc;
+    }
+
+    &:is(ul)[data-marker="decimal"], &[data-marker="decimal"][data-marker-mode="explicit"] {
+      list-style-type: decimal;
+    }
+
+    &[data-size="xs"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xs, var(--text-xs)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xs, var(--line-height-text-xs)));
+    }
+
+    &[data-size="sm"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-sm, var(--text-sm)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-sm, var(--line-height-text-sm)));
+    }
+
+    &[data-size="md"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    }
+
+    &[data-size="lg"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-lg, var(--text-lg)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-lg, var(--line-height-text-lg)));
+    }
+
+    &[data-size="xl"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xl, var(--text-xl)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xl, var(--line-height-text-xl)));
+    }
+
+    &[data-tone="default"] {
+      --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+    }
+
+    &[data-tone="muted"] {
+      --_list-color: var(--list-color, var(--list-muted-color, var(--color-muted-foreground)));
+    }
+
+    &[data-tone="subtle"] {
+      --_list-color: var(--list-color, var(--list-subtle-color, var(--color-secondary-foreground)));
+    }
+
+    &[data-tone="primary"] {
+      --_list-color: var(--list-color, var(--list-primary-color, var(--color-primary)));
+    }
+
+    &[data-tone="destructive"] {
+      --_list-color: var(--list-color, var(--list-destructive-color, var(--color-destructive)));
+    }
+  }
+
+  .-Rq0Vq_root[data-gap="xs"] {
+    --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
+  }
+
+  .-Rq0Vq_root[data-gap="sm"] {
+    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+  }
+
+  .-Rq0Vq_root[data-gap="md"] {
+    --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
+  }
+
+  .-Rq0Vq_root[data-gap="lg"] {
+    --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
+  }
+
+  .-Rq0Vq_root[data-gap="xl"] {
+    --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
+  }
+
+  .-Rq0Vq_root[data-gap="2xl"] {
+    --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
+  }
+}

package/dist/components/List/List.d.ts

@@ -1,25 +1,39 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/components/List/List.d.ts
 type ListAs = 'ul' | 'ol';
 type ListMarker = 'none' | 'disc' | 'decimal';
 type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ListTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
 type ListOwnProps = {
-    as?: ListAs;
-    marker?: ListMarker;
-    gap?: ListGap;
-    size?: ListSize;
-    tone?: ListTone;
+  as?: ListAs;
+  marker?: ListMarker;
+  gap?: ListGap;
+  size?: ListSize;
+  tone?: ListTone;
 };
 type UnorderedListProps = ListOwnProps & ComponentPropsWithoutRef<'ul'> & {
-    as?: 'ul';
+  as?: 'ul';
 };
 type OrderedListProps = ListOwnProps & ComponentPropsWithoutRef<'ol'> & {
-    as: 'ol';
+  as: 'ol';
 };
 type ListProps = UnorderedListProps | OrderedListProps;
 type ListItemProps = ComponentPropsWithoutRef<'li'>;
-declare function List({ as, marker, gap, size, tone, className, role, ...props }: ListProps): import("react").JSX.Element;
-declare function ListItem({ className, ...props }: ListItemProps): import("react").JSX.Element;
-export { List, ListItem };
-export type { ListAs, ListGap, ListItemProps, ListMarker, ListProps, ListSize, ListTone };
+declare function List({
+  as,
+  marker,
+  gap,
+  size,
+  tone,
+  className,
+  role,
+  ...props
+}: ListProps): import("react").JSX.Element;
+declare function ListItem({
+  className,
+  ...props
+}: ListItemProps): import("react").JSX.Element;
+//#endregion
+export { List, type ListAs, type ListGap, ListItem, type ListItemProps, type ListMarker, type ListProps, type ListSize, type ListTone };

package/dist/components/List/List.js

@@ -0,0 +1,28 @@
+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
+function List({ as = "ul", marker, gap = "sm", size = "md", tone = "default", className, role, ...props }) {
+	const Component = as;
+	const resolvedMarker = marker ?? (as === "ol" ? "decimal" : "disc");
+	return /* @__PURE__ */ jsx(Component, {
+		"data-slot": "list-root",
+		"data-gap": gap,
+		"data-marker": resolvedMarker,
+		"data-marker-mode": marker === void 0 ? "auto" : "explicit",
+		"data-size": size,
+		"data-tone": tone,
+		role: role ?? (resolvedMarker === "none" ? "list" : void 0),
+		className: clsx$1(List_module_default.root, className),
+		...props
+	});
+}
+function ListItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "list-item",
+		className,
+		...props
+	});
+}
+//#endregion
+export { List, ListItem };

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": "-Rq0Vq_root" };
+//#endregion
+export { List_module_default as default };

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

@@ -1 +1 @@
-export * from './List';
+import { List, ListAs, ListGap, ListItem, ListItemProps, ListMarker, ListProps, ListSize, ListTone } from "./List.js";

package/dist/components/Menu/Menu.css

@@ -0,0 +1,377 @@
+@layer ui.components {
+  .kmkoza_trigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--menu-trigger-gap, .5rem);
+    min-height: var(--menu-trigger-height, var(--size-lg));
+    padding: var(--menu-trigger-padding-y, .5rem) var(--menu-trigger-padding-x, .875rem);
+    border: var(--menu-trigger-border-width, var(--border-width-sm)) solid
+      var(--menu-trigger-border-color, var(--color-border));
+    border-radius: var(--menu-trigger-radius, var(--radius-md));
+    background-color: var(--menu-trigger-bg, var(--color-background));
+    color: var(--menu-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--menu-trigger-font-size, var(--text-md));
+    line-height: var(--menu-trigger-line-height, var(--line-height-text-md));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--menu-transition, var(--transition-default)),
+      border-color var(--menu-transition, var(--transition-default)),
+      color var(--menu-transition, var(--transition-default));
+    outline: 0;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--menu-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-popup-open] {
+      background-color: var(--menu-trigger-bg-active, var(--menu-trigger-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm)))
+        solid var(--menu-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--menu-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .kmkoza_triggerIcon {
+    box-sizing: border-box;
+    width: var(--menu-trigger-icon-size, 1rem);
+    height: var(--menu-trigger-icon-size, 1rem);
+    color: var(--menu-trigger-icon-color, currentColor);
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .kmkoza_iconSvg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .kmkoza_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--menu-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--menu-backdrop-blur, 4px)));
+    transition: opacity var(--menu-backdrop-transition, var(--transition-default)),
+      backdrop-filter var(--menu-backdrop-transition, var(--transition-default));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .kmkoza_positioner {
+    z-index: var(--z-popup);
+    width: var(--positioner-width);
+    height: var(--positioner-height);
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .kmkoza_popup {
+    box-sizing: border-box;
+    width: var(--popup-width, var(--menu-popup-width, auto));
+    height: var(--popup-height, var(--menu-popup-height, auto));
+    min-width: min(var(--menu-popup-min-width, 12rem), var(--available-width, 100vw));
+    max-width: min(var(--menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    max-height: min(var(--menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    padding-block: var(--menu-popup-padding-y, .25rem);
+    border-radius: var(--menu-popup-radius, var(--radius-md));
+    background-color: var(--menu-popup-bg, var(--color-popover));
+    color: var(--menu-popup-color, var(--color-popover-foreground));
+    outline: var(--menu-popup-border-width, var(--border-width-sm)) solid
+      var(--menu-popup-border-color, var(--color-border));
+    box-shadow: var(--menu-popup-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: transform var(--menu-transition, var(--transition-default)),
+      opacity var(--menu-transition, var(--transition-default));
+    border: 0;
+    position: relative;
+    overflow: visible;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--menu-popup-scale, var(--scale-popup)));
+    }
+  }
+
+  .kmkoza_viewport {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-height: min(var(--menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    padding: 0;
+    position: relative;
+    overflow: clip;
+  }
+
+  .kmkoza_arrow {
+    color: var(--menu-popup-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--menu-arrow-size, .5rem) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--menu-arrow-size, .5rem) * -1);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  .kmkoza_arrowSvg {
+    width: var(--menu-arrow-width, 1.25rem);
+    height: var(--menu-arrow-height, .625rem);
+    display: block;
+    overflow: visible;
+  }
+
+  .kmkoza_arrowFill {
+    fill: currentColor;
+  }
+
+  .kmkoza_arrowOuterStroke {
+    fill: var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
+  }
+
+  .kmkoza_arrowInnerStroke {
+    fill: var(--menu-popup-bg, var(--color-popover));
+  }
+
+  .kmkoza_item, .kmkoza_linkItem, .kmkoza_submenuTrigger, .kmkoza_radioItem, .kmkoza_checkboxItem {
+    box-sizing: border-box;
+    min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
+    background-color: var(--menu-item-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: var(--menu-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--menu-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    cursor: default;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+
+    &[data-highlighted] {
+      z-index: 0;
+      color: var(--menu-highlight-color, var(--color-background));
+    }
+
+    &[data-popup-open] {
+      z-index: 0;
+    }
+
+    &[data-highlighted]:before, &[data-popup-open]:before {
+      content: "";
+      z-index: -1;
+      inset-block: 0;
+      inset-inline: var(--menu-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
+      border-radius: var(--menu-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
+      position: absolute;
+    }
+
+    &[data-highlighted]:before {
+      background-color: var(--menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-popup-open]:before {
+      background-color: var(--menu-submenu-open-bg, var(--color-accent));
+    }
+
+    &[data-highlighted][data-popup-open]:before {
+      background-color: var(--menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-disabled] {
+      background-color: var(--menu-item-bg-disabled, var(--menu-item-bg, transparent));
+      color: var(--menu-item-disabled-color, var(--color-muted-foreground));
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  .kmkoza_item, .kmkoza_linkItem {
+    align-items: center;
+    gap: var(--menu-item-gap, var(--spacing-2));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: flex;
+  }
+
+  .kmkoza_submenuTrigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--menu-submenu-trigger-gap, var(--spacing-3));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--menu-submenu-trigger-padding-x-end, 1rem);
+    display: flex;
+  }
+
+  .kmkoza_submenuTriggerIcon {
+    box-sizing: border-box;
+    width: var(--menu-submenu-icon-size, .875rem);
+    height: var(--menu-submenu-icon-size, .875rem);
+    color: currentColor;
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .kmkoza_group {
+    padding-block: var(--menu-group-padding-y, 0);
+    display: grid;
+  }
+
+  .kmkoza_groupLabel {
+    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
+    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
+      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
+    color: var(--menu-group-label-color, var(--color-muted-foreground));
+    font-size: var(--menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    line-height: var(--menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    user-select: none;
+    cursor: default;
+    margin: 0;
+  }
+
+  .kmkoza_radioGroup {
+    display: grid;
+  }
+
+  .kmkoza_radioItem, .kmkoza_checkboxItem {
+    align-items: center;
+    gap: var(--menu-check-gap, var(--popup-check-gap, .5rem));
+    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+      1fr;
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: grid;
+
+    &[data-indicator-position="end"] {
+      grid-template-columns: minmax(0, 1fr)
+        var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+
+      & > .kmkoza_itemText {
+        grid-column-start: 1;
+      }
+
+      & > .kmkoza_radioItemIndicator, & > .kmkoza_checkboxItemIndicator {
+        grid-column-start: 2;
+        justify-self: end;
+      }
+    }
+  }
+
+  .kmkoza_checkboxItem {
+    &[data-checked] {
+      & > .kmkoza_checkboxItemIndicator {
+        background-color: var(--menu-checkbox-indicator-bg-checked, var(--menu-checkbox-indicator-bg, transparent));
+        border-color: var(--menu-checkbox-indicator-border-color-checked, var(--menu-checkbox-indicator-border-color, currentColor));
+      }
+    }
+  }
+
+  .kmkoza_radioItemIndicator, .kmkoza_checkboxItemIndicator {
+    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    grid-column-start: 1;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .kmkoza_checkboxItemIndicator {
+    border: var(--menu-checkbox-indicator-border-width, 0) solid
+      var(--menu-checkbox-indicator-border-color, currentColor);
+    border-radius: var(--menu-checkbox-indicator-radius, var(--radius-xs));
+    background-color: var(--menu-checkbox-indicator-bg, transparent);
+  }
+
+  .kmkoza_itemIndicatorIcon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .kmkoza_itemText {
+    grid-column-start: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .kmkoza_itemTextContent {
+    align-items: center;
+    gap: var(--menu-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .kmkoza_itemTextIcon {
+    width: var(--menu-item-text-icon-size, 1rem);
+    height: var(--menu-item-text-icon-size, 1rem);
+    color: var(--menu-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .kmkoza_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .kmkoza_itemShortcut {
+    color: var(--menu-item-shortcut-color, var(--color-muted-foreground));
+    font-size: var(--menu-item-shortcut-font-size, var(--text-xs));
+    line-height: var(--menu-item-shortcut-line-height, var(--line-height-text-xs));
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--menu-item-shortcut-padding-x-start, var(--spacing-4));
+  }
+
+  .kmkoza_separator {
+    box-sizing: border-box;
+    height: var(--menu-separator-height, var(--border-width-sm));
+    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
+    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
+      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
+    background-color: var(--menu-separator-color, var(--color-border));
+  }
+}