@moduix/react 2.2.4 → 2.3.0

package/dist/components/pagination/Pagination_module.css

@@ -27,7 +27,7 @@
     gap: var(--moduix-pagination-trigger-gap, var(--moduix-spacing-2));
     border: var(--moduix-pagination-item-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-pagination-item-border-color, var(--moduix-color-border));
-    padding-inline: var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-3));
+    padding-inline: var(--moduix-pagination-item-padding-inline, var(--moduix-spacing-2));
     background-color: var(--moduix-pagination-item-bg, var(--moduix-color-background));
     color: var(--moduix-pagination-item-color, var(--moduix-color-foreground));
     -webkit-user-select: none;

package/dist/components/password-input/PasswordInput_module.css

@@ -9,6 +9,10 @@
     display: flex;
   }
 
+  .root-OrlafY[data-disabled] {
+    opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
+  }
+
   .label-ZAQCRM {
     align-items: center;
     gap: var(--moduix-password-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
@@ -19,10 +23,6 @@
     display: inline-flex;
   }
 
-  .label-ZAQCRM[data-disabled] {
-    opacity: var(--moduix-password-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-  }
-
   .control-h2eb01 {
     box-sizing: border-box;
     width: 100%;

package/dist/components/popover/Popover.d.ts

@@ -3,11 +3,8 @@ import type { ComponentProps } from 'react';
 import { type OverlayPortalProps } from '../../internal/overlayPortal';
 type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
 type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & OverlayPortalProps;
-declare function PopoverRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: PopoverRootProps): import("react").JSX.Element;
+declare function PopoverRoot({ lazyMount, modal, portalled, portalRef, unmountOnExit, ...props }: PopoverRootProps): import("react").JSX.Element;
 declare function PopoverRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, value, ...props }: PopoverRootProviderProps): import("react").JSX.Element;
-declare function PopoverHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function PopoverFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare const Popover: typeof PopoverRoot & {
     Root: typeof PopoverRoot;
     RootProvider: typeof PopoverRootProvider;
@@ -23,8 +20,8 @@ declare const Popover: typeof PopoverRoot & {
     Description: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     CloseTrigger: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Header: typeof PopoverHeader;
-    Body: typeof PopoverBody;
-    Footer: typeof PopoverFooter;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { Popover, usePopover, usePopoverContext };

package/dist/components/popover/Popover.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { Popover, usePopover, usePopoverContext } from "@ark-ui/react/popover";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
@@ -8,13 +9,15 @@ import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPort
 import { CloseButton } from "../close-button/index.js";
 import Popover_module from "./Popover.module.js";
 const DEFAULT_CLOSE_BUTTON_LABEL = 'Close popover';
-function PopoverRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+function PopoverRoot({ lazyMount = true, modal, portalled, portalRef, unmountOnExit = true, ...props }) {
+    const resolvedPortalled = modal || portalled;
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
-        portalled: portalled,
+        portalled: resolvedPortalled,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(Popover.Root, {
-            portalled: portalled,
             lazyMount: lazyMount,
+            modal: modal,
+            portalled: resolvedPortalled,
             unmountOnExit: unmountOnExit,
             ...props
         })
@@ -130,27 +133,30 @@ const Popover_PopoverCloseIcon = /*#__PURE__*/ forwardRef(function({ className,
         })
     });
 });
-function PopoverHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+const Popover_PopoverHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "popover-header",
-        className: clsx(Popover_module.header, className),
+        className: clsx(Popover_module.header, normalizeClassName(className)),
         ...props
     });
-}
-function PopoverBody({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Popover_PopoverBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "popover-body",
-        className: clsx(Popover_module.body, className),
+        className: clsx(Popover_module.body, normalizeClassName(className)),
         ...props
     });
-}
-function PopoverFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Popover_PopoverFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "popover-footer",
-        className: clsx(Popover_module.footer, className),
+        className: clsx(Popover_module.footer, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Popover_Popover = Object.assign(PopoverRoot, {
     Root: PopoverRoot,
     RootProvider: PopoverRootProvider,
@@ -166,8 +172,8 @@ const Popover_Popover = Object.assign(PopoverRoot, {
     Description: Popover_PopoverDescription,
     CloseTrigger: Popover_PopoverCloseTrigger,
     CloseIcon: Popover_PopoverCloseIcon,
-    Header: PopoverHeader,
-    Body: PopoverBody,
-    Footer: PopoverFooter
+    Header: Popover_PopoverHeader,
+    Body: Popover_PopoverBody,
+    Footer: Popover_PopoverFooter
 });
 export { Popover_Popover as Popover, usePopover, usePopoverContext };

package/dist/components/popover/Popover_module.css

@@ -54,10 +54,9 @@
   }
 
   .content-QiLEpj {
-    --moduix-popover-close-icon-size-effective: var(--moduix-popover-close-icon-size, var(--moduix-spacing-7));
-    --moduix-popover-close-icon-offset-effective: var(--moduix-popover-close-icon-offset, var(--moduix-spacing-3));
-    --moduix-popover-header-padding-inline-end-effective: var(--moduix-popover-header-padding-inline-end, calc(var(--moduix-popover-close-icon-size-effective) +
-          var(--moduix-popover-close-icon-offset-effective)));
+    --_popover-close-icon-size-effective: var(--moduix-popover-close-icon-size, var(--moduix-spacing-7));
+    --_popover-close-icon-offset-effective: var(--moduix-popover-close-icon-offset, var(--moduix-spacing-3));
+    --_popover-header-padding-inline-end-effective: var(--moduix-popover-header-padding-inline-end, calc(var(--_popover-close-icon-size-effective) + var(--_popover-close-icon-offset-effective)));
     z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
     box-sizing: border-box;
     width: var(--moduix-popover-width, auto);
@@ -65,6 +64,7 @@
     min-width: min(var(--moduix-popover-min-width, 16rem), var(--available-width));
     max-width: min(var(--moduix-popover-max-width, 28rem), var(--available-width));
     max-height: min(var(--moduix-popover-max-height, 24rem), var(--available-height, 100dvh));
+    overflow-wrap: anywhere;
     padding: var(--moduix-popover-padding-y, var(--moduix-spacing-4))
       var(--moduix-popover-padding-x, var(--moduix-spacing-4));
     border-radius: var(--moduix-popover-radius, var(--moduix-radius-md));
@@ -104,7 +104,7 @@
   }
 
   .content-QiLEpj:has(.closeIcon-oldPto) .header-q59Ek4 {
-    padding-inline-end: var(--moduix-popover-header-padding-inline-end-effective);
+    padding-inline-end: var(--_popover-header-padding-inline-end-effective);
   }
 
   .arrow-B6fVya {
@@ -135,7 +135,7 @@
   }
 
   .closeIcon-oldPto {
-    --moduix-close-button-size: var(--moduix-popover-close-icon-size-effective);
+    --moduix-close-button-size: var(--_popover-close-icon-size-effective);
     --moduix-close-button-radius: var(--moduix-popover-close-icon-radius, var(--moduix-radius-sm));
     --moduix-close-button-icon-size: var(--moduix-popover-close-icon-glyph-size, var(--moduix-spacing-3-5));
     --moduix-close-button-bg: var(--moduix-popover-close-icon-bg, transparent);
@@ -144,8 +144,8 @@
     --moduix-close-button-color-hover: var(--moduix-popover-close-icon-color-hover, var(--moduix-popover-color, var(--moduix-color-popover-foreground)));
     --moduix-close-button-focus-ring-color: var(--moduix-popover-close-icon-focus-ring-color, var(--moduix-color-ring));
     position: absolute;
-    inset-block-start: var(--moduix-popover-close-icon-offset-effective);
-    inset-inline-end: var(--moduix-popover-close-icon-offset-effective);
+    inset-block-start: var(--_popover-close-icon-offset-effective);
+    inset-inline-end: var(--_popover-close-icon-offset-effective);
   }
 
   .header-q59Ek4 {
@@ -165,6 +165,16 @@
     display: flex;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-TuNfDY, .closeTrigger-g6dVFQ {
+      transition: none;
+    }
+
+    .content-QiLEpj[data-state="open"], .content-QiLEpj[data-state="closed"] {
+      animation: none;
+    }
+  }
+
   @keyframes popover-enter-Kmc_ZV {
     from {
       opacity: var(--moduix-popover-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));

package/dist/components/progress-circular/ProgressCircular_module.css

@@ -46,18 +46,25 @@
   .circleRange-IITheJ {
     stroke: var(--moduix-progress-circular-range-bg, var(--moduix-color-primary));
     stroke-linecap: var(--moduix-progress-circular-range-linecap, round);
+    transform-box: fill-box;
+    transform-origin: center;
     transition: stroke-dashoffset
       var(--moduix-progress-circular-range-transition, var(--moduix-transition-default));
   }
 
   .circleRange-IITheJ[data-state="indeterminate"] {
+    stroke: var(--moduix-progress-circular-range-indeterminate-bg, var(--moduix-progress-circular-range-bg, var(--moduix-color-primary)));
     animation: var(--moduix-progress-circular-range-indeterminate-animation, progress-circular-indeterminate 1.4s linear infinite);
     stroke-dasharray: var(--moduix-progress-circular-range-indeterminate-dasharray, 1 200);
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .circleRange-IITheJ {
+      transition: none;
+    }
+
     .circleRange-IITheJ[data-state="indeterminate"] {
-      stroke-dasharray: 20 200;
+      stroke-dasharray: var(--moduix-progress-circular-range-indeterminate-reduced-motion-dasharray, 20 200);
       animation: none;
     }
   }

package/dist/components/progress-linear/ProgressLinear_module.css

@@ -69,6 +69,7 @@
 
   .range-A5c8GJ[data-state="indeterminate"] {
     width: var(--moduix-progress-linear-range-indeterminate-width, 35%);
+    background-color: var(--moduix-progress-linear-range-indeterminate-bg, var(--moduix-progress-linear-range-bg, var(--moduix-color-primary)));
     animation: var(--moduix-progress-linear-range-indeterminate-animation, progress-linear-indeterminate 1.5s ease-in-out infinite);
   }
 

package/dist/components/qr-code/QrCode_module.css

@@ -3,8 +3,7 @@
     box-sizing: border-box;
     align-items: center;
     gap: var(--moduix-qr-code-gap, var(--moduix-spacing-3));
-    width: -moz-fit-content;
-    width: fit-content;
+    width: min(var(--moduix-qr-code-size, 8rem), 100%);
     max-width: var(--moduix-qr-code-max-width, 100%);
     color: var(--moduix-qr-code-color, var(--moduix-color-foreground));
     flex-direction: column;
@@ -14,8 +13,8 @@
 
   .frame-xuEHtQ {
     box-sizing: border-box;
-    width: min(var(--moduix-qr-code-size, 8rem), 100%);
     aspect-ratio: 1;
+    width: 100%;
     height: auto;
     color: inherit;
     fill: var(--moduix-qr-code-fill, currentColor);

package/dist/components/radio-group/RadioGroup_module.css

@@ -134,7 +134,7 @@
   }
 
   .itemText-gi6tev {
-    color: var(--moduix-radio-label-color, var(--moduix-color-foreground));
+    color: var(--moduix-radio-label-color, var(--moduix-radio-group-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-radio-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-radio-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-radio-label-line-height, var(--moduix-line-height-text-sm));

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

@@ -172,5 +172,20 @@
       transition: none;
     }
   }
+
+  @media (forced-colors: active) {
+    .root-FtAkRy[data-fade] .viewport-SrqU1k {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    .viewport-SrqU1k:focus-visible {
+      outline-color: highlight;
+    }
+
+    .thumb-eKzpKM {
+      background-color: buttontext;
+    }
+  }
 }
 

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

@@ -1,8 +1,8 @@
 import "./SegmentGroup_module.css";
 const SegmentGroup_module = {
     root: "root-Bd4lNR",
-    label: "label-shCFGn",
     item: "item-YWqgii",
+    label: "label-shCFGn",
     itemControl: "itemControl-pbg2uY",
     itemText: "itemText-aBveL1",
     indicator: "indicator-hgTUcL"

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

@@ -24,6 +24,10 @@
     opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
+  .root-Bd4lNR:not([data-disabled]) .item-YWqgii[data-disabled] {
+    opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
   .root-Bd4lNR[data-invalid] {
     border-color: var(--moduix-segment-group-border-color-invalid, var(--moduix-color-destructive));
   }
@@ -87,10 +91,6 @@
     cursor: default;
   }
 
-  .item-YWqgii[data-disabled] {
-    opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
-  }
-
   .item-YWqgii[data-orientation="vertical"] {
     justify-content: flex-start;
     inline-size: 100%;

package/dist/components/select/Select.d.ts

@@ -12,9 +12,6 @@ type SelectFieldProps = Omit<ComponentProps<typeof SelectPrimitive.Control>, 'as
     indicator?: ReactNode;
     placeholder?: ComponentProps<typeof SelectPrimitive.ValueText>['placeholder'];
 };
-declare function SelectItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function SelectItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function SelectItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 declare const Select: SelectRootComponent & {
     Root: SelectRootComponent;
     RootProvider: SelectRootProviderComponent;
@@ -38,8 +35,8 @@ declare const Select: SelectRootComponent & {
     Item: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemText: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemIndicator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    ItemTextContent: typeof SelectItemTextContent;
-    ItemTextIcon: typeof SelectItemTextIcon;
-    ItemTextLabel: typeof SelectItemTextLabel;
+    ItemTextContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
 };
 export { Select, useSelect, useSelectContext, useSelectItemContext };

package/dist/components/select/Select.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/react/select";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
@@ -235,27 +236,30 @@ function SelectFormControl({ nativeFormControl }) {
         ]
     });
 }
-function SelectItemTextContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+const Select_SelectItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-content",
         className: clsx(Select_module.itemTextContent, normalizeClassName(className)),
         ...props
     });
-}
-function SelectItemTextIcon({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Select_SelectItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-icon",
         className: clsx(Select_module.itemTextIcon, normalizeClassName(className)),
         ...props
     });
-}
-function SelectItemTextLabel({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Select_SelectItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "select-item-text-label",
         className: clsx(Select_module.itemTextLabel, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Select_Select = Object.assign(Select_SelectRoot, {
     Root: Select_SelectRoot,
     RootProvider: Select_SelectRootProvider,
@@ -279,8 +283,8 @@ const Select_Select = Object.assign(Select_SelectRoot, {
     Item: Select_SelectItem,
     ItemText: Select_SelectItemText,
     ItemIndicator: Select_SelectItemIndicator,
-    ItemTextContent: SelectItemTextContent,
-    ItemTextIcon: SelectItemTextIcon,
-    ItemTextLabel: SelectItemTextLabel
+    ItemTextContent: Select_SelectItemTextContent,
+    ItemTextIcon: Select_SelectItemTextIcon,
+    ItemTextLabel: Select_SelectItemTextLabel
 });
 export { Select_Select as Select, useSelect, useSelectContext, useSelectItemContext };

package/dist/components/select/Select_module.css

@@ -270,7 +270,7 @@
   }
 
   .itemGroup-rRI1Ej + .itemGroup-rRI1Ej {
-    margin-top: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-select-item-group-gap, var(--moduix-spacing-2));
   }
 
   .itemGroupLabel-IeDuI7 {
@@ -371,5 +371,19 @@
     min-width: 0;
     overflow: hidden;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-_8XyWR, .indicator-ywAB27 {
+      transition: none;
+    }
+
+    .clearTrigger-bA52Dh {
+      --moduix-close-button-transition: none;
+    }
+
+    .content-fSDhut[data-state] {
+      animation: none;
+    }
+  }
 }
 

package/dist/components/separator/Separator.js

@@ -4,14 +4,14 @@ import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Separator_module from "./Separator.module.js";
-const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': ariaOrientation, ...props }, ref) {
+const Separator_SeparatorRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, orientation = 'horizontal', role, size = 'sm', variant = 'solid', 'aria-orientation': _ariaOrientation, ...props }, ref) {
     const resolvedRole = role ?? 'separator';
     return /*#__PURE__*/ jsx(ark.span, {
         ...props,
         ref: ref,
         asChild: asChild,
         role: resolvedRole,
-        "aria-orientation": ariaOrientation ?? ('separator' === resolvedRole ? orientation : void 0),
+        "aria-orientation": 'separator' === resolvedRole ? orientation : void 0,
         "data-scope": "separator",
         "data-part": "root",
         "data-slot": "separator-root",

package/dist/components/separator/Separator_module.css

@@ -2,7 +2,7 @@
   .root-q9iyyK {
     border: 0;
     border-color: var(--moduix-separator-color, var(--moduix-color-border));
-    border-style: var(--moduix-separator-border-style, var(--moduix-separator-variant-border-style, solid));
+    border-style: var(--moduix-separator-border-style, var(--_separator-variant-border-style, solid));
     flex-shrink: 0;
     margin: 0;
     display: block;
@@ -25,11 +25,11 @@
   }
 
   .root-q9iyyK[data-variant="dashed"] {
-    --moduix-separator-variant-border-style: dashed;
+    --_separator-variant-border-style: dashed;
   }
 
   .root-q9iyyK[data-variant="dotted"] {
-    --moduix-separator-variant-border-style: dotted;
+    --_separator-variant-border-style: dotted;
   }
 
   .root-q9iyyK[data-orientation="horizontal"] {

package/dist/components/sidebar/Sidebar.js

@@ -12,7 +12,7 @@ import { Tooltip } from "../tooltip/index.js";
 import Sidebar_module from "./Sidebar.module.js";
 const sidebarPanel = {
     id: 'sidebar',
-    minSize: '12rem',
+    minSize: '3rem',
     maxSize: '18rem',
     collapsible: true,
     collapsedSize: '3rem'

package/dist/components/sidebar/Sidebar_module.css

@@ -93,10 +93,6 @@
     z-index: 2;
   }
 
-  .resizeTrigger-xFDgel:focus-visible:not([data-dragging]):before {
-    background-color: var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
-  }
-
   .trigger-_fUcgc {
     box-sizing: border-box;
     width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
@@ -143,14 +139,13 @@
 
   .trigger-_fUcgc {
     z-index: 4;
-    margin-block-start: var(--moduix-sidebar-trigger-offset-y, var(--moduix-spacing-4));
+    margin-block-start: 0;
     margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
     border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
     background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
-    align-self: flex-start;
     position: relative;
   }
 
@@ -162,8 +157,15 @@
     transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
   }
 
-  .label-trHnso {
+  .trigger-_fUcgc {
+    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
+  }
+
+  .label-trHnso, .groupLabel-IvBtsR {
+    text-overflow: ellipsis;
+    white-space: nowrap;
     min-width: 0;
+    overflow: hidden;
   }
 
   .header-YkNEAV, .footer-RydM38 {
@@ -202,7 +204,6 @@
   }
 
   .groupLabel-IvBtsR {
-    min-width: 0;
     padding-inline: var(--moduix-sidebar-group-label-padding-x, var(--moduix-spacing-2));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-sidebar-group-label-font-size, var(--moduix-text-xs));

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -1,18 +1,16 @@
-import { SignaturePad as SignaturePadPrimitive, useSignaturePad, useSignaturePadContext } from '@ark-ui/react/signature-pad';
+import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext } from '@ark-ui/react/signature-pad';
 import type { ReactNode } from 'react';
 type SignaturePadFormProps = {
     getFormValue?: (paths: string[]) => string;
 };
-declare function SignaturePadCanvas({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
+declare function useSignaturePad(props?: Parameters<typeof useSignaturePadPrimitive>[0]): ReturnType<typeof useSignaturePadPrimitive>;
 declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Context: (props: SignaturePadPrimitive.ContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Canvas: typeof SignaturePadCanvas;
+    Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Segment: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.SegmentProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     Guide: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.GuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;