florixui 1.14.1 → 1.15.1
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 +6 -6
- 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
|
@@ -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]
|