feat(docs): chip and circular progress done

apps/docs/content/components/checkbox/radius.ts

@@ -3,11 +3,11 @@ const App = `import { Checkbox } from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-    <Checkbox defaultSelected radius="full">Option</Checkbox>
-    <Checkbox defaultSelected radius="lg">Option</Checkbox>
-    <Checkbox defaultSelected radius="md">Option</Checkbox>
-    <Checkbox defaultSelected radius="sm">Option</Checkbox>
-    <Checkbox defaultSelected radius="none">Option</Checkbox>
+      <Checkbox defaultSelected radius="full">Option</Checkbox>
+      <Checkbox defaultSelected radius="lg">Option</Checkbox>
+      <Checkbox defaultSelected radius="md">Option</Checkbox>
+      <Checkbox defaultSelected radius="sm">Option</Checkbox>
+      <Checkbox defaultSelected radius="none">Option</Checkbox>
     </div>  
   );
 }`;

apps/docs/content/components/chip/avatar.ts

@@ -0,0 +1,35 @@
+const App = `import { Chip, Avatar } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        variant="flat"
+        avatar={
+          <Avatar
+            name="JW"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
+          />
+        }
+      >
+        Avatar
+      </Chip>
+      <Chip
+        variant="flat"
+        avatar={
+          <Avatar name="JW" size="xs" getInitials={(name) => name.charAt(0)} />
+        }
+      >
+        Avatar
+      </Chip>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/close-button.ts

@@ -0,0 +1,20 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip onClose={() => console.log("close")}>Chip</Chip>
+      <Chip onClose={() => console.log("close")} variant="bordered">
+        Chip
+      </Chip>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/colors.ts

@@ -0,0 +1,22 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="neutral">Neutral</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="danger">Danger</Chip>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/custom-styles.ts

@@ -0,0 +1,23 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip
+      variant="shadow"
+      classNames={{
+        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border border-white/50 shadow-pink-500/30",
+        content: "drop-shadow shadow-black text-white",
+      }}
+    >
+      New
+    </Chip>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/disabled.ts

@@ -0,0 +1,15 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip isDisabled color="primary">Chip</Chip>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/index.ts

@@ -0,0 +1,25 @@
+import usage from "./usage";
+import disabled from "./disabled";
+import sizes from "./sizes";
+import colors from "./colors";
+import radius from "./radius";
+import variants from "./variants";
+import startEndContent from "./start-end-content";
+import closeButton from "./close-button";
+import avatar from "./avatar";
+import list from "./list";
+import customStyles from "./custom-styles";
+
+export const chipContent = {
+  usage,
+  disabled,
+  sizes,
+  colors,
+  radius,
+  variants,
+  startEndContent,
+  closeButton,
+  avatar,
+  list,
+  customStyles,
+};

apps/docs/content/components/chip/list.ts

@@ -0,0 +1,32 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
+
+export default function App() {
+  const [fruits, setFruits] = React.useState(initialFruits);
+
+  const handleClose = (fruitToRemove) => {
+    setFruits(fruits.filter(fruit => fruit !== fruitToRemove));
+    if (fruits.length === 1) {
+      setFruits(initialFruits);
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      {fruits.map((fruit, index) => (
+        <Chip key={index} onClose={() => handleClose(fruit)} variant="flat">
+          {fruit}
+        </Chip>
+      ))}
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/radius.ts

@@ -0,0 +1,21 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip radius="full">Chip</Chip>
+      <Chip radius="lg">Chip</Chip>
+      <Chip radius="md">Chip</Chip>
+      <Chip radius="sm">Chip</Chip>
+      <Chip radius="none">Chip</Chip>
+    </div>  
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/sizes.ts

@@ -0,0 +1,21 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip size="xs">Chip</Chip>
+      <Chip size="sm">Chip</Chip>
+      <Chip size="md">Chip</Chip>
+      <Chip size="lg">Chip</Chip>
+      <Chip size="xl">Chip</Chip>
+    </div>  
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/start-end-content.ts

@@ -0,0 +1,74 @@
+export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill='currentColor'
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};`;
+
+export const CheckIcon = `export const CheckIcon = ({
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 24}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/>
+    </svg>
+  );
+};`;
+
+const App = `import { Chip } from "@nextui-org/react";
+import { NotificationIcon } from "./NotificationIcon";
+import { CheckIcon } from "./CheckIcon";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        startContent={<CheckIcon size={18} />}
+        variant="faded"
+        color="success"
+      >
+        Chip
+      </Chip>
+      <Chip
+        endContent={<NotificationIcon size={18} />}
+        variant="flat"
+        color="secondary"
+      >
+        Chip
+      </Chip>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/NotificationIcon.jsx": NotificationIcon,
+  "/CheckIcon.jsx": CheckIcon,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/usage.ts

@@ -0,0 +1,15 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip>Chip</Chip>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/chip/variants.ts

@@ -0,0 +1,23 @@
+const App = `import { Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="warning" variant="solid">Solid</Chip>
+      <Chip color="warning" variant="bordered">Bordered</Chip>
+      <Chip color="warning" variant="light">Light</Chip>
+      <Chip color="warning" variant="flat">Flat</Chip>
+      <Chip color="warning" variant="faded">Faded</Chip>
+      <Chip color="warning" variant="shadow">Shadow</Chip>
+      <Chip color="warning" variant="dot">Dot</Chip>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/colors.ts

@@ -0,0 +1,22 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress color="neutral" aria-label="Loading..."/>
+      <CircularProgress color="primary" aria-label="Loading..."/>
+      <CircularProgress color="secondary" aria-label="Loading..."/>
+      <CircularProgress color="success" aria-label="Loading..."/>
+      <CircularProgress color="warning" aria-label="Loading..."/>
+      <CircularProgress color="danger" aria-label="Loading..."/>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/custom-styles.ts

@@ -0,0 +1,40 @@
+const App = `import { CircularProgress, Card, CardBody, CardFooter, Chip } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
+      <CardBody className="justify-center items-center pb-0">
+        <CircularProgress
+          classNames={{
+            svg: "w-36 h-36 drop-shadow-md",
+            indicator: "stroke-white",
+            track: "stroke-white/10",
+            value: "text-3xl font-semibold text-white",
+          }}
+          value={70}
+          strokeWidth={4}
+          showValueLabel={true}
+        />
+      </CardBody>
+      <CardFooter className="justify-center items-center pt-0">
+        <Chip
+          classNames={{
+            base: "border-1 border-white/30",
+            content: "text-white/90 text-sm font-semibold",
+          }}
+          variant="bordered"
+        >
+          2800 Data points
+        </Chip>
+      </CardFooter>
+    </Card>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/index.ts

@@ -0,0 +1,17 @@
+import usage from "./usage";
+import sizes from "./sizes";
+import colors from "./colors";
+import label from "./label";
+import value from "./value";
+import valueFormatting from "./value-formatting";
+import customStyles from "./custom-styles";
+
+export const circularProgressContent = {
+  usage,
+  sizes,
+  colors,
+  label,
+  value,
+  valueFormatting,
+  customStyles,
+};

apps/docs/content/components/circular-progress/label.ts

@@ -0,0 +1,15 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CircularProgress label="Loading..." />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/sizes.ts

@@ -0,0 +1,21 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress size="xs" aria-label="Loading..."/>
+      <CircularProgress size="sm" aria-label="Loading..."/>
+      <CircularProgress size="md" aria-label="Loading..."/>
+      <CircularProgress size="lg" aria-label="Loading..."/>
+      <CircularProgress size="xl" aria-label="Loading..."/>
+    </div> 
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/usage.ts

@@ -0,0 +1,15 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CircularProgress aria-label="Loading..." />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/value-formatting.ts

@@ -0,0 +1,22 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CircularProgress
+      label="Speed"
+      size="xl"
+      value={70}
+      color="success"
+      formatOptions={{ style: "unit", unit: "kilometer" }}
+      showValueLabel={true}
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/circular-progress/value.ts

@@ -0,0 +1,31 @@
+const App = `import { CircularProgress } from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((v) => (v >= 100 ? 0 : v + 10));
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <CircularProgress
+      aria-label="Loading..."
+      size="lg"
+      value={value}
+      color="warning"
+      showValueLabel={true}
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/index.ts

@@ -5,3 +5,5 @@ export * from "./accordion";
 export * from "./badge";
 export * from "./checkbox";
 export * from "./checkbox-group";
+export * from "./chip";
+export * from "./circular-progress";

apps/docs/content/docs/components/checkbox.mdx

@@ -138,10 +138,10 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Events
 
-| Attribute     | Type                                   | Description                                                                                                                                              | Default |
-| ------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| Attribute     | Type                                   | Description                                                                                                                                              | 
+| ------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | 
 | onChange      | `React.ChangeEvent <HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`        | Handler that is called when the element's selection state changes.                                                                                       | -       |
+| onValueChange | `(isSelected: boolean) => void`        | Handler that is called when the element's selection state changes.                                                                                       | 
 
 ### Types
 

apps/docs/content/docs/components/chip.mdx

@@ -0,0 +1,94 @@
+---
+title: "Chip"
+description: "A Chip is a small block of essential information that represent an input, attribute, or action."
+url: https://nextui.org/docs/components/chip
+---
+
+# Chip
+
+A Chip is a small block of essential information that represent an input, attribute, or action
+
+<ComponentLinks component="chip" />
+
+---
+
+```jsx
+import {Chip} from "@nextui-org/react";
+```
+
+## Usage
+
+<CodeDemo title="Usage" files={chipContent.usage} />
+
+### Disabled
+
+<CodeDemo title="Disabled" files={chipContent.disabled} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={chipContent.sizes} />
+
+### Colors
+
+<CodeDemo title="Colors" files={chipContent.colors} />
+
+### Radius
+
+<CodeDemo title="Radius" files={chipContent.radius} />
+
+### Variants
+
+<CodeDemo title="Variants" files={chipContent.variants} />
+
+### Start & End Content
+
+<CodeDemo title="Start & End Content" files={chipContent.startEndContent} />
+
+### With Close Button
+
+If you pass the `onClose` prop, the close button will be visible. You can override t he close icon by passing the `endContent` prop.
+
+<CodeDemo title="With Close Button" files={chipContent.closeButton} />
+
+### With Avatar
+
+<CodeDemo title="With Avatar" files={chipContent.avatar} />
+
+### List of Chips
+
+<CodeDemo title="List of Chips" files={chipContent.list} />
+
+## Slots
+
+- **base**: The base slot of the chip, it is the container of the chip.
+- **content**: The content slot of the chip, it is the container of the chip children.
+- **dot**: Small dot on the left side of the chip. It is visible when the `variant=dot` prop is passed.
+- **avatar**: Avatar classes of the chip. It is visible when the `avatar` prop is passed.
+- **closeButton**: Close button classes of the chip. It is visible when the `onClose` prop is passed.
+
+### Custom Styles
+
+<CodeDemo title="Custom Styles" files={chipContent.customStyles} />
+
+## API
+
+### Chip Props
+
+| Attribute    | Type                                                                         | Description                                                                                                                  | Default   |
+| ------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- |
+| children     | `ReactNode`                                                                  | The content of the chip.                                                                                                     | -         |
+| variant      | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The chip appearance style.                                                                                                   | `solid`   |
+| size         | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                         | The size of the chip.                                                                                                        | `md`      |
+| color        | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The color of the chip.                                                                                                       | `neutral` |
+| radius       | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`           | The radius of the chip.                                                                                                      | `full`    |
+| avatar       | `ReactNode`                                                                  | Avatar to be rendered in the left side of the chip.                                                                          | -         |
+| startContent | `ReactNode`                                                                  | Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop.                                  | -         |
+| endContent   | `ReactNode`                                                                  | Element to be rendered in the right side of the chip. This prop overrides the default close button when `onClose` is passed. | -         |
+| isDisabled   | `boolean`                                                                    | Whether the chip is disabled.                                                                                                | `false`   |
+| classNames   | `Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string>`      | Allows to set custom class names for the chip slots.                                                                         | -         |
+
+### Chip Events
+
+| Attribute | Type                      | Description                                                                                                                        |
+| --------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| onClose   | `(e: PressEvent) => void` | Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent). |

apps/docs/content/docs/components/circular-progress.mdx

@@ -0,0 +1,86 @@
+---
+title: "Circular Progress"
+description: "Circular progress indicators are utilized to indicate an undetermined wait period or visually represent the duration of a process."
+url: https://nextui.org/docs/components/circular-progress
+---
+
+# Circular Progress
+
+Circular progress indicators are utilized to indicate an undetermined wait period or visually represent the duration of a process.
+
+<ComponentLinks component="progress" storybook="circularprogress" reactAriaHook="useProgressBar" />
+
+---
+
+```jsx
+import {CircularProgress} from "@nextui-org/react";
+```
+
+## Usage
+
+<CodeDemo title="Usage" files={circularProgressContent.usage} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={circularProgressContent.sizes} />
+
+### Colors
+
+<CodeDemo title="Colors" files={circularProgressContent.colors} />
+
+### With Label
+
+<CodeDemo title="With Label" files={circularProgressContent.label} />
+
+### With Value
+
+<CodeDemo title="With Value" files={circularProgressContent.value} />
+
+### Value Formatting
+
+Values are formatted as a percentage by default, but this can be modified by using the
+`formatOptions` prop to specify a different format. `formatOptions` is compatible with the
+option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) and is applied based on the current locale.
+
+<CodeDemo
+  title="Value Formatting"
+  files={circularProgressContent.valueFormatting}
+  highlightedLines="10"
+/>
+
+## Slots
+
+- **base**: The base slot of the circular progress, it is the main container.
+- **svgWrapper**: The wrapper of the svg circles and the value label.
+- **svg**: The svg element of the circles.
+- **track**: The track is the background circle of the circular progress.
+- **indicator**: The indicator is the one that is filled according to the `value`.
+- **value**: The value content.
+- **label**: The label content.
+
+### Custom Styles
+
+<CodeDemo
+  title="Custom Styles"
+  files={circularProgressContent.customStyles}
+  highlightedLines="9-12"
+/>
+
+## API
+
+### Circular Progress Props
+
+| Attribute        | Type                                                                                                                    | Description                                                | Default              |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
+| label            | `ReactNode`                                                                                                             | The content to display as the label.                       | -                    |
+| value            | `number`                                                                                                                | The current value (controlled).                            | -                    |
+| size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                                                                    | The size of the indicator.                                 | `md`                 |
+| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                             | The color of the indicator.                                | `primary`            |
+| minValue         | `number`                                                                                                                | The smallest value allowed for the input.                  | `0`                  |
+| maxValue         | `number`                                                                                                                | The largest value allowed for the input.                   | `100`                |
+| valueLabel       | `ReactNode`                                                                                                             | The content to display as the value's label (e.g. 1 of 4). | -                    |
+| formatOptions    | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) | The options to format the value.                           | `{style: 'percent'}` |
+| isIndeterminate  | `boolean`                                                                                                               | Whether the progress is indeterminate.                     | `true`               |
+| showValueLabel   | `boolean`                                                                                                               | Whether to show the value label.                           | `true`               |
+| strokeWidth      | `number`                                                                                                                | The width of the progress stroke.                          | `2`                  |
+| disableAnimation | `boolean`                                                                                                               | Whether to disable the animation.                          | `false`              |

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/accordion
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230526220125
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/avatar
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-image@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/badge
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/button
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/spinner@0.0.0-dev-v2-20230526220125
+  - @nextui-org/drip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/card/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/card
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/drip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/checkbox
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/chip
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"

packages/components/code/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/code
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/divider/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/divider
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"

packages/components/drip/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/drip
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/drip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
   "keywords": [
     "drip"

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/dropdown
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/popover@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"

packages/components/image/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/image
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-image@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/input
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/kbd
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"

packages/components/link/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/link
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/modal
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/navbar
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/popover
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/progress
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"

packages/components/progress/src/circular-progress.tsx

@@ -14,7 +14,7 @@ const CircularProgress = forwardRef<CircularProgressProps, "div">((props, ref) =
     getProgressBarProps,
     getLabelProps,
     getSvgProps,
-    getCircleProps,
+    getIndicatorProps,
     getTrackProps,
   } = useCircularProgress({ref, ...props});
 
@@ -25,7 +25,7 @@ const CircularProgress = forwardRef<CircularProgressProps, "div">((props, ref) =
       <div className={slots.svgWrapper({class: classNames?.svgWrapper})}>
         <svg {...getSvgProps()}>
           <circle {...getTrackProps()} />
-          <circle {...getCircleProps()} />
+          <circle {...getIndicatorProps()} />
         </svg>
         {showValueLabel && (
           <span className={slots.value({class: classNames?.value})}>

packages/components/progress/src/use-circular-progress.ts

@@ -39,12 +39,11 @@ export interface Props extends HTMLNextUIProps<"div"> {
    * ```ts
    * <CircularProgress classNames={{
    *    base:"base-classes",
-   *    labelWrapper: "labelWrapper-classes",
    *    label: "label-classes",
    *    value: "value-classes",
    *    svg: "svg-classes", // the svg wrapper
    *    track: "track-classes", // the circle of the background
-   *    circle: "circle-classes", // the circle of the progress
+   *    indicator: "indicator-classes", // the circle of the progress
    * }} />
    * ```
    */
@@ -169,7 +168,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
     [strokeWidth, slots, classNames],
   );
 
-  const getCircleProps = useCallback<PropGetter>(
+  const getIndicatorProps = useCallback<PropGetter>(
     (props = {}) => ({
       cx: center,
       cy: center,
@@ -179,7 +178,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
       strokeDashoffset: offset,
       transform: "rotate(-90 16 16)",
       strokeLinecap: "round",
-      className: slots.circle({class: classNames?.circle}),
+      className: slots.indicator({class: classNames?.indicator}),
       ...props,
     }),
     [slots, classNames, offset, circumference, radius],
@@ -211,7 +210,7 @@ export function useCircularProgress(originalProps: UseCircularProgressProps) {
     getProgressBarProps,
     getLabelProps,
     getSvgProps,
-    getCircleProps,
+    getIndicatorProps,
     getTrackProps,
   };
 }

packages/components/progress/stories/circular-progress.stories.tsx

@@ -61,7 +61,7 @@ const CustomClassnamesTemplate: ComponentStory<typeof CircularProgress> = (
         {...args}
         classNames={{
           svg: "w-36 h-36 drop-shadow-md",
-          circle: "stroke-white",
+          indicator: "stroke-white",
           track: "stroke-white/10",
           value: "text-3xl font-semibold text-white",
         }}

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/radio
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"

packages/components/skeleton/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/skeleton
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nextui-org/snippet
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"

packages/components/spacer/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spacer
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/spacer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"

packages/components/spinner/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/spinner
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",

packages/components/switch/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/switch
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"

packages/components/table/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/table
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/spacer@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"

packages/components/tabs/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/tabs
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230526220125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"

packages/components/tooltip/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/tooltip
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230526220125
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"

packages/components/user/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/user
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230526220125
+  - @nextui-org/avatar@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/components/user/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"

packages/core/react/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nextui-org/react
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230526220125
+  - @nextui-org/accordion@0.0.0-dev-v2-20230526220125
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230526220125
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230526220125
+  - @nextui-org/progress@0.0.0-dev-v2-20230526220125
+  - @nextui-org/skeleton@0.0.0-dev-v2-20230526220125
+  - @nextui-org/divider@0.0.0-dev-v2-20230526220125
+  - @nextui-org/popover@0.0.0-dev-v2-20230526220125
+  - @nextui-org/snippet@0.0.0-dev-v2-20230526220125
+  - @nextui-org/spinner@0.0.0-dev-v2-20230526220125
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/avatar@0.0.0-dev-v2-20230526220125
+  - @nextui-org/button@0.0.0-dev-v2-20230526220125
+  - @nextui-org/navbar@0.0.0-dev-v2-20230526220125
+  - @nextui-org/spacer@0.0.0-dev-v2-20230526220125
+  - @nextui-org/switch@0.0.0-dev-v2-20230526220125
+  - @nextui-org/badge@0.0.0-dev-v2-20230526220125
+  - @nextui-org/image@0.0.0-dev-v2-20230526220125
+  - @nextui-org/input@0.0.0-dev-v2-20230526220125
+  - @nextui-org/modal@0.0.0-dev-v2-20230526220125
+  - @nextui-org/radio@0.0.0-dev-v2-20230526220125
+  - @nextui-org/table@0.0.0-dev-v2-20230526220125
+  - @nextui-org/card@0.0.0-dev-v2-20230526220125
+  - @nextui-org/chip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/code@0.0.0-dev-v2-20230526220125
+  - @nextui-org/drip@0.0.0-dev-v2-20230526220125
+  - @nextui-org/link@0.0.0-dev-v2-20230526220125
+  - @nextui-org/tabs@0.0.0-dev-v2-20230526220125
+  - @nextui-org/user@0.0.0-dev-v2-20230526220125
+  - @nextui-org/kbd@0.0.0-dev-v2-20230526220125
+  - @nextui-org/system@0.0.0-dev-v2-20230526220125
+  - @nextui-org/theme@0.0.0-dev-v2-20230526220125
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",

packages/core/system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/system
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/core/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "NextUI system primitives",
   "keywords": [
     "system"

packages/core/theme/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/theme
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/core/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",

packages/core/theme/src/components/chip.ts

@@ -24,7 +24,7 @@ import {ringClasses, colorVariants} from "../utils";
 const chip = tv({
   slots: {
     base: ["relative", "max-w-fit", "inline-flex", "items-center", "justify-between", "box-border"],
-    content: "flex-1 text-inherit select-none font-regular",
+    content: "flex-1 text-inherit select-none font-normal",
     dot: ["w-2", "h-2", "ml-1", "rounded-full"],
     avatar: "flex-shrink-0",
     closeButton: [
@@ -91,19 +91,19 @@ const chip = tv({
         avatar: "w-4 h-4",
       },
       md: {
-        base: "px-1 h-7 text-base",
+        base: "px-1 h-7 text-sm",
         content: "px-2",
         closeButton: "text-lg",
         avatar: "w-5 h-5",
       },
       lg: {
-        base: "px-2 h-8 text-lg",
+        base: "px-2 h-8 text-base",
         content: "px-2",
         closeButton: "text-xl",
         avatar: "w-6 h-6",
       },
       xl: {
-        base: "px-2 h-9 text-xl",
+        base: "px-2 h-9 text-lg",
         content: "px-2",
         closeButton: "text-2xl",
         avatar: "w-7 h-7",

packages/core/theme/src/components/circular-progress.ts

@@ -7,12 +7,13 @@ import {tv} from "tailwind-variants";
  *
  * @example
  * ```js
- * const {base, svgWrapper, svg, circle, value, label} = circularProgress({...})
+ * const {base, svgWrapper, svg, indicator, value, label} = circularProgress({...})
  *
  * <div className={base()} aria-label="progress" role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max}>
  *   <div className={svgWrapper()}>
  *      <svg className={svg()}>
- *        <circle className={circle()} style={{width: `${value}%`}} />
+ *        <circle className={track()} />
+ *        <circle className={indicator()} />
  *      </svg>
  *      <span className={value()}>{value}</span>
  *   </div>
@@ -27,7 +28,7 @@ const circularProgress = tv({
     svgWrapper: "relative block",
     svg: "z-0 relative overflow-hidden",
     track: "h-full stroke-neutral-300/50",
-    circle: "h-full stroke-current",
+    indicator: "h-full stroke-current",
     value: "absolute font-normal inset-0 flex items-center justify-center",
   },
   variants: {
@@ -91,7 +92,7 @@ const circularProgress = tv({
     disableAnimation: {
       true: {},
       false: {
-        circle: "transition-all !duration-500",
+        indicator: "transition-all !duration-500",
       },
     },
   },

packages/hooks/use-aria-accordion-item/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/use-aria-accordion-item
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/hooks/use-aria-accordion-item/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion-item",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Internal impl for react aria accordion item",
   "keywords": [
     "use-aria-accordion-item"

packages/hooks/use-aria-button/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/use-aria-button
 
+## 0.0.0-dev-v2-20230526220125
+
+### Patch Changes
+
+- New snapshot
+
 ## 0.0.0-dev-v2-20230525214932
 
 ### Patch Changes

packages/hooks/use-aria-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-button",
-  "version": "0.0.0-dev-v2-20230525214932",
+  "version": "0.0.0-dev-v2-20230526220125",
   "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
   "keywords": [
     "use-aria-button"