@deftui/react 0.1.5 → 0.1.7

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.
@@ -18,7 +18,7 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
18
18
  | `@coss/use-media-query` | [coss/hooks/use-media-query.ts](coss/hooks/use-media-query.ts) | [useMediaQuery](https://coss.com/ui/docs/hooks/use-media-query) | 断点:`md` 设为 768px,与 Tailwind 默认值一致 |
19
19
  | `alert-dialog` | [shadcn/alert-dialog.tsx](shadcn/alert-dialog.tsx) | [Alert Dialog](https://ui.shadcn.com/docs/components/base/alert-dialog) | 额外导出 `createAlertDialogHandle` 及其类型 |
20
20
  | `badge` | [shadcn/badge.tsx](shadcn/badge.tsx) | [Badge](https://ui.shadcn.com/docs/components/base/badge) | 提供 `info`、`success`、`warning` 语义变体 |
21
- | `breadcrumb` | [shadcn/breadcrumb.tsx](shadcn/breadcrumb.tsx) | [Breadcrumb](https://ui.shadcn.com/docs/components/base/breadcrumb) | — |
21
+ | `breadcrumb` | [shadcn/breadcrumb.tsx](shadcn/breadcrumb.tsx) | [Breadcrumb](https://ui.shadcn.com/docs/components/base/breadcrumb) | 未显式指定 `BreadcrumbList` 则自动包裹 |
22
22
  | `button` | [shadcn/button.tsx](shadcn/button.tsx) | [Button](https://ui.shadcn.com/docs/components/base/button) | `pill` 提供全圆角;`isPending` 提供居中 Spinner 加载态 |
23
23
  | `button-group` | [shadcn/button-group.tsx](shadcn/button-group.tsx) | [Button Group](https://ui.shadcn.com/docs/components/base/button-group) | — |
24
24
  | `calendar` | [shadcn/calendar.tsx](shadcn/calendar.tsx) | [Calendar](https://ui.shadcn.com/docs/components/base/calendar) | 将 `react-day-picker` 导入改为 `@daypicker/react` |
@@ -35,11 +35,11 @@ shadcn 组件使用 `components.json` 中的 `base-vega` 风格和 Lucide 图标
35
35
  | `input-group` | [shadcn/input-group.tsx](shadcn/input-group.tsx) | [Input Group](https://ui.shadcn.com/docs/components/base/input-group) | — |
36
36
  | `kbd` | [shadcn/kbd.tsx](shadcn/kbd.tsx) | [Kbd](https://ui.shadcn.com/docs/components/base/kbd) | — |
37
37
  | `label` | [shadcn/label.tsx](shadcn/label.tsx) | [Label](https://ui.shadcn.com/docs/components/base/label) | — |
38
- | `pagination` | [shadcn/pagination.tsx](shadcn/pagination.tsx) | [Pagination](https://ui.shadcn.com/docs/components/base/pagination) | — |
38
+ | `pagination` | [shadcn/pagination.tsx](shadcn/pagination.tsx) | [Pagination](https://ui.shadcn.com/docs/components/base/pagination) | 未显式指定 `PaginationContent` 则自动包裹 |
39
39
  | `popover` | [shadcn/popover.tsx](shadcn/popover.tsx) | [Popover](https://ui.shadcn.com/docs/components/base/popover) | — |
40
40
  | `progress` | [shadcn/progress.tsx](shadcn/progress.tsx) | [Progress](https://ui.shadcn.com/docs/components/base/progress) | — |
41
41
  | `radio-group` | [shadcn/radio-group.tsx](shadcn/radio-group.tsx) | [Radio Group](https://ui.shadcn.com/docs/components/base/radio-group) | — |
42
- | `select` | [shadcn/select.tsx](shadcn/select.tsx) | [Select](https://ui.shadcn.com/docs/components/base/select) | `alignItemWithTrigger` 改为默认 `false` |
42
+ | `select` | [shadcn/select.tsx](shadcn/select.tsx) | [Select](https://ui.shadcn.com/docs/components/base/select) | `alignItemWithTrigger` 改为默认 `false`;未显式指定 `SelectGroup` 则自动包裹;将选中标记移至左侧 |
43
43
  | `separator` | [shadcn/separator.tsx](shadcn/separator.tsx) | [Separator](https://ui.shadcn.com/docs/components/base/separator) | — |
44
44
  | `sheet` | [shadcn/sheet.tsx](shadcn/sheet.tsx) | [Sheet](https://ui.shadcn.com/docs/components/base/sheet) | — |
45
45
  | `sidebar` | [shadcn/sidebar.tsx](shadcn/sidebar.tsx) | [Sidebar](https://ui.shadcn.com/docs/components/base/sidebar) | `useIsMobile` 改为从 `@/vendor/coss/hooks/use-media-query` 导入 |
@@ -1,6 +1,6 @@
1
1
  import * as React$1 from "react";
2
2
  import { useRender } from "@base-ui/react/use-render";
3
- declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
3
+ declare function Breadcrumb({ className, children, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
4
4
  declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): React$1.JSX.Element;
5
5
  declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
6
6
  declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
@@ -1,16 +1,25 @@
1
1
  import { cn } from "cn";
2
2
  import { mergeProps } from "@base-ui/react/merge-props";
3
- import "react";
3
+ import * as React$1 from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
6
6
  import { useRender } from "@base-ui/react/use-render";
7
7
  // src/vendor/shadcn/breadcrumb.tsx
8
- function Breadcrumb({ className, ...props }) {
8
+ function containsBreadcrumbList(children) {
9
+ return React$1.Children.toArray(children).some((child) => {
10
+ if (!React$1.isValidElement(child)) return false;
11
+ if (child.type === BreadcrumbList) return true;
12
+ return child.type === React$1.Fragment && containsBreadcrumbList(child.props.children);
13
+ });
14
+ }
15
+ function Breadcrumb({ className, children, ...props }) {
16
+ const list = containsBreadcrumbList(children) ? children : /* @__PURE__ */ jsx(BreadcrumbList, { children });
9
17
  return /* @__PURE__ */ jsx("nav", {
10
18
  "aria-label": "breadcrumb",
11
19
  "data-slot": "breadcrumb",
12
20
  className: cn(className),
13
- ...props
21
+ ...props,
22
+ children: list
14
23
  });
15
24
  }
16
25
  function BreadcrumbList({ className, ...props }) {
@@ -1,6 +1,6 @@
1
1
  import { Button } from "./button.mjs";
2
2
  import * as React$1 from "react";
3
- declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
3
+ declare function Pagination({ className, children, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
4
4
  declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
5
5
  declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
6
6
  type PaginationLinkProps = {
@@ -1,16 +1,25 @@
1
1
  import { Button } from "./button.mjs";
2
2
  import { cn } from "cn";
3
- import "react";
3
+ import * as React$1 from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
6
6
  // src/vendor/shadcn/pagination.tsx
7
- function Pagination({ className, ...props }) {
7
+ function containsPaginationContent(children) {
8
+ return React$1.Children.toArray(children).some((child) => {
9
+ if (!React$1.isValidElement(child)) return false;
10
+ if (child.type === PaginationContent) return true;
11
+ return child.type === React$1.Fragment && containsPaginationContent(child.props.children);
12
+ });
13
+ }
14
+ function Pagination({ className, children, ...props }) {
15
+ const content = containsPaginationContent(children) ? children : /* @__PURE__ */ jsx(PaginationContent, { children });
8
16
  return /* @__PURE__ */ jsx("nav", {
9
17
  role: "navigation",
10
18
  "aria-label": "pagination",
11
19
  "data-slot": "pagination",
12
20
  className: cn("mx-auto flex w-full justify-center", className),
13
- ...props
21
+ ...props,
22
+ children: content
14
23
  });
15
24
  }
16
25
  function PaginationContent({ className, ...props }) {
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { cn } from "cn";
3
- import "react";
3
+ import * as React$1 from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
6
6
  import { Select } from "@base-ui/react/select";
@@ -29,7 +29,15 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
29
29
  children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
30
30
  });
31
31
  }
32
+ function containsSelectGroup(children) {
33
+ return React$1.Children.toArray(children).some((child) => {
34
+ if (!React$1.isValidElement(child)) return false;
35
+ if (child.type === SelectGroup) return true;
36
+ return child.type === React$1.Fragment && containsSelectGroup(child.props.children);
37
+ });
38
+ }
32
39
  function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
40
+ const groupedChildren = containsSelectGroup(children) ? children : /* @__PURE__ */ jsx(SelectGroup, { children });
33
41
  return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
34
42
  side,
35
43
  sideOffset,
@@ -40,11 +48,11 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
40
48
  children: /* @__PURE__ */ jsxs(Select.Popup, {
41
49
  "data-slot": "select-content",
42
50
  "data-align-trigger": alignItemWithTrigger,
43
- className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
51
+ className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
44
52
  ...props,
45
53
  children: [
46
54
  /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
47
- /* @__PURE__ */ jsx(Select.List, { children }),
55
+ /* @__PURE__ */ jsx(Select.List, { children: groupedChildren }),
48
56
  /* @__PURE__ */ jsx(SelectScrollDownButton, {})
49
57
  ]
50
58
  })
@@ -60,13 +68,13 @@ function SelectLabel({ className, ...props }) {
60
68
  function SelectItem({ className, children, ...props }) {
61
69
  return /* @__PURE__ */ jsxs(Select.Item, {
62
70
  "data-slot": "select-item",
63
- className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
71
+ className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
64
72
  ...props,
65
73
  children: [/* @__PURE__ */ jsx(Select.ItemText, {
66
74
  className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
67
75
  children
68
76
  }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
69
- render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
77
+ render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute top-1/2 left-2 flex size-4 -translate-y-1/2 items-center justify-center" }),
70
78
  children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
71
79
  })]
72
80
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deftui/react",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/KiriRainCat/deftui.git",