Merge remote-tracking branch 'upstream/master' into feat/Select

atomiks · Oct 14, 2024 · 865fc54 · 865fc54
2 parents 022163d + 0b5da67
commit 865fc54
Show file tree

Hide file tree

Showing 31 changed files with 244 additions and 192 deletions.
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -104,7 +104,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -99,7 +99,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -141,8 +141,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -143,8 +143,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -84,8 +84,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -86,8 +86,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -153,8 +153,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -155,8 +155,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -76,7 +76,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -71,7 +71,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,

diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
@@ -42,12 +42,12 @@
     }
   }
 
-  &[data-state='checked'] {
+  &[data-checked] {
     border: none;
     background: var(--cyan-500);
   }
 
-  &[data-state='checked']:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: var(--cyan-700);
   }
 }
@@ -73,7 +73,7 @@
   }
 }
 
-.thumb[data-state='checked'] {
+.thumb[data-checked] {
   left: 18px;
   background-color: #fff;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);

diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)(
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &[data-state="checked"] {
+  &[data-checked] {
     border: none;
     background: ${blue[500]};
   }
 
-  &[data-state="checked"]:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: ${blue[700]};
   }
   `,
@@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
 
-    &[data-state="checked"] {
+    &[data-checked] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);