florixui 1.14.0 → 1.15.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 +16 -15
- package/dist/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ class to a root element (e.g. `<html class="dark">`).
|
|
|
52
52
|
|
|
53
53
|
### Themes
|
|
54
54
|
|
|
55
|
-
The package ships **
|
|
55
|
+
The package ships **7 themes**. Select one by setting `data-theme` on a root
|
|
56
56
|
element; the default (no attribute) is `slate-blue`. Themes combine with dark
|
|
57
57
|
mode:
|
|
58
58
|
|
|
@@ -60,14 +60,15 @@ mode:
|
|
|
60
60
|
<html data-theme="crimson" class="dark">
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
| slug | look
|
|
64
|
-
| ------------- |
|
|
65
|
-
| `slate-blue` | Calm blue on slate (default) ·
|
|
66
|
-
| `crimson` | Vivid red ·
|
|
67
|
-
| `terracotta` | Warm rust ·
|
|
68
|
-
| `indigo` | Bold indigo ·
|
|
69
|
-
| `azure` | Bright blue ·
|
|
70
|
-
| `teal` | Deep teal ·
|
|
63
|
+
| slug | look |
|
|
64
|
+
| ------------- | ------------------------------------------ |
|
|
65
|
+
| `slate-blue` | Calm blue on slate (default) · Montserrat |
|
|
66
|
+
| `crimson` | Vivid red · Montserrat |
|
|
67
|
+
| `terracotta` | Warm rust · Montserrat |
|
|
68
|
+
| `indigo` | Bold indigo · Montserrat |
|
|
69
|
+
| `azure` | Bright blue · Montserrat |
|
|
70
|
+
| `teal` | Deep teal · Montserrat |
|
|
71
|
+
| `argus` | ARGUS EcoSystem — neutral greys + teal · Montserrat |
|
|
71
72
|
|
|
72
73
|
Each theme references specific fonts but the package does **not** bundle them
|
|
73
74
|
(see below) — colors, radius, and shadows all work without the fonts; install
|
|
@@ -78,19 +79,19 @@ the matching `@fontsource` package if you want a theme's exact typeface.
|
|
|
78
79
|
To keep `styles.css` a single self-contained file, fonts are **not** bundled.
|
|
79
80
|
Each theme's font stack falls back to system fonts, so everything works without
|
|
80
81
|
them. To render a theme in its true typeface, install the matching
|
|
81
|
-
`@fontsource` package(s) and import them in your app entry.
|
|
82
|
-
|
|
82
|
+
`@fontsource` package(s) and import them in your app entry. The primary sans
|
|
83
|
+
across every theme is **Montserrat**:
|
|
83
84
|
|
|
84
85
|
```bash
|
|
85
|
-
npm install @fontsource-variable/
|
|
86
|
+
npm install @fontsource-variable/montserrat
|
|
86
87
|
```
|
|
87
88
|
|
|
88
89
|
```tsx
|
|
89
|
-
import "@fontsource-variable/
|
|
90
|
+
import "@fontsource-variable/montserrat";
|
|
90
91
|
```
|
|
91
92
|
|
|
92
|
-
Fonts used across the themes:
|
|
93
|
-
DM Serif Text, DM Mono, Merriweather, Noto Serif Georgian.
|
|
93
|
+
Fonts used across the themes: Montserrat (primary sans), Inter, JetBrains Mono,
|
|
94
|
+
Roboto Mono, DM Sans, DM Serif Text, DM Mono, Merriweather, Noto Serif Georgian.
|
|
94
95
|
|
|
95
96
|
## Developing this library
|
|
96
97
|
|
package/dist/index.js
CHANGED
|
@@ -1175,7 +1175,7 @@ var mn = n.forwardRef(function(e, t) {
|
|
|
1175
1175
|
disabled: m,
|
|
1176
1176
|
"aria-invalid": S,
|
|
1177
1177
|
"aria-describedby": M,
|
|
1178
|
-
className: Q("flex min-h-20 w-full rounded-sm border border-border px-3 py-2 text-
|
|
1178
|
+
className: Q("flex min-h-20 w-full rounded-sm border border-border px-3 py-2 text-sm outline-none transition-[color,box-shadow] placeholder:text-foreground/50", N, "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-muted-foreground", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", r),
|
|
1179
1179
|
...e
|
|
1180
1180
|
}),
|
|
1181
1181
|
/* @__PURE__ */ X(pn, {
|
|
@@ -1209,7 +1209,7 @@ var mn = n.forwardRef(function(e, t) {
|
|
|
1209
1209
|
"aria-invalid": S,
|
|
1210
1210
|
"aria-describedby": M,
|
|
1211
1211
|
onFocus: re,
|
|
1212
|
-
className: Q("w-full min-w-0 bg-transparent text-
|
|
1212
|
+
className: Q("w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-foreground/50 disabled:cursor-not-allowed disabled:text-muted-foreground", H ? "h-full border-0 py-1 focus-visible:ring-0" : Q("rounded-sm border border-border pl-3 pr-3 py-1 transition-[color,box-shadow]", N, u === "default" ? "h-8.5" : "h-7", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", B && "pl-9", V && "pr-9"), H && (h ? "pl-0" : "pl-3"), H && (g ? "pr-0" : "pr-3"), H && B && !h && "pl-9", H && V && !g && "pr-9", H && B && h && "pl-6", H && V && g && "pr-6", r),
|
|
1213
1213
|
...ee
|
|
1214
1214
|
});
|
|
1215
1215
|
return /* @__PURE__ */ Z("div", {
|
|
@@ -1222,7 +1222,7 @@ var mn = n.forwardRef(function(e, t) {
|
|
|
1222
1222
|
}),
|
|
1223
1223
|
H ? /* @__PURE__ */ Z("div", {
|
|
1224
1224
|
"aria-invalid": S,
|
|
1225
|
-
className: Q("flex items-center overflow-hidden rounded-sm border border-border transition-[color,box-shadow]", N, u === "default" ? "h-9" : "h-8", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-3 aria-[invalid=true]:ring-destructive/20 dark:aria-[invalid=true]:ring-destructive/40", m && "cursor-not-allowed
|
|
1225
|
+
className: Q("flex items-center overflow-hidden rounded-sm border border-border transition-[color,box-shadow]", N, u === "default" ? "h-9" : "h-8", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-3 aria-[invalid=true]:ring-destructive/20 dark:aria-[invalid=true]:ring-destructive/40", m && "cursor-not-allowed"),
|
|
1226
1226
|
children: [
|
|
1227
1227
|
h && /* @__PURE__ */ X("div", {
|
|
1228
1228
|
className: "flex h-full shrink-0 items-center justify-center pl-3 pr-2 text-sm text-muted-foreground [&_svg]:size-4",
|
|
@@ -1315,7 +1315,7 @@ function gn({ value: e, onChange: t, label: r, description: i, errorMessage: a,
|
|
|
1315
1315
|
/* @__PURE__ */ Z("div", {
|
|
1316
1316
|
onClick: () => S.current?.focus(),
|
|
1317
1317
|
"aria-invalid": O,
|
|
1318
|
-
className: Q("flex w-full cursor-text rounded-sm border border-border transition-[color,box-shadow]", k, "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", u && "cursor-not-allowed
|
|
1318
|
+
className: Q("flex w-full cursor-text rounded-sm border border-border transition-[color,box-shadow]", k, "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", u && "cursor-not-allowed", A ? "min-h-9 flex-wrap items-center gap-1.5 px-2 py-1.5" : Q("items-center px-3", c === "default" ? "h-9" : "h-8"), _),
|
|
1319
1319
|
children: [A && e.map((e, t) => /* @__PURE__ */ X(hn, {
|
|
1320
1320
|
onRemove: () => N(t),
|
|
1321
1321
|
disabled: u,
|
|
@@ -1339,7 +1339,7 @@ function gn({ value: e, onChange: t, label: r, description: i, errorMessage: a,
|
|
|
1339
1339
|
placeholder: e.length === 0 || !A ? d : "",
|
|
1340
1340
|
"aria-invalid": O,
|
|
1341
1341
|
"aria-describedby": O && a ? T : void 0,
|
|
1342
|
-
className: "min-w-24 flex-1 bg-transparent text-
|
|
1342
|
+
className: "min-w-24 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-foreground/50 disabled:cursor-not-allowed disabled:text-muted-foreground"
|
|
1343
1343
|
})]
|
|
1344
1344
|
}),
|
|
1345
1345
|
!A && e.length > 0 && /* @__PURE__ */ X("div", {
|
|
@@ -1866,7 +1866,7 @@ function Dn({ options: e = [], groups: t = [], value: r, onValueChange: i, place
|
|
|
1866
1866
|
F
|
|
1867
1867
|
]), _e = l ? U.length > 0 : !!oe, ve = () => l ? null : ue.find((e) => e.value === oe)?.label || a, G = () => {
|
|
1868
1868
|
!o && !te && (V.current?.focus(), z(!0));
|
|
1869
|
-
}, be = !!(O || k), xe = l && !E, K = xe ? d === "default" ? "min-h-
|
|
1869
|
+
}, be = !!(O || k), xe = l && !E, K = xe ? d === "default" ? "min-h-8.5" : "min-h-7" : d === "default" ? "h-8.5" : "h-7", q = f === "alt" ? "bg-input-background-alt" : "bg-input-background", Se = /* @__PURE__ */ X("div", {
|
|
1870
1870
|
className: Q("flex min-w-0 flex-1 items-center gap-1.5", xe ? "py-1" : "overflow-hidden"),
|
|
1871
1871
|
children: l && U.length > 0 ? E ? /* @__PURE__ */ X("span", {
|
|
1872
1872
|
className: "min-w-0 truncate",
|
|
@@ -2023,10 +2023,10 @@ function Dn({ options: e = [], groups: t = [], value: r, onValueChange: i, place
|
|
|
2023
2023
|
asChild: !0,
|
|
2024
2024
|
children: /* @__PURE__ */ Z("div", {
|
|
2025
2025
|
"aria-invalid": s,
|
|
2026
|
-
className: Q("flex rounded-
|
|
2026
|
+
className: Q("flex rounded-sm border border-border transition-[color,box-shadow]", xe ? "items-stretch" : "items-center overflow-hidden", q, K, R && "border-ring ring-3 ring-ring/50", "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-3 aria-[invalid=true]:ring-destructive/20", o && "pointer-events-none cursor-not-allowed opacity-50"),
|
|
2027
2027
|
children: [
|
|
2028
2028
|
O && /* @__PURE__ */ X("div", {
|
|
2029
|
-
className: "flex h-full shrink-0 items-center justify-center
|
|
2029
|
+
className: "flex h-full shrink-0 items-center justify-center pl-3 pr-2 text-sm text-muted-foreground [&_svg]:size-4",
|
|
2030
2030
|
children: O
|
|
2031
2031
|
}),
|
|
2032
2032
|
/* @__PURE__ */ Z($, {
|
|
@@ -2044,7 +2044,7 @@ function Dn({ options: e = [], groups: t = [], value: r, onValueChange: i, place
|
|
|
2044
2044
|
children: [Se, Ce]
|
|
2045
2045
|
}),
|
|
2046
2046
|
k && /* @__PURE__ */ X("div", {
|
|
2047
|
-
className: "flex h-full shrink-0 items-center justify-center
|
|
2047
|
+
className: "flex h-full shrink-0 items-center justify-center pl-2 pr-3 text-sm text-foreground [&_svg]:size-4",
|
|
2048
2048
|
children: k
|
|
2049
2049
|
})
|
|
2050
2050
|
]
|
|
@@ -2061,14 +2061,14 @@ function Dn({ options: e = [], groups: t = [], value: r, onValueChange: i, place
|
|
|
2061
2061
|
type: "button",
|
|
2062
2062
|
disabled: o,
|
|
2063
2063
|
ref: V,
|
|
2064
|
-
variant: "
|
|
2064
|
+
variant: "ghost",
|
|
2065
2065
|
role: "combobox",
|
|
2066
2066
|
"aria-expanded": R,
|
|
2067
2067
|
"aria-invalid": s,
|
|
2068
2068
|
onClick: (e) => {
|
|
2069
2069
|
te && (e.preventDefault(), e.stopPropagation());
|
|
2070
2070
|
},
|
|
2071
|
-
className: Q("h-auto w-full justify-between px-3 py-1 font-normal text-foreground", K, xe ? "items-start" : "items-center", q, R && "border-ring ring-3 ring-ring/50", u),
|
|
2071
|
+
className: Q("h-auto w-full justify-between rounded-sm border border-border px-3 py-1 font-normal text-foreground transition-[color,box-shadow] hover:bg-transparent", K, xe ? "items-start" : "items-center", q, "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", R && "border-ring ring-3 ring-ring/50", u),
|
|
2072
2072
|
children: [Se, Ce]
|
|
2073
2073
|
})
|
|
2074
2074
|
}), Te]
|