人生轨迹代码初始化

2025-12-21 16:57:54 +08:00
parent 06a3638c29
commit f3c06ce6af
42 changed files with 7746 additions and 0 deletions
@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * PncyssD Design System Input
+ * Supports standard input, select, and textarea with consistent glassmorphism styling.
+ */
+
+const baseStyles = "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:bg-white/10 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed backdrop-blur-sm";
+const errorStyles = "border-red-500/50 focus:border-red-500 focus:ring-red-500/50 bg-red-500/5";
+
+export const Input = React.forwardRef(({ className, error, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className={clsx(baseStyles, error && errorStyles, className)}
+      {...props}
+    />
+  );
+});
+
+export const Select = React.forwardRef(({ className, children, error, ...props }, ref) => {
+  return (
+    <div className="relative">
+      <select
+        ref={ref}
+        className={clsx(baseStyles, "appearance-none pr-10", error && errorStyles, className)}
+        {...props}
+      >
+        {children}
+      </select>
+      <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+      </div>
+    </div>
+  );
+});
+
+export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => {
+  return (
+    <textarea
+      ref={ref}
+      className={clsx(baseStyles, "resize-none min-h-[100px]", error && errorStyles, className)}
+      {...props}
+    />
+  );
+});