shadcn-cal-com

To start the project in development mode, use your preferred package manager to run the dev script. Once running, the application will be available at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

The cn utility function is used to conditionally merge CSS class names. It combines the functionality of clsx (for conditional logic) and tailwind-merge (to resolve Tailwind class conflicts). This is the standard way to apply classes to components in this project to ensure that late-arriving utility classes correctly override previous ones.

import { cn } from '@/lib/utils';

// Example usage with conditional classes
const className = cn("base-class", isActive && "active-class", "extra-class");

The Calendar component provides a client-side interface for date selection, utilizing @react-aria/calendar and @react-stately/calendar for state management. It automatically handles locale-aware calendar logic and provides a header for navigation (previous/next month) and a grid for date selection.

To use it, pass CalendarProps<DateValue> which includes the initial date value and other standard calendar configuration options.

import { Calendar } from "./components/calendar";
import { today, getLocalTimeZone } from "@internationalized/date";

export default function MyPage() {
  return (
    <Calendar 
      aria-label="Date selection" 
      defaultValue={today(getLocalTimeZone())} 
    />
  );
}

Use getPhoneData(phone: string) to extract detailed metadata from a raw phone number string. It uses libphonenumber-js internally to provide information such as validity, country codes, and international formatting. This is useful for validating user input or displaying formatted numbers.

import { getPhoneData } from "@/components/phone-input";

const data = getPhoneData("+14155552671");
console.log(data.isValid); // true
console.log(data.countryCode); // "US"
console.log(data.internationalNumber); // "+1 415 555 2671"

The generateScale function creates an object mapping CSS variable names to their corresponding values for a 12-step scale. This is typically used for generating design tokens like spacing, sizing, or opacity scales.

Parameters

• name: The base name of the CSS variable (e.g., spacing).
• isOverlay: A boolean flag.
  • If false (default), it generates both standard tokens (e.g., 1: var(--name-1)) and 'a' tokens (e.g., a1: var(--name-a1)).
  • If true, it only generates the 'a' tokens (e.g., a1: var(--name-a1)).

import { generateScale } from '@/lib/utils';

// Generates a standard scale with 12 steps
const scale = generateScale({ name: 'spacing' });

/* 
Output structure example:
{
  "1": "var(--spacing-1)",
  "a1": "var(--spacing-a1)",
  "2": "var(--spacing-2)",
  "a2": "var(--spacing-a2)",
  ...
}
*/

The PhoneData type describes the structure returned by getPhoneData. It includes:

• phoneNumber: The E164 formatted number.
• countryCode: The ISO 3166-1 alpha-2 country code.
• countryCallingCode: The numeric calling code (e.g., "1").
• carrierCode: The carrier code if available.
• nationalNumber: The number without the country code.
• internationalNumber: The formatted international string.
• possibleCountries: A comma-separated string of possible country matches.
• isValid: Boolean indicating if the number is valid.
• isPossible: Boolean indicating if the number is possible.
• uri: The URI representation of the number.
• type: The type of number (e.g., MOBILE, FIXED_LINE).