feat(button): ✨ finish button & around components

.kodiak.toml

@@ -4,7 +4,7 @@ version = 1
 [merge]
 automerge_label = "ready 🎉"
 require_automerge_label = false
-method = "squash"
+method = "rebase"
 delete_branch_on_merge = true
 optimistic_updates = true
 prioritize_ready_to_merge = true

.vscode/extensions.json

@@ -2,9 +2,11 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
+    "vivaxy.vscode-conventional-commits",
+    "christian-kohler.path-intellisense",
+    "bradlc.vscode-tailwindcss",
     "orta.vscode-jest",
     "tlent.jest-snapshot-language-support",
-    "vespa-dev-works.jestrunit",
-    "vivaxy.vscode-conventional-commits"
+    "vespa-dev-works.jestrunit"
   ]
 }

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "typescript.tsdk": "node_modules/typescript/lib",
   "git.branchProtection": ["main"],
   "yaml.schemas": {
     "https://json.schemastore.org/github-workflow.json": "file:///Users/navin/Documents/github/react-tailwind/.github/workflows/build.yml"

adaptui.config.ts

@@ -4,14 +4,14 @@ export const theme = extendTheme({
   // This only affected the Storybook, doesn't go or merge when used this config as preset
   extend: {
     button: {
-      variant: {
-        default: {
-          tertiary: "bg-purple-600 text-white",
+      themeColor: {
+        base: {
+          tertiary: { default: "bg-purple-600 text-white" },
         },
       },
       size: {
-        default: {
-          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",
+        xxl: {
+          base: "h-14 min-w-14 px-6 rounded-xl text-xl",
         },
       },
     },

package.json

@@ -33,7 +33,7 @@
   "types": "out/types/index.d.ts",
   "typings": "out/types/index.d.ts",
   "files": [
-    "tailwindPlugins",
+    "tailwind-utils",
     "preset.d.ts",
     "preset.js",
     "out"
@@ -47,7 +47,7 @@
     "lint": "eslint --color --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --color --ext .js,.jsx,.ts,.tsx . --fix",
     "format": "prettier --check \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
-    "format:fix": "prettier -wl \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
+    "format:fix": "prettier --write --list-different --cache \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:package": "sort-package-json package.json",
     "build": "yarn swc",
     "prebabel": "rimraf dist",
@@ -98,13 +98,13 @@
   "dependencies": {
     "@adaptui/react": "^1.0.0-4",
     "@react-aria/live-announcer": "^3.1.0",
-    "ariakit": "2.0.0-next.29",
-    "ariakit-utils": "0.17.0-next.20",
-    "tailwind-merge": "^1.2.1"
+    "ariakit": "2.0.0-next.30",
+    "ariakit-utils": "0.17.0-next.21",
+    "tailwind-merge": "^1.3.0"
   },
   "devDependencies": {
     "@babel/cli": "7.17.10",
-    "@babel/core": "7.18.2",
+    "@babel/core": "7.18.5",
     "@babel/plugin-proposal-class-properties": "7.17.12",
     "@babel/plugin-proposal-private-methods": "7.17.12",
     "@babel/plugin-proposal-private-property-in-object": "7.17.12",
@@ -115,13 +115,13 @@
     "@commitlint/config-conventional": "17.0.2",
     "@release-it/conventional-changelog": "5.0.0",
     "@size-limit/preset-big-lib": "5.0.5",
-    "@storybook/addon-a11y": "6.5.8",
-    "@storybook/addon-actions": "6.5.8",
-    "@storybook/addon-essentials": "6.5.8",
+    "@storybook/addon-a11y": "6.5.9",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.8",
-    "@storybook/manager-webpack5": "6.5.8",
-    "@storybook/react": "6.5.8",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.2.198",
     "@tailwindcss/forms": "0.5.2",
@@ -132,7 +132,7 @@
     "@testing-library/user-event": "14.2.0",
     "@types/jest": "28.1.1",
     "@types/jest-axe": "3.5.3",
-    "@types/node": "17.0.41",
+    "@types/node": "17.0.42",
     "@types/react": "18.0.12",
     "@types/react-dom": "18.0.5",
     "@types/testing-library__jest-dom": "5.14.3",
@@ -168,11 +168,11 @@
     "postcss-cli": "9.1.0",
     "postcss-focus-visible": "6.0.4",
     "postcss-selector-parser": "6.0.10",
-    "prettier": "2.6.2",
+    "prettier": "2.7.0",
     "prettier-plugin-tailwindcss": "0.1.11",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-hook-form": "7.32.0",
+    "react-hook-form": "7.32.1",
     "react-icons": "4.4.0",
     "release-it": "15.0.0",
     "rimraf": "3.0.2",

src/badge/Badge.tsx

@@ -27,7 +27,11 @@ export const useBadge = createHook<BadgeOptions>(
 
     const prefixStyles = cx(badge.size[size]?.prefix);
     const prefix = _prefix
-      ? withIconA11yNew(_prefix, { className: prefixStyles })
+      ? withIconA11yNew<BadgeRenderProps, BadgeState>(
+          _prefix,
+          { className: prefixStyles },
+          { size, themeColor, variant, prefix: _prefix },
+        )
       : null;
 
     const children = (
@@ -50,34 +54,37 @@ export const Badge = createComponent<BadgeOptions>(props => {
   return createElement("div", htmlProps);
 });
 
-export type BadgePrefixProps = { className?: string };
-
-export type BadgeOptions<T extends As = "div"> = BoxOptions<T> & {
+export type BadgeState = {
   /**
    * How large should the badge be?
    *
    * @default md
    */
-  size?: keyof AdaptUI.GetThemeValue<"badge", "size">;
+  size: keyof AdaptUI.GetThemeValue<"badge", "size">;
 
   /**
    * How the badge should be themed?
    *
    * @default base
    */
-  themeColor?: keyof AdaptUI.GetThemeValue<"badge", "themeColor">;
+  themeColor: keyof AdaptUI.GetThemeValue<"badge", "themeColor">;
 
   /**
    * How the badge should look?
    *
    * @default solid
    */
-  variant?: keyof AdaptUI.GetThemeValue<"badge", "themeColor", "base">;
+  variant: keyof AdaptUI.GetThemeValue<"badge", "themeColor", "base">;
 
   /**
    * If added, the badge will show an icon before the badge's text.
    */
-  prefix?: RenderProp<BadgePrefixProps>;
+  prefix: RenderProp<BadgeRenderProps & BadgeState>;
 };
 
+export type BadgeRenderProps = Pick<BadgeProps, "className">;
+
+export type BadgeOptions<T extends As = "div"> = BoxOptions<T> &
+  Partial<BadgeState>;
+
 export type BadgeProps<T extends As = "div"> = Props<BadgeOptions<T>>;

src/badge/stories/BadgeBasic.stories.tsx

@@ -80,7 +80,5 @@ export const Outline: Story = {
 
 export const Prefix: Story = {
   ...Default,
-  args: {
-    prefix: <SlotIcon className="text-blue-800" />,
-  },
+  args: { prefix: <SlotIcon /> },
 };