@raydenui/ui 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/index.cjs +4837 -2454
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +180 -2
- package/dist/index.d.ts +180 -2
- package/dist/index.js +4831 -2456
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +28 -3
package/dist/index.d.cts
CHANGED
|
@@ -2,6 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { SVGAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { ClassValue } from 'clsx';
|
|
5
|
+
import { FieldValues, FieldPath, UseFormReturn, UseFormRegisterReturn } from 'react-hook-form';
|
|
5
6
|
|
|
6
7
|
type IconVariant = "outline" | "solid";
|
|
7
8
|
type IconName = "3d" | "AI-stars" | "AR" | "BTC" | "ETH" | "NFT" | "NFT-add" | "NFT-profile" | "NFT-remove" | "QR-code" | "VR-goggles" | "airplane" | "airpod" | "alarm-clock" | "align-center" | "align-justify" | "align-left" | "align-right" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-expand" | "arrow-left" | "arrow-right" | "arrow-shrink" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-split" | "at" | "backward" | "badge" | "bag" | "ball" | "bank" | "bar-chart-h" | "bar-chart-v" | "battery" | "battery-charging" | "battery-empty" | "bed" | "beizer-curve" | "bell" | "bell-slash" | "bicycle" | "bin" | "bluetooth" | "bold" | "book" | "book-open" | "bookmark" | "bookmark-add" | "bookmarks" | "books" | "bot" | "box" | "box-1" | "branch" | "brush" | "bug" | "building-1" | "building-2" | "building-3" | "building-4" | "building-5" | "building-6" | "bulb" | "bulb-slash" | "bus" | "calendar" | "calendar-add" | "calendar-alt" | "calendar-cross" | "calendar-remove" | "calendar-tick" | "call" | "call-add" | "call-cross" | "call-incoming" | "call-outgoing" | "call-remove" | "call-ringing" | "camera" | "camera-slash" | "candles-h" | "candles-v" | "car" | "card" | "card-add" | "card-cross" | "card-fund" | "card-in" | "card-out" | "card-remove" | "card-tick" | "card-withdraw" | "cart" | "cart-add" | "cart-check" | "cart-cross" | "cart-minus" | "chart" | "chart-down" | "chart-up" | "chat" | "chat-alt" | "chats" | "check" | "check-circle" | "checkbox" | "checkbox-checked" | "chevron-down" | "chevron-h" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-v" | "clipboard" | "clock" | "cloud" | "cloud-1" | "cloud-download" | "cloud-info" | "cloud-lightning" | "cloud-rain" | "cloud-slash" | "cloud-snowy" | "cloud-upload" | "clouds" | "code" | "code-2" | "coin-stack" | "coin-swap" | "coins" | "coins-alt" | "color-picker" | "column" | "compass" | "conical-flask" | "copy" | "corner" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "crop" | "cup" | "cursor" | "data" | "devices" | "dislike" | "division" | "dollar" | "dots-h" | "dots-h-circle" | "dots-v" | "dots-v-circle" | "download" | "elements" | "emoji" | "emoji-add" | "euro" | "expand" | "eye" | "eye-slash" | "face-id" | "feather" | "feather-AI" | "feather-add" | "file" | "file-alt" | "file-cloud" | "file-code" | "file-download" | "file-upload" | "filter" | "filter-alt" | "fingerprint" | "first-aid" | "flag" | "flower" | "folder" | "folder-add" | "folder-cloud" | "folder-cross" | "folder-download" | "folder-lock" | "folder-move" | "folder-shield" | "folder-upload" | "folder-user" | "fork" | "forward" | "game-pad" | "gear-AI" | "gem" | "gift" | "globe" | "globe-alt" | "gps" | "graduating cap" | "grid" | "grid-2" | "hashtag" | "heading" | "headphones" | "headset" | "health-plus" | "heart" | "heart-beat" | "heart-beat-wave" | "history" | "home" | "home-alt" | "image" | "image-add" | "image-check" | "image-circle" | "image-cross" | "image-remove" | "info-circle" | "info-hexagon" | "info-triangle" | "italics" | "key" | "keyboard" | "lamp" | "laptop" | "layer" | "lifebuoy" | "lightning" | "lightning-off" | "like" | "line-height" | "link" | "link-detach" | "list" | "list-add" | "lock" | "lock-open" | "loudspeaker" | "magic-wand" | "mail" | "mail-add" | "mail-check" | "mail-cross" | "mail-remove" | "map" | "map-alt" | "map-marker" | "media" | "merge" | "message" | "message-alt" | "messages" | "microphone" | "microphone-slash" | "minus" | "minus-circle" | "mobile" | "money" | "money-1" | "money-2" | "moon" | "moon-cloud" | "moon-stars" | "mouse" | "move" | "multiply" | "multiply-circle" | "music" | "music-AI" | "music-note" | "naira" | "navigation" | "navigation-alt" | "newspaper" | "next" | "paint-brush" | "paint-bucket" | "palette" | "paper-clip" | "paragraph-spacing" | "pause" | "pc" | "pc-lock" | "pc-speaker" | "pc-user" | "pencil" | "pencil-edit" | "pie-chart" | "pin" | "pin-alt" | "plant" | "plant-2" | "play" | "playlist" | "plus" | "plus-circle" | "pounds" | "power" | "previous" | "printer" | "processor" | "pull-request" | "question-circle" | "quote" | "radio-button" | "radio-selected" | "receipt" | "redo" | "refresh" | "repeat" | "repeat-once" | "road-sign" | "rocket" | "rocket-alt" | "rotate-left" | "rotate-right" | "route" | "row" | "save" | "scan" | "scissor" | "screenshot" | "search" | "send" | "send-AI" | "send-alt" | "server" | "server-alt" | "settings" | "settings-1" | "settings-2" | "share" | "share-alt" | "shield" | "shield-cross" | "shield-tick" | "ship" | "shower" | "shrink" | "shrink-alt" | "shuffle" | "sign-in" | "sign-out" | "signal" | "signal-off" | "sim" | "snooze" | "snowflake" | "sofa" | "speaker" | "star" | "stars" | "stop" | "stopwatch" | "store" | "strikethrough" | "subscript" | "suitcase" | "sun" | "sun-cloud" | "superscript" | "support" | "switch-diagonal" | "switch-horizontal" | "switch-vertical" | "tablet" | "target" | "taxi" | "terminal" | "text" | "thermometer" | "ticket" | "tissue" | "train" | "trophy" | "truck" | "tv" | "underline" | "undo" | "upload" | "user" | "user-add" | "user-circle" | "user-cross" | "user-group" | "user-heart" | "user-remove" | "user-tick" | "users" | "verified" | "video" | "video-slash" | "voice-note" | "volume" | "volume-low" | "volume-mute" | "volume-slash" | "wallet" | "wallet-add" | "wallet-check" | "wallet-cross" | "wallet-fund" | "wallet-remove" | "wallet-withdraw" | "water-drop" | "wifi" | "wristwatch" | "yen" | "zoom-in" | "zoom-out";
|
|
@@ -86,7 +87,7 @@ interface TabProps {
|
|
|
86
87
|
children: ReactNode;
|
|
87
88
|
className?: string;
|
|
88
89
|
}
|
|
89
|
-
declare function Tab({ value, icon, badge, disabled, children, className
|
|
90
|
+
declare function Tab({ value, icon, badge, disabled, children, className }: TabProps): react_jsx_runtime.JSX.Element;
|
|
90
91
|
|
|
91
92
|
interface ChipProps extends HTMLAttributes<HTMLDivElement> {
|
|
92
93
|
variant?: "input" | "filter";
|
|
@@ -624,4 +625,181 @@ declare const ActivityContent: react.ForwardRefExoticComponent<ActivityContentPr
|
|
|
624
625
|
|
|
625
626
|
declare function cn(...inputs: ClassValue[]): string;
|
|
626
627
|
|
|
627
|
-
|
|
628
|
+
type Theme = "light" | "dark" | "system";
|
|
629
|
+
type ResolvedTheme = "light" | "dark";
|
|
630
|
+
interface ThemeContextValue {
|
|
631
|
+
/** Current theme setting (can be "system") */
|
|
632
|
+
theme: Theme;
|
|
633
|
+
/** Resolved theme after applying system preference */
|
|
634
|
+
resolvedTheme: ResolvedTheme;
|
|
635
|
+
/** Update the theme */
|
|
636
|
+
setTheme: (theme: Theme) => void;
|
|
637
|
+
/** Toggle between light and dark */
|
|
638
|
+
toggleTheme: () => void;
|
|
639
|
+
}
|
|
640
|
+
interface ThemeProviderProps {
|
|
641
|
+
children: ReactNode;
|
|
642
|
+
/** Default theme if no stored preference exists */
|
|
643
|
+
defaultTheme?: Theme;
|
|
644
|
+
/** Storage key for persisting theme preference */
|
|
645
|
+
storageKey?: string;
|
|
646
|
+
/** Disable system theme detection */
|
|
647
|
+
disableSystemTheme?: boolean;
|
|
648
|
+
}
|
|
649
|
+
declare function ThemeProvider({ children, defaultTheme, storageKey, disableSystemTheme, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
650
|
+
declare function useTheme(): ThemeContextValue;
|
|
651
|
+
/**
|
|
652
|
+
* Hook that returns only the resolved theme (light or dark).
|
|
653
|
+
* Useful for components that just need to know the current theme.
|
|
654
|
+
*/
|
|
655
|
+
declare function useResolvedTheme(): ResolvedTheme;
|
|
656
|
+
|
|
657
|
+
interface UseRaydenInputOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
658
|
+
form: UseFormReturn<TFieldValues>;
|
|
659
|
+
name: TName;
|
|
660
|
+
}
|
|
661
|
+
type UseRaydenInputReturn<TName extends string = string> = UseFormRegisterReturn<TName> & {
|
|
662
|
+
error?: string;
|
|
663
|
+
hasError: boolean;
|
|
664
|
+
};
|
|
665
|
+
/**
|
|
666
|
+
* Adapter hook for using Rayden Input with react-hook-form.
|
|
667
|
+
*
|
|
668
|
+
* @example
|
|
669
|
+
* ```tsx
|
|
670
|
+
* import { useForm } from "react-hook-form";
|
|
671
|
+
* import { Input, useRaydenInput } from "@raydenui/ui";
|
|
672
|
+
*
|
|
673
|
+
* function MyForm() {
|
|
674
|
+
* const form = useForm<{ email: string }>();
|
|
675
|
+
*
|
|
676
|
+
* return (
|
|
677
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
678
|
+
* <Input
|
|
679
|
+
* label="Email"
|
|
680
|
+
* placeholder="Enter your email"
|
|
681
|
+
* {...useRaydenInput({ form, name: "email" })}
|
|
682
|
+
* />
|
|
683
|
+
* </form>
|
|
684
|
+
* );
|
|
685
|
+
* }
|
|
686
|
+
* ```
|
|
687
|
+
*/
|
|
688
|
+
declare function useRaydenInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenInputOptions<TFieldValues, TName>): UseRaydenInputReturn<TName>;
|
|
689
|
+
|
|
690
|
+
interface UseRaydenSelectOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
691
|
+
form: UseFormReturn<TFieldValues>;
|
|
692
|
+
name: TName;
|
|
693
|
+
}
|
|
694
|
+
interface UseRaydenSelectReturn {
|
|
695
|
+
value: string;
|
|
696
|
+
onValueChange: (value: string) => void;
|
|
697
|
+
error?: string;
|
|
698
|
+
hasError: boolean;
|
|
699
|
+
}
|
|
700
|
+
/**
|
|
701
|
+
* Adapter hook for using Rayden Select with react-hook-form.
|
|
702
|
+
*
|
|
703
|
+
* @example
|
|
704
|
+
* ```tsx
|
|
705
|
+
* import { useForm } from "react-hook-form";
|
|
706
|
+
* import { Select, SelectOption, useRaydenSelect } from "@raydenui/ui";
|
|
707
|
+
*
|
|
708
|
+
* function MyForm() {
|
|
709
|
+
* const form = useForm<{ country: string }>();
|
|
710
|
+
*
|
|
711
|
+
* return (
|
|
712
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
713
|
+
* <Select
|
|
714
|
+
* label="Country"
|
|
715
|
+
* {...useRaydenSelect({ form, name: "country" })}
|
|
716
|
+
* >
|
|
717
|
+
* <SelectOption value="us">United States</SelectOption>
|
|
718
|
+
* <SelectOption value="uk">United Kingdom</SelectOption>
|
|
719
|
+
* </Select>
|
|
720
|
+
* </form>
|
|
721
|
+
* );
|
|
722
|
+
* }
|
|
723
|
+
* ```
|
|
724
|
+
*/
|
|
725
|
+
declare function useRaydenSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name }: UseRaydenSelectOptions<TFieldValues, TName>): UseRaydenSelectReturn;
|
|
726
|
+
|
|
727
|
+
interface UseRaydenFormControlOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
728
|
+
form: UseFormReturn<TFieldValues>;
|
|
729
|
+
name: TName;
|
|
730
|
+
}
|
|
731
|
+
type UseRaydenCheckboxReturn<TName extends string = string> = UseFormRegisterReturn<TName>;
|
|
732
|
+
type UseRaydenRadioReturn<TName extends string = string> = UseFormRegisterReturn<TName> & {
|
|
733
|
+
value: string;
|
|
734
|
+
};
|
|
735
|
+
/**
|
|
736
|
+
* Adapter hook for using Rayden Checkbox with react-hook-form.
|
|
737
|
+
*
|
|
738
|
+
* @example
|
|
739
|
+
* ```tsx
|
|
740
|
+
* import { useForm } from "react-hook-form";
|
|
741
|
+
* import { Checkbox, useRaydenCheckbox } from "@raydenui/ui";
|
|
742
|
+
*
|
|
743
|
+
* function MyForm() {
|
|
744
|
+
* const form = useForm<{ agree: boolean }>();
|
|
745
|
+
*
|
|
746
|
+
* return (
|
|
747
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
748
|
+
* <Checkbox
|
|
749
|
+
* label="I agree to the terms"
|
|
750
|
+
* {...useRaydenCheckbox({ form, name: "agree" })}
|
|
751
|
+
* />
|
|
752
|
+
* </form>
|
|
753
|
+
* );
|
|
754
|
+
* }
|
|
755
|
+
* ```
|
|
756
|
+
*/
|
|
757
|
+
declare function useRaydenCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenFormControlOptions<TFieldValues, TName>): UseRaydenCheckboxReturn<TName>;
|
|
758
|
+
/**
|
|
759
|
+
* Adapter hook for using Rayden Toggle with react-hook-form.
|
|
760
|
+
*
|
|
761
|
+
* @example
|
|
762
|
+
* ```tsx
|
|
763
|
+
* import { useForm } from "react-hook-form";
|
|
764
|
+
* import { Toggle, useRaydenToggle } from "@raydenui/ui";
|
|
765
|
+
*
|
|
766
|
+
* function MyForm() {
|
|
767
|
+
* const form = useForm<{ notifications: boolean }>();
|
|
768
|
+
*
|
|
769
|
+
* return (
|
|
770
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
771
|
+
* <Toggle
|
|
772
|
+
* label="Enable notifications"
|
|
773
|
+
* {...useRaydenToggle({ form, name: "notifications" })}
|
|
774
|
+
* />
|
|
775
|
+
* </form>
|
|
776
|
+
* );
|
|
777
|
+
* }
|
|
778
|
+
* ```
|
|
779
|
+
*/
|
|
780
|
+
declare function useRaydenToggle<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenFormControlOptions<TFieldValues, TName>): UseRaydenCheckboxReturn<TName>;
|
|
781
|
+
/**
|
|
782
|
+
* Adapter hook for using Rayden Radio with react-hook-form.
|
|
783
|
+
*
|
|
784
|
+
* @example
|
|
785
|
+
* ```tsx
|
|
786
|
+
* import { useForm } from "react-hook-form";
|
|
787
|
+
* import { Radio, useRaydenRadio } from "@raydenui/ui";
|
|
788
|
+
*
|
|
789
|
+
* function MyForm() {
|
|
790
|
+
* const form = useForm<{ plan: string }>();
|
|
791
|
+
*
|
|
792
|
+
* return (
|
|
793
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
794
|
+
* <Radio label="Basic" {...useRaydenRadio({ form, name: "plan", value: "basic" })} />
|
|
795
|
+
* <Radio label="Pro" {...useRaydenRadio({ form, name: "plan", value: "pro" })} />
|
|
796
|
+
* </form>
|
|
797
|
+
* );
|
|
798
|
+
* }
|
|
799
|
+
* ```
|
|
800
|
+
*/
|
|
801
|
+
declare function useRaydenRadio<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, value, }: UseRaydenFormControlOptions<TFieldValues, TName> & {
|
|
802
|
+
value: string;
|
|
803
|
+
}): UseRaydenRadioReturn<TName>;
|
|
804
|
+
|
|
805
|
+
export { ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, type ResolvedTheme, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, cn, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { SVGAttributes, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { ClassValue } from 'clsx';
|
|
5
|
+
import { FieldValues, FieldPath, UseFormReturn, UseFormRegisterReturn } from 'react-hook-form';
|
|
5
6
|
|
|
6
7
|
type IconVariant = "outline" | "solid";
|
|
7
8
|
type IconName = "3d" | "AI-stars" | "AR" | "BTC" | "ETH" | "NFT" | "NFT-add" | "NFT-profile" | "NFT-remove" | "QR-code" | "VR-goggles" | "airplane" | "airpod" | "alarm-clock" | "align-center" | "align-justify" | "align-left" | "align-right" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-expand" | "arrow-left" | "arrow-right" | "arrow-shrink" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-split" | "at" | "backward" | "badge" | "bag" | "ball" | "bank" | "bar-chart-h" | "bar-chart-v" | "battery" | "battery-charging" | "battery-empty" | "bed" | "beizer-curve" | "bell" | "bell-slash" | "bicycle" | "bin" | "bluetooth" | "bold" | "book" | "book-open" | "bookmark" | "bookmark-add" | "bookmarks" | "books" | "bot" | "box" | "box-1" | "branch" | "brush" | "bug" | "building-1" | "building-2" | "building-3" | "building-4" | "building-5" | "building-6" | "bulb" | "bulb-slash" | "bus" | "calendar" | "calendar-add" | "calendar-alt" | "calendar-cross" | "calendar-remove" | "calendar-tick" | "call" | "call-add" | "call-cross" | "call-incoming" | "call-outgoing" | "call-remove" | "call-ringing" | "camera" | "camera-slash" | "candles-h" | "candles-v" | "car" | "card" | "card-add" | "card-cross" | "card-fund" | "card-in" | "card-out" | "card-remove" | "card-tick" | "card-withdraw" | "cart" | "cart-add" | "cart-check" | "cart-cross" | "cart-minus" | "chart" | "chart-down" | "chart-up" | "chat" | "chat-alt" | "chats" | "check" | "check-circle" | "checkbox" | "checkbox-checked" | "chevron-down" | "chevron-h" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-v" | "clipboard" | "clock" | "cloud" | "cloud-1" | "cloud-download" | "cloud-info" | "cloud-lightning" | "cloud-rain" | "cloud-slash" | "cloud-snowy" | "cloud-upload" | "clouds" | "code" | "code-2" | "coin-stack" | "coin-swap" | "coins" | "coins-alt" | "color-picker" | "column" | "compass" | "conical-flask" | "copy" | "corner" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "crop" | "cup" | "cursor" | "data" | "devices" | "dislike" | "division" | "dollar" | "dots-h" | "dots-h-circle" | "dots-v" | "dots-v-circle" | "download" | "elements" | "emoji" | "emoji-add" | "euro" | "expand" | "eye" | "eye-slash" | "face-id" | "feather" | "feather-AI" | "feather-add" | "file" | "file-alt" | "file-cloud" | "file-code" | "file-download" | "file-upload" | "filter" | "filter-alt" | "fingerprint" | "first-aid" | "flag" | "flower" | "folder" | "folder-add" | "folder-cloud" | "folder-cross" | "folder-download" | "folder-lock" | "folder-move" | "folder-shield" | "folder-upload" | "folder-user" | "fork" | "forward" | "game-pad" | "gear-AI" | "gem" | "gift" | "globe" | "globe-alt" | "gps" | "graduating cap" | "grid" | "grid-2" | "hashtag" | "heading" | "headphones" | "headset" | "health-plus" | "heart" | "heart-beat" | "heart-beat-wave" | "history" | "home" | "home-alt" | "image" | "image-add" | "image-check" | "image-circle" | "image-cross" | "image-remove" | "info-circle" | "info-hexagon" | "info-triangle" | "italics" | "key" | "keyboard" | "lamp" | "laptop" | "layer" | "lifebuoy" | "lightning" | "lightning-off" | "like" | "line-height" | "link" | "link-detach" | "list" | "list-add" | "lock" | "lock-open" | "loudspeaker" | "magic-wand" | "mail" | "mail-add" | "mail-check" | "mail-cross" | "mail-remove" | "map" | "map-alt" | "map-marker" | "media" | "merge" | "message" | "message-alt" | "messages" | "microphone" | "microphone-slash" | "minus" | "minus-circle" | "mobile" | "money" | "money-1" | "money-2" | "moon" | "moon-cloud" | "moon-stars" | "mouse" | "move" | "multiply" | "multiply-circle" | "music" | "music-AI" | "music-note" | "naira" | "navigation" | "navigation-alt" | "newspaper" | "next" | "paint-brush" | "paint-bucket" | "palette" | "paper-clip" | "paragraph-spacing" | "pause" | "pc" | "pc-lock" | "pc-speaker" | "pc-user" | "pencil" | "pencil-edit" | "pie-chart" | "pin" | "pin-alt" | "plant" | "plant-2" | "play" | "playlist" | "plus" | "plus-circle" | "pounds" | "power" | "previous" | "printer" | "processor" | "pull-request" | "question-circle" | "quote" | "radio-button" | "radio-selected" | "receipt" | "redo" | "refresh" | "repeat" | "repeat-once" | "road-sign" | "rocket" | "rocket-alt" | "rotate-left" | "rotate-right" | "route" | "row" | "save" | "scan" | "scissor" | "screenshot" | "search" | "send" | "send-AI" | "send-alt" | "server" | "server-alt" | "settings" | "settings-1" | "settings-2" | "share" | "share-alt" | "shield" | "shield-cross" | "shield-tick" | "ship" | "shower" | "shrink" | "shrink-alt" | "shuffle" | "sign-in" | "sign-out" | "signal" | "signal-off" | "sim" | "snooze" | "snowflake" | "sofa" | "speaker" | "star" | "stars" | "stop" | "stopwatch" | "store" | "strikethrough" | "subscript" | "suitcase" | "sun" | "sun-cloud" | "superscript" | "support" | "switch-diagonal" | "switch-horizontal" | "switch-vertical" | "tablet" | "target" | "taxi" | "terminal" | "text" | "thermometer" | "ticket" | "tissue" | "train" | "trophy" | "truck" | "tv" | "underline" | "undo" | "upload" | "user" | "user-add" | "user-circle" | "user-cross" | "user-group" | "user-heart" | "user-remove" | "user-tick" | "users" | "verified" | "video" | "video-slash" | "voice-note" | "volume" | "volume-low" | "volume-mute" | "volume-slash" | "wallet" | "wallet-add" | "wallet-check" | "wallet-cross" | "wallet-fund" | "wallet-remove" | "wallet-withdraw" | "water-drop" | "wifi" | "wristwatch" | "yen" | "zoom-in" | "zoom-out";
|
|
@@ -86,7 +87,7 @@ interface TabProps {
|
|
|
86
87
|
children: ReactNode;
|
|
87
88
|
className?: string;
|
|
88
89
|
}
|
|
89
|
-
declare function Tab({ value, icon, badge, disabled, children, className
|
|
90
|
+
declare function Tab({ value, icon, badge, disabled, children, className }: TabProps): react_jsx_runtime.JSX.Element;
|
|
90
91
|
|
|
91
92
|
interface ChipProps extends HTMLAttributes<HTMLDivElement> {
|
|
92
93
|
variant?: "input" | "filter";
|
|
@@ -624,4 +625,181 @@ declare const ActivityContent: react.ForwardRefExoticComponent<ActivityContentPr
|
|
|
624
625
|
|
|
625
626
|
declare function cn(...inputs: ClassValue[]): string;
|
|
626
627
|
|
|
627
|
-
|
|
628
|
+
type Theme = "light" | "dark" | "system";
|
|
629
|
+
type ResolvedTheme = "light" | "dark";
|
|
630
|
+
interface ThemeContextValue {
|
|
631
|
+
/** Current theme setting (can be "system") */
|
|
632
|
+
theme: Theme;
|
|
633
|
+
/** Resolved theme after applying system preference */
|
|
634
|
+
resolvedTheme: ResolvedTheme;
|
|
635
|
+
/** Update the theme */
|
|
636
|
+
setTheme: (theme: Theme) => void;
|
|
637
|
+
/** Toggle between light and dark */
|
|
638
|
+
toggleTheme: () => void;
|
|
639
|
+
}
|
|
640
|
+
interface ThemeProviderProps {
|
|
641
|
+
children: ReactNode;
|
|
642
|
+
/** Default theme if no stored preference exists */
|
|
643
|
+
defaultTheme?: Theme;
|
|
644
|
+
/** Storage key for persisting theme preference */
|
|
645
|
+
storageKey?: string;
|
|
646
|
+
/** Disable system theme detection */
|
|
647
|
+
disableSystemTheme?: boolean;
|
|
648
|
+
}
|
|
649
|
+
declare function ThemeProvider({ children, defaultTheme, storageKey, disableSystemTheme, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
650
|
+
declare function useTheme(): ThemeContextValue;
|
|
651
|
+
/**
|
|
652
|
+
* Hook that returns only the resolved theme (light or dark).
|
|
653
|
+
* Useful for components that just need to know the current theme.
|
|
654
|
+
*/
|
|
655
|
+
declare function useResolvedTheme(): ResolvedTheme;
|
|
656
|
+
|
|
657
|
+
interface UseRaydenInputOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
658
|
+
form: UseFormReturn<TFieldValues>;
|
|
659
|
+
name: TName;
|
|
660
|
+
}
|
|
661
|
+
type UseRaydenInputReturn<TName extends string = string> = UseFormRegisterReturn<TName> & {
|
|
662
|
+
error?: string;
|
|
663
|
+
hasError: boolean;
|
|
664
|
+
};
|
|
665
|
+
/**
|
|
666
|
+
* Adapter hook for using Rayden Input with react-hook-form.
|
|
667
|
+
*
|
|
668
|
+
* @example
|
|
669
|
+
* ```tsx
|
|
670
|
+
* import { useForm } from "react-hook-form";
|
|
671
|
+
* import { Input, useRaydenInput } from "@raydenui/ui";
|
|
672
|
+
*
|
|
673
|
+
* function MyForm() {
|
|
674
|
+
* const form = useForm<{ email: string }>();
|
|
675
|
+
*
|
|
676
|
+
* return (
|
|
677
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
678
|
+
* <Input
|
|
679
|
+
* label="Email"
|
|
680
|
+
* placeholder="Enter your email"
|
|
681
|
+
* {...useRaydenInput({ form, name: "email" })}
|
|
682
|
+
* />
|
|
683
|
+
* </form>
|
|
684
|
+
* );
|
|
685
|
+
* }
|
|
686
|
+
* ```
|
|
687
|
+
*/
|
|
688
|
+
declare function useRaydenInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenInputOptions<TFieldValues, TName>): UseRaydenInputReturn<TName>;
|
|
689
|
+
|
|
690
|
+
interface UseRaydenSelectOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
691
|
+
form: UseFormReturn<TFieldValues>;
|
|
692
|
+
name: TName;
|
|
693
|
+
}
|
|
694
|
+
interface UseRaydenSelectReturn {
|
|
695
|
+
value: string;
|
|
696
|
+
onValueChange: (value: string) => void;
|
|
697
|
+
error?: string;
|
|
698
|
+
hasError: boolean;
|
|
699
|
+
}
|
|
700
|
+
/**
|
|
701
|
+
* Adapter hook for using Rayden Select with react-hook-form.
|
|
702
|
+
*
|
|
703
|
+
* @example
|
|
704
|
+
* ```tsx
|
|
705
|
+
* import { useForm } from "react-hook-form";
|
|
706
|
+
* import { Select, SelectOption, useRaydenSelect } from "@raydenui/ui";
|
|
707
|
+
*
|
|
708
|
+
* function MyForm() {
|
|
709
|
+
* const form = useForm<{ country: string }>();
|
|
710
|
+
*
|
|
711
|
+
* return (
|
|
712
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
713
|
+
* <Select
|
|
714
|
+
* label="Country"
|
|
715
|
+
* {...useRaydenSelect({ form, name: "country" })}
|
|
716
|
+
* >
|
|
717
|
+
* <SelectOption value="us">United States</SelectOption>
|
|
718
|
+
* <SelectOption value="uk">United Kingdom</SelectOption>
|
|
719
|
+
* </Select>
|
|
720
|
+
* </form>
|
|
721
|
+
* );
|
|
722
|
+
* }
|
|
723
|
+
* ```
|
|
724
|
+
*/
|
|
725
|
+
declare function useRaydenSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name }: UseRaydenSelectOptions<TFieldValues, TName>): UseRaydenSelectReturn;
|
|
726
|
+
|
|
727
|
+
interface UseRaydenFormControlOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
728
|
+
form: UseFormReturn<TFieldValues>;
|
|
729
|
+
name: TName;
|
|
730
|
+
}
|
|
731
|
+
type UseRaydenCheckboxReturn<TName extends string = string> = UseFormRegisterReturn<TName>;
|
|
732
|
+
type UseRaydenRadioReturn<TName extends string = string> = UseFormRegisterReturn<TName> & {
|
|
733
|
+
value: string;
|
|
734
|
+
};
|
|
735
|
+
/**
|
|
736
|
+
* Adapter hook for using Rayden Checkbox with react-hook-form.
|
|
737
|
+
*
|
|
738
|
+
* @example
|
|
739
|
+
* ```tsx
|
|
740
|
+
* import { useForm } from "react-hook-form";
|
|
741
|
+
* import { Checkbox, useRaydenCheckbox } from "@raydenui/ui";
|
|
742
|
+
*
|
|
743
|
+
* function MyForm() {
|
|
744
|
+
* const form = useForm<{ agree: boolean }>();
|
|
745
|
+
*
|
|
746
|
+
* return (
|
|
747
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
748
|
+
* <Checkbox
|
|
749
|
+
* label="I agree to the terms"
|
|
750
|
+
* {...useRaydenCheckbox({ form, name: "agree" })}
|
|
751
|
+
* />
|
|
752
|
+
* </form>
|
|
753
|
+
* );
|
|
754
|
+
* }
|
|
755
|
+
* ```
|
|
756
|
+
*/
|
|
757
|
+
declare function useRaydenCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenFormControlOptions<TFieldValues, TName>): UseRaydenCheckboxReturn<TName>;
|
|
758
|
+
/**
|
|
759
|
+
* Adapter hook for using Rayden Toggle with react-hook-form.
|
|
760
|
+
*
|
|
761
|
+
* @example
|
|
762
|
+
* ```tsx
|
|
763
|
+
* import { useForm } from "react-hook-form";
|
|
764
|
+
* import { Toggle, useRaydenToggle } from "@raydenui/ui";
|
|
765
|
+
*
|
|
766
|
+
* function MyForm() {
|
|
767
|
+
* const form = useForm<{ notifications: boolean }>();
|
|
768
|
+
*
|
|
769
|
+
* return (
|
|
770
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
771
|
+
* <Toggle
|
|
772
|
+
* label="Enable notifications"
|
|
773
|
+
* {...useRaydenToggle({ form, name: "notifications" })}
|
|
774
|
+
* />
|
|
775
|
+
* </form>
|
|
776
|
+
* );
|
|
777
|
+
* }
|
|
778
|
+
* ```
|
|
779
|
+
*/
|
|
780
|
+
declare function useRaydenToggle<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, }: UseRaydenFormControlOptions<TFieldValues, TName>): UseRaydenCheckboxReturn<TName>;
|
|
781
|
+
/**
|
|
782
|
+
* Adapter hook for using Rayden Radio with react-hook-form.
|
|
783
|
+
*
|
|
784
|
+
* @example
|
|
785
|
+
* ```tsx
|
|
786
|
+
* import { useForm } from "react-hook-form";
|
|
787
|
+
* import { Radio, useRaydenRadio } from "@raydenui/ui";
|
|
788
|
+
*
|
|
789
|
+
* function MyForm() {
|
|
790
|
+
* const form = useForm<{ plan: string }>();
|
|
791
|
+
*
|
|
792
|
+
* return (
|
|
793
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
794
|
+
* <Radio label="Basic" {...useRaydenRadio({ form, name: "plan", value: "basic" })} />
|
|
795
|
+
* <Radio label="Pro" {...useRaydenRadio({ form, name: "plan", value: "pro" })} />
|
|
796
|
+
* </form>
|
|
797
|
+
* );
|
|
798
|
+
* }
|
|
799
|
+
* ```
|
|
800
|
+
*/
|
|
801
|
+
declare function useRaydenRadio<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ form, name, value, }: UseRaydenFormControlOptions<TFieldValues, TName> & {
|
|
802
|
+
value: string;
|
|
803
|
+
}): UseRaydenRadioReturn<TName>;
|
|
804
|
+
|
|
805
|
+
export { ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, type ResolvedTheme, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, cn, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
|