@bitrise/bitkit-v2 0.3.58 → 0.3.60

package/dist/theme/tokens/index.js

@@ -1,23 +1,27 @@
 import o from "./animations.js";
 import r from "./colors.js";
-import m from "./fonts.js";
-import t from "./fontSizes.js";
-import i from "./fontWeights.js";
-import f from "./radii.js";
-import p from "./sizes.js";
-import s from "./spacing.js";
-import n from "./zIndex.js";
-const k = {
+import m from "./durations.js";
+import i from "./easings.js";
+import t from "./fonts.js";
+import f from "./fontSizes.js";
+import s from "./fontWeights.js";
+import p from "./radii.js";
+import n from "./sizes.js";
+import a from "./spacing.js";
+import e from "./zIndex.js";
+const W = {
   animations: o,
   colors: r,
-  fonts: m,
-  fontSizes: t,
-  fontWeights: i,
-  radii: f,
-  sizes: p,
-  spacing: s,
-  zIndex: n
+  durations: m,
+  easings: i,
+  fonts: t,
+  fontSizes: f,
+  fontWeights: s,
+  radii: p,
+  sizes: n,
+  spacing: a,
+  zIndex: e
 };
 export {
-  k as default
+  W as default
 };

package/dist/theme/tokens/keyframes.js

@@ -1,10 +1,160 @@
-import { defineKeyframes as e } from "@chakra-ui/react";
-const t = e({
+import { defineKeyframes as t } from "@chakra-ui/react/styled-system";
+const e = t({
   spin: {
     "0%": { transform: "rotate(0deg)" },
     "100%": { transform: "rotate(360deg)" }
+  },
+  pulse: {
+    "50%": { opacity: "0.5" }
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0"
+    }
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
+    }
+  },
+  "bg-position": {
+    from: { backgroundPosition: "var(--animate-from, 1rem) 0" },
+    to: { backgroundPosition: "var(--animate-to, 0) 0" }
+  },
+  position: {
+    from: {
+      insetInlineStart: "var(--animate-from-x)",
+      insetBlockStart: "var(--animate-from-y)"
+    },
+    to: {
+      insetInlineStart: "var(--animate-to-x)",
+      insetBlockStart: "var(--animate-to-y)"
+    }
+  },
+  "circular-progress": {
+    "0%": {
+      strokeDasharray: "1, 400",
+      strokeDashoffset: "0"
+    },
+    "50%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-100%"
+    },
+    "100%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-260%"
+    }
+  },
+  // collapse
+  "expand-height": {
+    from: { height: "var(--collapsed-height, 0)" },
+    to: { height: "var(--height)" }
+  },
+  "collapse-height": {
+    from: { height: "var(--height)" },
+    to: { height: "var(--collapsed-height, 0)" }
+  },
+  "expand-width": {
+    from: { width: "var(--collapsed-width, 0)" },
+    to: { width: "var(--width)" }
+  },
+  "collapse-width": {
+    from: { height: "var(--width)" },
+    to: { height: "var(--collapsed-width, 0)" }
+  },
+  // fade
+  "fade-in": {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  "fade-out": {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  // slide from (full)
+  "slide-from-left-full": {
+    from: { translate: "-100% 0" },
+    to: { translate: "0 0" }
+  },
+  "slide-from-right-full": {
+    from: { translate: "100% 0" },
+    to: { translate: "0 0" }
+  },
+  "slide-from-top-full": {
+    from: { translate: "0 -100%" },
+    to: { translate: "0 0" }
+  },
+  "slide-from-bottom-full": {
+    from: { translate: "0 100%" },
+    to: { translate: "0 0" }
+  },
+  // slide to (full)
+  "slide-to-left-full": {
+    from: { translate: "0 0" },
+    to: { translate: "-100% 0" }
+  },
+  "slide-to-right-full": {
+    from: { translate: "0 0" },
+    to: { translate: "100% 0" }
+  },
+  "slide-to-top-full": {
+    from: { translate: "0 0" },
+    to: { translate: "0 -100%" }
+  },
+  "slide-to-bottom-full": {
+    from: { translate: "0 0" },
+    to: { translate: "0 100%" }
+  },
+  // slide from
+  "slide-from-top": {
+    "0%": { translate: "0 -0.5rem" },
+    to: { translate: "0" }
+  },
+  "slide-from-bottom": {
+    "0%": { translate: "0 0.5rem" },
+    to: { translate: "0" }
+  },
+  "slide-from-left": {
+    "0%": { translate: "-0.5rem 0" },
+    to: { translate: "0" }
+  },
+  "slide-from-right": {
+    "0%": { translate: "0.5rem 0" },
+    to: { translate: "0" }
+  },
+  // slide to
+  "slide-to-top": {
+    "0%": { translate: "0" },
+    to: { translate: "0 -0.5rem" }
+  },
+  "slide-to-bottom": {
+    "0%": { translate: "0" },
+    to: { translate: "0 0.5rem" }
+  },
+  "slide-to-left": {
+    "0%": { translate: "0" },
+    to: { translate: "-0.5rem 0" }
+  },
+  "slide-to-right": {
+    "0%": { translate: "0" },
+    to: { translate: "0.5rem 0" }
+  },
+  // scale
+  "scale-in": {
+    from: { scale: "0.95" },
+    to: { scale: "1" }
+  },
+  "scale-out": {
+    from: { scale: "1" },
+    to: { scale: "0.95" }
   }
 });
 export {
-  t as default
+  e as default
 };

package/dist/theme/tokens/radii.d.ts

@@ -1,20 +1,20 @@
 declare const radii: {
-    "2": {
+    '2': {
         value: string;
     };
-    "4": {
+    '4': {
         value: string;
     };
-    "8": {
+    '8': {
         value: string;
     };
-    "12": {
+    '12': {
         value: string;
     };
-    "16": {
+    '16': {
         value: string;
     };
-    "24": {
+    '24': {
         value: string;
     };
 };

package/dist/theme/tokens/radii.js

@@ -1,6 +1,24 @@
-import { defineTokens as o } from "@chakra-ui/react";
-import i from "./radii.json.js";
-const t = o.radii(i);
+import { defineTokens as e } from "@chakra-ui/react/styled-system";
+const a = e.radii({
+  2: {
+    value: "0.125rem"
+  },
+  4: {
+    value: "0.25rem"
+  },
+  8: {
+    value: "0.5rem"
+  },
+  12: {
+    value: "0.75rem"
+  },
+  16: {
+    value: "1rem"
+  },
+  24: {
+    value: "1.5rem"
+  }
+});
 export {
-  t as default
+  a as default
 };

package/dist/theme/tokens/sizes.js

@@ -1,4 +1,4 @@
-import { defineTokens as e } from "@chakra-ui/react";
+import { defineTokens as e } from "@chakra-ui/react/styled-system";
 import o from "./sizesAndSpacing.json.js";
 const i = e.sizes(o);
 export {

package/dist/theme/tokens/spacing.js

@@ -1,4 +1,4 @@
-import { defineTokens as o } from "@chakra-ui/react";
+import { defineTokens as o } from "@chakra-ui/react/styled-system";
 import e from "./sizesAndSpacing.json.js";
 const n = o.spacing(e);
 export {

package/dist/theme/tokens/zIndex.js

@@ -1,6 +1,33 @@
-import { defineTokens as e } from "@chakra-ui/react";
-import o from "./zIndex.json.js";
-const r = e.zIndex(o);
+import { defineTokens as e } from "@chakra-ui/react/styled-system";
+const a = e.zIndex({
+  base: {
+    value: 0
+  },
+  dialog: {
+    value: 1300
+  },
+  dialogOverlay: {
+    value: 1299
+  },
+  fullDialog: {
+    value: 1200
+  },
+  fullDialogOverlay: {
+    value: 1199
+  },
+  header: {
+    value: 1100
+  },
+  hide: {
+    value: -1
+  },
+  popover: {
+    value: 1400
+  },
+  tooltip: {
+    value: 1500
+  }
+});
 export {
-  r as default
+  a as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.58",
+  "version": "0.3.60",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",
@@ -45,7 +45,7 @@
     "type-check": "tsc --noEmit",
     "release": "release-it patch --ci",
     "pregenerate:icons": "figma-export use-config",
-    "generate:icons": "tsx ./lib/scripts/generateIconComponents.ts",
+    "generate:icons": "tsx ./scripts/generateIconComponents.ts",
     "postgenerate:icons": "eslint ./lib/icons --fix",
     "prepare": "npm run theme:generate-types"
   },
@@ -60,19 +60,19 @@
     "@figma-export/output-components-as-svg": "^6.2.4",
     "@figma-export/transform-svg-with-svgo": "^6.2.4",
     "@google-cloud/storage": "^7.17.3",
-    "@storybook/addon-docs": "10.0.6",
-    "@storybook/react-vite": "10.0.6",
+    "@storybook/addon-docs": "10.0.7",
+    "@storybook/react-vite": "10.0.7",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^24.10.0",
     "@types/react-dom": "^19.2.2",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.0",
     "axios": "^1.13.2",
     "es-toolkit": "^1.41.0",
     "react-dom": "^19.2.0",
     "react": "^19.2.0",
     "release-it": "^19.0.6",
-    "storybook": "10.0.6",
+    "storybook": "10.0.7",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
     "vite-plugin-dts": "^4.5.4",

package/dist/theme/semantic-tokens/shadows.json.d.ts

@@ -1,44 +0,0 @@
-declare const _default: {
-    "formFocus": {
-        "value": {
-            "_light": "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px var(--colors-purple-70)"
-        }
-    },
-    "inner": {
-        "value": {
-            "_light": "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset"
-        }
-    },
-    "innerSmall": {
-        "value": {
-            "_light": "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset"
-        }
-    },
-    "large": {
-        "value": {
-            "_light": "0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)"
-        }
-    },
-    "medium": {
-        "value": {
-            "_light": "0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)"
-        }
-    },
-    "outline": {
-        "value": {
-            "_light": "0 0 0 3px var(--colors-purple-70)"
-        }
-    },
-    "small": {
-        "value": {
-            "_light": "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)"
-        }
-    },
-    "tooltip": {
-        "value": {
-            "_light": "0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)"
-        }
-    }
-};
-
-export default _default;

package/dist/theme/semantic-tokens/shadows.json.js

@@ -1,21 +0,0 @@
-const e = { value: { _light: "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px var(--colors-purple-70)" } }, r = { value: { _light: "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset" } }, l = { value: { _light: "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset" } }, t = { value: { _light: "0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)" } }, a = { value: { _light: "0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)" } }, m = { value: { _light: "0 0 0 3px var(--colors-purple-70)" } }, o = { value: { _light: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)" } }, n = { value: { _light: "0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)" } }, s = {
-  formFocus: e,
-  inner: r,
-  innerSmall: l,
-  large: t,
-  medium: a,
-  outline: m,
-  small: o,
-  tooltip: n
-};
-export {
-  s as default,
-  e as formFocus,
-  r as inner,
-  l as innerSmall,
-  t as large,
-  a as medium,
-  m as outline,
-  o as small,
-  n as tooltip
-};