@lark-apaas/coding-templates 0.1.0

package/template-nextjs-static/src/components/ui/icons/file-wiki-image-colorful-icon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export function FileWikiImageColorfulIcon(
+  props: React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FFC60A"
+      />
+      <path
+        opacity="0.8"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#D99904"
+      />
+      <path
+        d="M8.37168 10C7.81939 10 7.37168 10.4477 7.37168 11V11.1818C7.37168 11.7341 7.81939 12.1818 8.37168 12.1818H8.5535C9.10578 12.1818 9.5535 11.7341 9.5535 11.1818V11C9.5535 10.4477 9.10578 10 8.5535 10H8.37168Z"
+        fill="white"
+      />
+      <path
+        d="M16.6951 12.7598C17.0658 12.3594 17.7353 12.6217 17.7353 13.1675V18.5C17.7353 18.7761 17.5115 19 17.2353 19L7.40077 19C7.06108 19 6.876 18.6033 7.09423 18.343L10.0198 14.8533C10.4194 14.3765 11.1528 14.3765 11.5524 14.8533L13.075 16.6695L16.6951 12.7598Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-pdf-colorful-icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export function FileWikiPdfColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#F54A45"
+      />
+      <path
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C02A26"
+      />
+      <path
+        d="M17.5508 15.5512C17.3026 15.2606 16.7937 15.1194 15.9949 15.1194C15.5306 15.1194 14.891 15.131 14.2482 15.2264C12.4925 13.9607 12.081 12.6011 12.081 12.6011C12.081 12.6011 12.3809 11.8484 12.3999 10.6191C12.412 9.84198 12.2888 9.2624 11.9746 9.01323C11.8407 8.9071 11.6464 8.81836 11.4508 8.81836C11.2981 8.81836 11.1551 8.86258 11.0379 8.94711C10.1252 9.6056 11.1217 12.7099 11.1484 12.7926C10.7177 13.8377 10.1751 14.945 9.61664 15.918C9.43518 16.2341 9.43519 16.2402 9.31331 16.3837C9.31331 16.3837 7.71563 17.1761 6.96645 18.0546C6.54317 18.551 6.52943 18.8919 6.5519 19.1473C6.58812 19.4536 6.9786 19.7275 7.3717 19.7275C7.388 19.7275 7.40441 19.727 7.42048 19.726C7.81999 19.7017 8.26439 19.5917 8.75891 19.124C9.11691 18.7853 9.51949 17.8657 10.037 16.9658C11.5219 16.5493 12.8287 16.2526 13.9239 16.0835C14.727 16.5096 15.9219 16.9922 16.7352 16.9922C17.0081 16.9922 17.2276 16.9374 17.3876 16.8292C17.579 16.6999 17.6604 16.5387 17.7109 16.2402C17.7614 15.9418 17.6911 15.7154 17.5508 15.5512ZM15.8051 16.0184C16.5467 16.0184 16.9482 16.1492 17.1545 16.259C17.2181 16.2928 17.2644 16.3255 17.2972 16.3528C17.2391 16.3978 17.1248 16.4547 16.9181 16.4547C16.5755 16.4547 16.1258 16.3096 15.5773 16.0223C15.6553 16.0197 15.7313 16.0184 15.8051 16.0184ZM11.5458 9.47602L11.5471 9.47293C11.6629 9.5582 11.7169 10.157 11.7061 10.5043C11.6915 10.9702 11.688 11.1503 11.6295 11.4366C11.471 10.8397 11.4597 9.76694 11.5458 9.47602ZM11.5824 13.8366C11.9441 14.4323 12.4028 15.0357 12.9196 15.4964C11.9109 15.7126 11.0733 15.911 10.4706 16.122C11.1166 15.0032 11.54 13.9474 11.5824 13.8366ZM7.50945 18.8845C7.60073 18.7495 7.85011 18.4878 8.48254 17.982C8.14312 18.7639 7.76193 18.8845 7.40757 19.0729C7.43432 19.0109 7.46797 18.9458 7.50945 18.8845Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-ppt-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileWikiPptColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.8"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#ED6D0C"
+      />
+      <path
+        d="M10.3828 18.4952V14.9087H12.0847C12.4937 14.9087 12.9007 14.8728 13.3055 14.8009C13.7179 14.7277 14.088 14.599 14.4152 14.4147C14.7482 14.2271 15.0198 13.9703 15.2285 13.6458C15.4405 13.3164 15.5452 12.9033 15.5452 12.4089C15.5452 12.0831 15.5013 11.7708 15.4134 11.4725C15.3228 11.1651 15.1629 10.8928 14.9347 10.6574C14.7055 10.4209 14.3974 10.2371 14.0123 10.1049C13.6308 9.97386 13.1526 9.90918 12.5769 9.90918H9.41376C9.33572 9.90918 9.27246 9.97244 9.27246 10.0505V18.4952C9.27246 18.5732 9.33572 18.6365 9.41376 18.6365H10.2415C10.3196 18.6365 10.3828 18.5732 10.3828 18.4952ZM13.1182 13.8731C12.8221 13.9188 12.4855 13.9417 12.1087 13.9417H10.3828V10.8762H12.3488C13.0952 10.8762 13.6309 11.0055 13.9567 11.2557C14.2753 11.5005 14.4348 11.8608 14.4348 12.3503C14.4348 12.6888 14.3811 12.9582 14.2767 13.1586C14.1727 13.3581 14.027 13.5143 13.8378 13.6293C13.6434 13.7475 13.4038 13.8291 13.1182 13.8731Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-text-colorful-icon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export function FileWikiTextColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M12.5455 10.7271V18.2271C12.5455 18.3025 12.4845 18.3635 12.4092 18.3635H11.591C11.5157 18.3635 11.4546 18.3025 11.4546 18.2271V10.7271H8.04554C7.97023 10.7271 7.90918 10.6661 7.90918 10.5908V9.77259C7.90918 9.69728 7.97023 9.63623 8.04554 9.63623H15.9546C16.0299 9.63623 16.091 9.69728 16.091 9.77259V10.5908C16.091 10.6661 16.0299 10.7271 15.9546 10.7271H12.5455Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-unknown-colorful-icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export function FileWikiUnknownColorfulIcon(
+  props: React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M14.288 9.86441C13.7422 9.34739 13.026 9.09082 12.1353 9.09082C11.1347 9.09082 10.3505 9.41162 9.78235 10.065C9.30108 10.6265 9.04179 11.1646 9.00471 12.013C9.00384 12.033 9.00309 12.0697 9.00247 12.1122C9.00043 12.2508 9.11287 12.3635 9.25147 12.3635H9.84253C9.98 12.3635 10.0914 12.2525 10.0936 12.1151C10.0943 12.0737 10.0951 12.038 10.0961 12.0189C10.1251 11.4328 10.278 11.1262 10.5508 10.7851C10.8953 10.3259 11.4006 10.0999 12.0943 10.0999C12.7134 10.0999 13.1776 10.2578 13.4979 10.5782C13.8033 10.8963 13.9625 11.3294 13.9625 11.8726C13.9625 12.2435 13.8281 12.5967 13.5549 12.948C13.4678 13.0568 13.3425 13.1862 12.9388 13.5899C12.3012 14.1474 11.9073 14.601 11.6993 15.0468C11.5282 15.3888 11.441 15.7775 11.441 16.1954V16.4772C11.441 16.6153 11.5529 16.7272 11.691 16.7272H12.2956C12.4336 16.7272 12.5456 16.6153 12.5456 16.4772V16.1954C12.5456 15.8413 12.6327 15.5237 12.8133 15.2141C12.9486 14.9841 13.1223 14.8038 13.4251 14.5389C14.0321 13.9897 14.3689 13.6625 14.5198 13.4705C14.8821 12.9923 15.0671 12.4446 15.0671 11.8454C15.0671 11.0185 14.8075 10.355 14.288 9.86441ZM11.7046 17.8181C11.5666 17.8181 11.4546 17.93 11.4546 18.0681V18.659C11.4546 18.7971 11.5666 18.909 11.7046 18.909H12.2956C12.4336 18.909 12.5456 18.7971 12.5456 18.659V18.0681C12.5456 17.93 12.4336 17.8181 12.2956 17.8181H11.7046Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-video-colorful-icon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export function FileWikiVideoColorfulIcon(
+  props: React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48287C15 1.30469 15.2154 1.21546 15.3414 1.34145L20.6586 6.65861C20.7846 6.7846 20.6953 7.00003 20.5172 7.00003H17C15.8954 7.00003 15 6.1046 15 5.00003V1.48287Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M7 10.75C7 10.3358 7.33579 10 7.75 10H13C13.4142 10 13.75 10.3358 13.75 10.75V11.6406L14.8823 11.0037C15.3823 10.7225 16 11.0838 16 11.6574V15.0926C16 15.6662 15.3823 16.0275 14.8823 15.7463L13.75 15.1094V16C13.75 16.4142 13.4142 16.75 13 16.75H7.75C7.33579 16.75 7 16.4142 7 16V10.75ZM9.25 13C9.66421 13 10 12.6642 10 12.25C10 11.8358 9.66421 11.5 9.25 11.5C8.83579 11.5 8.5 11.8358 8.5 12.25C8.5 12.6642 8.83579 13 9.25 13Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-word-colorful-icon.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+export function FileWikiWordColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M12.0043 12.2495L10.5297 17.706C10.5118 17.7722 10.4517 17.8182 10.3831 17.8182H9.51468C9.44677 17.8182 9.38711 17.7731 9.3686 17.7078L7.36907 10.6478C7.34622 10.5671 7.3931 10.4832 7.47377 10.4603C7.48723 10.4565 7.50116 10.4546 7.51515 10.4546H8.38612C8.45534 10.4546 8.51579 10.5014 8.53312 10.5684L9.956 16.0718L11.4336 10.5671C11.4514 10.5007 11.5116 10.4546 11.5803 10.4546H12.429C12.4978 10.4546 12.5579 10.5008 12.5757 10.5673L14.0438 16.0704L15.4663 10.5684C15.4837 10.5014 15.5441 10.4546 15.6133 10.4546H16.4843C16.5682 10.4546 16.6361 10.5226 16.6361 10.6064C16.6361 10.6204 16.6342 10.6343 16.6304 10.6478L14.6309 17.7078C14.6124 17.7731 14.5527 17.8182 14.4848 17.8182H13.6163C13.5476 17.8182 13.4875 17.7721 13.4697 17.7058L12.0043 12.2495Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/icons/file-wiki-zip-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileWikiZipColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M15.4286 9.5C15.7442 9.5 16 9.75184 16 10.0625V17.9375C16 18.2482 15.7442 18.5 15.4286 18.5H8.57143C8.25584 18.5 8 18.2482 8 17.9375V10.0625C8 9.75184 8.25584 9.5 8.57143 9.5H15.4286ZM13.1429 15.6875H10.8571V17.6562H13.1429V15.6875ZM12.5714 16.25V16.9009H11.4286V16.25H12.5714ZM13.1692 11.75H12V12.875H10.8571V14H12V15.125H13.1692V14H12.0264V12.875H13.1692V11.75ZM12 10.625H10.8571V11.75H12V10.625Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template-nextjs-static/src/components/ui/image.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+type ImageFormat = 'jpg' | 'png' | 'webp' | 'bmp' | 'gif' | 'tiff';
+
+type NativeImgProps = React.ComponentPropsWithoutRef<'img'>;
+
+export interface ImageProps extends NativeImgProps {
+  quality?: number;
+  format?: ImageFormat;
+  breakpoints?: Array<number>;
+}
+
+const DEFAULT_QUALITY = 80;
+const DEFAULT_RESOLUTIONS: number[] = [
+  16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048,
+  3840,
+];
+
+const SRC_ALLOWLIST = [
+  '/runtime/api/v1/storage/object/',
+  '/aily/api/v1/feisuda/attachments/',
+  '/aily/api/v1/files/static/',
+];
+
+function getClosestResolution(target: number): number {
+  return DEFAULT_RESOLUTIONS.reduce((prev, curr) => {
+    return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
+  });
+}
+
+function applyParamsToUrl(
+  src: string,
+  params: Record<string, string | number | undefined>,
+): string {
+  const search = Object.entries(params)
+    .filter(([, v]) => v !== undefined && v !== null && v !== '')
+    .map(([k, v]) => {
+      return `${k},${v}`;
+    })
+    .join('/');
+  if (!search) return src;
+
+  const [pathAndQuery = '', hash] = src.split('#');
+  const [base, query] = pathAndQuery.split('?');
+  const urlParams = new URLSearchParams(query);
+  urlParams.set('x-tos-process', `image/${search}`);
+
+  return `${base}?${urlParams.toString()}${hash ? '#' + hash : ''}`;
+}
+
+function isTargetSrc(originSrc: string) {
+  return SRC_ALLOWLIST.some((item) => originSrc.includes(item));
+}
+
+function supportWebp() {
+  try {
+    return (
+      document
+        .createElement('canvas')
+        .toDataURL('image/webp')
+        .indexOf('data:image/webp') === 0
+    );
+  } catch (err) {
+    return false;
+  }
+}
+
+function buildSrcSet(
+  src: string,
+  widths: number[],
+  format: ImageFormat | undefined,
+  quality: number,
+  width?: number,
+  sizes?: string,
+): string | undefined {
+  if (!widths || widths.length === 0 || (!width && !sizes)) return undefined;
+  const fmt = format;
+  if (width) {
+    return [1, 2]
+      .map((dpr) => {
+        const targetWidth = getClosestResolution(width * dpr);
+        return `${applyParamsToUrl(src, { resize: `w_${targetWidth}`, quality: `Q_${quality}`, format: fmt })} ${dpr}x`;
+      })
+      .join(', ');
+  }
+  return widths
+    .map(
+      (w) =>
+        `${applyParamsToUrl(src, { resize: `w_${w}`, quality: `Q_${quality}`, format: fmt })} ${w}w`,
+    )
+    .join(', ');
+}
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  (
+    {
+      src,
+      width,
+      height,
+      quality = DEFAULT_QUALITY,
+      format,
+      sizes,
+      srcSet: userSrcSet,
+      breakpoints = DEFAULT_RESOLUTIONS,
+      className,
+      loading = 'lazy',
+      decoding = 'async',
+      ...rest
+    },
+    ref,
+  ) => {
+    const defaultFormat = React.useMemo(
+      () => (supportWebp() ? 'webp' : undefined),
+      [],
+    );
+
+    // 当 src 不在白名单时，直接渲染原生 img，保留所有原生属性
+    if (typeof src !== 'string' || !isTargetSrc(src)) {
+      return (
+        <img
+          {...rest}
+          ref={ref}
+          src={src}
+          width={width}
+          height={height}
+          sizes={sizes}
+          srcSet={userSrcSet}
+          className={cn(
+            'bg-linear-to-b from-gray-50/20 to-gray-200/20',
+            className,
+          )}
+          loading={loading}
+          decoding={decoding}
+        />
+      );
+    }
+
+    // 只有当 width 是数字类型时才进行 srcSet 优化
+    const numericWidth = typeof width === 'number' ? width : undefined;
+
+    // 用户传入的 srcSet 优先，否则生成优化的 srcSet
+    const srcSet =
+      userSrcSet ??
+      buildSrcSet(
+        src,
+        breakpoints,
+        format ?? (defaultFormat as ImageFormat),
+        quality,
+        numericWidth,
+        sizes,
+      );
+
+    const baseSrc = applyParamsToUrl(src, {
+      resize: numericWidth ? `w_${numericWidth}` : undefined,
+      quality: `Q_${quality}`,
+      format: format ?? defaultFormat,
+    });
+
+    return (
+      <img
+        {...rest}
+        ref={ref}
+        src={baseSrc}
+        width={width}
+        height={height}
+        sizes={sizes}
+        srcSet={srcSet}
+        className={cn(
+          'bg-linear-to-b from-gray-50/20 to-gray-200/20',
+          className,
+        )}
+        loading={loading}
+        decoding={decoding}
+      />
+    );
+  },
+);
+
+Image.displayName = 'Image';
+
+export default Image;

package/template-nextjs-static/src/components/ui/input-group.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva("text-sm flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/template-nextjs-static/src/components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/20 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/template-nextjs-static/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "enabled:hover:border-ring focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }