@kivid/native-components 1.0.0-alpha.1

package/src/components/Button/assets/design-system-showcase.ts

@@ -0,0 +1,1745 @@
+export const designSystemShowcase = {
+  large: {
+    title: "Large Size",
+    buttons: {
+      grape: [
+        {
+          size: "large",
+          variant: "grape",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "grape",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      java: [
+        {
+          size: "large",
+          variant: "java",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "java",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      pear: [
+        {
+          size: "large",
+          variant: "pear",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "pear",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      tangerine: [
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "tangerine",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      blackberry: [
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "blackberry",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      chia: [
+        {
+          size: "large",
+          variant: "chia",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "chia",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      outline: [
+        {
+          size: "large",
+          variant: "outline",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "outline",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      ghost: [
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "ghost",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+      glass: [
+        {
+          size: "large",
+          variant: "glass",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[160px]",
+        },
+        {
+          size: "large",
+          variant: "glass",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[160px]",
+        },
+      ],
+    },
+  },
+  medium: {
+    title: "Medium Size",
+    buttons: {
+      grape: [
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "grape",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      java: [
+        {
+          size: "medium",
+          variant: "java",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "java",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      pear: [
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "pear",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      tangerine: [
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "tangerine",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      blackberry: [
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "blackberry",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      chia: [
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "chia",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      outline: [
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "outline",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      ghost: [
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "ghost",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+      glass: [
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[88px]",
+        },
+        {
+          size: "medium",
+          variant: "glass",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[88px]",
+        },
+      ],
+    },
+  },
+  small: {
+    title: "Small Size",
+    buttons: {
+      grape: [
+        {
+          size: "small",
+          variant: "grape",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "grape",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      java: [
+        {
+          size: "small",
+          variant: "java",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "java",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      outline: [
+        {
+          size: "small",
+          variant: "outline",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "outline",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      glass: [
+        {
+          size: "small",
+          variant: "glass",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "glass",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      ghost: [
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "ghost",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      pear: [
+        {
+          size: "small",
+          variant: "pear",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "pear",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      tangerine: [
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "tangerine",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      blackberry: [
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "blackberry",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+      chia: [
+        {
+          size: "small",
+          variant: "chia",
+          corners: "medium",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "medium",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "medium",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "medium",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "small",
+          label: "Label",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "small",
+          disabled: true,
+          label: "Disabled",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "small",
+          selected: true,
+          label: "Selected",
+          className: "min-w-[72px]",
+        },
+        {
+          size: "small",
+          variant: "chia",
+          corners: "small",
+          loading: true,
+
+          className: "min-w-[72px]",
+        },
+      ],
+    },
+  },
+} as const;