@moduix/react 1.1.0

package/dist/components/scroll-area/ScrollArea.css

@@ -0,0 +1,162 @@
+@layer ui.components {
+  ._2HrnkW_root {
+    box-sizing: border-box;
+    width: var(--scroll-area-width, 100%);
+    height: var(--scroll-area-height, 100%);
+    min-width: 0;
+    min-height: 0;
+    color: var(--scroll-area-color, var(--color-foreground));
+    position: relative;
+  }
+
+  ._2HrnkW_viewport {
+    box-sizing: border-box;
+    border-radius: var(--scroll-area-radius, var(--radius-md));
+    background-color: var(--scroll-area-bg, transparent);
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    --_scroll-area-block-fade-mask: linear-gradient(to bottom,
+      transparent 0,
+      black
+        min(var(--scroll-area-fade-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+          var(--scroll-area-overflow-y-start, 0px)),
+      black
+        calc(100% -
+            min(var(--scroll-area-fade-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+              var(--scroll-area-overflow-y-end, 0px))),
+      transparent 100%);
+    outline: 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    ._2HrnkW_root[data-fade] & {
+      mask-image: var(--_scroll-area-block-fade-mask);
+      mask-repeat: no-repeat;
+    }
+
+    &:focus-visible {
+      outline: var(--scroll-area-focus-ring-width, var(--border-width-sm)) solid
+        var(--scroll-area-focus-ring-color, var(--color-ring));
+      outline-offset: var(--scroll-area-focus-ring-offset, -1px);
+    }
+  }
+
+  ._2HrnkW_content {
+    box-sizing: border-box;
+    padding: var(--scroll-area-content-padding, 0);
+    display: block;
+  }
+
+  ._2HrnkW_scrollbar {
+    --_scroll-area-scrollbar-margin: var(--scroll-area-scrollbar-margin, var(--spacing-1));
+    --_scroll-area-scrollbar-hit-area-size: var(--scroll-area-scrollbar-hit-area-size, var(--spacing-5));
+    box-sizing: border-box;
+    padding: var(--scroll-area-scrollbar-padding, 0);
+    border-radius: var(--scroll-area-scrollbar-radius, var(--radius-md));
+    background-color: var(--scroll-area-scrollbar-bg, transparent);
+    opacity: var(--scroll-area-scrollbar-hidden-opacity, 0);
+    pointer-events: none;
+    user-select: none;
+    touch-action: none;
+    transition: opacity var(--scroll-area-transition, var(--transition-default)),
+      width var(--scroll-area-transition, var(--transition-slow)),
+      height var(--scroll-area-transition, var(--transition-slow));
+    justify-content: center;
+    display: flex;
+    position: absolute;
+
+    &:before {
+      content: "";
+      position: absolute;
+    }
+
+    &[data-orientation="vertical"] {
+      top: 0;
+      inset-inline-end: 0;
+      bottom: var(--corner-height, 0px);
+      width: var(--scroll-area-scrollbar-size, var(--spacing-1));
+      margin-block: var(--_scroll-area-scrollbar-margin);
+      margin-inline-end: var(--_scroll-area-scrollbar-margin);
+
+      &:before {
+        width: var(--_scroll-area-scrollbar-hit-area-size);
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &:not([data-overflow-y]) {
+        display: none;
+      }
+
+      &:hover, &[data-dragging] {
+        width: calc(var(--scroll-area-scrollbar-size, var(--spacing-1)) +
+            var(--scroll-area-thumb-hover-increase, 2px));
+      }
+    }
+
+    &[data-orientation="horizontal"] {
+      inset-inline-start: 0;
+      inset-inline-end: var(--corner-width, 0px);
+      height: var(--scroll-area-scrollbar-size, var(--spacing-1));
+      margin-inline: var(--_scroll-area-scrollbar-margin);
+      flex-direction: column;
+      margin-block-end: var(--_scroll-area-scrollbar-margin);
+      bottom: 0;
+
+      &:before {
+        width: 100%;
+        height: var(--_scroll-area-scrollbar-hit-area-size);
+        bottom: 50%;
+        left: 0;
+        right: 0;
+        transform: translateY(50%);
+      }
+
+      &:not([data-overflow-x]) {
+        display: none;
+      }
+
+      &:hover, &[data-dragging] {
+        height: calc(var(--scroll-area-scrollbar-size, var(--spacing-1)) +
+            var(--scroll-area-thumb-hover-increase, 2px));
+      }
+    }
+
+    &[data-hover], &[data-scrolling] {
+      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      pointer-events: auto;
+    }
+
+    &[data-scrolling] {
+      transition-duration: 0s;
+    }
+  }
+
+  ._2HrnkW_thumb {
+    box-sizing: border-box;
+    border-radius: var(--scroll-area-thumb-radius, var(--radius-full));
+    background-color: var(--scroll-area-thumb-bg, var(--color-border));
+
+    &[data-orientation="vertical"] {
+      width: 100%;
+      min-height: var(--scroll-area-thumb-min-size, 1.5rem);
+    }
+
+    &[data-orientation="horizontal"] {
+      height: 100%;
+      min-width: var(--scroll-area-thumb-min-size, 1.5rem);
+    }
+  }
+
+  ._2HrnkW_corner {
+    box-sizing: border-box;
+    background-color: var(--scroll-area-corner-bg, var(--scroll-area-scrollbar-bg, transparent));
+  }
+}

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+
+//#region src/components/scroll-area/ScrollArea.d.ts
+type ModuixScrollAreaRootProps = ComponentProps<typeof ScrollArea.Root> & {
+  fade?: boolean;
+};
+type ModuixScrollAreaRootProviderProps = ComponentProps<typeof ScrollArea.RootProvider> & {
+  fade?: boolean;
+};
+declare const ScrollArea$1: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Viewport: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Scrollbar: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Thumb: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Corner: import("react").ForwardRefExoticComponent<Omit<ScrollArea.CornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,76 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import ScrollArea_module_default from "./ScrollArea.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+//#region src/components/scroll-area/ScrollArea.tsx
+const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ className, fade, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		ref,
+		"data-slot": "scroll-area-root",
+		"data-fade": fade ? "" : void 0,
+		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaRootProvider = forwardRef(function ScrollAreaRootProvider({ className, fade, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.RootProvider, {
+		ref,
+		"data-slot": "scroll-area-root-provider",
+		"data-fade": fade ? "" : void 0,
+		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaViewport = forwardRef(function ScrollAreaViewport({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		ref,
+		"data-slot": "scroll-area-viewport",
+		className: clsx(ScrollArea_module_default.viewport, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaContent = forwardRef(function ScrollAreaContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		ref,
+		"data-slot": "scroll-area-content",
+		className: clsx(ScrollArea_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaScrollbar = forwardRef(function ScrollAreaScrollbar({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		ref,
+		"data-slot": "scroll-area-scrollbar",
+		className: clsx(ScrollArea_module_default.scrollbar, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaThumb = forwardRef(function ScrollAreaThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+		ref,
+		"data-slot": "scroll-area-thumb",
+		className: clsx(ScrollArea_module_default.thumb, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollAreaCorner = forwardRef(function ScrollAreaCorner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		ref,
+		"data-slot": "scroll-area-corner",
+		className: clsx(ScrollArea_module_default.corner, normalizeClassName(className)),
+		...props
+	});
+});
+const ScrollArea$1 = Object.assign(ScrollAreaRoot, {
+	Root: ScrollAreaRoot,
+	RootProvider: ScrollAreaRootProvider,
+	Viewport: ScrollAreaViewport,
+	Content: ScrollAreaContent,
+	Scrollbar: ScrollAreaScrollbar,
+	Thumb: ScrollAreaThumb,
+	Corner: ScrollAreaCorner
+});
+//#endregion
+export { ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/ScrollArea.module.js

@@ -0,0 +1,12 @@
+import './ScrollArea.css';
+//#region src/components/scroll-area/ScrollArea.module.css
+var ScrollArea_module_default = {
+	"content": "_2HrnkW_content",
+	"corner": "_2HrnkW_corner",
+	"root": "_2HrnkW_root",
+	"scrollbar": "_2HrnkW_scrollbar",
+	"thumb": "_2HrnkW_thumb",
+	"viewport": "_2HrnkW_viewport"
+};
+//#endregion
+export { ScrollArea_module_default as default };

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+import { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps, ScrollArea } from "./ScrollArea.js";
+export { type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, ScrollArea };

package/dist/components/segment-group/SegmentGroup.css

@@ -0,0 +1,120 @@
+@layer ui.components {
+  .wkt6sG_root {
+    box-sizing: border-box;
+    isolation: isolate;
+    max-width: var(--segment-group-max-width, 100%);
+    align-items: stretch;
+    gap: var(--segment-group-gap, var(--spacing-1));
+    padding: var(--segment-group-padding, var(--spacing-1));
+    border: var(--segment-group-border-width, var(--border-width-sm)) solid
+      var(--segment-group-border-color, var(--color-border));
+    border-radius: var(--segment-group-radius, var(--radius-lg));
+    background-color: var(--segment-group-bg, var(--color-muted));
+    color: var(--segment-group-color, var(--color-foreground));
+    display: inline-flex;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    &[data-disabled] {
+      opacity: var(--segment-group-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &[data-invalid] {
+      border-color: var(--segment-group-border-color-invalid, var(--color-destructive));
+    }
+  }
+
+  .wkt6sG_label {
+    z-index: 1;
+    color: var(--segment-group-label-color, var(--segment-group-color, var(--color-foreground)));
+    font-size: var(--segment-group-label-font-size, var(--text-sm));
+    font-weight: var(--segment-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--segment-group-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+    position: relative;
+  }
+
+  .wkt6sG_item {
+    box-sizing: border-box;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+    gap: var(--segment-group-item-gap, var(--spacing-2));
+    min-height: var(--segment-group-item-height, 2rem);
+    border-radius: var(--segment-group-item-radius, var(--radius-md));
+    padding-inline: var(--segment-group-item-padding-x, .875rem);
+    color: var(--segment-group-item-color, var(--color-muted-foreground));
+    font-size: var(--segment-group-item-font-size, var(--text-sm));
+    font-weight: var(--segment-group-item-font-weight, var(--weight-medium));
+    line-height: var(--segment-group-item-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--segment-group-transition, var(--transition-default)),
+      opacity var(--segment-group-transition, var(--transition-default));
+    outline: 0;
+    display: inline-flex;
+    position: relative;
+
+    @media (hover: hover) {
+      &:hover:not([data-readonly], [data-disabled]) {
+        color: var(--segment-group-item-color-hover, var(--color-foreground));
+      }
+    }
+
+    &[data-state="checked"] {
+      color: var(--segment-group-item-color-checked, var(--color-foreground));
+    }
+
+    &[data-focus-visible] {
+      outline: var(--segment-group-focus-ring-width, var(--border-width-sm)) solid
+        var(--segment-group-focus-ring-color, var(--color-ring));
+      outline-offset: var(--segment-group-focus-ring-offset, var(--border-width-sm));
+    }
+
+    &[data-invalid][data-focus-visible] {
+      outline-color: var(--segment-group-focus-ring-color-invalid, var(--color-destructive));
+    }
+
+    &[data-readonly], &[data-disabled] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--segment-group-item-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &[data-orientation="vertical"] {
+      justify-content: flex-start;
+      width: 100%;
+    }
+  }
+
+  .wkt6sG_itemControl {
+    display: none;
+  }
+
+  .wkt6sG_itemText {
+    z-index: 1;
+    position: relative;
+  }
+
+  .wkt6sG_indicator {
+    --transition-duration: var(--segment-group-indicator-transition-duration, var(--duration-normal));
+    --transition-timing-function: var(--segment-group-indicator-transition-timing-function, var(--ease-in-out));
+    z-index: 0;
+    top: var(--top);
+    left: var(--left);
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--segment-group-indicator-radius, var(--radius-md));
+    background-color: var(--segment-group-indicator-bg, var(--color-background));
+    box-shadow: var(--segment-group-indicator-shadow, var(--shadow-sm));
+    pointer-events: none;
+    position: absolute;
+  }
+}

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -0,0 +1,15 @@
+import { SegmentGroup } from "@ark-ui/react/segment-group";
+
+//#region src/components/segment-group/SegmentGroup.d.ts
+declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemHiddenInput: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { SegmentGroup$1 as SegmentGroup };

package/dist/components/segment-group/SegmentGroup.js

@@ -0,0 +1,83 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import SegmentGroup_module_default from "./SegmentGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { SegmentGroup } from "@ark-ui/react/segment-group";
+//#region src/components/segment-group/SegmentGroup.tsx
+const SegmentGroupRoot = forwardRef(function SegmentGroupRoot({ className, orientation = "horizontal", ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.Root, {
+		ref,
+		orientation,
+		"data-slot": "segment-group-root",
+		className: clsx(SegmentGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupRootProvider = forwardRef(function SegmentGroupRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.RootProvider, {
+		ref,
+		"data-slot": "segment-group-root-provider",
+		className: clsx(SegmentGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupLabel = forwardRef(function SegmentGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.Label, {
+		ref,
+		"data-slot": "segment-group-label",
+		className: clsx(SegmentGroup_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupItem = forwardRef(function SegmentGroupItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.Item, {
+		ref,
+		"data-slot": "segment-group-item",
+		className: clsx(SegmentGroup_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupItemControl = forwardRef(function SegmentGroupItemControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.ItemControl, {
+		ref,
+		"data-slot": "segment-group-item-control",
+		className: clsx(SegmentGroup_module_default.itemControl, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupItemText = forwardRef(function SegmentGroupItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.ItemText, {
+		ref,
+		"data-slot": "segment-group-item-text",
+		className: clsx(SegmentGroup_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroupItemHiddenInput = forwardRef(function SegmentGroupItemHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {
+		ref,
+		"data-slot": "segment-group-item-hidden-input",
+		...props
+	});
+});
+const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SegmentGroup.Indicator, {
+		ref,
+		"data-slot": "segment-group-indicator",
+		className: clsx(SegmentGroup_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
+	Root: SegmentGroupRoot,
+	RootProvider: SegmentGroupRootProvider,
+	Label: SegmentGroupLabel,
+	Item: SegmentGroupItem,
+	ItemControl: SegmentGroupItemControl,
+	ItemText: SegmentGroupItemText,
+	ItemHiddenInput: SegmentGroupItemHiddenInput,
+	Indicator: SegmentGroupIndicator
+});
+//#endregion
+export { SegmentGroup$1 as SegmentGroup };

package/dist/components/segment-group/SegmentGroup.module.js

@@ -0,0 +1,12 @@
+import './SegmentGroup.css';
+//#region src/components/segment-group/SegmentGroup.module.css
+var SegmentGroup_module_default = {
+	"indicator": "wkt6sG_indicator",
+	"item": "wkt6sG_item",
+	"itemControl": "wkt6sG_itemControl",
+	"itemText": "wkt6sG_itemText",
+	"label": "wkt6sG_label",
+	"root": "wkt6sG_root"
+};
+//#endregion
+export { SegmentGroup_module_default as default };

package/dist/components/segment-group/index.d.ts

@@ -0,0 +1,2 @@
+import { SegmentGroup } from "./SegmentGroup.js";
+export { SegmentGroup };