adaptui · mcnaveen · Jun 6, 2023 · Jun 6, 2023 · Jun 8, 2023 · Jun 8, 2023
@@ -2,13 +2,19 @@ import { createIcon } from "@adaptui/react-tailwind";
 
 export const CopyIcon = createIcon({
   displayName: "CopyIcon",
-  viewBox: "0 0 15 15",
+  viewBox: "0 0 24 24",
   path: (
-    <path
-      d="M5 2V1h5v1H5Zm-.25-2A.75.75 0 0 0 4 .75V1h-.5A1.5 1.5 0 0 0 2 2.5v10A1.5 1.5 0 0 0 3.5 14H7v-1H3.5a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5H4v.25c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75V2h.5a.5.5 0 0 1 .5.5V7h1V2.5A1.5 1.5 0 0 0 11.5 1H11V.75a.75.75 0 0 0-.75-.75h-5.5ZM9 8.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm.5 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm-.5 2.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm0 2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm-6-4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm.5 1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM8.5 15a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-    />
+    <>
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+      <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4M21 14H11" />
+      <path d="m15 10-4 4 4 4" />
+    </>
   ),
+  defaultProps: {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+  },
 });
@@ -72,6 +72,7 @@
     "ariakit": "2.0.0-next.36",
     "lodash": "4.17.21",
     "next": "12.2.3",
+    "next-themes": "^0.2.1",
     "nextra": "2.0.0-alpha.56",
     "nextra-theme-docs": "2.0.0-alpha.59",
     "react": "17.0.2",

@@ -28,7 +28,7 @@ import {
   useCircularProgressState,
   CircularProgressTrack,
   CircularProgressTrackWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -42,7 +42,7 @@ import {
   children={({ spreadProps }) =>
     `<CircularProgress value={40} ${spreadProps} />`
   }
-  themeProps={{ size: "circularProgress.barWrapper.common.size" }}
+  themeProps={{ size: "circularProgress.size" }}
 />
 
 ## CircularProgress sizes
@@ -66,10 +66,7 @@ sizes are: `sm` `md` `lg` `xl`
 
 Set the `min` and `max` values of the progress bar.
 
-<Codeblock
-  live
-  code={`<CircularProgress min={10} max={40} value={35} />`}
-/>
+<Codeblock live code={`<CircularProgress min={10} max={40} value={35} />`} />
 
 ## Indeterminate progress
 
@@ -107,7 +104,7 @@ CircularProgressHint) for more control.
   data={[
     {
       name: "size",
-      themeKey: "circularProgress.barWrapper.common.size",
+      themeKey: "circularProgress.size",
       default: "md",
     },
     {

@@ -25,7 +25,7 @@ import {
   useMeterState,
   MeterTrack,
   MeterWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -39,7 +39,7 @@ import {
   children={({ spreadProps }) =>
     `<Meter value={40} max={100} ${spreadProps} />`
   }
-  themeProps={{ size: "meter.track.size" }}
+  themeProps={{ size: "meter.size" }}
 />
 
 ## Meter sizes
@@ -109,7 +109,7 @@ children components (MeterTrack, MeterBar) for more control.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "meter.track.size", default: "md" },
+    { name: "size", themeKey: "meter.size", default: "md" },
     {
       name: "intervals",
       type: "number",

@@ -24,7 +24,7 @@ import {
   useProgressState,
   ProgressTrack,
   ProgressWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -36,7 +36,7 @@ import {
 
 <InteractiveCodeblock
   children={({ spreadProps }) => `<Progress value={40} ${spreadProps} />`}
-  themeProps={{ size: "progress.track.size" }}
+  themeProps={{ size: "progress.size" }}
 />
 
 ## Progress sizes
@@ -101,7 +101,7 @@ children components (ProgressTrack, ProgressBar) for more control.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "progress.track.size", default: "md" },
+    { name: "size", themeKey: "progress.size", default: "md" },
     {
       name: "hint",
       type: "React.ReactNode",

@@ -21,7 +21,7 @@ import {
   ShowMoreContent,
   useShowMoreProps,
   useShowMoreState,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>

@@ -15,14 +15,14 @@ course of change or a result.
 ## Imports
 
 ```js
-import { Spinner } from "@renderlesskit/react-tailwind";
+import { Spinner } from "@adaptui/react-tailwind";
 ```
 
 ## Usage
 
 <InteractiveCodeblock
   children={({ spreadProps }) => `<Spinner ${spreadProps} />`}
-  themeProps={{ size: "spinner.size", stroke: "spinner.stroke" }}
+  themeProps={{ size: "spinner.size", track: "spinner.track" }}
 />
 
 ## Spinner sizes
@@ -43,10 +43,10 @@ sizes are: `xs` `sm` `md` `lg` & `em`
 `}
 />
 
-## Show stroke
+## Show track
 
-To show the subtle stroke around the spinner we can use the `stroke` which
-accepts `visible` or `transparent` values
+To show the subtle track around the spinner we can use the `track` which accepts
+`visible` or `transparent` values
 
 <Codeblock
   live
@@ -77,7 +77,7 @@ visible to the screen readers.
 <PropsTable
   data={[
     { name: "size", themeKey: "spinner.size", default: "md" },
-    { name: "stroke", themeKey: "spinner.stroke", default: "transparent" },
+    { name: "track", themeKey: "spinner.track", default: "transparent" },
     {
       name: "label",
       type: "string",

@@ -25,7 +25,7 @@ import {
   useCheckboxGroupState,
   CheckboxGroupWrapper,
   CheckboxShowMore,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -44,7 +44,7 @@ import {
   <Checkbox value="grapes" label="Grapes" />
 </CheckboxGroup>
 `}
-  themeProps={{ size: "checkbox.icon.size" }}
+  themeProps={{ size: "checkbox.size" }}
 />
 
 ## CheckboxGroup sizes
@@ -141,7 +141,7 @@ render (<CheckboxGroupStack/>); `} />
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "checkbox.icon.size", default: "md" },
+    { name: "size", themeKey: "checkbox.size", default: "md" },
     {
       name: "stack",
       type: "string",

@@ -25,7 +25,7 @@ import {
   useCheckboxProps,
   useCheckboxState,
   CheckboxText,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -40,7 +40,7 @@ import {
     `<Checkbox${spreadProps}>Label text</Checkbox>`
   }
   booleanProps={["disabled"]}
-  themeProps={{ size: "checkbox.icon.size" }}
+  themeProps={{ size: "checkbox.size" }}
   choiceProps={{ defaultState: ["true", "false", "'indeterminate'"] }}
 />
 
@@ -106,7 +106,7 @@ Uncontrolled checkbox can be used with `defaultState` prop.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "checkbox.icon.size", default: "md" },
+    { name: "size", themeKey: "checkbox.size", default: "md" },
     {
       name: "disabled",
       type: "boolean",

@@ -22,7 +22,7 @@ import {
   useInputProps,
   useInputState,
   InputWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -35,7 +35,7 @@ import {
 <InteractiveCodeblock
   children={({ spreadProps }) => `<Input placeholder="Search" ${spreadProps}/>`}
   booleanProps={["disabled", "invalid", "loading"]}
-  themeProps={{ variant: "input.base.variant", size: "input.base.size" }}
+  themeProps={{ variant: "input.variant", size: "input.size" }}
 />
 
 ## Input Variants
@@ -94,8 +94,8 @@ Prefix is positioned absolutely within the input.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "input.base.size", default: "md" },
-    { name: "variant", themeKey: "input.base.variant", default: "outline" },
+    { name: "size", themeKey: "input.size", default: "md" },
+    { name: "variant", themeKey: "input.variant", default: "outline" },
     {
       name: "disabled",
       type: "boolean",

@@ -21,7 +21,7 @@ import {
   useRadioGroupState,
   RadioGroupWrapper,
   RadioShowMore,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -40,7 +40,7 @@ import {
   <Radio value="grapes" label="Grapes" />
 </RadioGroup>
 `}
-  themeProps={{ size: "radio.icon.size" }}
+  themeProps={{ size: "radio.size" }}
 />
 
 ## RadioGroup sizes
@@ -136,7 +136,7 @@ render (<RadioGroupStack/>); `} />
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "radio.icon.size", default: "md" },
+    { name: "size", themeKey: "radio.size", default: "md" },
     {
       name: "stack",
       type: "string",

@@ -24,7 +24,7 @@ import {
   useRadioProps,
   useRadioState,
   RadioText,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -39,7 +39,7 @@ import {
     `<Radio value="apple" label="Apple" ${spreadProps} />`
   }
   booleanProps={["disabled"]}
-  themeProps={{ size: "radio.icon.size" }}
+  themeProps={{ size: "radio.size" }}
 />
 
 ## Radio sizes
@@ -101,7 +101,7 @@ Radio can be controlled using `state` prop.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "radio.icon.size", default: "md" },
+    { name: "size", themeKey: "radio.size", default: "md" },
     {
       name: "disabled",
       type: "boolean",

@@ -23,7 +23,7 @@ import {
   useSelectProps,
   useSelectState,
   SelectWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -45,7 +45,7 @@ import {
   <option value="goldfish">Goldfish</option>
 </Select>`}
   booleanProps={["disabled", "invalid", "loading"]}
-  themeProps={{ variant: "select.base.variant", size: "select.base.size" }}
+  themeProps={{ variant: "select.variant", size: "select.size" }}
 />
 
 ## Select Variants
@@ -145,8 +145,8 @@ can change the default `suffix` component aswell.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "select.base.size", default: "md" },
-    { name: "variant", themeKey: "select.base.variant", default: "outline" },
+    { name: "size", themeKey: "select.size", default: "md" },
+    { name: "variant", themeKey: "select.variant", default: "outline" },
     {
       name: "disabled",
       type: "boolean",

@@ -28,7 +28,7 @@ import {
   SliderTrack,
   SliderTrackWrapper,
   SliderWrapper,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -43,7 +43,7 @@ import {
     `<Slider defaultValue={[50]} ${spreadProps} />`
   }
   booleanProps={["tooltip", "isDisabled"]}
-  themeProps={{ size: "slider.track.base.size" }}
+  themeProps={{ size: "slider.size" }}
 />
 
 ## Slider sizes
@@ -114,7 +114,7 @@ Single Slider can be converted to a range slider using `range` prop.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "slider.track.base.size", default: "md" },
+    { name: "size", themeKey: "slider.size", default: "md" },
     {
       name: "isDisabled",
       type: "boolean",

@@ -24,7 +24,7 @@ import {
   useSwitchProps,
   useSwitchState,
   SwitchText,
-} from "@renderlesskit/react-tailwind";
+} from "@adaptui/react-tailwind";
 ```
 
 <Nextra.Callout>
@@ -37,7 +37,7 @@ import {
 <InteractiveCodeblock
   children={({ spreadProps }) => `<Switch ${spreadProps}>Label text</Switch>`}
   booleanProps={["disabled"]}
-  themeProps={{ size: "switch.icon.size" }}
+  themeProps={{ size: "switch.size" }}
 />
 
 ## Switch sizes
@@ -101,7 +101,7 @@ Uncontrolled switch can be used with `defaultState` prop.
 
 <PropsTable
   data={[
-    { name: "size", themeKey: "switch.icon.size", default: "md" },
+    { name: "size", themeKey: "switch.size", default: "md" },
     {
       name: "disabled",
       type: "boolean",