@theguild/components 9.6.0 → 9.7.0-alpha-20250402161139-ca41df4325613c4c8201ec633c2872357bad25c6

package/dist/components/index.d.mts

@@ -10,6 +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 { LegacyPackageCmd } from './legacy-package-cmd.mjs';
 export { MarketplaceList } from './marketplace-list.mjs';
 export { MarketplaceSearch } from './marketplace-search.mjs';
@@ -46,6 +47,7 @@ import 'next/image';
 import 'next/link';
 import 'react-player';
 import 'react/jsx-runtime';
+import '../types/severity.mjs';
 import '../products.mjs';
 import '@giscus/react';
 import './faq/attach-page-faq-schema.mjs';

package/dist/components/index.js

@@ -9,6 +9,7 @@ import { HeroVideo } from "./hero-video";
 export * from "./icons";
 import { Image } from "./image";
 import { InfoList } from "./info-list";
+import { Input } from "./input";
 import { LegacyPackageCmd } from "./legacy-package-cmd";
 import { MarketplaceList } from "./marketplace-list";
 import { MarketplaceSearch } from "./marketplace-search";
@@ -55,6 +56,7 @@ export {
   HiveNavigation,
   Image,
   InfoList,
+  Input,
   LegacyPackageCmd,
   MarketplaceList,
   MarketplaceSearch,

package/dist/components/input.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Severity } from '../types/severity.mjs';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    severity?: Severity;
+    message?: string;
+}
+declare function Input({ severity, message, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+export { Input, type InputProps };

package/dist/components/input.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../cn";
+function Input({ severity, message, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-[9px] border border-blue-400 bg-white outline-offset-2 focus-within:outline focus-within:outline-2 dark:border-neutral-400 dark:bg-neutral-800",
+        "focus-visible:outline-green-800/40",
+        "[&:focus-within:has([aria-invalid],:invalid)]:outline-critical-dark [&:has([aria-invalid],:invalid)]:border-critical-dark/50",
+        severity === "warning" && "border-warning-bright/50 outline-warning-bright dark:border-warning-bright/50",
+        severity === "positive" && "border-positive-dark/50 outline-positive-dark dark:border-positive-dark/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-invalid": severity === "critical" ? true : void 0,
+            className: cn(
+              "w-full rounded-lg bg-white py-3 indent-4 font-medium transition-[background-color] placeholder:text-green-800 placeholder-shown:bg-blue-100 autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,255)] autofill:[-webkit-text-fill-color:theme(colors.green.1000)] autofill:first-line:font-sans hover:bg-white focus:bg-white focus-visible:outline-none focus-visible:ring-0 dark:bg-neutral-800 dark:text-white dark:placeholder:text-neutral-300 dark:placeholder-shown:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+              message && "rounded-b-none",
+              "pr-6 [&:is(:invalid,[aria-invalid])]:border-critical-dark/20 [&:is(:invalid,[aria-invalid])]:placeholder-shown:bg-critical-dark/5",
+              props.className
+            ),
+            ...props
+          }
+        ),
+        message && (severity === "critical" ? /* @__PURE__ */ jsx("p", { className: "rounded-b-lg bg-critical-dark/10 py-0.5 pl-4 text-sm text-critical-dark dark:bg-critical-bright/20 dark:text-white", children: message }) : severity === "warning" ? /* @__PURE__ */ jsx("p", { className: "rounded-b-lg bg-warning-bright/10 py-0.5 pl-4 text-sm text-warning-bright", children: message }) : /* @__PURE__ */ jsx("p", { className: "rounded-b-lg bg-positive-dark/10 py-0.5 pl-4 text-sm text-positive-dark", children: message }))
+      ]
+    }
+  );
+}
+export {
+  Input
+};

package/dist/index.d.mts

@@ -13,6 +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 { LegacyPackageCmd } from './components/legacy-package-cmd.mjs';
 export { MarketplaceList } from './components/marketplace-list.mjs';
 export { MarketplaceSearch } from './components/marketplace-search.mjs';
@@ -52,6 +53,7 @@ import 'react';
 import 'url';
 import 'next/image';
 import 'react/jsx-runtime';
+import './types/severity.mjs';
 import '@giscus/react';
 import './components/faq/attach-page-faq-schema.mjs';
 import 'next/link';

package/dist/types/severity.d.mts

@@ -0,0 +1,3 @@
+type Severity = 'critical' | 'positive' | 'warning';
+
+export type { Severity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.6.0",
+  "version": "9.7.0-alpha-20250402161139-ca41df4325613c4c8201ec633c2872357bad25c6",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -38,7 +38,7 @@
     "style.css"
   ],
   "peerDependencies": {
-    "@theguild/tailwind-config": "^0.6.2",
+    "@theguild/tailwind-config": "^0.6.3",
     "next": "^13 || ^14 || ^15.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@svgr/plugin-svgo": "^8.1.0",
-    "@theguild/tailwind-config": "0.6.2",
+    "@theguild/tailwind-config": "0.6.3",
     "@types/dedent": "0.7.2",
     "@types/mdast": "4.0.4",
     "@types/react": "18.3.18",