@moontra/moonui 6.19.0 → 6.19.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/dist/index.js +96 -34
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +96 -34
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/__tests__/progress-warning-error-contrast.test.ts +331 -0
- package/src/components/ui/__tests__/progress.test.tsx +9 -2
- package/src/components/ui/__tests__/slider-warning-error-contrast.test.ts +478 -0
- package/src/components/ui/__tests__/slider.test.tsx +12 -4
- package/src/components/ui/__tests__/table.test.tsx +222 -8
- package/src/components/ui/progress.tsx +25 -2
- package/src/components/ui/slider.tsx +46 -4
- package/src/components/ui/table.tsx +88 -43
package/dist/index.js
CHANGED
|
@@ -2588,8 +2588,33 @@ var sliderRangeVariants = classVarianceAuthority.cva(
|
|
|
2588
2588
|
secondary: "bg-[rgb(var(--secondary-500))]",
|
|
2589
2589
|
accent: "bg-accent",
|
|
2590
2590
|
success: "bg-success",
|
|
2591
|
-
|
|
2592
|
-
|
|
2591
|
+
// #442 (#424/PR #440'ın slider ikizi): range `bg-warning`/`bg-error` idi —
|
|
2592
|
+
// track (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
|
|
2593
|
+
// LIGHT temada ayrım kayboluyordu: warning 1.835 · error 2.893 (eşik 3:1,
|
|
2594
|
+
// WCAG 1.4.11 non-text). DARK tema zaten temizdi (warning 6.97 · error 4.46).
|
|
2595
|
+
//
|
|
2596
|
+
// KÖK NEDEN: `--warning` ve `--error` tokens.css'in `.dark` bloğunda
|
|
2597
|
+
// EZİLMİYOR — iki temada aynı renk. Kardeşleri tema-uyarlanabilir olduğu
|
|
2598
|
+
// için geçiyor (`--success` light %29 → dark %36; ölçüm: success A ekseni
|
|
2599
|
+
// light 3.73 / dark 4.83). Bu iki aile o uyarlamadan yoksun.
|
|
2600
|
+
//
|
|
2601
|
+
// ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta skalanın
|
|
2602
|
+
// -700 kademesine in, dark'ta semantik token'a DOKUNMA (dark render bit-bit
|
|
2603
|
+
// aynı kalır, regresyon yüzeyi sıfır). Tema-KÖR bir -700 ataması dark'ı
|
|
2604
|
+
// kırardı: gerçek docs kartı (#111827) üstünde warning 2.499 ✗ · error 2.232 ✗.
|
|
2605
|
+
// Tam skala taraması (11 kademe × 2 aile × 3 zemin × 2 tema) track `/20` iken
|
|
2606
|
+
// iki temayı birden geçen kademe kümesini BOŞ buluyor → `dark:` ayrımı ZORUNLU;
|
|
2607
|
+
// #389'un tek-orta-ton (`--secondary-500`) çözümü burada uygulanamaz, çünkü
|
|
2608
|
+
// orada `--secondary` temaya göre değişiyordu. Aynı `dark:` deseni badge.tsx:51-63
|
|
2609
|
+
// ve progress.tsx:110-111'de zaten kullanılıyor.
|
|
2610
|
+
// Ölçülen sonuç — warning: light 1.835 → 4.235 ✓ · error: light 2.893 → 4.950 ✓
|
|
2611
|
+
// (dark değişmedi: 6.97 / 4.46; docs kartı 5.77 / 3.82).
|
|
2612
|
+
// Skala token'ları RGB üçlüsüdür (semantiklerin HSL'inden farklı) →
|
|
2613
|
+
// `rgb(var(--x-700))` kompozisyonu; `bg-warning-700` YAZILMADI, preset bu
|
|
2614
|
+
// ailelere sayısal skala açmıyor (#307 ölü-sınıf tuzağı).
|
|
2615
|
+
// Regresyon: __tests__/slider-warning-error-contrast.test.ts
|
|
2616
|
+
warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
|
|
2617
|
+
error: "bg-[rgb(var(--error-700))] dark:bg-error"
|
|
2593
2618
|
}
|
|
2594
2619
|
},
|
|
2595
2620
|
defaultVariants: {
|
|
@@ -2618,8 +2643,25 @@ var sliderThumbVariants = classVarianceAuthority.cva(
|
|
|
2618
2643
|
secondary: "border-[rgb(var(--secondary-500))] bg-background",
|
|
2619
2644
|
accent: "border-accent bg-background",
|
|
2620
2645
|
success: "border-success bg-background",
|
|
2621
|
-
|
|
2622
|
-
|
|
2646
|
+
// #442 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — #407'de
|
|
2647
|
+
// `secondary` için açılan eksenin warning/error karşılığı. Tutamacın dolgusu
|
|
2648
|
+
// `bg-background`, yani zeminin kendisi; ayırt edilebilirliği YALNIZ kenarlık
|
|
2649
|
+
// taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
|
|
2650
|
+
// ÖLÇÜLEN (eski değerler): warning light **2.133 ✗** · error light 3.781 ✓;
|
|
2651
|
+
// dark ikisi de rahat geçiyordu (9.45 / 5.33).
|
|
2652
|
+
//
|
|
2653
|
+
// `warning` KUSURLUYDU, düzeltildi. `error` bu eksende zaten geçiyordu ama
|
|
2654
|
+
// yine de aynı ifadeye çekildi: range light'ta -700'e indiği için kenarlık
|
|
2655
|
+
// `border-error`da bırakılsaydı LIGHT temada dolgu rgb(185,28,28), tutamaç
|
|
2656
|
+
// rgb(239,67,67) olurdu — düzeltmenin KENDİSİ iki-tonlu bir görünüm üretirdi.
|
|
2657
|
+
// #407'nin gerekçesi birebir geçerli: "tutamaç ve dolgu tek renkte okunur".
|
|
2658
|
+
// Değişim kontrastı düşürmüyor, artırıyor: error light 3.781 → 6.470.
|
|
2659
|
+
// Dark'ta `dark:border-*` semantik token'ı koruduğu için render bit-bit aynı.
|
|
2660
|
+
// Ölçülen sonuç — warning: light 2.133 → 4.923 ✓ · error: light 3.781 → 6.470 ✓
|
|
2661
|
+
// (dark değişmedi: 9.45 / 5.33; docs kartı 8.32 / 4.69).
|
|
2662
|
+
// Regresyon: __tests__/slider-warning-error-contrast.test.ts
|
|
2663
|
+
warning: "border-[rgb(var(--warning-700))] dark:border-warning bg-background",
|
|
2664
|
+
error: "border-[rgb(var(--error-700))] dark:border-error bg-background"
|
|
2623
2665
|
},
|
|
2624
2666
|
size: {
|
|
2625
2667
|
sm: "h-3 w-3",
|
|
@@ -3811,6 +3853,8 @@ var CommandShortcut = ({
|
|
|
3811
3853
|
};
|
|
3812
3854
|
CommandShortcut.displayName = "CommandShortcut";
|
|
3813
3855
|
var TableSortContext = React12__namespace.createContext(null);
|
|
3856
|
+
var TableStripedContext = React12__namespace.createContext(false);
|
|
3857
|
+
var STRIPED_ROW_CLASSES = "odd:bg-muted/50 hover:bg-accent";
|
|
3814
3858
|
function nextSortDirection(current) {
|
|
3815
3859
|
if (current === "asc")
|
|
3816
3860
|
return "desc";
|
|
@@ -3863,6 +3907,7 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3863
3907
|
onRowSelectionChange: _onRowSelectionChange,
|
|
3864
3908
|
disableRowSelection: _disableRowSelection,
|
|
3865
3909
|
getRowId: _getRowId,
|
|
3910
|
+
children,
|
|
3866
3911
|
...props
|
|
3867
3912
|
}, ref) => {
|
|
3868
3913
|
const striped = variant === "striped";
|
|
@@ -3870,20 +3915,9 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3870
3915
|
() => ({ sortColumn, sortDirection, onSortChange }),
|
|
3871
3916
|
[sortColumn, sortDirection, onSortChange]
|
|
3872
3917
|
);
|
|
3873
|
-
const childrenWithProps = React12__namespace.Children.map(props.children, (child) => {
|
|
3874
|
-
if (React12__namespace.isValidElement(child)) {
|
|
3875
|
-
if (child.type === "tbody") {
|
|
3876
|
-
const tbodyProps = child.props;
|
|
3877
|
-
return React12__namespace.cloneElement(child, {
|
|
3878
|
-
className: cn(tbodyProps.className, striped && "even:[&>tr]:bg-muted/50")
|
|
3879
|
-
});
|
|
3880
|
-
}
|
|
3881
|
-
}
|
|
3882
|
-
return child;
|
|
3883
|
-
});
|
|
3884
3918
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-auto", children: [
|
|
3885
3919
|
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/60 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }),
|
|
3886
|
-
/* @__PURE__ */ jsxRuntime.jsx(TableSortContext.Provider, { value: sortContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3920
|
+
/* @__PURE__ */ jsxRuntime.jsx(TableSortContext.Provider, { value: sortContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: striped, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3887
3921
|
"table",
|
|
3888
3922
|
{
|
|
3889
3923
|
ref,
|
|
@@ -3893,13 +3927,13 @@ var Table = React12__namespace.forwardRef(({
|
|
|
3893
3927
|
className
|
|
3894
3928
|
),
|
|
3895
3929
|
...props,
|
|
3896
|
-
children
|
|
3930
|
+
children
|
|
3897
3931
|
}
|
|
3898
|
-
) })
|
|
3932
|
+
) }) })
|
|
3899
3933
|
] });
|
|
3900
3934
|
});
|
|
3901
3935
|
Table.displayName = "Table";
|
|
3902
|
-
var TableHeader = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("moonui-theme", "[&_tr]:border-b", className), ...props }));
|
|
3936
|
+
var TableHeader = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("moonui-theme", "[&_tr]:border-b", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: false, children }) }));
|
|
3903
3937
|
TableHeader.displayName = "TableHeader";
|
|
3904
3938
|
var TableBody = React12__namespace.forwardRef(({ className, emptyContent, emptyMessage = "No data available", children, ...props }, ref) => {
|
|
3905
3939
|
const hasChildren = React12__namespace.Children.count(children) > 0;
|
|
@@ -3914,26 +3948,31 @@ var TableBody = React12__namespace.forwardRef(({ className, emptyContent, emptyM
|
|
|
3914
3948
|
);
|
|
3915
3949
|
});
|
|
3916
3950
|
TableBody.displayName = "TableBody";
|
|
3917
|
-
var TableFooter = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3951
|
+
var TableFooter = React12__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3918
3952
|
"tfoot",
|
|
3919
3953
|
{
|
|
3920
3954
|
ref,
|
|
3921
3955
|
className: cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className),
|
|
3922
|
-
...props
|
|
3956
|
+
...props,
|
|
3957
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TableStripedContext.Provider, { value: false, children })
|
|
3923
3958
|
}
|
|
3924
3959
|
));
|
|
3925
3960
|
TableFooter.displayName = "TableFooter";
|
|
3926
|
-
var TableRow = React12__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
className
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
)
|
|
3961
|
+
var TableRow = React12__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
3962
|
+
const striped = React12__namespace.useContext(TableStripedContext);
|
|
3963
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3964
|
+
"tr",
|
|
3965
|
+
{
|
|
3966
|
+
ref,
|
|
3967
|
+
className: cn(
|
|
3968
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
3969
|
+
striped && STRIPED_ROW_CLASSES,
|
|
3970
|
+
className
|
|
3971
|
+
),
|
|
3972
|
+
...props
|
|
3973
|
+
}
|
|
3974
|
+
);
|
|
3975
|
+
});
|
|
3937
3976
|
TableRow.displayName = "TableRow";
|
|
3938
3977
|
var TableHead = React12__namespace.forwardRef(
|
|
3939
3978
|
({ className, sortable, sorted, onSort, columnId, align = "left", children, ...props }, ref) => {
|
|
@@ -4948,8 +4987,31 @@ var progressIndicatorVariants = classVarianceAuthority.cva(
|
|
|
4948
4987
|
// Regresyon: __tests__/progress-secondary-contrast.test.ts
|
|
4949
4988
|
secondary: "bg-[rgb(var(--secondary-500))]",
|
|
4950
4989
|
success: "bg-success",
|
|
4951
|
-
|
|
4952
|
-
|
|
4990
|
+
// #424 (#372'nin kardeşi): dolgu `bg-warning`/`bg-error` idi — track
|
|
4991
|
+
// (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
|
|
4992
|
+
// LIGHT temada ayrım kayboluyordu: warning 1.83 · error 2.89 (eşik 3:1,
|
|
4993
|
+
// WCAG 1.4.11). DARK tema zaten temizdi (warning 6.97 · error 4.46).
|
|
4994
|
+
//
|
|
4995
|
+
// KÖK NEDEN: `--warning` ve `--error` tokens.css'te `.dark` bloğunda
|
|
4996
|
+
// EZİLMİYOR — iki temada aynı renk. Kardeşleri `--success` (light 29% →
|
|
4997
|
+
// dark 36%) ve `--primary` tema-uyarlanabilir olduğu için eşiği geçiyor;
|
|
4998
|
+
// bu iki aile o uyarlamadan yoksun kaldığı için light'ta kalıyor.
|
|
4999
|
+
//
|
|
5000
|
+
// ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta
|
|
5001
|
+
// skalanın -700 kademesine in, dark'ta semantik token'a DOKUNMA.
|
|
5002
|
+
// Tema-KÖR bir -700 ataması dark'ı kırardı (docs kartında warning 2.50 ✗
|
|
5003
|
+
// · error 2.23 ✗); `dark:` ayrımı tam olarak bunu önler ve dark render'ı
|
|
5004
|
+
// bit-bit aynı bırakır. Aynı desen badge.tsx:51-63'te zaten kullanılıyor.
|
|
5005
|
+
// Track alfaları BİLEREK `/20` kaldı: altı varyantın tamamı o konvansiyonu
|
|
5006
|
+
// paylaşıyor ve alfayı düşürmek track↔zemin ayrımını zayıflatırdı
|
|
5007
|
+
// (warning 1.162 → 1.081). Ölçülen sonuç — warning: light 4.24 ✓ /
|
|
5008
|
+
// dark 6.97 ✓ (docs kartı #111827: 5.77) · error: light 4.95 ✓ /
|
|
5009
|
+
// dark 4.46 ✓ (docs kartı 3.82). Skala token'ları RGB üçlüsüdür
|
|
5010
|
+
// (semantiklerin HSL'inden farklı) → `rgb(var(--x-700))` kompozisyonu;
|
|
5011
|
+
// `bg-warning-700` YAZILMADI, preset o sınıfı üretmez (#307 ölü-sınıf).
|
|
5012
|
+
// Regresyon: __tests__/progress-warning-error-contrast.test.ts
|
|
5013
|
+
warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
|
|
5014
|
+
error: "bg-[rgb(var(--error-700))] dark:bg-error"
|
|
4953
5015
|
},
|
|
4954
5016
|
animation: {
|
|
4955
5017
|
default: "transition-all duration-500",
|