raft-ui 0.0.7 → 0.0.8
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/CHANGELOG.md +10 -2
- package/dist/index.d.mts +618 -2
- package/dist/index.mjs +1205 -12
- package/dist/tv-UUMwNowu.d.mts +16 -0
- package/dist/use-theme-Y_h1DKll.mjs +34 -0
- package/dist/wip.d.mts +15 -133
- package/dist/wip.mjs +23 -296
- package/package.json +2 -1
- package/dist/button-CJqMhTPQ.mjs +0 -621
- package/dist/index-CpGciYPW.d.mts +0 -267
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { VariantProps } from "tailwind-variants/lite";
|
|
2
|
+
|
|
3
|
+
//#region src/lib/styled-props.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Base UI components type `className` as `string | ((state) => string)`, but our
|
|
6
|
+
* tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
|
|
7
|
+
* component's props to a string `className` so they can flow into a recipe.
|
|
8
|
+
*
|
|
9
|
+
* The state-callback form is intentionally dropped: our components express every
|
|
10
|
+
* state through `data-*` variants in the recipe, so a caller never needs it.
|
|
11
|
+
*/
|
|
12
|
+
type StyledProps<P> = Omit<P, "className"> & {
|
|
13
|
+
className?: string;
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
export { StyledProps as n, VariantProps as t };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { cn } from "cnfast";
|
|
2
|
+
import { tv } from "tailwind-variants/lite";
|
|
3
|
+
import { createContext, use } from "react";
|
|
4
|
+
//#region src/lib/tv.ts
|
|
5
|
+
const tv$1 = ((options) => {
|
|
6
|
+
const recipe = tv(options);
|
|
7
|
+
const wrappedRecipe = ((props) => {
|
|
8
|
+
const result = recipe(props);
|
|
9
|
+
if (typeof result === "string") return cn(result);
|
|
10
|
+
return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
|
|
11
|
+
});
|
|
12
|
+
return Object.assign(wrappedRecipe, recipe);
|
|
13
|
+
});
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/lib/theme/theme-context.ts
|
|
16
|
+
const ThemeContext = createContext("brutal");
|
|
17
|
+
const ThemeStateContext = createContext({
|
|
18
|
+
theme: "brutal",
|
|
19
|
+
setTheme: () => void 0,
|
|
20
|
+
mode: "light",
|
|
21
|
+
resolvedMode: "light"
|
|
22
|
+
});
|
|
23
|
+
//#endregion
|
|
24
|
+
//#region src/lib/theme/use-theme.ts
|
|
25
|
+
/** Read the active style family for theme-aware component recipes. */
|
|
26
|
+
function useThemeFamily() {
|
|
27
|
+
return use(ThemeContext);
|
|
28
|
+
}
|
|
29
|
+
/** Read and update the application-level RUI theme selection. */
|
|
30
|
+
function useTheme() {
|
|
31
|
+
return use(ThemeStateContext);
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
export { tv$1 as a, ThemeStateContext as i, useThemeFamily as n, ThemeContext as r, useTheme as t };
|
package/dist/wip.d.mts
CHANGED
|
@@ -1,128 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { n as StyledProps, t as VariantProps } from "./tv-UUMwNowu.mjs";
|
|
2
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
2
3
|
import { ComponentPropsWithRef, ReactNode } from "react";
|
|
3
4
|
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
-
import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
|
|
5
5
|
import { Toggle } from "@base-ui/react/toggle";
|
|
6
6
|
import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
|
|
7
7
|
|
|
8
|
-
//#region src/components/dialog/dialog.d.ts
|
|
9
|
-
type DialogProps = Dialog$1.Root.Props;
|
|
10
|
-
declare function Dialog(props: DialogProps): import("react").JSX.Element;
|
|
11
|
-
type DialogTriggerProps = Dialog$1.Trigger.Props;
|
|
12
|
-
declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
|
|
13
|
-
type DialogPortalProps = Dialog$1.Portal.Props;
|
|
14
|
-
declare function DialogPortal(props: DialogPortalProps): import("react").JSX.Element;
|
|
15
|
-
type DialogOverlayProps = StyledProps<Dialog$1.Backdrop.Props>;
|
|
16
|
-
declare function DialogOverlay({
|
|
17
|
-
className,
|
|
18
|
-
...props
|
|
19
|
-
}: DialogOverlayProps): import("react").JSX.Element;
|
|
20
|
-
type DialogContentProps = StyledProps<Dialog$1.Popup.Props> & {
|
|
21
|
-
portalProps?: DialogPortalProps;
|
|
22
|
-
overlay?: false | DialogOverlayProps;
|
|
23
|
-
};
|
|
24
|
-
declare function DialogContent({
|
|
25
|
-
className,
|
|
26
|
-
children,
|
|
27
|
-
portalProps,
|
|
28
|
-
overlay,
|
|
29
|
-
...props
|
|
30
|
-
}: DialogContentProps): import("react").JSX.Element;
|
|
31
|
-
type DialogCloseProps = Dialog$1.Close.Props;
|
|
32
|
-
declare function DialogClose(props: DialogCloseProps): import("react").JSX.Element;
|
|
33
|
-
type DialogHeaderProps = ComponentPropsWithRef<"div">;
|
|
34
|
-
declare function DialogHeader({
|
|
35
|
-
className,
|
|
36
|
-
...props
|
|
37
|
-
}: DialogHeaderProps): import("react").JSX.Element;
|
|
38
|
-
type DialogBodyProps = ComponentPropsWithRef<"div">;
|
|
39
|
-
declare function DialogBody({
|
|
40
|
-
className,
|
|
41
|
-
...props
|
|
42
|
-
}: DialogBodyProps): import("react").JSX.Element;
|
|
43
|
-
type DialogFooterProps = ComponentPropsWithRef<"div">;
|
|
44
|
-
declare function DialogFooter({
|
|
45
|
-
className,
|
|
46
|
-
...props
|
|
47
|
-
}: DialogFooterProps): import("react").JSX.Element;
|
|
48
|
-
type DialogTitleProps = StyledProps<Dialog$1.Title.Props>;
|
|
49
|
-
declare function DialogTitle({
|
|
50
|
-
className,
|
|
51
|
-
...props
|
|
52
|
-
}: DialogTitleProps): import("react").JSX.Element;
|
|
53
|
-
type DialogDescriptionProps = StyledProps<Dialog$1.Description.Props>;
|
|
54
|
-
declare function DialogDescription({
|
|
55
|
-
className,
|
|
56
|
-
...props
|
|
57
|
-
}: DialogDescriptionProps): import("react").JSX.Element;
|
|
58
|
-
//#endregion
|
|
59
|
-
//#region src/components/alert-dialog/alert-dialog.d.ts
|
|
60
|
-
type AlertDialogProps = Dialog$1.Root.Props;
|
|
61
|
-
declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
|
|
62
|
-
type AlertDialogTriggerProps = Dialog$1.Trigger.Props;
|
|
63
|
-
declare function AlertDialogTrigger(props: AlertDialogTriggerProps): import("react").JSX.Element;
|
|
64
|
-
type AlertDialogPortalProps = Dialog$1.Portal.Props;
|
|
65
|
-
declare function AlertDialogPortal(props: AlertDialogPortalProps): import("react").JSX.Element;
|
|
66
|
-
type AlertDialogOverlayProps = StyledProps<Dialog$1.Backdrop.Props>;
|
|
67
|
-
declare function AlertDialogOverlay({
|
|
68
|
-
className,
|
|
69
|
-
...props
|
|
70
|
-
}: AlertDialogOverlayProps): import("react").JSX.Element;
|
|
71
|
-
type AlertDialogContentProps = StyledProps<Dialog$1.Popup.Props> & {
|
|
72
|
-
portalProps?: AlertDialogPortalProps;
|
|
73
|
-
overlay?: false | AlertDialogOverlayProps;
|
|
74
|
-
size?: "sm" | "md";
|
|
75
|
-
};
|
|
76
|
-
declare function AlertDialogContent({
|
|
77
|
-
className,
|
|
78
|
-
children,
|
|
79
|
-
portalProps,
|
|
80
|
-
overlay,
|
|
81
|
-
size,
|
|
82
|
-
...props
|
|
83
|
-
}: AlertDialogContentProps): import("react").JSX.Element;
|
|
84
|
-
type AlertDialogHeaderProps = ComponentPropsWithRef<"div">;
|
|
85
|
-
declare function AlertDialogHeader({
|
|
86
|
-
className,
|
|
87
|
-
...props
|
|
88
|
-
}: AlertDialogHeaderProps): import("react").JSX.Element;
|
|
89
|
-
type AlertDialogMediaProps = ComponentPropsWithRef<"div">;
|
|
90
|
-
declare function AlertDialogMedia({
|
|
91
|
-
className,
|
|
92
|
-
...props
|
|
93
|
-
}: AlertDialogMediaProps): import("react").JSX.Element;
|
|
94
|
-
type AlertDialogBodyProps = ComponentPropsWithRef<"div">;
|
|
95
|
-
declare function AlertDialogBody({
|
|
96
|
-
className,
|
|
97
|
-
...props
|
|
98
|
-
}: AlertDialogBodyProps): import("react").JSX.Element;
|
|
99
|
-
type AlertDialogFooterProps = ComponentPropsWithRef<"div">;
|
|
100
|
-
declare function AlertDialogFooter({
|
|
101
|
-
className,
|
|
102
|
-
...props
|
|
103
|
-
}: AlertDialogFooterProps): import("react").JSX.Element;
|
|
104
|
-
type AlertDialogTitleProps = StyledProps<Dialog$1.Title.Props>;
|
|
105
|
-
declare function AlertDialogTitle({
|
|
106
|
-
className,
|
|
107
|
-
...props
|
|
108
|
-
}: AlertDialogTitleProps): import("react").JSX.Element;
|
|
109
|
-
type AlertDialogDescriptionProps = StyledProps<Dialog$1.Description.Props>;
|
|
110
|
-
declare function AlertDialogDescription({
|
|
111
|
-
className,
|
|
112
|
-
...props
|
|
113
|
-
}: AlertDialogDescriptionProps): import("react").JSX.Element;
|
|
114
|
-
type AlertDialogActionProps = ButtonProps;
|
|
115
|
-
declare function AlertDialogAction(props: AlertDialogActionProps): import("react").JSX.Element;
|
|
116
|
-
type AlertDialogCancelProps = Omit<Dialog$1.Close.Props, "render"> & Pick<ButtonProps, "variant" | "size"> & {
|
|
117
|
-
className?: string;
|
|
118
|
-
};
|
|
119
|
-
declare function AlertDialogCancel({
|
|
120
|
-
className,
|
|
121
|
-
variant,
|
|
122
|
-
size,
|
|
123
|
-
...props
|
|
124
|
-
}: AlertDialogCancelProps): import("react").JSX.Element;
|
|
125
|
-
//#endregion
|
|
126
8
|
//#region src/components/toggle-group/toggle-group.d.ts
|
|
127
9
|
declare const toggleGroup: import("tailwind-variants/lite").TVReturnType<{
|
|
128
10
|
theme: {
|
|
@@ -934,7 +816,7 @@ declare function DescriptionAction({
|
|
|
934
816
|
}: DescriptionActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
935
817
|
//#endregion
|
|
936
818
|
//#region src/components/lightbox/lightbox.d.ts
|
|
937
|
-
type LightboxProps<Payload = unknown> = Omit<Dialog
|
|
819
|
+
type LightboxProps<Payload = unknown> = Omit<Dialog.Root.Props<Payload>, "actionsRef" | "children" | "handle"> & {
|
|
938
820
|
children?: ReactNode;
|
|
939
821
|
closeOnModW?: boolean;
|
|
940
822
|
};
|
|
@@ -947,11 +829,11 @@ declare function Lightbox<Payload = unknown>({
|
|
|
947
829
|
children,
|
|
948
830
|
...props
|
|
949
831
|
}: LightboxProps<Payload>): import("react").JSX.Element;
|
|
950
|
-
type LightboxTriggerProps = Dialog
|
|
832
|
+
type LightboxTriggerProps = Dialog.Trigger.Props;
|
|
951
833
|
declare function LightboxTrigger(props: LightboxTriggerProps): import("react").JSX.Element;
|
|
952
|
-
type LightboxPortalProps = Dialog
|
|
834
|
+
type LightboxPortalProps = Dialog.Portal.Props;
|
|
953
835
|
declare function LightboxPortal(props: LightboxPortalProps): import("react").JSX.Element;
|
|
954
|
-
type LightboxContentProps = StyledProps<Dialog
|
|
836
|
+
type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
|
|
955
837
|
declare function LightboxContent({
|
|
956
838
|
className,
|
|
957
839
|
initialFocus,
|
|
@@ -988,25 +870,25 @@ declare function LightboxMedia({
|
|
|
988
870
|
className,
|
|
989
871
|
...props
|
|
990
872
|
}: LightboxMediaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
991
|
-
type LightboxCloseProps = StyledProps<Dialog
|
|
873
|
+
type LightboxCloseProps = StyledProps<Dialog.Close.Props>;
|
|
992
874
|
declare function LightboxClose({
|
|
993
875
|
className,
|
|
994
876
|
...props
|
|
995
877
|
}: LightboxCloseProps): import("react").JSX.Element;
|
|
996
878
|
//#endregion
|
|
997
879
|
//#region src/components/bottom-sheet/bottom-sheet.d.ts
|
|
998
|
-
type BottomSheetProps = Dialog
|
|
880
|
+
type BottomSheetProps = Dialog.Root.Props;
|
|
999
881
|
declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;
|
|
1000
|
-
type BottomSheetTriggerProps = Dialog
|
|
882
|
+
type BottomSheetTriggerProps = Dialog.Trigger.Props;
|
|
1001
883
|
declare function BottomSheetTrigger(props: BottomSheetTriggerProps): import("react").JSX.Element;
|
|
1002
|
-
type BottomSheetPortalProps = Dialog
|
|
884
|
+
type BottomSheetPortalProps = Dialog.Portal.Props;
|
|
1003
885
|
declare function BottomSheetPortal(props: BottomSheetPortalProps): import("react").JSX.Element;
|
|
1004
|
-
type BottomSheetContentProps = StyledProps<Dialog
|
|
886
|
+
type BottomSheetContentProps = StyledProps<Dialog.Popup.Props>;
|
|
1005
887
|
declare function BottomSheetContent({
|
|
1006
888
|
className,
|
|
1007
889
|
...props
|
|
1008
890
|
}: BottomSheetContentProps): import("react").JSX.Element;
|
|
1009
|
-
type BottomSheetCloseProps = Dialog
|
|
891
|
+
type BottomSheetCloseProps = Dialog.Close.Props;
|
|
1010
892
|
declare function BottomSheetClose(props: BottomSheetCloseProps): import("react").JSX.Element;
|
|
1011
893
|
type BottomSheetHeaderProps = useRender.ComponentProps<"div">;
|
|
1012
894
|
declare function BottomSheetHeader({
|
|
@@ -1020,15 +902,15 @@ declare function BottomSheetFooter({
|
|
|
1020
902
|
render,
|
|
1021
903
|
...props
|
|
1022
904
|
}: BottomSheetFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
1023
|
-
type BottomSheetTitleProps = StyledProps<Dialog
|
|
905
|
+
type BottomSheetTitleProps = StyledProps<Dialog.Title.Props>;
|
|
1024
906
|
declare function BottomSheetTitle({
|
|
1025
907
|
className,
|
|
1026
908
|
...props
|
|
1027
909
|
}: BottomSheetTitleProps): import("react").JSX.Element;
|
|
1028
|
-
type BottomSheetDescriptionProps = StyledProps<Dialog
|
|
910
|
+
type BottomSheetDescriptionProps = StyledProps<Dialog.Description.Props>;
|
|
1029
911
|
declare function BottomSheetDescription({
|
|
1030
912
|
className,
|
|
1031
913
|
...props
|
|
1032
914
|
}: BottomSheetDescriptionProps): import("react").JSX.Element;
|
|
1033
915
|
//#endregion
|
|
1034
|
-
export {
|
|
916
|
+
export { BottomSheet, BottomSheetClose, type BottomSheetCloseProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetPortal, type BottomSheetPortalProps, type BottomSheetProps, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, ConversationPreviewCard, ConversationPreviewCardAction, type ConversationPreviewCardActionProps, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, type ConversationPreviewCardAuthorNameProps, type ConversationPreviewCardAuthorProps, ConversationPreviewCardAuthorSubtitle, type ConversationPreviewCardAuthorSubtitleProps, ConversationPreviewCardChannel, type ConversationPreviewCardChannelProps, ConversationPreviewCardContent, type ConversationPreviewCardContentProps, ConversationPreviewCardFooter, type ConversationPreviewCardFooterProps, ConversationPreviewCardMeta, type ConversationPreviewCardMetaProps, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, type ConversationPreviewCardPreviewAuthorProps, ConversationPreviewCardPreviewLeading, type ConversationPreviewCardPreviewLeadingProps, type ConversationPreviewCardPreviewProps, type ConversationPreviewCardProps, ConversationPreviewCardSecondaryPreview, type ConversationPreviewCardSecondaryPreviewProps, ConversationPreviewCardTimestamp, type ConversationPreviewCardTimestampProps, DescriptionAction, type DescriptionActionProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, Lightbox, LightboxActions, type LightboxActionsProps, LightboxClose, type LightboxCloseProps, LightboxContent, type LightboxContentProps, LightboxHeader, type LightboxHeaderProps, LightboxMedia, type LightboxMediaProps, LightboxPortal, type LightboxPortalProps, type LightboxProps, LightboxStage, type LightboxStageProps, LightboxTitle, type LightboxTitleProps, LightboxTrigger, type LightboxTriggerProps, ListItem, ListItemActionGroup, type ListItemActionGroupProps, ListItemBody, type ListItemBodyProps, ListItemDescription, type ListItemDescriptionProps, ListItemIcon, type ListItemIconProps, ListItemMeta, type ListItemMetaProps, type ListItemProps, ListItemRow, type ListItemRowProps, ListItemTitle, type ListItemTitleProps, MediaListItem, MediaListItemActionGroup, type MediaListItemActionGroupProps, MediaListItemAside, type MediaListItemAsideProps, MediaListItemBody, type MediaListItemBodyProps, type MediaListItemProps, MediaListItemSubtitle, type MediaListItemSubtitleProps, MediaListItemText, type MediaListItemTextProps, MediaListItemTitle, type MediaListItemTitleProps, MediaListItemVisual, type MediaListItemVisualProps, PanelHeader, PanelHeaderActions, type PanelHeaderActionsProps, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderSubtitle, type PanelHeaderSubtitleProps, PanelHeaderSuffix, type PanelHeaderSuffixProps, PanelHeaderTitle, type PanelHeaderTitleProps, PanelHeaderTitleRow, type PanelHeaderTitleRowProps, PanelHeaderVisual, type PanelHeaderVisualProps, PreviewShell, type PreviewShellProps, QuotedMessageCard, QuotedMessageCardAttachments, type QuotedMessageCardAttachmentsProps, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, type QuotedMessageCardAuthorNameProps, type QuotedMessageCardAuthorProps, QuotedMessageCardAuthorSubtitle, type QuotedMessageCardAuthorSubtitleProps, QuotedMessageCardBody, type QuotedMessageCardBodyProps, QuotedMessageCardChannel, type QuotedMessageCardChannelProps, QuotedMessageCardContent, type QuotedMessageCardContentProps, QuotedMessageCardContentWrap, type QuotedMessageCardContentWrapProps, QuotedMessageCardHeader, type QuotedMessageCardHeaderProps, QuotedMessageCardMeta, type QuotedMessageCardMetaProps, type QuotedMessageCardProps, QuotedMessageCardSeparator, type QuotedMessageCardSeparatorProps, QuotedMessageCardTag, type QuotedMessageCardTagProps, QuotedMessageCardThread, type QuotedMessageCardThreadProps, QuotedMessageCardTimestamp, type QuotedMessageCardTimestampProps, QuotedMessageCardUnavailable, type QuotedMessageCardUnavailableProps, SectionHeader, SectionHeaderActions, type SectionHeaderActionsProps, SectionHeaderContent, type SectionHeaderContentProps, SectionHeaderCount, type SectionHeaderCountProps, SectionHeaderIcon, type SectionHeaderIconProps, type SectionHeaderProps, SectionHeaderTitle, type SectionHeaderTitleProps, SectionLabel, type SectionLabelProps, ToggleGroup, ToggleGroupCount, type ToggleGroupCountProps, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };
|