feat: New form components

convex/_generated/api.d.ts

@@ -26,8 +26,8 @@ import type * as seed from "../seed.js";
 import type * as topics from "../topics.js";
 import type * as userFormData from "../userFormData.js";
 import type * as userQuests from "../userQuests.js";
-import type * as users from "../users.js";
 import type * as userSettings from "../userSettings.js";
+import type * as users from "../users.js";
 import type * as validators from "../validators.js";
 
 /**
@@ -52,8 +52,8 @@ declare const fullApi: ApiFromModules<{
   topics: typeof topics;
   userFormData: typeof userFormData;
   userQuests: typeof userQuests;
-  users: typeof users;
   userSettings: typeof userSettings;
+  users: typeof users;
   validators: typeof validators;
 }>;
 export declare const api: FilterApi<

package.json

@@ -38,6 +38,9 @@
     "@auth/core": "0.37.4",
     "@convex-dev/auth": "^0.0.77",
     "@faker-js/faker": "^9.3.0",
+    "@maskito/core": "^3.2.0",
+    "@maskito/react": "^3.2.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-router": "^1.90.0",
     "@tiptap/extension-blockquote": "^2.10.3",
     "@tiptap/extension-bold": "^2.10.3",

src/components/common/Button/Button.tsx

@@ -11,7 +11,7 @@ export interface ButtonProps extends AriaButtonProps {
   children?: React.ReactNode;
   icon?: LucideIcon;
   variant?: "primary" | "secondary" | "destructive" | "icon" | "ghost";
-  size?: "small" | "medium";
+  size?: "small" | "medium" | "large";
 }
 
 export const buttonStyles = tv({
@@ -29,6 +29,7 @@ export const buttonStyles = tv({
     size: {
       small: "h-8 px-2",
       medium: "h-10 px-3",
+      large: "h-12 px-3.5 text-lg",
     },
     isDisabled: {
       false: "cursor-pointer",
@@ -73,7 +74,12 @@ export function Button({
         }),
       )}
     >
-      {Icon && <Icon size={16} />}
+      {Icon && (
+        <Icon
+          size={size === "large" ? 20 : 16}
+          strokeWidth={size === "large" ? 2.5 : 2}
+        />
+      )}
       {children}
     </AriaButton>
   );

src/components/common/Field/Field.tsx

@@ -1,14 +1,14 @@
 import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import {
   FieldError as AriaFieldError,
+  type GroupProps as AriaGroupProps,
   Input as AriaInput,
+  type InputProps as AriaInputProps,
   Label as AriaLabel,
+  type LabelProps as AriaLabelProps,
   TextArea as AriaTextArea,
   type FieldErrorProps,
   Group,
-  type GroupProps,
-  type InputProps,
-  type LabelProps,
   Text,
   type TextAreaProps,
   type TextProps,
@@ -17,14 +17,28 @@ import {
 import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
 
-export function Label(props: LabelProps) {
+interface LabelProps extends AriaLabelProps {
+  size?: "medium" | "large";
+}
+
+const labelStyles = tv({
+  base: "text-sm text-gray-dim cursor-default w-fit",
+  variants: {
+    size: {
+      medium: "text-sm",
+      large: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export function Label({ size, ...props }: LabelProps) {
   return (
     <AriaLabel
       {...props}
-      className={twMerge(
-        "text-sm text-gray-normal cursor-default w-fit",
-        props.className,
-      )}
+      className={labelStyles({ size, className: props.className })}
     />
   );
 }
@@ -68,29 +82,58 @@ export const fieldBorderStyles = tv({
 
 export const fieldGroupStyles = tv({
   extend: focusRing,
-  base: "group h-10 flex items-center bg-gray-subtle forced-colors:bg-[Field] border rounded-lg overflow-hidden",
-  variants: fieldBorderStyles.variants,
+  base: "group flex items-center bg-gray-subtle forced-colors:bg-[Field] border rounded-lg overflow-hidden",
+  variants: {
+    ...fieldBorderStyles.variants,
+    size: {
+      medium: "h-10",
+      large: "h-12",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
 });
 
-export function FieldGroup(props: GroupProps) {
+interface GroupProps extends AriaGroupProps {
+  size?: "medium" | "large";
+}
+
+export function FieldGroup({ size, ...props }: GroupProps) {
   return (
     <Group
       {...props}
       className={composeRenderProps(props.className, (className, renderProps) =>
-        fieldGroupStyles({ ...renderProps, className }),
+        fieldGroupStyles({ ...renderProps, size, className }),
       )}
     />
   );
 }
 
-export const inputStyles =
-  "px-3 h-10 flex-1 min-w-0 outline outline-0 bg-transparent text-gray-normal disabled:text-gray-dim";
+interface InputProps extends Omit<AriaInputProps, "size"> {
+  size?: "medium" | "large";
+}
 
-export function Input(props: InputProps) {
+export const inputStyles = tv({
+  base: "flex-1 min-w-0 outline outline-0 bg-transparent text-gray-normal disabled:text-gray-dim",
+  variants: {
+    size: {
+      medium: "px-3 h-10",
+      large: "px-3.5 h-12 text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export function Input({ size, ...props }: InputProps) {
   return (
     <AriaInput
       {...props}
-      className={composeTailwindRenderProps(props.className, inputStyles)}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        inputStyles({ ...renderProps, size, className }),
+      )}
     />
   );
 }
@@ -99,7 +142,9 @@ export function InputTextArea(props: TextAreaProps) {
   return (
     <AriaTextArea
       {...props}
-      className={composeTailwindRenderProps(props.className, inputStyles)}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        inputStyles({ ...renderProps, className }),
+      )}
     />
   );
 }

src/components/common/Link/Link.tsx

@@ -9,7 +9,7 @@ import { type ButtonProps, buttonStyles } from "../Button";
 
 export interface LinkProps extends AriaLinkProps {
   variant?: "primary" | "secondary";
-  button?: ButtonProps;
+  button?: Omit<ButtonProps, "children" | "icon">;
 }
 
 const linkStyles = tv({

src/components/common/Select/Select.tsx

@@ -1,16 +1,15 @@
-import { composeTailwindRenderProps, focusRing } from "@/components/utils";
+import { composeTailwindRenderProps } from "@/components/utils";
 import { ChevronDown } from "lucide-react";
 import type React from "react";
 import {
   Select as AriaSelect,
   type SelectProps as AriaSelectProps,
-  Button,
   ListBox,
   type ListBoxItemProps,
   SelectValue,
   type ValidationResult,
 } from "react-aria-components";
-import { tv } from "tailwind-variants";
+import { Button } from "../Button";
 import { FieldDescription, FieldError, Label } from "../Field";
 import {
   DropdownItem,
@@ -19,24 +18,18 @@ import {
 } from "../ListBox";
 import { Popover } from "../Popover";
 
-const styles = tv({
-  extend: focusRing,
-  base: "flex items-center text-start gap-4 w-full cursor-pointer border border-black/10 dark:border-white/10 rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-ui",
-  variants: {
-    isDisabled: {
-      false:
-        "hover:bg-gray-1 pressed:bg-gray-2 dark:hover:bg-graydark-1 dark:pressed:bg-graydark-2 group-invalid:border-red- forced-colors:group-invalid:border-[Mark]",
-      true: "opacity-50 forced-colors:text-[GrayText] forced-colors:border-[GrayText] cursor-default",
-    },
-  },
-});
+// const selectStyles = tv({
+//   extend: focusRing,
+//   base: "flex items-center text-start gap-4 w-full cursor-pointer min-w-[150px] transition",
+// });
 
 export interface SelectProps<T extends object>
   extends Omit<AriaSelectProps<T>, "children"> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
   items?: Iterable<T>;
+  size?: "medium" | "large";
   children: React.ReactNode | ((item: T) => React.ReactNode);
 }
 
@@ -46,6 +39,7 @@ export function Select<T extends object>({
   errorMessage,
   children,
   items,
+  size = "medium",
   ...props
 }: SelectProps<T>) {
   return (
@@ -56,12 +50,12 @@ export function Select<T extends object>({
         "group flex flex-col gap-1.5",
       )}
     >
-      {label && <Label>{label}</Label>}
-      <Button className={styles}>
+      {label && <Label size={size}>{label}</Label>}
+      <Button className="text-left" size={size}>
         <SelectValue className="flex-1 text-gray-normal placeholder-shown:text-gray-9 dark:placeholder-shown:text-graydark-9" />
         <ChevronDown
           aria-hidden
-          className="w-4 h-4 text-gray-dim forced-colors:text-[ButtonText] group-disabled:opacity-50 forced-colors:group-disabled:text-[GrayText]"
+          className="w-4 h-4 text-gray-dim forced-colors:text-[ButtonText] group-disabled:opacity-50 forced-colors:group-disabled:text-[GrayText] shrink-0"
         />
       </Button>
       {description && <FieldDescription>{description}</FieldDescription>}