raft-ui 0.0.1 → 0.0.3
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/dist/index.d.mts +323 -1
- package/dist/index.mjs +282 -2
- package/dist/use-theme-Y_h1DKll.mjs +34 -0
- package/dist/wip.d.mts +1 -323
- package/dist/wip.mjs +2 -204
- package/package.json +1 -1
- package/src/index.ts +22 -0
- package/src/wip.ts +0 -22
- package/dist/label-DWq4ia5I.mjs +0 -115
package/dist/label-DWq4ia5I.mjs
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { cn } from "cnfast";
|
|
2
|
-
import { tv } from "tailwind-variants/lite";
|
|
3
|
-
import { createContext, use } from "react";
|
|
4
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
5
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
//#region src/lib/tv.ts
|
|
8
|
-
const tv$1 = ((options) => {
|
|
9
|
-
const recipe = tv(options);
|
|
10
|
-
const wrappedRecipe = ((props) => {
|
|
11
|
-
const result = recipe(props);
|
|
12
|
-
if (typeof result === "string") return cn(result);
|
|
13
|
-
return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
|
|
14
|
-
});
|
|
15
|
-
return Object.assign(wrappedRecipe, recipe);
|
|
16
|
-
});
|
|
17
|
-
//#endregion
|
|
18
|
-
//#region src/lib/theme/theme-context.ts
|
|
19
|
-
const ThemeContext = createContext("brutal");
|
|
20
|
-
const ThemeStateContext = createContext({
|
|
21
|
-
theme: "brutal",
|
|
22
|
-
setTheme: () => void 0,
|
|
23
|
-
mode: "light",
|
|
24
|
-
resolvedMode: "light"
|
|
25
|
-
});
|
|
26
|
-
//#endregion
|
|
27
|
-
//#region src/lib/theme/use-theme.ts
|
|
28
|
-
/** Read the active style family for theme-aware component recipes. */
|
|
29
|
-
function useThemeFamily() {
|
|
30
|
-
return use(ThemeContext);
|
|
31
|
-
}
|
|
32
|
-
/** Read and update the application-level RUI theme selection. */
|
|
33
|
-
function useTheme() {
|
|
34
|
-
return use(ThemeStateContext);
|
|
35
|
-
}
|
|
36
|
-
//#endregion
|
|
37
|
-
//#region src/components/label/label.tsx
|
|
38
|
-
const label = tv$1({
|
|
39
|
-
slots: {
|
|
40
|
-
root: [
|
|
41
|
-
"group/label inline-flex w-fit items-center gap-1",
|
|
42
|
-
"cursor-pointer select-none",
|
|
43
|
-
"text-sm leading-none",
|
|
44
|
-
"aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled"
|
|
45
|
-
],
|
|
46
|
-
asterisk: ["text-accent-400", "group-aria-disabled/label:text-foreground-disabled"],
|
|
47
|
-
sub: ["font-normal normal-case", "group-aria-disabled/label:text-foreground-disabled"]
|
|
48
|
-
},
|
|
49
|
-
variants: {
|
|
50
|
-
theme: {
|
|
51
|
-
brutal: {
|
|
52
|
-
root: "font-bold text-foreground-strong",
|
|
53
|
-
sub: "font-bold tracking-wide text-black/40"
|
|
54
|
-
},
|
|
55
|
-
elegant: {
|
|
56
|
-
root: "font-medium text-foreground",
|
|
57
|
-
sub: "text-foreground/40"
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
size: {
|
|
61
|
-
sm: { root: "text-xs" },
|
|
62
|
-
md: { root: "text-sm" }
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: { size: "md" }
|
|
66
|
-
});
|
|
67
|
-
function LabelRoot({ size, disabled, className, render, ...props }) {
|
|
68
|
-
const { root } = label({
|
|
69
|
-
theme: useThemeFamily(),
|
|
70
|
-
size
|
|
71
|
-
});
|
|
72
|
-
return useRender({
|
|
73
|
-
defaultTagName: "label",
|
|
74
|
-
render,
|
|
75
|
-
props: mergeProps({
|
|
76
|
-
"aria-disabled": disabled ? true : void 0,
|
|
77
|
-
className: root({ className })
|
|
78
|
-
}, props),
|
|
79
|
-
state: {
|
|
80
|
-
slot: "label",
|
|
81
|
-
disabled: disabled ?? false
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
function LabelAsterisk({ className, children = "*", ...props }) {
|
|
86
|
-
const { asterisk } = label({ theme: useThemeFamily() });
|
|
87
|
-
return /* @__PURE__ */ jsx("span", {
|
|
88
|
-
"data-slot": "label-asterisk",
|
|
89
|
-
className: asterisk({ className }),
|
|
90
|
-
...props,
|
|
91
|
-
children
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
function LabelSub({ className, ...props }) {
|
|
95
|
-
const { sub } = label({ theme: useThemeFamily() });
|
|
96
|
-
return /* @__PURE__ */ jsx("span", {
|
|
97
|
-
"data-slot": "label-sub",
|
|
98
|
-
className: sub({ className }),
|
|
99
|
-
...props
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
function LabelOptional({ children = "(optional)", ...props }) {
|
|
103
|
-
return /* @__PURE__ */ jsx(LabelSub, {
|
|
104
|
-
"data-slot": "label-optional",
|
|
105
|
-
...props,
|
|
106
|
-
children
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
const Label = Object.assign(LabelRoot, {
|
|
110
|
-
Asterisk: LabelAsterisk,
|
|
111
|
-
Optional: LabelOptional,
|
|
112
|
-
Sub: LabelSub
|
|
113
|
-
});
|
|
114
|
-
//#endregion
|
|
115
|
-
export { useTheme as a, ThemeStateContext as c, LabelSub as i, tv$1 as l, LabelAsterisk as n, useThemeFamily as o, LabelOptional as r, ThemeContext as s, Label as t };
|