@membranehq/react 0.3.0 → 0.3.2

package/dist/esm/styled-system/recipes/switch-recipe.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/styled-system/recipes/text.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/styled-system/recipes/tooltip.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/styled-system/tokens/index.mjs

@@ -1,7 +1,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/avatar.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/button.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/spinner.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/alert.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/avatar.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/badge.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/button.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/icon-button.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/icon.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/input.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/menu.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/popover.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/radio-group.mjs

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.3.2
+ */
+'use client';
+
+import { RadioGroup } from '@ark-ui/react/radio-group';
+export { RadioGroupContext as Context, RadioGroupItemHiddenInput as ItemHiddenInput } from '@ark-ui/react/radio-group';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/css/conditions.mjs';
+import '../../styled-system/css/css.mjs';
+import { radioGroup } from '../../styled-system/recipes/radio-group.mjs';
+import { createStyleContext } from './utils/create-style-context.mjs';
+
+const { withProvider, withContext } = createStyleContext(radioGroup);
+withProvider(RadioGroup.RootProvider, "root");
+const Root = withProvider(RadioGroup.Root, "root");
+withContext(
+  RadioGroup.Indicator,
+  "indicator"
+);
+const ItemControl = withContext(
+  RadioGroup.ItemControl,
+  "itemControl"
+);
+const Item = withContext(
+  RadioGroup.Item,
+  "item"
+);
+const ItemText = withContext(
+  RadioGroup.ItemText,
+  "itemText"
+);
+withContext(
+  RadioGroup.Label,
+  "label"
+);
+
+export { Item, ItemControl, ItemText, Root };

package/dist/esm/ui-kit/styled/skeleton.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/spinner.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/switch.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/text.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/tooltip.mjs

@@ -3,7 +3,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/styled/utils/create-style-context.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/esm/ui-kit/switch.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.3.0
+ * v0.3.2
  */
 'use client';
 

package/dist/styles.css

@@ -2005,16 +2005,9 @@
 }
 }
 
-  .iap-button--size_md {
-    padding-inline: var(--iap-spacing-4);
-    gap: var(--iap-spacing-2);
-    font-size: var(--iap-font-sizes-sm);
-    line-height: 1.25rem;
-    height: var(--iap-sizes-10);
-    min-width: var(--iap-sizes-10);
-}
-
-  .iap-button--variant_ghost {
+  .iap-button--variant_outline {
+    border-width: 1px;
+    border-color: var(--iap-colors-color-palette-a7);
     color: var(--iap-colors-color-palette-text);
     --iap-colors-color-palette-light-1: var(--iap-colors-gray-light-1);
     --iap-colors-color-palette-light-2: var(--iap-colors-gray-light-2);
@@ -2094,41 +2087,34 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
-  .iap-button--variant_ghost:is([aria-selected=true], [data-selected]) {
-    background: var(--iap-colors-color-palette-a3);
-}
-
-  .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-    color: var(--iap-colors-fg-disabled);
-    cursor: not-allowed;
-}
-
-  .iap-button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid;
-    outline-color: var(--iap-colors-color-palette-default);
-    outline-offset: 2px;
-}
-
-  .iap-button--variant_solid {
+  .iap-button--variant_outline:is([aria-selected=true], [data-selected]) {
     background: var(--iap-colors-color-palette-default);
+    border-color: var(--iap-colors-color-palette-default);
     color: var(--iap-colors-color-palette-fg);
 }
 
-  .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-    background: var(--iap-colors-bg-disabled);
+  .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    border-color: var(--iap-colors-border-disabled);
     color: var(--iap-colors-fg-disabled);
     cursor: not-allowed;
 }
 
-  .iap-button--variant_solid:is(:focus-visible, [data-focus-visible]) {
+  .iap-button--variant_outline:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
     outline-color: var(--iap-colors-color-palette-default);
     outline-offset: 2px;
 }
 
-  .iap-button--variant_outline {
-    border-width: 1px;
-    border-color: var(--iap-colors-color-palette-a7);
+  .iap-button--size_xs {
+    padding-inline: var(--iap-spacing-3);
+    gap: var(--iap-spacing-2);
+    font-size: var(--iap-font-sizes-xs);
+    line-height: 1.125rem;
+    height: var(--iap-sizes-8);
+    min-width: var(--iap-sizes-8);
+}
+
+  .iap-button--variant_ghost {
     color: var(--iap-colors-color-palette-text);
     --iap-colors-color-palette-light-1: var(--iap-colors-gray-light-1);
     --iap-colors-color-palette-light-2: var(--iap-colors-gray-light-2);
@@ -2208,19 +2194,42 @@
     --iap-colors-color-palette-text: var(--iap-colors-gray-text);
 }
 
-  .iap-button--variant_outline:is([aria-selected=true], [data-selected]) {
+  .iap-button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--iap-colors-color-palette-a3);
+}
+
+  .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    color: var(--iap-colors-fg-disabled);
+    cursor: not-allowed;
+}
+
+  .iap-button--variant_ghost:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid;
+    outline-color: var(--iap-colors-color-palette-default);
+    outline-offset: 2px;
+}
+
+  .iap-button--size_md {
+    padding-inline: var(--iap-spacing-4);
+    gap: var(--iap-spacing-2);
+    font-size: var(--iap-font-sizes-sm);
+    line-height: 1.25rem;
+    height: var(--iap-sizes-10);
+    min-width: var(--iap-sizes-10);
+}
+
+  .iap-button--variant_solid {
     background: var(--iap-colors-color-palette-default);
-    border-color: var(--iap-colors-color-palette-default);
     color: var(--iap-colors-color-palette-fg);
 }
 
-  .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-    border-color: var(--iap-colors-border-disabled);
+  .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    background: var(--iap-colors-bg-disabled);
     color: var(--iap-colors-fg-disabled);
     cursor: not-allowed;
 }
 
-  .iap-button--variant_outline:is(:focus-visible, [data-focus-visible]) {
+  .iap-button--variant_solid:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
     outline-color: var(--iap-colors-color-palette-default);
     outline-offset: 2px;
@@ -2328,15 +2337,6 @@
     outline-offset: 2px;
 }
 
-  .iap-button--size_xs {
-    padding-inline: var(--iap-spacing-3);
-    gap: var(--iap-spacing-2);
-    font-size: var(--iap-font-sizes-xs);
-    line-height: 1.125rem;
-    height: var(--iap-sizes-8);
-    min-width: var(--iap-sizes-8);
-}
-
   .iap-spinner--size_md {
     --size: var(--iap-sizes-6);
 }
@@ -2388,49 +2388,49 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
-      background: var(--iap-colors-transparent);
-      color: var(--iap-colors-fg-disabled);
+    .iap-button--variant_outline:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-emphasized);
+      border-color: var(--iap-colors-color-palette-emphasized);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_ghost:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-a3);
+    .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+      background: var(--iap-colors-transparent);
+      border-color: var(--iap-colors-border-disabled);
+      color: var(--iap-colors-fg-disabled);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
-      background: var(--iap-colors-bg-disabled);
-      color: var(--iap-colors-fg-disabled);
+    .iap-button--variant_outline:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-a2);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_solid:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-emphasized);
+    .iap-button--variant_ghost:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+      background: var(--iap-colors-transparent);
+      color: var(--iap-colors-fg-disabled);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_outline:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-emphasized);
-      border-color: var(--iap-colors-color-palette-emphasized);
+    .iap-button--variant_ghost:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-a3);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_outline:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
-      background: var(--iap-colors-transparent);
-      border-color: var(--iap-colors-border-disabled);
+    .iap-button--variant_solid:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+      background: var(--iap-colors-bg-disabled);
       color: var(--iap-colors-fg-disabled);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .iap-button--variant_outline:is(:hover, [data-hover]) {
-      background: var(--iap-colors-color-palette-a2);
+    .iap-button--variant_solid:is(:hover, [data-hover]) {
+      background: var(--iap-colors-color-palette-emphasized);
 }
 }
 
@@ -2699,6 +2699,62 @@
       display: none;
 }
 
+    .iap-radioGroup__root {
+      display: flex;
+}
+
+    .iap-radioGroup__root[data-orientation=vertical] {
+      flex-direction: column;
+}
+
+    .iap-radioGroup__root[data-orientation=horizontal] {
+      flex-direction: row;
+}
+
+    .iap-radioGroup__item {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+}
+
+    .iap-radioGroup__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+}
+
+    .iap-radioGroup__itemText {
+      color: var(--iap-colors-fg-default);
+      font-weight: var(--iap-font-weights-medium);
+}
+
+    .iap-radioGroup__itemText:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--iap-colors-fg-disabled);
+}
+
+    .iap-radioGroup__itemControl {
+      background: var(--iap-colors-transparent);
+      border-color: var(--iap-colors-border-default);
+      border-radius: var(--iap-radii-full);
+      border-width: 1px;
+      --transition-duration: var(--iap-durations-normal);
+      transition-duration: var(--iap-durations-normal);
+      --transition-prop: background;
+      transition-property: background;
+      --transition-easing: var(--iap-easings-default);
+      transition-timing-function: var(--iap-easings-default);
+}
+
+    .iap-radioGroup__itemControl:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+      background: var(--iap-colors-color-palette-default);
+      border-color: var(--iap-colors-color-palette-default);
+      outline-color: var(--iap-colors-bg-default);
+      outline-style: solid;
+}
+
+    .iap-radioGroup__itemControl:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      border-color: var(--iap-colors-border-disabled);
+      color: var(--iap-colors-fg-disabled);
+}
+
     .iap-alert__root {
       background: var(--iap-colors-bg-default);
       padding: var(--iap-spacing-4);
@@ -2773,6 +2829,25 @@
       .iap-menu__triggerItem:is(:hover, [data-hover]) {
         background: var(--iap-colors-bg-muted);
 }
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .iap-radioGroup__itemControl:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+        background: var(--iap-colors-color-palette-default);
+}
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .iap-radioGroup__itemControl:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+        background: initial;
+        color: var(--iap-colors-fg-disabled);
+}
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .iap-radioGroup__itemControl:is(:hover, [data-hover]) {
+        background: var(--iap-colors-bg-subtle);
+}
 }
 }
 
@@ -2846,6 +2921,60 @@
     width: var(--iap-sizes-5);
     height: var(--iap-sizes-5);
 }
+
+  .iap-radioGroup__root--size_sm[data-orientation=vertical] {
+    gap: var(--iap-spacing-3);
+}
+
+  .iap-radioGroup__root--size_sm[data-orientation=horizontal] {
+    gap: var(--iap-spacing-4);
+}
+
+  .iap-radioGroup__item--size_sm {
+    gap: var(--iap-spacing-2);
+}
+
+  .iap-radioGroup__itemText--size_sm {
+    font-size: var(--iap-font-sizes-sm);
+    line-height: 1.25rem;
+}
+
+  .iap-radioGroup__itemControl--size_sm {
+    width: var(--iap-sizes-4);
+    height: var(--iap-sizes-4);
+}
+
+  .iap-radioGroup__itemControl--size_sm:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    outline-width: 3px;
+    outline-offset: -4px;
+}
+
+  .iap-radioGroup__root--size_md[data-orientation=vertical] {
+    gap: var(--iap-spacing-4);
+}
+
+  .iap-radioGroup__root--size_md[data-orientation=horizontal] {
+    gap: var(--iap-spacing-6);
+}
+
+  .iap-radioGroup__item--size_md {
+    gap: var(--iap-spacing-3);
+}
+
+  .iap-radioGroup__itemText--size_md {
+    font-size: var(--iap-font-sizes-md);
+    line-height: 1.5rem;
+}
+
+  .iap-radioGroup__itemControl--size_md {
+    width: var(--iap-sizes-5);
+    height: var(--iap-sizes-5);
+}
+
+  .iap-radioGroup__itemControl--size_md:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    outline-width: 4px;
+    outline-offset: -5px;
+}
 }
 
 @layer iap_utilities{
@@ -3003,6 +3132,10 @@
     background: var(--iap-colors-warning-2);
 }
 
+  .iap-bdr_md {
+    border-radius: var(--iap-radii-md);
+}
+
   .iap-ov_hidden {
     overflow: hidden;
 }
@@ -3043,10 +3176,6 @@
     padding-block: var(--iap-spacing-1);
 }
 
-  .iap-bdr_md {
-    border-radius: var(--iap-radii-md);
-}
-
   .iap-bd-c_slate\.3 {
     border-color: var(--iap-colors-slate-3);
 }
@@ -3251,6 +3380,10 @@
     margin-block: var(--iap-spacing-1\.5);
 }
 
+  .iap-as_start {
+    align-self: start;
+}
+
   .iap-ring-w_0 {
     outline-width: 0;
 }