@deftui/react 0.0.4 → 0.0.5
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/styles.css
CHANGED
package/dist/vendor/README.md
CHANGED
|
@@ -30,7 +30,7 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
|
|
|
30
30
|
| `dropdown-menu` | [shadcn/dropdown-menu.tsx](shadcn/dropdown-menu.tsx) | [Dropdown Menu](https://ui.shadcn.com/docs/components/base/dropdown-menu) | — |
|
|
31
31
|
| `empty` | [shadcn/empty.tsx](shadcn/empty.tsx) | [Empty](https://ui.shadcn.com/docs/components/base/empty) | — |
|
|
32
32
|
| `field` | [shadcn/field.tsx](shadcn/field.tsx) | [Field](https://ui.shadcn.com/docs/components/base/field) | — |
|
|
33
|
-
| `input` | [shadcn/input.tsx](shadcn/input.tsx) | [Input](https://ui.shadcn.com/docs/components/base/input) | 参考 coss ui
|
|
33
|
+
| `input` | [shadcn/input.tsx](shadcn/input.tsx) | [Input](https://ui.shadcn.com/docs/components/base/input) | 参考 coss ui 处理自动填充的文字颜色，用背景色过渡抑制浏览器底色、内阴影绘制填充色 |
|
|
34
34
|
| `input-group` | [shadcn/input-group.tsx](shadcn/input-group.tsx) | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) | — |
|
|
35
35
|
| `kbd` | [shadcn/kbd.tsx](shadcn/kbd.tsx) | [Kbd](https://ui.shadcn.com/docs/components/base/kbd) | — |
|
|
36
36
|
| `label` | [shadcn/label.tsx](shadcn/label.tsx) | [Label](https://ui.shadcn.com/docs/components/base/label) | — |
|
|
@@ -61,5 +61,5 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
|
|
|
61
61
|
|
|
62
62
|
| ID | File | Docs | Modifications |
|
|
63
63
|
| --- | --- | --- | --- |
|
|
64
|
-
| `https://ui.iandefined.com/r/lightbox.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Lightbox](https://ui.iandefined.com/docs/components/lightbox/) |
|
|
65
|
-
| `https://ui.iandefined.com/r/scroll-area.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Scroll Area](https://ui.iandefined.com/docs/components/scroll-area/) | 作为 Lightbox
|
|
64
|
+
| `https://ui.iandefined.com/r/lightbox.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Lightbox](https://ui.iandefined.com/docs/components/lightbox/) | 适配本地组件和尺寸；修正嵌套弹层层级与点击隔离；补充加载失败反馈 |
|
|
65
|
+
| `https://ui.iandefined.com/r/scroll-area.json` | [tailored/lightbox.tsx](tailored/lightbox.tsx) | [Scroll Area](https://ui.iandefined.com/docs/components/scroll-area/) | 作为 Lightbox 的私有依赖内联 |
|
|
@@ -7,7 +7,7 @@ function Input$1({ className, type, ...props }) {
|
|
|
7
7
|
return /* @__PURE__ */ jsx(Input, {
|
|
8
8
|
type,
|
|
9
9
|
"data-slot": "input",
|
|
10
|
-
className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] duration-[150ms,150ms,5000000s] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground autofill:
|
|
10
|
+
className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] duration-[150ms,150ms,5000000s] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground autofill:inset-shadow-[0_0_0_1000px] autofill:inset-shadow-foreground/4 autofill:[-webkit-text-fill-color:var(--foreground)] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:autofill:inset-shadow-foreground/8 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -16,6 +16,13 @@ import { flushSync } from "react-dom";
|
|
|
16
16
|
import { ScrollArea } from "@base-ui/react/scroll-area";
|
|
17
17
|
// src/vendor/tailored/lightbox.tsx
|
|
18
18
|
const LIGHTBOX_STYLES = String.raw`
|
|
19
|
+
/* Keep child modals' transparent input blockers above the viewer. */
|
|
20
|
+
:where([data-slot="lightbox-portal"] [data-base-ui-portal],
|
|
21
|
+
[data-slot="lightbox-portal"] ~ [data-base-ui-portal])
|
|
22
|
+
> :where([data-base-ui-inert][role="presentation"]) {
|
|
23
|
+
z-index: 50;
|
|
24
|
+
}
|
|
25
|
+
|
|
19
26
|
:where([data-slot="lightbox-viewport"]) {
|
|
20
27
|
overscroll-behavior: contain;
|
|
21
28
|
}
|
|
@@ -1005,7 +1012,7 @@ function LightboxBackdrop({ className, style, ...props }) {
|
|
|
1005
1012
|
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
1006
1013
|
"data-slot": "lightbox-backdrop",
|
|
1007
1014
|
"data-overlay": overlay,
|
|
1008
|
-
className: cn("fixed inset-0 z-
|
|
1015
|
+
className: cn("fixed inset-0 z-50 min-h-dvh opacity-[var(--lightbox-backdrop-opacity)] transition-[opacity,backdrop-filter] duration-200", overlay === "blur" && "bg-black/80 backdrop-blur-md", overlay === "brightness" && "bg-black/90", "data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:pointer-events-none motion-reduce:transition-opacity", className),
|
|
1009
1016
|
style: backdropStyle,
|
|
1010
1017
|
...props
|
|
1011
1018
|
});
|
|
@@ -1013,7 +1020,7 @@ function LightboxBackdrop({ className, style, ...props }) {
|
|
|
1013
1020
|
function LightboxViewport({ className, ...props }) {
|
|
1014
1021
|
return /* @__PURE__ */ jsx(Dialog.Viewport, {
|
|
1015
1022
|
"data-slot": "lightbox-viewport",
|
|
1016
|
-
className: cn("fixed inset-0 z-
|
|
1023
|
+
className: cn("fixed inset-0 z-50 flex min-h-dvh items-stretch overflow-hidden overscroll-contain data-ending-style:pointer-events-none", className),
|
|
1017
1024
|
...props
|
|
1018
1025
|
});
|
|
1019
1026
|
}
|
|
@@ -1078,7 +1085,6 @@ function LightboxContent({ className, children, initialFocus, onKeyDown, style,
|
|
|
1078
1085
|
}
|
|
1079
1086
|
return /* @__PURE__ */ jsxs(Dialog.Portal, {
|
|
1080
1087
|
"data-slot": "lightbox-portal",
|
|
1081
|
-
container: typeof document === "undefined" ? void 0 : document.body,
|
|
1082
1088
|
children: [/* @__PURE__ */ jsx(LightboxBackdrop, { forceRender: true }), /* @__PURE__ */ jsx(LightboxViewport, {
|
|
1083
1089
|
dir: direction,
|
|
1084
1090
|
"data-lightbox-motion": shouldReduceMotion ? "reduced" : "full",
|
|
@@ -2186,7 +2192,7 @@ function LightboxMore({ className, ...props }) {
|
|
|
2186
2192
|
}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
|
|
2187
2193
|
align: "end",
|
|
2188
2194
|
sideOffset: 4,
|
|
2189
|
-
className: "isolate z-
|
|
2195
|
+
className: "isolate z-50 outline-none",
|
|
2190
2196
|
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
2191
2197
|
"data-slot": "dropdown-menu-content",
|
|
2192
2198
|
className: "max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|