@theguild/components 9.7.0-alpha-20250402165345-c0aef32f80bd0f0771b4957f9dc5fb44cf881617 → 9.7.0-alpha-20250402173604-e0e2ed262a7fd4cf986308e9e4725dd6363a71ea

package/dist/components/index.d.mts

@@ -10,7 +10,7 @@ export { ReactComponent as AccountBox, ReactComponent as AppsIcon, ReactComponen
 export { DiscordIcon, GitHubIcon, InformationCircleIcon } from 'nextra/icons';
 export { Image } from './image.mjs';
 export { InfoList } from './info-list.mjs';
-export { Input } from './input.mjs';
+export { Input } from './input/index.mjs';
 export { LegacyPackageCmd } from './legacy-package-cmd.mjs';
 export { MarketplaceList } from './marketplace-list.mjs';
 export { MarketplaceSearch } from './marketplace-search.mjs';

package/dist/components/{input.d.mts → input/index.d.mts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Severity } from '../types/severity.mjs';
+import { Severity } from '../../types/severity.mjs';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     severity?: Severity;

package/dist/components/{input.js → input/index.js}

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../cn";
+import { cn } from "../../cn";
+import { InputShake } from "./input-shake";
 function Input({ severity, message, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -12,6 +13,7 @@ function Input({ severity, message, ...props }) {
         severity === "positive" && "border-positive-dark/50 outline-positive-dark dark:border-positive-dark/50"
       ),
       children: [
+        /* @__PURE__ */ jsx(InputShake, { severity }),
         /* @__PURE__ */ jsx(
           "input",
           {

package/dist/components/input/input-shake.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Severity } from '../../types/severity.mjs';
+
+interface InputShakeProps {
+    severity?: Severity;
+}
+/**
+ * We need this hack to avoid shaking the input when it's first rendered
+ * already as critical.
+ */
+declare function InputShake({ severity }: InputShakeProps): react_jsx_runtime.JSX.Element;
+
+export { InputShake };

package/dist/components/input/input-shake.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function InputShake({ severity }) {
+  const ref = useRef(null);
+  const prevSeverityRef = useRef(severity);
+  useEffect(() => {
+    const shouldShake = prevSeverityRef.current !== "critical" && severity === "critical";
+    prevSeverityRef.current = severity;
+    const container = ref.current?.parentElement;
+    if (container && shouldShake) {
+      container.classList.add("animate-shake");
+      const cleanUp = () => container.classList.remove("animate-shake");
+      container.addEventListener("animationend", cleanUp, { once: true });
+    }
+  }, [severity]);
+  return /* @__PURE__ */ jsx("div", { ref, className: "hidden" });
+}
+export {
+  InputShake
+};

package/dist/index.d.mts

@@ -13,7 +13,7 @@ export { ReactComponent as AccountBox, ReactComponent as AngularLogo, ReactCompo
 export { DiscordIcon, GitHubIcon, InformationCircleIcon } from 'nextra/icons';
 export { Image } from './components/image.mjs';
 export { InfoList } from './components/info-list.mjs';
-export { Input } from './components/input.mjs';
+export { Input } from './components/input/index.mjs';
 export { LegacyPackageCmd } from './components/legacy-package-cmd.mjs';
 export { MarketplaceList } from './components/marketplace-list.mjs';
 export { MarketplaceSearch } from './components/marketplace-search.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.7.0-alpha-20250402165345-c0aef32f80bd0f0771b4957f9dc5fb44cf881617",
+  "version": "9.7.0-alpha-20250402173604-e0e2ed262a7fd4cf986308e9e4725dd6363a71ea",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"

package/style.css

@@ -149,3 +149,62 @@
     --nextra-navbar-height: 64px;
   }
 }
+
+:root {
+  --hive-ease-overshoot-far: linear(
+    0 0%,
+    0.5007 7.21%,
+    0.7803 12.29%,
+    0.8883 14.93%,
+    0.9724 17.63%,
+    1.0343 20.44%,
+    1.0754 23.44%,
+    1.0898 25.22%,
+    1.0984 27.11%,
+    1.1014 29.15%,
+    1.0989 31.4%,
+    1.0854 35.23%,
+    1.0196 48.86%,
+    1.0043 54.06%,
+    0.9956 59.6%,
+    0.9925 68.11%,
+    1 100%
+  );
+
+  --hive-ease-overshoot-a-bit: linear(
+    0 0%,
+    0.5007 7.21%,
+    0.7803 12.29%,
+    0.8883 14.93%,
+    0.9724 17.63%,
+    1.011319 20.44%,
+    1.024882 23.44%,
+    1.029634 25.22%,
+    1.032472 27.11%,
+    1.033462 29.15%,
+    1.032637 31.4%,
+    1.028182 35.23%,
+    1.006468 48.86%,
+    1.001419 54.06%,
+    0.9956 59.6%,
+    0.9925 68.11%,
+    1 100%
+  );
+}
+
+@keyframes hive-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: rotate(-0.4deg);
+  }
+  75% {
+    transform: rotate(0.3deg);
+  }
+}
+
+.animate-shake:not(:focus-within) {
+  animation: hive-shake 0.3s ease;
+}