@sybilion/uilib 1.0.20

package/src/components/ui/FlickeringGrid/FlickeringGrid.types.ts

@@ -0,0 +1,10 @@
+export interface FlickeringGridProps {
+  squareSize?: number;
+  gridGap?: number;
+  flickerChance?: number;
+  color?: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  maxOpacity?: number;
+}

package/src/components/ui/FlickeringGrid/bg.svg

@@ -0,0 +1,194 @@
+<svg width="171" height="179" fill="#4ed9e5" version="1.1" id="svg69" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<circle cx="13" cy="13" r="1.5" opacity="0" id="circle1">
+		<animate attributeName="opacity" values="0;1;0" dur="5.6s" begin="0.6s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="35" r="1.5" opacity="0" id="circle2">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="3.1s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="57" r="1.5" opacity="0" id="circle3">
+		<animate attributeName="opacity" values="0;1;0" dur="9.9s" begin="4.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="79" r="1.5" opacity="0" id="circle4">
+		<animate attributeName="opacity" values="0;1;0" dur="4.9s" begin="1.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="101" r="1.5" opacity="0" id="circle5">
+		<animate attributeName="opacity" values="0;1;0" dur="9.9s" begin="0.7s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="123" r="1.5" opacity="0" id="circle6">
+		<animate attributeName="opacity" values="0;1;0" dur="2.6s" begin="0.7s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="145" r="1.5" opacity="0" id="circle7">
+		<animate attributeName="opacity" values="0;1;0" dur="2.0s" begin="3.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="13" cy="167" r="1.5" opacity="0" id="circle8">
+		<animate attributeName="opacity" values="0;1;0" dur="8.2s" begin="3.3s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="12.91948" r="1.5" opacity="0" id="circle10">
+		<animate attributeName="opacity" values="0;1;0" dur="4.7s" begin="0.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="34.919483" r="1.5" opacity="0" id="circle11">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="0.5s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="56.919483" r="1.5" opacity="0" id="circle12">
+		<animate attributeName="opacity" values="0;1;0" dur="1.4s" begin="0.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="78.919472" r="1.5" opacity="0" id="circle13">
+		<animate attributeName="opacity" values="0;1;0" dur="7.3s" begin="1.6s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="100.91947" r="1.5" opacity="0" id="circle14">
+		<animate attributeName="opacity" values="0;1;0" dur="4.1s" begin="2.3s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="122.91947" r="1.5" opacity="0" id="circle15">
+		<animate attributeName="opacity" values="0;1;0" dur="6.8s" begin="0.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="144.91945" r="1.5" opacity="0" id="circle16">
+		<animate attributeName="opacity" values="0;1;0" dur="8.8s" begin="3.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="96.865852" cy="166.91945" r="1.5" opacity="0" id="circle17">
+		<animate attributeName="opacity" values="0;1;0" dur="3.2s" begin="3.3s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="12.969821" r="1.5" opacity="0" id="circle18">
+		<animate attributeName="opacity" values="0;1;0" dur="5.3s" begin="2.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="34.969822" r="1.5" opacity="0" id="circle19">
+		<animate attributeName="opacity" values="0;1;0" dur="3.5s" begin="1.9s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="56.969994" r="1.5" opacity="0" id="circle20">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="1.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="78.970169" r="1.5" opacity="0" id="circle21">
+		<animate attributeName="opacity" values="0;1;0" dur="2.6s" begin="1.7s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="100.96988" r="1.5" opacity="0" id="circle22">
+		<animate attributeName="opacity" values="0;1;0" dur="2.6s" begin="0.5s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="122.96961" r="1.5" opacity="0" id="circle23">
+		<animate attributeName="opacity" values="0;1;0" dur="7.7s" begin="2.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="144.96947" r="1.5" opacity="0" id="circle24">
+		<animate attributeName="opacity" values="0;1;0" dur="9.7s" begin="1.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="53" cy="166.96947" r="1.5" opacity="0" id="circle25">
+		<animate attributeName="opacity" values="0;1;0" dur="2.6s" begin="2.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="12.888947" r="1.5" opacity="0" id="circle27">
+		<animate attributeName="opacity" values="0;1;0" dur="4.4s" begin="2.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="34.88895" r="1.5" opacity="0" id="circle28">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="1.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="56.89024" r="1.5" opacity="0" id="circle29">
+		<animate attributeName="opacity" values="0;1;0" dur="9.4s" begin="4.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="78.890335" r="1.5" opacity="0" id="circle30">
+		<animate attributeName="opacity" values="0;1;0" dur="7.0s" begin="3.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="100.89034" r="1.5" opacity="0" id="circle31">
+		<animate attributeName="opacity" values="0;1;0" dur="9.7s" begin="1.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="122.89034" r="1.5" opacity="0" id="circle32">
+		<animate attributeName="opacity" values="0;1;0" dur="5.0s" begin="0.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="144.8903" r="1.5" opacity="0" id="circle33">
+		<animate attributeName="opacity" values="0;1;0" dur="9.4s" begin="2.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="136.86612" cy="166.8903" r="1.5" opacity="0" id="circle34">
+		<animate attributeName="opacity" values="0;1;0" dur="2.3s" begin="1.6s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="13" r="1.5" opacity="0" id="circle36">
+		<animate attributeName="opacity" values="0;1;0" dur="2.6s" begin="3.9s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="35" r="1.5" opacity="0" id="circle37">
+		<animate attributeName="opacity" values="0;1;0" dur="2.9s" begin="2.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="57" r="1.5" opacity="0" id="circle38">
+		<animate attributeName="opacity" values="0;1;0" dur="7.7s" begin="0.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="79" r="1.5" opacity="0" id="circle39">
+		<animate attributeName="opacity" values="0;1;0" dur="5.6s" begin="4.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="101" r="1.5" opacity="0" id="circle40">
+		<animate attributeName="opacity" values="0;1;0" dur="8.4s" begin="2.6s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="123" r="1.5" opacity="0" id="circle41">
+		<animate attributeName="opacity" values="0;1;0" dur="5.3s" begin="1.9s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="145" r="1.5" opacity="0" id="circle42">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="1.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="35" cy="167" r="1.5" opacity="0" id="circle43">
+		<animate attributeName="opacity" values="0;1;0" dur="6.5s" begin="1.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="12.91948" r="1.5" opacity="0" id="circle45">
+		<animate attributeName="opacity" values="0;1;0" dur="3.2s" begin="1.1s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="34.919483" r="1.5" opacity="0" id="circle46">
+		<animate attributeName="opacity" values="0;1;0" dur="1.4s" begin="1.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="56.919483" r="1.5" opacity="0" id="circle47">
+		<animate attributeName="opacity" values="0;1;0" dur="9.4s" begin="2.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="78.919472" r="1.5" opacity="0" id="circle48">
+		<animate attributeName="opacity" values="0;1;0" dur="2.9s" begin="2.1s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="100.91947" r="1.5" opacity="0" id="circle49">
+		<animate attributeName="opacity" values="0;1;0" dur="6.1s" begin="2.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="122.91947" r="1.5" opacity="0" id="circle50">
+		<animate attributeName="opacity" values="0;1;0" dur="1.7s" begin="1.9s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="144.91945" r="1.5" opacity="0" id="circle51">
+		<animate attributeName="opacity" values="0;1;0" dur="4.4s" begin="2.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="118.86588" cy="166.91945" r="1.5" opacity="0" id="circle52">
+		<animate attributeName="opacity" values="0;1;0" dur="8.9s" begin="2.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="12.969821" r="1.5" opacity="0" id="circle53">
+		<animate attributeName="opacity" values="0;1;0" dur="2.0s" begin="0.3s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="34.969822" r="1.5" opacity="0" id="circle54">
+		<animate attributeName="opacity" values="0;1;0" dur="9.9s" begin="0.6s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="56.969994" r="1.5" opacity="0" id="circle55">
+		<animate attributeName="opacity" values="0;1;0" dur="5.6s" begin="0.3s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="78.970169" r="1.5" opacity="0" id="circle56">
+		<animate attributeName="opacity" values="0;1;0" dur="7.7s" begin="3.1s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="100.96988" r="1.5" opacity="0" id="circle57">
+		<animate attributeName="opacity" values="0;1;0" dur="4.9s" begin="1.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="122.96961" r="1.5" opacity="0" id="circle58">
+		<animate attributeName="opacity" values="0;1;0" dur="8.2s" begin="0.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="144.96947" r="1.5" opacity="0" id="circle59">
+		<animate attributeName="opacity" values="0;1;0" dur="5.9s" begin="1.7s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="75" cy="166.96947" r="1.5" opacity="0" id="circle60">
+		<animate attributeName="opacity" values="0;1;0" dur="7.7s" begin="1.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="12.888947" r="1.5" opacity="0" id="circle62">
+		<animate attributeName="opacity" values="0;1;0" dur="9.7s" begin="0.9s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="34.88895" r="1.5" opacity="0" id="circle63">
+		<animate attributeName="opacity" values="0;1;0" dur="4.7s" begin="1.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="56.89024" r="1.5" opacity="0" id="circle64">
+		<animate attributeName="opacity" values="0;1;0" dur="5.3s" begin="0.8s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="78.890335" r="1.5" opacity="0" id="circle65">
+		<animate attributeName="opacity" values="0;1;0" dur="3.2s" begin="2.1s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="100.89034" r="1.5" opacity="0" id="circle66">
+		<animate attributeName="opacity" values="0;1;0" dur="8.9s" begin="2.2s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="122.89034" r="1.5" opacity="0" id="circle67">
+		<animate attributeName="opacity" values="0;1;0" dur="5.0s" begin="1.4s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="144.8903" r="1.5" opacity="0" id="circle68">
+		<animate attributeName="opacity" values="0;1;0" dur="8.2s" begin="1.0s" repeatCount="indefinite" />
+	</circle>
+	<circle cx="158.8661" cy="166.8903" r="1.5" opacity="0" id="circle69">
+		<animate attributeName="opacity" values="0;1;0" dur="7.0s" begin="1.7s" repeatCount="indefinite" />
+	</circle>
+</svg>

package/src/components/ui/FlickeringGrid/index.ts

@@ -0,0 +1,2 @@
+export { FlickeringGrid } from './FlickeringGrid';
+export type { FlickeringGridProps } from './FlickeringGrid.types';

package/src/components/ui/Foldable/Foldable.styl

@@ -0,0 +1,48 @@
+@import 'lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  border 1px solid var(--border)
+  border-radius var(--p-3)
+  background-color var(--background)
+  overflow hidden
+
+  & + &
+    margin-top var(--p-1)
+
+.header
+  display flex
+  justify-content space-between
+  align-items center
+  padding var(--p-2)
+  cursor pointer
+  user-select none
+  transition background-color 0.2s ease
+
+  .unfolded &
+  &:hover
+    background-color var(--page-color-alpha-800)
+
+.headerContent
+  flex 1
+  display flex
+  align-items center
+
+.toggle
+  display flex
+  align-items center
+  margin-left var(--p-2)
+
+.icon
+  color var(--text-color-secondary)
+  transition transform 0.2s ease
+
+.content
+  padding 0 var(--p-4) var(--p-4) var(--p-4)
+  display flex
+  flex-direction column
+  gap var(--p-3)
+
+  .unfolded &
+    background-color var(--page-color-alpha-800)

package/src/components/ui/Foldable/Foldable.styl.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'content': string;
+  'header': string;
+  'headerContent': string;
+  'icon': string;
+  'root': string;
+  'toggle': string;
+  'unfolded': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Foldable/Foldable.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
+
+import S from './Foldable.styl';
+import type { FoldableProps } from './Foldable.types';
+
+export function Foldable({
+  header,
+  content,
+  contentClassName,
+  defaultUnfolded = false,
+}: FoldableProps) {
+  const [isUnfolded, setIsUnfolded] = useState(defaultUnfolded);
+
+  const toggleFold = () => {
+    setIsUnfolded(prev => !prev);
+  };
+
+  return (
+    <div className={cn(S.root, isUnfolded && S.unfolded)}>
+      <div className={S.header} onClick={toggleFold}>
+        <div className={S.headerContent}>{header}</div>
+        <div className={S.toggle}>
+          {isUnfolded ? (
+            <CaretUpIcon size={20} className={S.icon} />
+          ) : (
+            <CaretDownIcon size={20} className={S.icon} />
+          )}
+        </div>
+      </div>
+      {isUnfolded && (
+        <div className={cn(S.content, contentClassName)}>{content}</div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Foldable/Foldable.types.ts

@@ -0,0 +1,6 @@
+export interface FoldableProps {
+  header: React.ReactNode;
+  content: React.ReactNode;
+  contentClassName?: string;
+  defaultUnfolded?: boolean;
+}

package/src/components/ui/Foldable/index.ts

@@ -0,0 +1,2 @@
+export { Foldable } from './Foldable';
+export type { FoldableProps } from './Foldable.types';

package/src/components/ui/Gap/Gap.styl

@@ -0,0 +1,2 @@
+.root
+  flex-grow 1

package/src/components/ui/Gap/Gap.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Gap/Gap.tsx

@@ -0,0 +1,3 @@
+import S from './Gap.styl';
+
+export const Gap = () => <div className={S.root} />;

package/src/components/ui/Image/Image.styl

@@ -0,0 +1,27 @@
+.container
+  position relative
+  display inline-block
+  width 100%
+  height 100%
+
+.image
+  display block
+  width 100%
+  height 100%
+  object-fit cover
+  border-radius inherit
+
+  &.loading
+    opacity 0
+
+.fallback
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content center
+  border-radius inherit
+

package/src/components/ui/Image/Image.styl.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'container': string;
+  'fallback': string;
+  'image': string;
+  'loading': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Image/Image.tsx

@@ -0,0 +1,31 @@
+import cn from 'classnames';
+import { useEffect, useState } from 'react';
+
+import S from './Image.styl';
+import type { ImageProps } from './Image.types';
+
+function Image({ url, fallback, className, ...props }: ImageProps) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, [url]);
+
+  const handleLoad = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <div className={S.container}>
+      {isLoading && <div className={S.fallback}>{fallback}</div>}
+      <img
+        src={url}
+        className={cn(S.image, isLoading && S.loading, className)}
+        onLoad={handleLoad}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export { Image };

package/src/components/ui/Image/Image.types.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+
+export interface ImageProps extends Omit<React.ComponentProps<'img'>, 'src'> {
+  url: string;
+  fallback: ReactNode;
+}

package/src/components/ui/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageProps } from './Image.types';

package/src/components/ui/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode, useEffect, useState } from 'react';
+
+import { ImageBrokenIcon } from '@phosphor-icons/react';
+
+import type { ImageWithFallbackProps } from './ImageWithFallback.types';
+
+export function ImageWithFallback({
+  url,
+  fallback,
+  className,
+  onError,
+  ...props
+}: ImageWithFallbackProps) {
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    setHasError(!url?.trim());
+  }, [url]);
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    setHasError(true);
+    onError?.(e);
+  };
+
+  if (hasError) {
+    return <>{fallback}</>;
+  }
+
+  return (
+    <img src={url} className={className} onError={handleError} {...props} />
+  );
+}

package/src/components/ui/ImageWithFallback/ImageWithFallback.types.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+export interface ImageWithFallbackProps extends Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'src'
+> {
+  url: string;
+  fallback?: ReactNode;
+}

package/src/components/ui/ImageWithFallback/index.ts

@@ -0,0 +1,2 @@
+export { ImageWithFallback } from './ImageWithFallback';
+export type { ImageWithFallbackProps } from './ImageWithFallback.types';

package/src/components/ui/InfoIconTooltip/InfoIconTooltip.styl

@@ -0,0 +1,5 @@
+.infoIcon
+  color var(--muted-foreground)
+  cursor help
+  transform translateY(1px)
+

package/src/components/ui/InfoIconTooltip/InfoIconTooltip.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  infoIcon: string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/InfoIconTooltip/InfoIconTooltip.tsx

@@ -0,0 +1,21 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#uilib/components/ui/Tooltip';
+import { QuestionIcon } from '@phosphor-icons/react';
+
+import S from './InfoIconTooltip.styl';
+
+export function InfoIconTooltip({ children }: { children: React.ReactNode }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span>
+          <QuestionIcon size={16} className={S.infoIcon} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent maxWidth={300}>{children}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/ui/Input/Input.styl

@@ -0,0 +1,67 @@
+.root
+  display flex
+  width 100%
+  min-width 0
+  background-color transparent
+  outline none
+  transition color, box-shadow
+  transition-duration 150ms
+
+  &.variant-default
+    padding 4px 12px
+    border-radius var(--p-4)
+    box-shadow 0 0 0 1px var(--border)
+
+    &:focus
+      box-shadow: inset 0 0 0 2px var(--brand-color-400);
+
+
+  &.size-sm
+    height 32px
+    font-size var(--text-xs)
+
+  &.size-md
+    height 40px
+    font-size var(--text-sm)
+
+  &.size-lg
+    height 48px
+    font-size var(--text-base)
+
+  &:placeholder
+    color var(--muted-foreground)
+
+  &::selection
+    background-color var(--primary)
+    color var(--primary-foreground)
+
+  &.variant-default
+    &:focus-visible
+      border-color var(--ring)
+      ring 3px var(--ring) / 0.5
+
+    &[aria-invalid="true"]
+      border-color var(--destructive)
+      ring 3px var(--destructive) / 0.2
+
+  &:disabled
+    pointer-events none
+    cursor not-allowed
+    opacity 0.5
+
+  &[type="file"]
+    &::file-selector-button
+      display inline-flex
+      height 28px
+      border 0
+      background-color transparent
+      font-size 14px
+      font-weight 500
+      color var(--foreground)
+
+  // Dark mode styles
+  :global(.dark) &
+    background-color var(--input) / 0.3
+
+    &[aria-invalid="true"]
+      ring 3px var(--destructive) / 0.4

package/src/components/ui/Input/Input.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'root': string;
+  'size-lg': string;
+  'size-md': string;
+  'size-sm': string;
+  'variant-default': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Input/Input.tsx

@@ -0,0 +1,42 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import S from './Input.styl';
+import type { InputProps } from './Input.types';
+
+const Input = React.forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  InputProps
+>(({ className, type, size = 'md', variant = 'default', ...props }, ref) => {
+  if (type === 'textarea') {
+    return (
+      <textarea
+        ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+        className={cn(
+          S.root,
+          S[`size-${size}`],
+          S[`variant-${variant}`],
+          className,
+        )}
+        {...(props as React.ComponentProps<'textarea'>)}
+      />
+    );
+  }
+  return (
+    <input
+      ref={ref as React.ForwardedRef<HTMLInputElement>}
+      className={cn(
+        S.root,
+        S[`size-${size}`],
+        S[`variant-${variant}`],
+        className,
+      )}
+      type={type}
+      {...(props as React.ComponentProps<'input'>)}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/ui/Input/Input.types.ts

@@ -0,0 +1,11 @@
+export type InputProps =
+  | (Omit<React.ComponentProps<'input'>, 'size'> & {
+      type?: React.ComponentProps<'input'>['type'];
+      size?: 'sm' | 'md' | 'lg';
+      variant?: 'default' | 'clean';
+    })
+  | (Omit<React.ComponentProps<'textarea'>, 'type' | 'size'> & {
+      type: 'textarea';
+      size?: 'sm' | 'md' | 'lg';
+      variant?: 'default' | 'clean';
+    });

package/src/components/ui/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input.types';