figma-kit 1.0.0-beta.3 → 1.0.0-beta.31

package/package.json

@@ -2,7 +2,7 @@
   "name": "figma-kit",
   "description": "A set of React components for building Figma plugins.",
   "homepage": "https://figma-kit.dev",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
     "figma",
     "figma react components",
     "figma design system",
-    "hook"
+    "component-library"
   ],
   "type": "module",
   "files": [
@@ -24,13 +24,11 @@
     "./styles.css": "./dist/styles.css",
     "./figma-development-theme.css": "./dist/figma-development-theme.css",
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./tailwind.preset.js": {
-      "require": "./dist/tailwind.preset.js"
+      "import": "./dist/index.mjs"
     },
+    "./tailwind.css": "./dist/tailwind.css",
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -39,40 +37,79 @@
   "sideEffects": false,
   "scripts": {
     "dev": "vite build --mode development --watch",
-    "build": "pnpm build:js && pnpm build:css && pnpm build:figma-dev-theme-css && pnpm build:tailwind-preset",
+    "build": "pnpm build:js && pnpm build:types && pnpm build:css && pnpm build:figma-dev-theme-css && pnpm build:tailwind-css",
     "build:js": "vite build",
+    "build:types": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:css": "postcss src/styles/index.css -o dist/styles.css",
     "build:figma-dev-theme-css": "postcss src/styles/figma-development-theme.css -o dist/figma-development-theme.css",
-    "build:tailwind-preset": "cp src/tailwind/preset.js dist/tailwind.preset.js",
-    "test": "vitest"
+    "build:tailwind-css": "postcss src/tailwind/tailwind.css -o dist/tailwind.css",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "lint": "eslint \"**/{src,test}/**/*.{ts,tsx}\" --fix --max-warnings 0",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepare": "husky"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "dependencies": {
+    "@base-ui/react": "^1.5.0",
     "@emmetio/math-expression": "^1.0.5",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slider": "1.2.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "class-variance-authority": "^0.7.0",
-    "merge-props": "^6.0.0",
-    "react-textarea-autosize": "^8.5.3",
-    "remeda": "^2.0.5"
+    "class-variance-authority": "0.7.1",
+    "react-textarea-autosize": "8.5.9",
+    "remeda": "2.34.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22"
-  }
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
+    "@eslint/js": "10.0.1",
+    "@storybook/react": "10.4.1",
+    "@storybook/react-vite": "10.4.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "22.19.19",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/utils": "8.59.4",
+    "@vitejs/plugin-react": "6.0.2",
+    "conventional-changelog-conventionalcommits": "7.0.2",
+    "eslint": "10.4.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-node": "0.4.0",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import-x": "4.16.2",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "globals": "17.6.0",
+    "happy-dom": "20.9.0",
+    "husky": "9.0.11",
+    "lint-staged": "15.2.5",
+    "postcss": "8.5.15",
+    "postcss-cli": "11.0.0",
+    "postcss-import": "16.1.0",
+    "postcss-nesting": "12.1.5",
+    "postcss-prefixer": "3.0.0",
+    "postcss-variables-prefixer": "1.2.0",
+    "prettier": "3.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-element-to-jsx-string": "15.0.0",
+    "semantic-release": "25.0.2",
+    "storybook": "10.4.1",
+    "tsc-alias": "1.8.17",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.59.4",
+    "vite": "8.0.14",
+    "vitest": "4.1.7"
+  },
+  "lint-staged": {
+    "**/{src,test}/**/*.{ts,tsx}": [
+      "eslint --cache --fix --max-warnings 0",
+      "prettier --write"
+    ]
+  },
+  "packageManager": "pnpm@9.2.0"
 }

package/dist/tailwind.preset.js

@@ -1,255 +0,0 @@
-export default {
-  theme: {
-    colors: {
-      current: 'currentColor',
-      inherit: 'inherit',
-      transparent: 'transparent',
-
-      bg: 'var(--figma-color-bg)',
-      'bg-brand': 'var(--figma-color-bg-brand)',
-      'bg-brand-hover': 'var(--figma-color-bg-brand-hover)',
-      'bg-brand-pressed': 'var(--figma-color-bg-brand-pressed)',
-      'bg-brand-secondary': 'var(--figma-color-bg-brand-secondary)',
-      'bg-brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
-      'bg-component': 'var(--figma-color-bg-component)',
-      'bg-component-hover': 'var(--figma-color-bg-component-hover)',
-      'bg-component-pressed': 'var(--figma-color-bg-component-pressed)',
-      'bg-component-secondary': 'var(--figma-color-bg-component-secondary)',
-      'bg-component-tertiary': 'var(--figma-color-bg-component-tertiary)',
-      'bg-danger': 'var(--figma-color-bg-danger)',
-      'bg-danger-hover': 'var(--figma-color-bg-danger-hover)',
-      'bg-danger-pressed': 'var(--figma-color-bg-danger-pressed)',
-      'bg-danger-secondary': 'var(--figma-color-bg-danger-secondary)',
-      'bg-danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
-      'bg-disabled': 'var(--figma-color-bg-disabled)',
-      'bg-disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
-      'bg-hover': 'var(--figma-color-bg-hover)',
-      'bg-inverse': 'var(--figma-color-bg-inverse)',
-      'bg-onselected': 'var(--figma-color-bg-onselected)',
-      'bg-onselected-hover': 'var(--figma-color-bg-onselected-hover)',
-      'bg-onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
-      'bg-pressed': 'var(--figma-color-bg-pressed)',
-      'bg-secondary': 'var(--figma-color-bg-secondary)',
-      'bg-selected': 'var(--figma-color-bg-selected)',
-      'bg-selected-hover': 'var(--figma-color-bg-selected-hover)',
-      'bg-selected-pressed': 'var(--figma-color-bg-selected-pressed)',
-      'bg-selected-secondary': 'var(--figma-color-bg-selected-secondary)',
-      'bg-selected-strong': 'var(--figma-color-bg-selected-strong)',
-      'bg-selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
-      'bg-success': 'var(--figma-color-bg-success)',
-      'bg-success-hover': 'var(--figma-color-bg-success-hover)',
-      'bg-success-pressed': 'var(--figma-color-bg-success-pressed)',
-      'bg-success-secondary': 'var(--figma-color-bg-success-secondary)',
-      'bg-success-tertiary': 'var(--figma-color-bg-success-tertiary)',
-      'bg-tertiary': 'var(--figma-color-bg-tertiary)',
-      'bg-warning': 'var(--figma-color-bg-warning)',
-      'bg-warning-hover': 'var(--figma-color-bg-warning-hover)',
-      'bg-warning-pressed': 'var(--figma-color-bg-warning-pressed)',
-      'bg-warning-secondary': 'var(--figma-color-bg-warning-secondary)',
-      'bg-warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
-      border: 'var(--figma-color-border)',
-      'border-brand': 'var(--figma-color-border-brand)',
-      'border-brand-strong': 'var(--figma-color-border-brand-strong)',
-      'border-component': 'var(--figma-color-border-component)',
-      'border-component-hover': 'var(--figma-color-border-component-hover)',
-      'border-component-strong': 'var(--figma-color-border-component-strong)',
-      'border-danger': 'var(--figma-color-border-danger)',
-      'border-danger-strong': 'var(--figma-color-border-danger-strong)',
-      'border-disabled': 'var(--figma-color-border-disabled)',
-      'border-disabled-strong': 'var(--figma-color-border-disabled-strong)',
-      'border-onbrand': 'var(--figma-color-border-onbrand)',
-      'border-onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
-      'border-oncomponent': 'var(--figma-color-border-oncomponent)',
-      'border-oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
-      'border-ondanger': 'var(--figma-color-border-ondanger)',
-      'border-ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
-      'border-onselected': 'var(--figma-color-border-onselected)',
-      'border-onselected-strong': 'var(--figma-color-border-onselected-strong)',
-      'border-onsuccess': 'var(--figma-color-border-onsuccess)',
-      'border-onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
-      'border-onwarning': 'var(--figma-color-border-onwarning)',
-      'border-onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
-      'border-selected': 'var(--figma-color-border-selected)',
-      'border-selected-strong': 'var(--figma-color-border-selected-strong)',
-      'border-strong': 'var(--figma-color-border-strong)',
-      'border-success': 'var(--figma-color-border-success)',
-      'border-success-strong': 'var(--figma-color-border-success-strong)',
-      'border-warning': 'var(--figma-color-border-warning)',
-      'border-warning-strong': 'var(--figma-color-border-warning-strong)',
-      icon: 'var(--figma-color-icon)',
-      'icon-brand': 'var(--figma-color-icon-brand)',
-      'icon-brand-pressed': 'var(--figma-color-icon-brand-pressed)',
-      'icon-brand-secondary': 'var(--figma-color-icon-brand-secondary)',
-      'icon-brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
-      'icon-component': 'var(--figma-color-icon-component)',
-      'icon-component-pressed': 'var(--figma-color-icon-component-pressed)',
-      'icon-component-secondary': 'var(--figma-color-icon-component-secondary)',
-      'icon-component-tertiary': 'var(--figma-color-icon-component-tertiary)',
-      'icon-danger': 'var(--figma-color-icon-danger)',
-      'icon-danger-hover': 'var(--figma-color-icon-danger-hover)',
-      'icon-danger-pressed': 'var(--figma-color-icon-danger-pressed)',
-      'icon-danger-secondary': 'var(--figma-color-icon-danger-secondary)',
-      'icon-danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
-      'icon-danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
-      'icon-disabled': 'var(--figma-color-icon-disabled)',
-      'icon-hover': 'var(--figma-color-icon-hover)',
-      'icon-onbrand': 'var(--figma-color-icon-onbrand)',
-      'icon-onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
-      'icon-onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
-      'icon-oncomponent': 'var(--figma-color-icon-oncomponent)',
-      'icon-oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
-      'icon-oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
-      'icon-ondanger': 'var(--figma-color-icon-ondanger)',
-      'icon-ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
-      'icon-ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
-      'icon-ondisabled': 'var(--figma-color-icon-ondisabled)',
-      'icon-oninverse': 'var(--figma-color-icon-oninverse)',
-      'icon-onselected': 'var(--figma-color-icon-onselected)',
-      'icon-onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
-      'icon-onselected-strong': 'var(--figma-color-icon-onselected-strong)',
-      'icon-onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
-      'icon-onsuccess': 'var(--figma-color-icon-onsuccess)',
-      'icon-onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
-      'icon-onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
-      'icon-onwarning': 'var(--figma-color-icon-onwarning)',
-      'icon-onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
-      'icon-onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
-      'icon-pressed': 'var(--figma-color-icon-pressed)',
-      'icon-secondary': 'var(--figma-color-icon-secondary)',
-      'icon-secondary-hover': 'var(--figma-color-icon-secondary-hover)',
-      'icon-selected': 'var(--figma-color-icon-selected)',
-      'icon-selected-secondary': 'var(--figma-color-icon-selected-secondary)',
-      'icon-selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
-      'icon-success': 'var(--figma-color-icon-success)',
-      'icon-success-pressed': 'var(--figma-color-icon-success-pressed)',
-      'icon-success-secondary': 'var(--figma-color-icon-success-secondary)',
-      'icon-success-tertiary': 'var(--figma-color-icon-success-tertiary)',
-      'icon-tertiary': 'var(--figma-color-icon-tertiary)',
-      'icon-tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
-      'icon-warning': 'var(--figma-color-icon-warning)',
-      'icon-warning-pressed': 'var(--figma-color-icon-warning-pressed)',
-      'icon-warning-secondary': 'var(--figma-color-icon-warning-secondary)',
-      'icon-warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
-      text: 'var(--figma-color-text)',
-      'text-brand': 'var(--figma-color-text-brand)',
-      'text-brand-secondary': 'var(--figma-color-text-brand-secondary)',
-      'text-brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
-      'text-component': 'var(--figma-color-text-component)',
-      'text-component-pressed': 'var(--figma-color-text-component-pressed)',
-      'text-component-secondary': 'var(--figma-color-text-component-secondary)',
-      'text-component-tertiary': 'var(--figma-color-text-component-tertiary)',
-      'text-danger': 'var(--figma-color-text-danger)',
-      'text-danger-secondary': 'var(--figma-color-text-danger-secondary)',
-      'text-danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
-      'text-disabled': 'var(--figma-color-text-disabled)',
-      'text-hover': 'var(--figma-color-text-hover)',
-      'text-onbrand': 'var(--figma-color-text-onbrand)',
-      'text-onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
-      'text-onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
-      'text-oncomponent': 'var(--figma-color-text-oncomponent)',
-      'text-oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
-      'text-oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
-      'text-ondanger': 'var(--figma-color-text-ondanger)',
-      'text-ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
-      'text-ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
-      'text-ondisabled': 'var(--figma-color-text-ondisabled)',
-      'text-oninverse': 'var(--figma-color-text-oninverse)',
-      'text-onselected': 'var(--figma-color-text-onselected)',
-      'text-onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
-      'text-onselected-strong': 'var(--figma-color-text-onselected-strong)',
-      'text-onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
-      'text-onsuccess': 'var(--figma-color-text-onsuccess)',
-      'text-onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
-      'text-onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
-      'text-onwarning': 'var(--figma-color-text-onwarning)',
-      'text-onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
-      'text-onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
-      'text-secondary': 'var(--figma-color-text-secondary)',
-      'text-secondary-hover': 'var(--figma-color-text-secondary-hover)',
-      'text-selected': 'var(--figma-color-text-selected)',
-      'text-selected-secondary': 'var(--figma-color-text-selected-secondary)',
-      'text-selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
-      'text-success': 'var(--figma-color-text-success)',
-      'text-success-secondary': 'var(--figma-color-text-success-secondary)',
-      'text-success-tertiary': 'var(--figma-color-text-success-tertiary)',
-      'text-tertiary': 'var(--figma-color-text-tertiary)',
-      'text-tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
-      'text-warning': 'var(--figma-color-text-warning)',
-      'text-warning-secondary': 'var(--figma-color-text-warning-secondary)',
-      'text-warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
-    },
-    fontFamily: {
-      default: 'var(--font-family-default)',
-      monospace: 'var(--font-family-monospace)',
-    },
-    fontWeight: {
-      default: 'var(--font-weight-default)',
-      strong: 'var(--font-weight-strong)',
-    },
-    fontSize: {
-      'size-1': 'var(--font-size-1)',
-      'size-2': 'var(--font-size-2)',
-      'size-3': 'var(--font-size-3)',
-      'size-4': 'var(--font-size-4)',
-      'size-5': 'var(--font-size-5)',
-      'size-6': 'var(--font-size-6)',
-      'size-7': 'var(--font-size-7)',
-      'size-8': 'var(--font-size-8)',
-      'size-9': 'var(--font-size-9)',
-      'size-10': 'var(--font-size-10)',
-      'size-default': 'var(--font-size-default)',
-      small: 'var(--font-size-1)',
-      medium: 'var(--font-size-3)',
-      large: 'var(--font-size-5)',
-    },
-    letterSpacing: {
-      1: 'var(--letter-spacing-1)',
-      2: 'var(--letter-spacing-2)',
-      3: 'var(--letter-spacing-3)',
-      4: 'var(--letter-spacing-4)',
-      5: 'var(--letter-spacing-5)',
-      6: 'var(--letter-spacing-6)',
-      7: 'var(--letter-spacing-7)',
-      8: 'var(--letter-spacing-8)',
-      9: 'var(--letter-spacing-9)',
-      10: 'var(--letter-spacing-10)',
-      default: 'var(--letter-spacing-default)',
-      small: 'var(--letter-spacing-1)',
-      medium: 'var(--letter-spacing-3)',
-      large: 'var(--letter-spacing-5)',
-    },
-    lineHeight: {
-      1: 'var(--line-height-1)',
-      2: 'var(--line-height-2)',
-      3: 'var(--line-height-3)',
-      4: 'var(--line-height-4)',
-      5: 'var(--line-height-5)',
-      6: 'var(--line-height-6)',
-      7: 'var(--line-height-7)',
-      8: 'var(--line-height-8)',
-      9: 'var(--line-height-9)',
-      10: 'var(--line-height-10)',
-      default: 'var(--line-height-default)',
-      small: 'var(--line-height-1)',
-      medium: 'var(--line-height-3)',
-      large: 'var(--line-height-5)',
-    },
-    borderRadius: {
-      none: 'none',
-      'extra-small': 'var(--radius-extra-small)',
-      small: 'var(--radius-small)',
-      medium: 'var(--radius-medium)',
-      large: 'var(--radius-large)',
-      full: 'var(--radius-full)',
-      default: 'var(--radius-default)',
-    },
-    boxShadow: {
-      none: 'none',
-      100: 'var(--elevation-100)',
-      200: 'var(--elevation-200)',
-      300: 'var(--elevation-300)',
-      400: 'var(--elevation-400)',
-      500: 'var(--elevation-500)',
-    },
-  },
-};