"use client"
import { useState } from "react"
import {
IconCircle,
IconCircleCheckFilled,
IconInfoCircle,
IconMinus,
IconPlus,
IconUsers,
IconWorld,
} from "@tabler/icons-react"
import { addDays, format } from "date-fns"
import { REGEXP_ONLY_DIGITS } from "input-otp"
import {
CalendarIcon,
ClockIcon,
DownloadIcon,
FileTextIcon,
FolderIcon,
MonitorIcon,
} from "lucide-react"
import { type DateRange } from "react-day-picker"
import { cn } from "@/lib/utils"
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/registry/new-york-v4/ui/avatar"
import { Badge } from "@/registry/new-york-v4/ui/badge"
import { Button } from "@/registry/new-york-v4/ui/button"
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
import { Calendar } from "@/registry/new-york-v4/ui/calendar"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldTitle,
} from "@/registry/new-york-v4/ui/field"
import { Input } from "@/registry/new-york-v4/ui/input"
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/registry/new-york-v4/ui/input-group"
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/registry/new-york-v4/ui/input-otp"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/registry/new-york-v4/ui/popover"
import {
RadioGroup,
RadioGroupItem,
} from "@/registry/new-york-v4/ui/radio-group"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/registry/new-york-v4/ui/select"
import { Separator } from "@/registry/new-york-v4/ui/separator"
import { Slider } from "@/registry/new-york-v4/ui/slider"
import { Switch } from "@/registry/new-york-v4/ui/switch"
import { Textarea } from "@/registry/new-york-v4/ui/textarea"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/registry/new-york-v4/ui/toggle-group"
export function FieldDemo() {
return (
)
}
function BasicFields() {
return (
)
}
function SubscriptionPlan() {
return (
)
}
function PrivacySettings() {
return (
Privacy Settings
Choose who can see your profile and what they can see.
Everyone Default
Anyone can see your profile.
Followers
Visible to your followers and connections.
Custom
Choose who can see your profile.
Privacy Settings
Choose who can see your profile and what they can see.
Everyone
Anyone can see your profile.
Followers
Visible to your followers and connections.
Custom
Choose who can see your profile.
Privacy Settings
Choose who can see your profile and what they can see.
Everyone
Anyone can see your profile.
Followers
Visible to your followers and connections.
Custom
Choose who can see your profile.
)
}
function HearAboutUs() {
return (
)
}
function ClusterConfig() {
return (
Buy your cluster
Need a custom setup? Contact us.
)
}
function ShippingMethods() {
return (
)
}
function SignupForm() {
return (
Create an account
Enter your information below to create your account
)
}
function LoginForm() {
return (
Sign in to your account
Enter your credentials to access your account
)
}
function FinderPreferencesForm() {
return (
Finder Preferences
Configure what items appear on your desktop
)
}
function ContactForm() {
return (
Contact Us
Get in touch with our team for any questions or support
)
}
function FeedbackForm() {
const [rating, setRating] = useState([5])
return (
Feedback Form
Help us improve by sharing your experience
)
}
export function JobApplicationForm() {
return (
Job ApplicationApply for a position at our company
)
}
export function NewsletterForm() {
return (
Newsletter Signup
Stay updated with our latest news and updates
)
}
export function PaymentForm() {
return (
Payment Information
Enter your payment details to complete your purchase
)
}
export function FormInputDemo() {
return (
Input FieldsDifferent input field configurationsBasic Input
Input with Description
Choose a unique username for your account.
Email Address
We'll never share your email with anyone.
Required Field *This field must be filled out.
Disabled Input
This field is currently disabled.
)
}
export function FormTextareaDemo() {
return (
Textarea Fields
Different textarea field configurations
Basic Textarea
Comments
Maximum 500 characters allowed.Bio
Tell us about yourself in a few sentences.
)
}
export function FormSelectDemo() {
return (
Select FieldsDifferent select field configurationsBasic SelectCountry
Select the country where you currently reside.
Timezone
Choose your local timezone for accurate scheduling.
)
}
export function FormRadioDemo() {
return (
Radio FieldsDifferent radio field configurations
)
}
export function FormCheckboxDemo() {
return (
Checkbox Fields
Different checkbox field configurations
I agree to the terms and conditions
Subscribe to newsletter
Receive weekly updates about new features and promotions.
)
}
export function FormSliderDemo() {
const [volume, setVolume] = useState([50])
const [brightness, setBrightness] = useState([75])
return (
Slider FieldsDifferent slider field configurationsVolumeScreen Brightness
Current brightness: {brightness[0]}%
Video Quality
Higher quality uses more bandwidth.
)
}
export function FormSwitchDemo() {
const [notifications, setNotifications] = useState(false)
const [marketing, setMarketing] = useState(true)
return (
Switch FieldsDifferent switch field configurationsAirplane Mode
Turn on airplane mode to disable all connections.
Push Notifications
Receive notifications about updates and new features.
Marketing Emails
Receive emails about new products, features, and more.
Auto-save
Automatically save your work every 5 minutes.
Privacy Settings
Manage your privacy preferences.
Make profile visible to others
Show email on profile
Allow search engines to index profile
Disabled Feature
This feature is currently unavailable.
)
}
export function FormToggleGroupDemo() {
return (
Toggle Group FieldsDifferent toggle group configurationsView Mode
List
Grid
Cards
Status FilterActivePendingCompletedFilter by multiple statuses.Subscription Plan
Select the subscription plan that you want to subscribe to.
BasicProEnterpriseDisabled Toggle GroupOption 1Option 2Option 3This toggle group is disabled.
)
}
export function FormInputTypesDemo() {
return (
Text Input TypesText-based HTML input variationsTextStandard text input field.EmailEmail address with validation.Password
Password field with hidden text.
PhoneTelephone number input.URLWebsite URL with validation.SearchSearch field with clear button.NumberNumeric input (0-100).
)
}
export function FormSpecialInputTypesDemo() {
return (
Special Input Types
Date, time, file and other special inputs
DateNative date picker.Time
Time selection (24-hour format).
Date & TimeCombined date and time picker.MonthMonth and year selector.WeekWeek number selector.File UploadUpload images or PDF files.Multiple FilesUpload multiple image files.
)
}
export function FormOTPDemo() {
const [value, setValue] = useState("")
const [pinValue, setPinValue] = useState("")
return (
OTP Input FieldsDifferent OTP input configurationsVerification CodeEnter OTP
Enter the 6-digit code sent to your email.
Two-Factor Authentication
Enter the code from your authenticator app.
PIN Code
Enter your 4-digit PIN (numbers only).
License Key
Enter your 8-character license key.
Security Code
Enter the security code to continue.
)
}
export function FormDatePickerDemo() {
const [date, setDate] = useState()
const [birthDate, setBirthDate] = useState()
const [appointmentDate, setAppointmentDate] = useState()
const [dateRange, setDateRange] = useState()
const [vacationDates, setVacationDates] = useState({
from: new Date(),
to: addDays(new Date(), 7),
})
return (
Date Picker FieldsDifferent date picker configurationsSelect DateDate of Birth
We use this to calculate your age and provide age-appropriate
content.
Appointment Date
Select a date for your appointment (weekdays only).
date < new Date() ||
date.getDay() === 0 ||
date.getDay() === 6
}
/>
Date Range
Select start and end dates for your report.
Vacation Dates
Choose your vacation period. Quick presets available.
Event Date (Disabled)
This field is currently disabled.
)
}
export function FormFieldSetDemo() {
return (
FieldSet & FieldLegendDifferent fieldset configurations
)
}
export function FormFieldSeparatorDemo() {
return (
Field Separator
Different ways to use the FieldSeparator component
Section 1
This is the first section of the form.
Section 2
A simple separator line appears above this section.
Or continue withAdditional Options
Enable additional features
Subscribe to updates
Final SectionOr choose a different path
Option Path 1
Option Path 2
Account Settings
Enable Notifications
Receive updates about your account activity.
Make Profile Public
Allow others to view your profile information.
)
}
export function FormFieldGroupOutlineDemo() {
return (
)
}
export function ProfileSettingsForm() {
return (
Profile Settings
Update your profile information and preferences
)
}
export function SurveyForm() {
return (
Customer Survey
Help us understand your needs better (5 minutes)
)
}
export function ComplexFormDemo() {
return (
Job Application Form
Complete all sections to submit your application
)
}
export function ComplexFormInvalidDemo() {
const [startDate, setStartDate] = useState()
const [experience, setExperience] = useState([3])
const [workType, setWorkType] = useState("hybrid")
return (
)
}
export function FormOrientationDemo() {
return (
Field Orientation Examples
Demonstrating vertical, horizontal, and responsive orientations
)
}
function CheckoutForm() {
return (
Checkout
Complete your order by filling in the details below
)
}