@moduix/react 2.1.0 → 2.2.4

package/dist/components/drawer/Drawer_module.css

@@ -0,0 +1,546 @@
+@layer moduix.components {
+  .trigger-Z3Ug8_, .closeTrigger-2hmI2S {
+    box-sizing: border-box;
+    min-height: var(--moduix-drawer-control-height, var(--moduix-size-md));
+    padding: var(--moduix-drawer-control-padding-y, var(--moduix-spacing-1))
+      var(--moduix-drawer-control-padding-x, var(--moduix-spacing-3-5));
+    border: var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-drawer-control-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-drawer-control-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-drawer-control-bg, var(--moduix-color-background));
+    color: var(--moduix-drawer-control-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-drawer-control-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-drawer-control-line-height, var(--moduix-line-height-text-md));
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.trigger-Z3Ug8_, .closeTrigger-2hmI2S):hover {
+      background-color: var(--moduix-drawer-control-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.trigger-Z3Ug8_, .closeTrigger-2hmI2S):focus-visible {
+    outline: var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm))) *
+          -1);
+  }
+
+  :is(.trigger-Z3Ug8_, .closeTrigger-2hmI2S)[data-disabled], :is(.trigger-Z3Ug8_, .closeTrigger-2hmI2S)[disabled] {
+    pointer-events: none;
+    opacity: var(--moduix-opacity-disabled);
+  }
+
+  .backdrop-butaHQ {
+    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
+    background-color: var(--moduix-drawer-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
+    min-height: 100dvh;
+    -webkit-backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-drawer-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-drawer-backdrop-blur, 4px)));
+    transition: opacity calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out),
+      backdrop-filter calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out);
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop-butaHQ[data-state="open"] {
+    animation: drawer-backdrop-in-spk0vd
+        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
+  }
+
+  .backdrop-butaHQ[data-state="closed"] {
+    animation: drawer-backdrop-out-NVDSA3
+        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
+    animation-fill-mode: forwards;
+  }
+
+  .backdrop-butaHQ[data-state="open"][data-swiping] {
+    transition-duration: 0s;
+  }
+
+  .backdrop-butaHQ[hidden]:has( ~ .positioner-PZXY45:not([hidden])) {
+    display: block;
+  }
+
+  .positioner-PZXY45 {
+    box-sizing: border-box;
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
+    overscroll-behavior: contain;
+    padding: var(--moduix-drawer-positioner-padding, 0);
+    justify-content: center;
+    align-items: flex-end;
+    display: flex;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .positioner-PZXY45:has(.content-ijyEx0[data-variant="island"]) {
+    padding-top: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+        env(safe-area-inset-top, 0px));
+    padding-right: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+        env(safe-area-inset-right, 0px));
+    padding-bottom: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+        env(safe-area-inset-bottom, 0px));
+    padding-left: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+        env(safe-area-inset-left, 0px));
+  }
+
+  .positioner-PZXY45[data-swipe-direction="up"] {
+    align-items: flex-start;
+  }
+
+  .positioner-PZXY45[data-swipe-direction="left"] {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .positioner-PZXY45[data-swipe-direction="right"] {
+    justify-content: flex-end;
+    align-items: stretch;
+  }
+
+  .positioner-PZXY45:not([hidden]) .content-ijyEx0[hidden] {
+    display: flex;
+  }
+
+  .content-ijyEx0 {
+    --moduix-drawer-bleed: var(--moduix-drawer-bleed-size, var(--moduix-size-xl));
+    --drawer-island-translate-distance: 0px;
+    box-sizing: border-box;
+    width: min(var(--moduix-drawer-width, 100%), 100vw);
+    height: var(--moduix-drawer-size, 100%);
+    max-height: var(--moduix-drawer-max-height, 80dvh);
+    padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-3))
+      var(--moduix-drawer-padding-x, var(--moduix-spacing-6))
+      calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-bottom, 0px));
+    border: var(--moduix-drawer-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-drawer-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl))
+      var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0;
+    background-color: var(--moduix-drawer-bg, var(--moduix-color-popover));
+    color: var(--moduix-drawer-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-drawer-shadow, var(--moduix-shadow-lg));
+    overscroll-behavior: contain;
+    transform-origin: bottom;
+    transition: transform calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
+        var(--moduix-ease-out),
+      scale
+        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring))),
+      translate
+        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring)));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    translate: 0;
+    scale: 1;
+  }
+
+  .content-ijyEx0:after {
+    inset-inline: 0;
+    height: var(--moduix-drawer-bleed);
+    background-color: inherit;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
+  }
+
+  .content-ijyEx0[data-state="open"] {
+    animation: drawer-content-in-down-Lxcajc
+        var(--moduix-drawer-transition, var(--moduix-transition-spring));
+  }
+
+  .content-ijyEx0[data-state="closed"] {
+    animation: drawer-content-out-down-Qe17OV
+        var(--moduix-drawer-transition, var(--moduix-transition-spring));
+    animation-fill-mode: forwards;
+  }
+
+  .content-ijyEx0[data-state="open"][data-swiping], .content-ijyEx0[data-nested-drawer-swiping] {
+    transition-duration: 0s;
+  }
+
+  .content-ijyEx0[data-dragging] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .content-ijyEx0[data-swipe-direction="up"] {
+    transform-origin: top;
+    padding-top: calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-top, 0px));
+    padding-bottom: var(--moduix-drawer-padding-y, var(--moduix-spacing-4));
+    border-radius: 0 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
+        var(--moduix-drawer-radius, var(--moduix-radius-xl));
+  }
+
+  .content-ijyEx0[data-swipe-direction="up"]:after {
+    top: auto;
+    bottom: 100%;
+  }
+
+  .content-ijyEx0[data-swipe-direction="up"][data-state="open"] {
+    animation-name: drawer-content-in-up-VuIZdu;
+  }
+
+  .content-ijyEx0[data-swipe-direction="up"][data-state="closed"] {
+    animation-name: drawer-content-out-up-BCRbr_;
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"], .content-ijyEx0[data-swipe-direction="right"] {
+    width: min(var(--moduix-drawer-side-width, 22rem), calc(100vw - var(--moduix-spacing-8)));
+    height: var(--moduix-drawer-side-height, 100%);
+    max-height: none;
+    padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-6))
+        var(--moduix-drawer-padding-x, var(--moduix-spacing-6));
+  }
+
+  :is(.content-ijyEx0[data-swipe-direction="left"], .content-ijyEx0[data-swipe-direction="right"]):after {
+    inset-block: 0;
+    inset-inline: auto;
+    width: var(--moduix-drawer-bleed);
+    height: auto;
+    top: 0;
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"] {
+    transform-origin: 0;
+    border-radius: 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
+        var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0;
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"]:after {
+    right: 100%;
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"][data-state="open"] {
+    animation-name: drawer-content-in-left-GV7GOb;
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"][data-state="closed"] {
+    animation-name: drawer-content-out-left-cf4GdT;
+  }
+
+  .content-ijyEx0[data-swipe-direction="right"] {
+    transform-origin: 100%;
+    border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0
+        var(--moduix-drawer-radius, var(--moduix-radius-xl));
+  }
+
+  .content-ijyEx0[data-swipe-direction="right"]:after {
+    left: 100%;
+  }
+
+  .content-ijyEx0[data-swipe-direction="right"][data-state="open"] {
+    animation-name: drawer-content-in-right-tIzfdU;
+  }
+
+  .content-ijyEx0[data-swipe-direction="right"][data-state="closed"] {
+    animation-name: drawer-content-out-right-AqJZX9;
+  }
+
+  .content-ijyEx0[data-nested-drawer-open] {
+    scale: calc(1 - var(--moduix-drawer-nested-scale-step, .05) * var(--nested-drawers, 0));
+  }
+
+  .content-ijyEx0[data-swipe-direction="down"][data-nested-drawer-open] {
+    translate: 0
+        calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0));
+  }
+
+  .content-ijyEx0[data-swipe-direction="up"][data-nested-drawer-open] {
+    translate: 0
+        calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0));
+  }
+
+  .content-ijyEx0[data-swipe-direction="left"][data-nested-drawer-open] {
+    translate: calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0))
+        0;
+  }
+
+  .content-ijyEx0[data-swipe-direction="right"][data-nested-drawer-open] {
+    translate: calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
+            var(--nested-drawers, 0))
+        0;
+  }
+
+  .content-ijyEx0[data-variant="island"] {
+    border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl));
+  }
+
+  .content-ijyEx0[data-variant="island"]:after {
+    display: none;
+  }
+
+  .content-ijyEx0[data-variant="island"][data-swipe-direction="down"] {
+    --drawer-island-translate-distance: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+          env(safe-area-inset-bottom, 0px));
+  }
+
+  .content-ijyEx0[data-variant="island"][data-swipe-direction="up"] {
+    --drawer-island-translate-distance: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+          env(safe-area-inset-top, 0px));
+  }
+
+  .content-ijyEx0[data-variant="island"][data-swipe-direction="left"] {
+    --drawer-island-translate-distance: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+          env(safe-area-inset-left, 0px));
+  }
+
+  .content-ijyEx0[data-variant="island"][data-swipe-direction="right"] {
+    --drawer-island-translate-distance: max(var(--moduix-drawer-island-inset, var(--moduix-spacing-4)),
+          env(safe-area-inset-right, 0px));
+  }
+
+  .grabber-npke5Y {
+    width: 100%;
+    padding: var(--moduix-drawer-grabber-padding-top, 0) 0
+      var(--moduix-drawer-grabber-padding, var(--moduix-spacing-1));
+    cursor: grab;
+    -webkit-user-select: none;
+    user-select: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .grabber-npke5Y:active {
+    cursor: grabbing;
+  }
+
+  :where(.content-ijyEx0[data-swipe-direction="left"], .content-ijyEx0[data-swipe-direction="right"]) .grabber-npke5Y {
+    display: none;
+  }
+
+  .grabberIndicator-NEw05R {
+    width: var(--moduix-drawer-grabber-indicator-width, 3rem);
+    height: var(--moduix-drawer-grabber-indicator-height, .25rem);
+    border-radius: var(--moduix-drawer-grabber-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-drawer-grabber-indicator-bg, var(--moduix-color-muted-foreground));
+    opacity: var(--moduix-drawer-grabber-indicator-opacity, .45);
+    transition: background-color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+  }
+
+  @media (hover: hover) {
+    .grabber-npke5Y:hover .grabberIndicator-NEw05R {
+      opacity: var(--moduix-drawer-grabber-indicator-opacity-hover, .7);
+    }
+  }
+
+  .header-FhRXxw {
+    align-items: start;
+    gap: var(--moduix-drawer-header-gap, var(--moduix-spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .header-FhRXxw > [data-slot="drawer-title"] {
+    grid-column: 1;
+  }
+
+  .header-FhRXxw > [data-slot="drawer-close-trigger"], .header-FhRXxw > [data-slot="drawer-close-icon"] {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .header-FhRXxw > [data-slot="drawer-description"] {
+    grid-column: 1 / -1;
+  }
+
+  .title-k9e1RN {
+    color: var(--moduix-drawer-title-color, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
+    font-size: var(--moduix-drawer-title-font-size, var(--moduix-text-lg));
+    font-weight: var(--moduix-drawer-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-drawer-title-line-height, var(--moduix-line-height-text-lg));
+    margin: 0;
+  }
+
+  .description-J81oni, .body-isYwKt {
+    color: var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-drawer-description-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-drawer-description-line-height, var(--moduix-line-height-text-md));
+  }
+
+  .description-J81oni {
+    margin: 0;
+  }
+
+  .body-isYwKt {
+    min-height: 0;
+    margin-top: var(--moduix-drawer-body-margin-top, var(--moduix-spacing-4));
+    overflow-y: auto;
+  }
+
+  .footer-_cSbP3 {
+    justify-content: flex-end;
+    gap: var(--moduix-drawer-footer-gap, var(--moduix-spacing-2));
+    margin-top: var(--moduix-drawer-footer-margin-top, var(--moduix-spacing-6));
+    display: flex;
+  }
+
+  .closeIcon-V8j0mL {
+    --moduix-close-button-size: var(--moduix-drawer-close-icon-size, var(--moduix-spacing-7));
+    --moduix-close-button-radius: var(--moduix-drawer-close-icon-radius, var(--moduix-radius-md));
+    --moduix-close-button-color: var(--moduix-drawer-close-icon-color, var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground)));
+    --moduix-close-button-color-hover: var(--moduix-drawer-close-icon-color-hover, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
+    --moduix-close-button-bg: var(--moduix-drawer-close-icon-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-drawer-close-icon-bg-hover, var(--moduix-color-accent));
+    --moduix-close-button-focus-ring-color: var(--moduix-drawer-close-icon-focus-ring-color, var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring)));
+    --moduix-close-button-icon-size: var(--moduix-drawer-close-icon-glyph-size, var(--moduix-spacing-3));
+  }
+
+  .swipeArea-XqqCyb {
+    z-index: var(--moduix-z-modal);
+    touch-action: none;
+    position: fixed;
+  }
+
+  .swipeArea-XqqCyb[data-swipe-direction="up"] {
+    height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .swipeArea-XqqCyb[data-swipe-direction="down"] {
+    height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .swipeArea-XqqCyb[data-swipe-direction="left"] {
+    width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .swipeArea-XqqCyb[data-swipe-direction="right"] {
+    width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .swipeArea-XqqCyb[data-disabled] {
+    pointer-events: none;
+  }
+
+  .indentBackground-AXVSP_ {
+    background: var(--moduix-drawer-indent-background-bg, var(--moduix-color-foreground));
+    opacity: var(--moduix-drawer-indent-background-opacity, 0);
+    pointer-events: none;
+    transition: opacity var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
+    position: absolute;
+    inset: 0;
+  }
+
+  .indentBackground-AXVSP_[data-active] {
+    opacity: calc(var(--moduix-drawer-indent-background-opacity-active, 1) *
+          (1 - var(--drawer-swipe-progress, 0)));
+  }
+
+  .indent-r1DrXk {
+    transform-origin: top;
+    transition: transform var(--moduix-drawer-indent-transition, var(--moduix-transition-spring)),
+      border-radius var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
+    position: relative;
+    transform: translateY(0) scale(1);
+  }
+
+  .indent-r1DrXk[data-active] {
+    border-radius: var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg))
+        var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg)) 0 0;
+    transform: translateY(calc(var(--moduix-drawer-indent-translate-y-active, var(--moduix-spacing-2)) *
+              (1 - var(--drawer-swipe-progress, 0))))
+        scale(calc(var(--moduix-drawer-indent-scale-active, .97) +
+              (1 - var(--moduix-drawer-indent-scale-active, .97)) * var(--drawer-swipe-progress, 0)));
+  }
+
+  @keyframes drawer-backdrop-in-spk0vd {
+    from {
+      opacity: 0;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @keyframes drawer-backdrop-out-NVDSA3 {
+    to {
+      opacity: 0;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @keyframes drawer-content-in-down-Lxcajc {
+    from {
+      transform: translate3d(0, calc(100% + var(--drawer-island-translate-distance)), 0);
+    }
+  }
+
+  @keyframes drawer-content-out-down-Qe17OV {
+    to {
+      transform: translate3d(0, calc(100% + var(--drawer-island-translate-distance)), 0);
+    }
+  }
+
+  @keyframes drawer-content-in-up-VuIZdu {
+    from {
+      transform: translate3d(0, calc(-100% - var(--drawer-island-translate-distance)), 0);
+    }
+  }
+
+  @keyframes drawer-content-out-up-BCRbr_ {
+    to {
+      transform: translate3d(0,
+        calc(-100% - var(--drawer-island-translate-distance) - var(--moduix-drawer-bleed)),
+        0);
+    }
+  }
+
+  @keyframes drawer-content-in-left-GV7GOb {
+    from {
+      transform: translate3d(calc(-100% - var(--drawer-island-translate-distance)), 0, 0);
+    }
+  }
+
+  @keyframes drawer-content-out-left-cf4GdT {
+    to {
+      transform: translate3d(calc(-100% - var(--drawer-island-translate-distance)), 0, 0);
+    }
+  }
+
+  @keyframes drawer-content-in-right-tIzfdU {
+    from {
+      transform: translate3d(calc(100% + var(--drawer-island-translate-distance)), 0, 0);
+    }
+  }
+
+  @keyframes drawer-content-out-right-AqJZX9 {
+    to {
+      transform: translate3d(calc(100% + var(--drawer-island-translate-distance)), 0, 0);
+    }
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Drawer, useDrawer } from "./Drawer.js";
-export { Drawer, useDrawer };
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from './Drawer.js';

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "./Drawer.js";

package/dist/components/editable/Editable.d.ts

@@ -1,24 +1,16 @@
-import { ComponentProps } from "react";
-import { Editable, useEditable, useEditableContext } from "@ark-ui/react/editable";
-
-//#region src/components/editable/Editable.d.ts
-declare function EditableControls({
-  className,
-  ...props
-}: Omit<ComponentProps<typeof Editable.Control>, 'asChild' | 'children'>): import("react").JSX.Element;
-declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Editable.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<Editable.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Area: import("react").ForwardRefExoticComponent<Omit<Editable.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Input: import("react").ForwardRefExoticComponent<Omit<Editable.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  Preview: import("react").ForwardRefExoticComponent<Omit<Editable.PreviewProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Editable.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  EditTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  SubmitTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  CancelTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Controls: typeof EditableControls;
-  Context: (props: Editable.ContextProps) => import("react").ReactNode;
+import { Editable as EditablePrimitive, useEditable, useEditableContext } from '@ark-ui/react/editable';
+declare const Editable: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Area: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Preview: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.PreviewProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    EditTrigger: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    SubmitTrigger: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CancelTrigger: import("react").ForwardRefExoticComponent<Omit<EditablePrimitive.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Controls: import("react").ForwardRefExoticComponent<Omit<Omit<EditablePrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children" | "asChild">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: EditablePrimitive.ContextProps) => import("react").ReactNode;
 };
-//#endregion
-export { Editable$1 as Editable, useEditable, useEditableContext };
+export { Editable, useEditable, useEditableContext };