@bitrise/bitkit-v2 0.3.58 → 0.3.59

package/dist/components/BitkitButton/BitkitButton.js

@@ -1,25 +1,15 @@
-import { jsxs as s, jsx as d } from "react/jsx-runtime";
-import { Button as l } from "@chakra-ui/react";
-import { forwardRef as p, Fragment as m } from "react";
-const c = p((e, r) => {
-  const { children: o, leftIcon: n, rightIcon: i, state: t, ...a } = e;
-  return /* @__PURE__ */ s(
-    l,
-    {
-      disabled: t === "disabled",
-      loading: t === "loading",
-      "data-skeleton": t === "skeleton" ? !0 : void 0,
-      ref: r,
-      ...a,
-      children: [
-        n,
-        /* @__PURE__ */ d(t === "skeleton" ? "span" : m, { children: o }),
-        i
-      ]
-    }
-  );
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Skeleton as s, Button as p } from "@chakra-ui/react";
+import { forwardRef as c, Fragment as m } from "react";
+const f = c((r, n) => {
+  const { children: o, leftIcon: i, rightIcon: l, state: t, ...a } = r;
+  return /* @__PURE__ */ e(s, { asChild: !0, loading: t === "skeleton", children: /* @__PURE__ */ d(p, { disabled: t === "disabled", loading: t === "loading", ref: n, ...a, children: [
+    i,
+    /* @__PURE__ */ e(t === "skeleton" ? "span" : m, { children: o }),
+    l
+  ] }) });
 });
-c.displayName = "BitkitButton";
+f.displayName = "BitkitButton";
 export {
-  c as default
+  f as default
 };

package/dist/theme/recipes/Button.recipe.js

@@ -1,5 +1,5 @@
-import { defineRecipe as d } from "@chakra-ui/react";
-import { rem as e } from "../themeUtils.js";
+import { defineRecipe as l } from "@chakra-ui/react";
+import { rem as r } from "../themeUtils.js";
 const s = [
   "primary",
   "secondary",
@@ -11,9 +11,9 @@ const s = [
   "ai-secondary",
   "ai-tertiary"
 ], n = s.reduce(
-  (r, o) => {
-    let t = o?.includes("secondary") ? `{colors.button.${o}.border}` : `{colors.button.${o}.bg}`, l = o?.includes("secondary") ? `{colors.button.${o}.border-disabled}` : `{colors.button.${o}.bg-disabled}`;
-    return o?.includes("tertiary") && (t = "transparent", l = "transparent"), r[o] = {
+  (e, o) => {
+    let t = o?.includes("secondary") ? `{colors.button.${o}.border}` : `{colors.button.${o}.bg}`, d = o?.includes("secondary") ? `{colors.button.${o}.border-disabled}` : `{colors.button.${o}.bg-disabled}`;
+    return o?.includes("tertiary") && (t = "transparent", d = "transparent"), e[o] = {
       "&:hover": {
         backgroundColor: `{colors.button.${o}.bg-hover}`,
         borderColor: o?.includes("secondary") ? `{colors.button.${o}.border-hover}` : `{colors.button.${o}.bg-hover}`,
@@ -26,19 +26,19 @@ const s = [
       },
       _disabled: {
         backgroundColor: `{colors.button.${o}.bg-disabled}!`,
-        borderColor: `${l}!`,
+        borderColor: `${d}!`,
         color: `{colors.button.${o}.fg-disabled}!`,
         cursor: "not-allowed"
       },
       backgroundColor: `{colors.button.${o}.bg}`,
       borderColor: t,
       borderStyle: "solid",
-      borderWidth: e(1),
+      borderWidth: r(1),
       color: `{colors.button.${o}.fg}`
-    }, r;
+    }, e;
   },
   {}
-), b = d({
+), b = l({
   className: "button",
   base: {
     borderRadius: "4",
@@ -54,15 +54,6 @@ const s = [
     "--spinner-size": "sizes.16",
     _disabled: {
       cursor: "not-allowed"
-    },
-    "&[data-skeleton=true]": {
-      borderColor: "utilities/skeleton",
-      backgroundColor: "utilities/skeleton",
-      cursor: "default",
-      pointerEvents: "none",
-      "& > *": {
-        visibility: "hidden"
-      }
     }
   },
   variants: {
@@ -71,21 +62,21 @@ const s = [
       sm: {
         minWidth: "32",
         height: "32",
-        paddingInline: e(7),
-        paddingBlock: e(5),
+        paddingInline: r(7),
+        paddingBlock: r(5),
         textStyle: "comp/button/sm"
       },
       md: {
         minWidth: "40",
         height: "40",
-        paddingInline: e(11),
-        paddingBlock: e(7),
+        paddingInline: r(11),
+        paddingBlock: r(7),
         textStyle: "comp/button/md"
       },
       lg: {
         minWidth: "48",
         height: "48",
-        padding: e(11),
+        padding: r(11),
         textStyle: "comp/button/lg"
       }
     }

package/dist/theme/recipes/Skeleton.recipe.d.ts

@@ -0,0 +1,24 @@
+declare const skeleton: import('@chakra-ui/react').RecipeDefinition<{
+    loading: {
+        true: {
+            backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))";
+            backgroundSize: "400% 100%";
+            animation: "bg-position var(--duration, 10s) ease-in-out infinite";
+            borderRadius: "4";
+            borderColor: "transparent";
+            backgroundClip: "padding-box";
+            cursor: "default";
+            color: "transparent";
+            pointerEvents: "none";
+            userSelect: "none";
+            flexShrink: "0";
+            '&::before, &::after, *': {
+                visibility: "hidden";
+            };
+        };
+        false: {
+            animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";
+        };
+    };
+}>;
+export default skeleton;

package/dist/theme/recipes/Skeleton.recipe.js

@@ -0,0 +1,39 @@
+import { defineRecipe as e } from "@chakra-ui/react";
+const a = e({
+  className: "skeleton",
+  base: {
+    "--animate-from": "200%",
+    "--animate-to": "-200%",
+    "--start-color": "colors.utilities.skeleton",
+    "--end-color": "colors.utilities.skeleton-strong"
+  },
+  variants: {
+    loading: {
+      true: {
+        backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+        backgroundSize: "400% 100%",
+        animation: "bg-position var(--duration, 10s) ease-in-out infinite",
+        borderRadius: "4",
+        borderColor: "transparent",
+        backgroundClip: "padding-box",
+        cursor: "default",
+        color: "transparent",
+        pointerEvents: "none",
+        userSelect: "none",
+        flexShrink: "0",
+        "&::before, &::after, *": {
+          visibility: "hidden"
+        }
+      },
+      false: {
+        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
+      }
+    }
+  },
+  defaultVariants: {
+    loading: !0
+  }
+});
+export {
+  a as default
+};

package/dist/theme/recipes/index.d.ts

@@ -56,6 +56,29 @@ declare const recipes: {
             };
         };
     }>;
+    skeleton: import('@chakra-ui/react').RecipeDefinition<{
+        loading: {
+            true: {
+                backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))";
+                backgroundSize: "400% 100%";
+                animation: "bg-position var(--duration, 10s) ease-in-out infinite";
+                borderRadius: "4";
+                borderColor: "transparent";
+                backgroundClip: "padding-box";
+                cursor: "default";
+                color: "transparent";
+                pointerEvents: "none";
+                userSelect: "none";
+                flexShrink: "0";
+                '&::before, &::after, *': {
+                    visibility: "hidden";
+                };
+            };
+            false: {
+                animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";
+            };
+        };
+    }>;
     spinner: import('@chakra-ui/react').RecipeDefinition<{
         size: {
             md: {

package/dist/theme/recipes/index.js

@@ -2,16 +2,18 @@ import r from "./Button.recipe.js";
 import o from "./Input.recipe.js";
 import t from "./Link.recipe.js";
 import m from "./Separator.recipe.js";
-import p from "./Spinner.recipe.js";
-import i from "./Textarea.recipe.js";
-const c = {
+import p from "./Skeleton.recipe.js";
+import i from "./Spinner.recipe.js";
+import e from "./Textarea.recipe.js";
+const k = {
   button: r,
   input: o,
   link: t,
   separator: m,
-  spinner: p,
-  textarea: i
+  skeleton: p,
+  spinner: i,
+  textarea: e
 };
 export {
-  c as default
+  k as default
 };

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

@@ -2,5 +2,14 @@ declare const animations: {
     spin: {
         value: string;
     };
+    ping: {
+        value: string;
+    };
+    pulse: {
+        value: string;
+    };
+    bounce: {
+        value: string;
+    };
 };
 export default animations;

package/dist/theme/tokens/animations.js

@@ -1,7 +1,10 @@
 import { defineTokens as i } from "@chakra-ui/react";
-const a = i.animations({
-  spin: { value: "spin 1s linear infinite" }
+const n = i.animations({
+  spin: { value: "spin 1s linear infinite" },
+  ping: { value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+  pulse: { value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+  bounce: { value: "bounce 1s infinite" }
 });
 export {
-  a as default
+  n as default
 };

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

@@ -0,0 +1,15 @@
+declare const easings: {
+    'ease-in': {
+        value: string;
+    };
+    'ease-out': {
+        value: string;
+    };
+    'ease-in-out': {
+        value: string;
+    };
+    'ease-in-smooth': {
+        value: string;
+    };
+};
+export default easings;

package/dist/theme/tokens/easings.js

@@ -0,0 +1,10 @@
+import { defineTokens as e } from "@chakra-ui/react";
+const a = e.easings({
+  "ease-in": { value: "cubic-bezier(0.42, 0, 1, 1)" },
+  "ease-out": { value: "cubic-bezier(0, 0, 0.58, 1)" },
+  "ease-in-out": { value: "cubic-bezier(0.42, 0, 0.58, 1)" },
+  "ease-in-smooth": { value: "cubic-bezier(0.32, 0.72, 0, 1)" }
+});
+export {
+  a as default
+};

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

@@ -3,8 +3,31 @@ declare const tokens: {
         spin: {
             value: string;
         };
+        ping: {
+            value: string;
+        };
+        pulse: {
+            value: string;
+        };
+        bounce: {
+            value: string;
+        };
     };
     colors: Record<string, any>;
+    easings: {
+        'ease-in': {
+            value: string;
+        };
+        'ease-out': {
+            value: string;
+        };
+        'ease-in-out': {
+            value: string;
+        };
+        'ease-in-smooth': {
+            value: string;
+        };
+    };
     fonts: {
         body: {
             value: string;

package/dist/theme/tokens/index.js

@@ -1,23 +1,25 @@
 import o from "./animations.js";
 import r from "./colors.js";
-import m from "./fonts.js";
+import m from "./easings.js";
+import i from "./fonts.js";
 import t from "./fontSizes.js";
-import i from "./fontWeights.js";
-import f from "./radii.js";
+import f from "./fontWeights.js";
+import s from "./radii.js";
 import p from "./sizes.js";
-import s from "./spacing.js";
-import n from "./zIndex.js";
-const k = {
+import n from "./spacing.js";
+import e from "./zIndex.js";
+const I = {
   animations: o,
   colors: r,
-  fonts: m,
+  easings: m,
+  fonts: i,
   fontSizes: t,
-  fontWeights: i,
-  radii: f,
+  fontWeights: f,
+  radii: s,
   sizes: p,
-  spacing: s,
-  zIndex: n
+  spacing: n,
+  zIndex: e
 };
 export {
-  k as default
+  I 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";
+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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.58",
+  "version": "0.3.59",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",
@@ -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",