@gradeui/ui 0.1.1 → 0.3.0

package/README.md

@@ -46,7 +46,7 @@ export default {
 
 ## Theme engine
 
-`@gradeui/ui` ships an OKLCH-based theme generator. Wrap your app in `GradeThemeProvider` (currently still named `RampThemeProvider` pending rename — see upstream TODO) to get runtime theme switching.
+`@gradeui/ui` ships an OKLCH-based theme generator. Wrap your app in `GradeThemeProvider` (currently still named `GradeThemeProvider` pending rename — see upstream TODO) to get runtime theme switching.
 
 ## License
 

package/dist/index.d.mts

@@ -2,10 +2,12 @@ import * as React$1 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -23,13 +25,13 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "info" | "highlight" | "destructive" | "default" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "info" | "highlight" | "secondary" | "destructive" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -37,14 +39,19 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
-    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+}): React$1.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): React$1.JSX.Element;
+
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -54,6 +61,71 @@ declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttribut
 
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * DatePicker + DateRangePicker
+ *
+ * Sealed complex components built on top of the Popover + Button + Calendar
+ * primitives. Consumers get a single import with a `value` / `onChange`
+ * contract — no need to know about Popover, DayPicker, or date-fns.
+ *
+ * The primitives remain exported from the barrel so anyone who needs a
+ * different trigger, different positioning, or a custom layout can still
+ * compose their own — see `apps/docs/app/components/date-picker/page.tsx`
+ * for the hand-assembled recipe.
+ *
+ * API:
+ *   <DatePicker value={date} onChange={setDate} />
+ *   <DatePicker value={date} onChange={setDate} format="PP" placeholder="..." />
+ *   <DateRangePicker value={range} onChange={setRange} numberOfMonths={2} />
+ *
+ * The `value` / `onChange` shape matches react-day-picker's `selected` /
+ * `onSelect` internally — we just rename them so consumers speak form.
+ */
+
+type PopoverAlign = "start" | "center" | "end";
+type PopoverSide = "top" | "right" | "bottom" | "left";
+interface DatePickerBaseProps {
+    /** Placeholder text shown when no date is selected. */
+    placeholder?: string;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Classes on the outer trigger button. */
+    className?: string;
+    /** Classes forwarded to PopoverContent. */
+    contentClassName?: string;
+    /** Forwarded to PopoverContent — which edge to align to. Defaults to "start". */
+    align?: PopoverAlign;
+    /** Forwarded to PopoverContent — which side of the trigger to render on. */
+    side?: PopoverSide;
+    /**
+     * date-fns format string for the trigger label. Defaults to "PPP"
+     * (e.g. "April 19th, 2026"). Pass "PP" for shorter "Apr 19, 2026".
+     */
+    format?: string;
+    /** Forwarded to the underlying `react-day-picker` Calendar. */
+    captionLayout?: React$1.ComponentProps<typeof Calendar>["captionLayout"];
+    /** Icon shown in the trigger. Defaults to lucide's CalendarIcon. */
+    icon?: React$1.ReactNode;
+    /** Accessible label for screen readers when no date is selected. */
+    "aria-label"?: string;
+}
+interface DatePickerProps extends DatePickerBaseProps {
+    /** The selected date, or undefined when empty. */
+    value?: Date;
+    /** Called when the user selects or clears the date. */
+    onChange?: (date: Date | undefined) => void;
+}
+interface DateRangePickerProps extends DatePickerBaseProps {
+    /** The selected range, or undefined when empty. */
+    value?: DateRange;
+    /** Called when the user selects or clears the range. */
+    onChange?: (range: DateRange | undefined) => void;
+    /** Number of months to show side-by-side. Defaults to 2. */
+    numberOfMonths?: number;
+}
+declare function DatePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, "aria-label": ariaLabel, }: DatePickerProps): React$1.JSX.Element;
+declare function DateRangePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, numberOfMonths, "aria-label": ariaLabel, }: DateRangePickerProps): React$1.JSX.Element;
+
 declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
@@ -100,6 +172,11 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTML
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -127,7 +204,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -540,6 +617,16 @@ interface GeneratedColorsMode {
     warning: OKLCHTriplet;
     info: OKLCHTriplet;
     highlight: OKLCHTriplet;
+    destructiveSoft: OKLCHTriplet;
+    destructiveDeep: OKLCHTriplet;
+    successSoft: OKLCHTriplet;
+    successDeep: OKLCHTriplet;
+    warningSoft: OKLCHTriplet;
+    warningDeep: OKLCHTriplet;
+    infoSoft: OKLCHTriplet;
+    infoDeep: OKLCHTriplet;
+    highlightSoft: OKLCHTriplet;
+    highlightDeep: OKLCHTriplet;
 }
 /** Concrete resolved CSS values for the typography dimension. */
 interface GeneratedTypography {
@@ -678,7 +765,7 @@ declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
  * Built-in ThemeInputs. Every theme — built-in or user-built — is a
  * ThemeInput. Built-ins are just curated ones we ship as starting points.
  *
- * "Calm" is the canonical Ramp DS look: warm neutrals, terracotta primary,
+ * "Calm" is the canonical Grade DS look: warm neutrals, terracotta primary,
  * serif display + body, roomier spacing, rounded corners, pill buttons,
  * subtle shadows. "Energy" is a bolder alternate — teal primary, Geist
  * sans, tighter feel.
@@ -687,7 +774,7 @@ declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
  * and add it to the registry.
  */
 /**
- * Calm — the canonical Ramp DS theme.
+ * Calm — the canonical Grade DS theme.
  *
  * Warm neutral tint (~40° amber), terracotta primary (~20°), amber accent.
  * Serif display and body (Fraunces with its full variable weight range),
@@ -755,8 +842,8 @@ declare const ALL_MODES: ModeName[];
  * NOTE: this string is embedded directly into the <head> via
  * dangerouslySetInnerHTML. Keep it self-contained and dependency-free.
  */
-declare const RAMP_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('ramp-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('ramp-theme');\n    if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n  } catch(e) {}\n})();\n";
-type RampThemeContextValue = {
+declare const GRADE_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('ramp-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('ramp-theme');\n    if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n  } catch(e) {}\n})();\n";
+type GradeThemeContextValue = {
     /** The currently active theme object. */
     theme: GeneratedTheme;
     /** The active theme's id. */
@@ -779,46 +866,46 @@ type RampThemeContextValue = {
     /** Refresh the themes list (call after external user-theme mutations). */
     refresh: () => void;
 };
-interface RampThemeProviderProps {
+interface GradeThemeProviderProps {
     children: React$1.ReactNode;
     defaultTheme?: string;
     defaultMode?: ModeName;
 }
-declare function RampThemeProvider({ children, defaultTheme, defaultMode, }: RampThemeProviderProps): React$1.JSX.Element;
-/** Read the active theme + mode. Must be used inside <RampThemeProvider>. */
-declare function useRampTheme(): RampThemeContextValue;
+declare function GradeThemeProvider({ children, defaultTheme, defaultMode, }: GradeThemeProviderProps): React$1.JSX.Element;
+/** Read the active theme + mode. Must be used inside <GradeThemeProvider>. */
+declare function useGradeTheme(): GradeThemeContextValue;
 /** Safe variant — returns null outside a provider instead of throwing. */
-declare function useMaybeRampTheme(): RampThemeContextValue | null;
+declare function useMaybeGradeTheme(): GradeThemeContextValue | null;
 
 /**
  * Theme switcher — iterates every registered theme (built-in + user) and
  * lets you pick one. User themes get a delete button on hover.
  *
- * Renders nothing when no <RampThemeProvider> is mounted, so it's safe to
+ * Renders nothing when no <GradeThemeProvider> is mounted, so it's safe to
  * drop into any layout.
  */
-declare function RampThemeSwitcher({ className }: {
+declare function GradeThemeSwitcher({ className }: {
     className?: string;
 }): React$1.JSX.Element | null;
 
 /**
  * 4-way mode switcher. Segmented control: super-light / light / dark / super-dark.
  *
- * Renders nothing without a RampThemeProvider. Default layout is a compact
+ * Renders nothing without a GradeThemeProvider. Default layout is a compact
  * 4-icon row suitable for a header; the `variant="labeled"` form adds
  * text labels for settings pages.
  */
-interface RampModeSwitcherProps {
+interface GradeModeSwitcherProps {
     className?: string;
     variant?: "icons" | "labeled";
 }
-declare function RampModeSwitcher({ className, variant }: RampModeSwitcherProps): React$1.JSX.Element | null;
+declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProps): React$1.JSX.Element | null;
 
 /**
  * Binary light/dark toggle — flips between `light` and `dark` modes.
  * For the full 4-way picker (including super-light / super-dark), use
- * <RampModeSwitcher /> instead.
+ * <GradeModeSwitcher /> instead.
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BreadcrumbItem, Button, type ButtonShape, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, type GeneratedTheme, Input, type InputStyle, Label, LenisProvider, type ModeName, type OKLCHTriplet, Progress, RAMP_PRE_HYDRATION_SCRIPT, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RampModeSwitcher, RampThemeProvider, type RampThemeProviderProps, RampThemeSwitcher, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, saveUserTheme, themeToCSSVars, useMaybeRampTheme, useRampTheme };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type ModeName, type OKLCHTriplet, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, saveUserTheme, themeToCSSVars, useGradeTheme, useMaybeGradeTheme };

package/dist/index.d.ts

@@ -2,10 +2,12 @@ import * as React$1 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -23,13 +25,13 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "info" | "highlight" | "destructive" | "default" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "warning" | "info" | "highlight" | "secondary" | "destructive" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -37,14 +39,19 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
-    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+}): React$1.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): React$1.JSX.Element;
+
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -54,6 +61,71 @@ declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttribut
 
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * DatePicker + DateRangePicker
+ *
+ * Sealed complex components built on top of the Popover + Button + Calendar
+ * primitives. Consumers get a single import with a `value` / `onChange`
+ * contract — no need to know about Popover, DayPicker, or date-fns.
+ *
+ * The primitives remain exported from the barrel so anyone who needs a
+ * different trigger, different positioning, or a custom layout can still
+ * compose their own — see `apps/docs/app/components/date-picker/page.tsx`
+ * for the hand-assembled recipe.
+ *
+ * API:
+ *   <DatePicker value={date} onChange={setDate} />
+ *   <DatePicker value={date} onChange={setDate} format="PP" placeholder="..." />
+ *   <DateRangePicker value={range} onChange={setRange} numberOfMonths={2} />
+ *
+ * The `value` / `onChange` shape matches react-day-picker's `selected` /
+ * `onSelect` internally — we just rename them so consumers speak form.
+ */
+
+type PopoverAlign = "start" | "center" | "end";
+type PopoverSide = "top" | "right" | "bottom" | "left";
+interface DatePickerBaseProps {
+    /** Placeholder text shown when no date is selected. */
+    placeholder?: string;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Classes on the outer trigger button. */
+    className?: string;
+    /** Classes forwarded to PopoverContent. */
+    contentClassName?: string;
+    /** Forwarded to PopoverContent — which edge to align to. Defaults to "start". */
+    align?: PopoverAlign;
+    /** Forwarded to PopoverContent — which side of the trigger to render on. */
+    side?: PopoverSide;
+    /**
+     * date-fns format string for the trigger label. Defaults to "PPP"
+     * (e.g. "April 19th, 2026"). Pass "PP" for shorter "Apr 19, 2026".
+     */
+    format?: string;
+    /** Forwarded to the underlying `react-day-picker` Calendar. */
+    captionLayout?: React$1.ComponentProps<typeof Calendar>["captionLayout"];
+    /** Icon shown in the trigger. Defaults to lucide's CalendarIcon. */
+    icon?: React$1.ReactNode;
+    /** Accessible label for screen readers when no date is selected. */
+    "aria-label"?: string;
+}
+interface DatePickerProps extends DatePickerBaseProps {
+    /** The selected date, or undefined when empty. */
+    value?: Date;
+    /** Called when the user selects or clears the date. */
+    onChange?: (date: Date | undefined) => void;
+}
+interface DateRangePickerProps extends DatePickerBaseProps {
+    /** The selected range, or undefined when empty. */
+    value?: DateRange;
+    /** Called when the user selects or clears the range. */
+    onChange?: (range: DateRange | undefined) => void;
+    /** Number of months to show side-by-side. Defaults to 2. */
+    numberOfMonths?: number;
+}
+declare function DatePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, "aria-label": ariaLabel, }: DatePickerProps): React$1.JSX.Element;
+declare function DateRangePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, numberOfMonths, "aria-label": ariaLabel, }: DateRangePickerProps): React$1.JSX.Element;
+
 declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
@@ -100,6 +172,11 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTML
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -127,7 +204,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -540,6 +617,16 @@ interface GeneratedColorsMode {
     warning: OKLCHTriplet;
     info: OKLCHTriplet;
     highlight: OKLCHTriplet;
+    destructiveSoft: OKLCHTriplet;
+    destructiveDeep: OKLCHTriplet;
+    successSoft: OKLCHTriplet;
+    successDeep: OKLCHTriplet;
+    warningSoft: OKLCHTriplet;
+    warningDeep: OKLCHTriplet;
+    infoSoft: OKLCHTriplet;
+    infoDeep: OKLCHTriplet;
+    highlightSoft: OKLCHTriplet;
+    highlightDeep: OKLCHTriplet;
 }
 /** Concrete resolved CSS values for the typography dimension. */
 interface GeneratedTypography {
@@ -678,7 +765,7 @@ declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
  * Built-in ThemeInputs. Every theme — built-in or user-built — is a
  * ThemeInput. Built-ins are just curated ones we ship as starting points.
  *
- * "Calm" is the canonical Ramp DS look: warm neutrals, terracotta primary,
+ * "Calm" is the canonical Grade DS look: warm neutrals, terracotta primary,
  * serif display + body, roomier spacing, rounded corners, pill buttons,
  * subtle shadows. "Energy" is a bolder alternate — teal primary, Geist
  * sans, tighter feel.
@@ -687,7 +774,7 @@ declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
  * and add it to the registry.
  */
 /**
- * Calm — the canonical Ramp DS theme.
+ * Calm — the canonical Grade DS theme.
  *
  * Warm neutral tint (~40° amber), terracotta primary (~20°), amber accent.
  * Serif display and body (Fraunces with its full variable weight range),
@@ -755,8 +842,8 @@ declare const ALL_MODES: ModeName[];
  * NOTE: this string is embedded directly into the <head> via
  * dangerouslySetInnerHTML. Keep it self-contained and dependency-free.
  */
-declare const RAMP_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('ramp-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('ramp-theme');\n    if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n  } catch(e) {}\n})();\n";
-type RampThemeContextValue = {
+declare const GRADE_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('ramp-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('ramp-theme');\n    if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n  } catch(e) {}\n})();\n";
+type GradeThemeContextValue = {
     /** The currently active theme object. */
     theme: GeneratedTheme;
     /** The active theme's id. */
@@ -779,46 +866,46 @@ type RampThemeContextValue = {
     /** Refresh the themes list (call after external user-theme mutations). */
     refresh: () => void;
 };
-interface RampThemeProviderProps {
+interface GradeThemeProviderProps {
     children: React$1.ReactNode;
     defaultTheme?: string;
     defaultMode?: ModeName;
 }
-declare function RampThemeProvider({ children, defaultTheme, defaultMode, }: RampThemeProviderProps): React$1.JSX.Element;
-/** Read the active theme + mode. Must be used inside <RampThemeProvider>. */
-declare function useRampTheme(): RampThemeContextValue;
+declare function GradeThemeProvider({ children, defaultTheme, defaultMode, }: GradeThemeProviderProps): React$1.JSX.Element;
+/** Read the active theme + mode. Must be used inside <GradeThemeProvider>. */
+declare function useGradeTheme(): GradeThemeContextValue;
 /** Safe variant — returns null outside a provider instead of throwing. */
-declare function useMaybeRampTheme(): RampThemeContextValue | null;
+declare function useMaybeGradeTheme(): GradeThemeContextValue | null;
 
 /**
  * Theme switcher — iterates every registered theme (built-in + user) and
  * lets you pick one. User themes get a delete button on hover.
  *
- * Renders nothing when no <RampThemeProvider> is mounted, so it's safe to
+ * Renders nothing when no <GradeThemeProvider> is mounted, so it's safe to
  * drop into any layout.
  */
-declare function RampThemeSwitcher({ className }: {
+declare function GradeThemeSwitcher({ className }: {
     className?: string;
 }): React$1.JSX.Element | null;
 
 /**
  * 4-way mode switcher. Segmented control: super-light / light / dark / super-dark.
  *
- * Renders nothing without a RampThemeProvider. Default layout is a compact
+ * Renders nothing without a GradeThemeProvider. Default layout is a compact
  * 4-icon row suitable for a header; the `variant="labeled"` form adds
  * text labels for settings pages.
  */
-interface RampModeSwitcherProps {
+interface GradeModeSwitcherProps {
     className?: string;
     variant?: "icons" | "labeled";
 }
-declare function RampModeSwitcher({ className, variant }: RampModeSwitcherProps): React$1.JSX.Element | null;
+declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProps): React$1.JSX.Element | null;
 
 /**
  * Binary light/dark toggle — flips between `light` and `dark` modes.
  * For the full 4-way picker (including super-light / super-dark), use
- * <RampModeSwitcher /> instead.
+ * <GradeModeSwitcher /> instead.
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BreadcrumbItem, Button, type ButtonShape, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, type GeneratedTheme, Input, type InputStyle, Label, LenisProvider, type ModeName, type OKLCHTriplet, Progress, RAMP_PRE_HYDRATION_SCRIPT, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RampModeSwitcher, RampThemeProvider, type RampThemeProviderProps, RampThemeSwitcher, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, saveUserTheme, themeToCSSVars, useMaybeRampTheme, useRampTheme };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type ModeName, type OKLCHTriplet, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, saveUserTheme, themeToCSSVars, useGradeTheme, useMaybeGradeTheme };