tembro 6.1.0 → 6.1.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.
Files changed (146) hide show
  1. package/dist/components/actions/action-menu.d.ts +11 -1
  2. package/dist/components/display/index.d.ts +0 -2
  3. package/dist/components/filters/index.d.ts +0 -1
  4. package/dist/components/inputs/time-picker.d.ts +11 -3
  5. package/dist/components/modern/file-manager.d.ts +1 -1
  6. package/dist/components/modern/index.d.ts +3 -1
  7. package/dist/components/modern/map.cjs +1 -0
  8. package/dist/components/modern/map.d.ts +29 -0
  9. package/dist/components/modern/map.js +1 -0
  10. package/dist/components/modern/media-player.cjs +1 -0
  11. package/dist/components/modern/media-player.d.ts +21 -0
  12. package/dist/components/modern/media-player.js +1 -0
  13. package/dist/components/modern/spreadsheet.cjs +1 -0
  14. package/dist/components/modern/spreadsheet.d.ts +35 -0
  15. package/dist/components/modern/spreadsheet.js +1 -0
  16. package/dist/components/overlay/drawer.d.ts +3 -1
  17. package/dist/index.d.ts +0 -2
  18. package/dist/src/components/actions/action-menu.cjs +1 -1
  19. package/dist/src/components/actions/action-menu.js +47 -39
  20. package/dist/src/components/actions/copy-button.cjs +1 -1
  21. package/dist/src/components/actions/copy-button.js +4 -1
  22. package/dist/src/components/calendar/date-picker.cjs +1 -1
  23. package/dist/src/components/calendar/date-picker.js +5 -8
  24. package/dist/src/components/calendar/date-range-picker.cjs +1 -1
  25. package/dist/src/components/calendar/date-range-picker.js +12 -27
  26. package/dist/src/components/data-table/data-table.cjs +1 -1
  27. package/dist/src/components/data-table/data-table.js +172 -171
  28. package/dist/src/components/display/index.cjs +1 -1
  29. package/dist/src/components/display/index.js +9 -11
  30. package/dist/src/components/filters/index.cjs +1 -1
  31. package/dist/src/components/filters/index.js +2 -3
  32. package/dist/src/components/inputs/color-picker.cjs +1 -1
  33. package/dist/src/components/inputs/color-picker.js +63 -46
  34. package/dist/src/components/inputs/slider.cjs +1 -1
  35. package/dist/src/components/inputs/slider.js +3 -3
  36. package/dist/src/components/inputs/tag-input.cjs +1 -1
  37. package/dist/src/components/inputs/tag-input.js +7 -4
  38. package/dist/src/components/inputs/time-picker.cjs +1 -1
  39. package/dist/src/components/inputs/time-picker.js +90 -34
  40. package/dist/src/components/modern/index.cjs +1 -1
  41. package/dist/src/components/modern/index.js +6 -4
  42. package/dist/src/components/modern/map.cjs +1 -0
  43. package/dist/src/components/modern/map.js +158 -0
  44. package/dist/src/components/modern/media-player.cjs +1 -0
  45. package/dist/src/components/modern/media-player.js +176 -0
  46. package/dist/src/components/modern/resizable-panel.cjs +1 -1
  47. package/dist/src/components/modern/resizable-panel.js +39 -32
  48. package/dist/src/components/modern/spreadsheet.cjs +1 -0
  49. package/dist/src/components/modern/spreadsheet.js +97 -0
  50. package/dist/src/components/navigation/pagination.cjs +1 -1
  51. package/dist/src/components/navigation/pagination.js +5 -5
  52. package/dist/src/components/notifications/toast.cjs +1 -1
  53. package/dist/src/components/notifications/toast.js +68 -63
  54. package/dist/src/components/overlay/alert-dialog.cjs +1 -1
  55. package/dist/src/components/overlay/alert-dialog.js +8 -6
  56. package/dist/src/components/overlay/drawer.cjs +1 -1
  57. package/dist/src/components/overlay/drawer.js +38 -20
  58. package/dist/src/components/ui/checkbox/index.cjs +1 -1
  59. package/dist/src/components/ui/checkbox/index.js +2 -1
  60. package/dist/src/components/ui/dialog/index.cjs +1 -1
  61. package/dist/src/components/ui/dialog/index.js +8 -8
  62. package/dist/src/components/ui/dropdown-menu/index.cjs +1 -1
  63. package/dist/src/components/ui/dropdown-menu/index.js +21 -19
  64. package/dist/src/components/ui/popover/index.cjs +1 -1
  65. package/dist/src/components/ui/popover/index.js +10 -10
  66. package/dist/src/components/ui/tabs/index.cjs +1 -1
  67. package/dist/src/components/ui/tabs/index.js +6 -6
  68. package/dist/src/components/ui/toggle-group/index.cjs +1 -1
  69. package/dist/src/components/ui/toggle-group/index.js +2 -2
  70. package/dist/src/index.cjs +1 -1
  71. package/dist/src/index.js +80 -83
  72. package/dist/src/public-component-surface.cjs +1 -1
  73. package/dist/src/public-component-surface.js +15 -20
  74. package/package.json +1 -2
  75. package/packages/cli/dist/index.cjs +58 -178
  76. package/packages/cli/vendor/src/components/actions/action-menu.tsx +47 -19
  77. package/packages/cli/vendor/src/components/actions/copy-button.tsx +2 -2
  78. package/packages/cli/vendor/src/components/calendar/date-picker.tsx +2 -5
  79. package/packages/cli/vendor/src/components/calendar/date-range-picker.tsx +5 -12
  80. package/packages/cli/vendor/src/components/data-table/data-table.tsx +45 -34
  81. package/packages/cli/vendor/src/components/display/index.ts +3 -5
  82. package/packages/cli/vendor/src/components/filters/index.ts +0 -1
  83. package/packages/cli/vendor/src/components/inputs/color-picker.tsx +15 -1
  84. package/packages/cli/vendor/src/components/inputs/slider.tsx +3 -3
  85. package/packages/cli/vendor/src/components/inputs/tag-input.tsx +4 -4
  86. package/packages/cli/vendor/src/components/inputs/time-picker.tsx +91 -38
  87. package/packages/cli/vendor/src/components/modern/file-manager.tsx +1 -1
  88. package/packages/cli/vendor/src/components/modern/index.ts +3 -1
  89. package/packages/cli/vendor/src/components/modern/map.tsx +146 -0
  90. package/packages/cli/vendor/src/components/modern/media-player.tsx +182 -0
  91. package/packages/cli/vendor/src/components/modern/resizable-panel.tsx +15 -5
  92. package/packages/cli/vendor/src/components/modern/spreadsheet.tsx +155 -0
  93. package/packages/cli/vendor/src/components/navigation/pagination.tsx +9 -5
  94. package/packages/cli/vendor/src/components/notifications/toast.tsx +20 -10
  95. package/packages/cli/vendor/src/components/overlay/alert-dialog.tsx +3 -5
  96. package/packages/cli/vendor/src/components/overlay/drawer.tsx +22 -11
  97. package/packages/cli/vendor/src/components/ui/checkbox/index.tsx +3 -1
  98. package/packages/cli/vendor/src/components/ui/dialog/index.tsx +4 -4
  99. package/packages/cli/vendor/src/components/ui/dropdown-menu/index.tsx +18 -22
  100. package/packages/cli/vendor/src/components/ui/popover/index.tsx +4 -4
  101. package/packages/cli/vendor/src/components/ui/tabs/index.tsx +8 -3
  102. package/packages/cli/vendor/src/components/ui/toggle-group/index.tsx +6 -6
  103. package/packages/cli/vendor/src/index.ts +0 -2
  104. package/packages/cli/vendor/src/public-component-surface.ts +3 -4
  105. package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts +6 -6
  106. package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx +23 -8
  107. package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx +1 -1
  108. package/packages/cli/vendor/templates/showcase/src/showcase/sections/PatternsSection.tsx +1 -1
  109. package/packages/cli/vendor/templates/styles/globals.css +0 -120
  110. package/registry.json +74 -141
  111. package/dist/components/display/info-card.cjs +0 -1
  112. package/dist/components/display/info-card.d.ts +0 -51
  113. package/dist/components/display/info-card.js +0 -1
  114. package/dist/components/display/statistic.cjs +0 -1
  115. package/dist/components/display/statistic.d.ts +0 -25
  116. package/dist/components/display/statistic.js +0 -1
  117. package/dist/components/filters/filter-bar.cjs +0 -1
  118. package/dist/components/filters/filter-bar.d.ts +0 -28
  119. package/dist/components/filters/filter-bar.js +0 -1
  120. package/dist/components/modern/image-cropper.cjs +0 -1
  121. package/dist/components/modern/image-cropper.d.ts +0 -39
  122. package/dist/components/modern/image-cropper.js +0 -1
  123. package/dist/components/ui/number-field/index.cjs +0 -1
  124. package/dist/components/ui/number-field/index.d.ts +0 -18
  125. package/dist/components/ui/number-field/index.js +0 -1
  126. package/dist/components/ui/toolbar/index.cjs +0 -1
  127. package/dist/components/ui/toolbar/index.d.ts +0 -14
  128. package/dist/components/ui/toolbar/index.js +0 -1
  129. package/dist/src/components/display/info-card.cjs +0 -1
  130. package/dist/src/components/display/info-card.js +0 -124
  131. package/dist/src/components/display/statistic.cjs +0 -1
  132. package/dist/src/components/display/statistic.js +0 -104
  133. package/dist/src/components/filters/filter-bar.cjs +0 -1
  134. package/dist/src/components/filters/filter-bar.js +0 -103
  135. package/dist/src/components/modern/image-cropper.cjs +0 -1
  136. package/dist/src/components/modern/image-cropper.js +0 -143
  137. package/dist/src/components/ui/number-field/index.cjs +0 -1
  138. package/dist/src/components/ui/number-field/index.js +0 -73
  139. package/dist/src/components/ui/toolbar/index.cjs +0 -1
  140. package/dist/src/components/ui/toolbar/index.js +0 -50
  141. package/packages/cli/vendor/src/components/display/info-card.tsx +0 -195
  142. package/packages/cli/vendor/src/components/display/statistic.tsx +0 -114
  143. package/packages/cli/vendor/src/components/filters/filter-bar.tsx +0 -163
  144. package/packages/cli/vendor/src/components/modern/image-cropper.tsx +0 -226
  145. package/packages/cli/vendor/src/components/ui/number-field/index.tsx +0 -89
  146. package/packages/cli/vendor/src/components/ui/toolbar/index.tsx +0 -67
@@ -1 +0,0 @@
1
- export * from "../../src/components/display/statistic.js"
@@ -1 +0,0 @@
1
- module.exports = require("../../src/components/filters/filter-bar.cjs")
@@ -1,28 +0,0 @@
1
- import * as React from "react";
2
- export type FilterBarChip = {
3
- key: string;
4
- label: React.ReactNode;
5
- value?: React.ReactNode;
6
- tone?: "default" | "success" | "warning" | "danger" | "info" | "muted";
7
- disabled?: boolean;
8
- hidden?: boolean;
9
- };
10
- export type FilterBarProps = React.ComponentProps<"div"> & {
11
- search?: React.ReactNode;
12
- filters?: React.ReactNode;
13
- actions?: React.ReactNode;
14
- chips?: FilterBarChip[];
15
- activeCount?: number;
16
- activeLabel?: (count: number) => React.ReactNode;
17
- resetLabel?: React.ReactNode;
18
- clearChipLabel?: React.ReactNode;
19
- onReset?: () => void;
20
- onRemoveChip?: (key: string) => void;
21
- collapsible?: boolean;
22
- defaultExpanded?: boolean;
23
- emptyChips?: React.ReactNode;
24
- chipLimit?: number;
25
- chipOverflowLabel?: (hiddenCount: number) => React.ReactNode;
26
- };
27
- declare function FilterBar({ className, search, filters, actions, chips, activeCount, activeLabel, resetLabel, clearChipLabel, onReset, onRemoveChip, collapsible, defaultExpanded, emptyChips, chipLimit, chipOverflowLabel, children, ...props }: FilterBarProps): React.JSX.Element;
28
- export { FilterBar };
@@ -1 +0,0 @@
1
- export * from "../../src/components/filters/filter-bar.js"
@@ -1 +0,0 @@
1
- module.exports = require("../../src/components/modern/image-cropper.cjs")
@@ -1,39 +0,0 @@
1
- import * as React from "react";
2
- import { type Area, type Point } from "react-easy-crop";
3
- export declare function createCroppedImageBlob({ src, crop, rotation, type, quality, crossOrigin, }: {
4
- src: string;
5
- crop: Area;
6
- rotation?: number;
7
- type?: string;
8
- quality?: number;
9
- crossOrigin?: string;
10
- }): Promise<Blob>;
11
- export type ImageCropperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
12
- src: string;
13
- alt?: string;
14
- crop?: Point;
15
- defaultCrop?: Point;
16
- onCropChange?: (crop: Point) => void;
17
- zoom?: number;
18
- defaultZoom?: number;
19
- onZoomChange?: (zoom: number) => void;
20
- rotation?: number;
21
- defaultRotation?: number;
22
- onRotationChange?: (rotation: number) => void;
23
- onCropComplete?: (area: Area, areaPixels: Area) => void;
24
- aspect?: number;
25
- cropShape?: "rect" | "round";
26
- objectFit?: "contain" | "cover" | "horizontal-cover" | "vertical-cover";
27
- minZoom?: number;
28
- maxZoom?: number;
29
- zoomStep?: number;
30
- showGrid?: boolean;
31
- disabled?: boolean;
32
- labels?: {
33
- cropper?: string;
34
- zoom?: string;
35
- rotation?: string;
36
- };
37
- };
38
- declare function ImageCropper({ src, alt, crop, defaultCrop, onCropChange, zoom, defaultZoom, onZoomChange, rotation, defaultRotation, onRotationChange, onCropComplete, aspect, cropShape, objectFit, minZoom, maxZoom, zoomStep, showGrid, disabled, labels, className, ...props }: ImageCropperProps): React.JSX.Element;
39
- export { ImageCropper };
@@ -1 +0,0 @@
1
- export * from "../../src/components/modern/image-cropper.js"
@@ -1 +0,0 @@
1
- module.exports = require("../../../src/components/ui/number-field/index.cjs")
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
3
- export type NumberFieldProps = NumberFieldPrimitive.Root.Props;
4
- export type NumberFieldGroupProps = NumberFieldPrimitive.Group.Props;
5
- export type NumberFieldInputProps = NumberFieldPrimitive.Input.Props;
6
- export type NumberFieldIncrementProps = NumberFieldPrimitive.Increment.Props;
7
- export type NumberFieldDecrementProps = NumberFieldPrimitive.Decrement.Props;
8
- export type NumberFieldScrubAreaProps = NumberFieldPrimitive.ScrubArea.Props;
9
- export type NumberFieldScrubAreaCursorProps = NumberFieldPrimitive.ScrubAreaCursor.Props;
10
- declare function NumberField({ className, ...props }: NumberFieldProps): React.JSX.Element;
11
- declare function NumberFieldGroup({ className, ...props }: NumberFieldGroupProps): React.JSX.Element;
12
- declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): React.JSX.Element;
13
- declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): React.JSX.Element;
14
- declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): React.JSX.Element;
15
- declare function NumberFieldStepper({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
16
- declare function NumberFieldScrubArea({ className, ...props }: NumberFieldScrubAreaProps): React.JSX.Element;
17
- declare function NumberFieldScrubAreaCursor({ className, ...props }: NumberFieldScrubAreaCursorProps): React.JSX.Element;
18
- export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldStepper, };
@@ -1 +0,0 @@
1
- export * from "../../../src/components/ui/number-field/index.js"
@@ -1 +0,0 @@
1
- module.exports = require("../../../src/components/ui/toolbar/index.cjs")
@@ -1,14 +0,0 @@
1
- import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
2
- export type ToolbarProps = ToolbarPrimitive.Root.Props;
3
- export type ToolbarGroupProps = ToolbarPrimitive.Group.Props;
4
- export type ToolbarButtonProps = ToolbarPrimitive.Button.Props;
5
- export type ToolbarLinkProps = ToolbarPrimitive.Link.Props;
6
- export type ToolbarInputProps = ToolbarPrimitive.Input.Props;
7
- export type ToolbarSeparatorProps = ToolbarPrimitive.Separator.Props;
8
- declare function Toolbar({ className, orientation, ...props }: ToolbarProps): import("react").JSX.Element;
9
- declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
10
- declare function ToolbarButton({ className, ...props }: ToolbarButtonProps): import("react").JSX.Element;
11
- declare function ToolbarLink({ className, ...props }: ToolbarLinkProps): import("react").JSX.Element;
12
- declare function ToolbarInput({ className, ...props }: ToolbarInputProps): import("react").JSX.Element;
13
- declare function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
14
- export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };
@@ -1 +0,0 @@
1
- export * from "../../../src/components/ui/toolbar/index.js"
@@ -1 +0,0 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../ui/skeleton/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={compact:`gap-2`,default:`gap-3`,comfortable:`gap-4`},s={sm:`text-sm font-semibold`,md:`text-base font-semibold`,lg:`text-lg font-semibold`};function c({eyebrow:e,title:i,description:c,media:l,icon:u,status:d,actions:f,meta:p,content:m,footer:h,orientation:g=`vertical`,variant:_=`outline`,size:v=`md`,density:y,compact:b,loading:x=!1,disabled:S=!1,selected:C=!1,interactive:w,className:T,classNames:E,renderHeader:D,renderMedia:O,renderContent:k,renderFooter:A,children:j,onClick:M,...N}){let P={eyebrow:e,title:i,description:c,media:l,icon:u,status:d,actions:f,meta:p,content:m,footer:h},F=!!(M||w),I=b?`compact`:y??`default`;return(0,a.jsx)(n.Card,{"data-slot":`info-card`,"data-selected":C||void 0,"data-disabled":S||void 0,"data-loading":x||void 0,"data-info-variant":_,"data-info-size":v,"data-info-density":I,"data-orientation":g,variant:_,size:v===`md`?`default`:v,density:I,interactive:F,selected:C,disabled:S,className:t.cn(`overflow-hidden`,g===`horizontal`&&`flex`,T,E?.root),onClick:S?void 0:M,...N,children:x?(0,a.jsxs)(`div`,{"data-slot":`info-card-loading`,className:`grid gap-3`,children:[(0,a.jsx)(r.Skeleton,{className:`h-5 w-1/2`}),(0,a.jsx)(r.SkeletonText,{rows:3})]}):(0,a.jsxs)(a.Fragment,{children:[l&&(O?.(P)??(0,a.jsx)(`div`,{"data-slot":`info-card-media`,className:t.cn(g===`horizontal`?`w-40 shrink-0`:`aspect-video`,E?.media),children:l})),(0,a.jsxs)(`div`,{"data-slot":`info-card-body`,className:t.cn(`grid min-w-0 flex-1 gap-3`,o[I],E?.body),children:[D?.(P)??(0,a.jsxs)(`div`,{"data-slot":`info-card-header`,className:t.cn(`flex items-start justify-between gap-3`,E?.header),children:[(0,a.jsxs)(`div`,{className:`flex min-w-0 items-start gap-3`,children:[u&&(0,a.jsx)(`div`,{"data-slot":`info-card-icon`,className:t.cn(`flex shrink-0 items-center justify-center`,E?.icon),children:u}),(0,a.jsxs)(`div`,{className:`grid min-w-0 gap-1`,children:[e&&(0,a.jsx)(`div`,{"data-slot":`info-card-eyebrow`,className:E?.eyebrow,children:e}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[i&&(0,a.jsx)(`div`,{"data-slot":`info-card-title`,className:t.cn(`truncate`,s[v],E?.title),children:i}),d&&(0,a.jsx)(`div`,{"data-slot":`info-card-status`,className:E?.status,children:d})]}),c&&(0,a.jsx)(`div`,{"data-slot":`info-card-description`,className:t.cn(`line-clamp-2`,E?.description),children:c})]})]}),f&&(0,a.jsx)(`div`,{"data-slot":`info-card-actions`,className:t.cn(`shrink-0`,E?.actions),onClick:t.stopInteractivePropagation,onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:f})]}),p&&(0,a.jsx)(`div`,{"data-slot":`info-card-meta`,className:E?.meta,children:p}),(m||j)&&(k?.(P)??(0,a.jsx)(`div`,{"data-slot":`info-card-content`,className:E?.content,children:m??j})),h&&(A?.(P)??(0,a.jsx)(`div`,{"data-slot":`info-card-footer`,className:E?.footer,children:h}))]})]})})}exports.InfoCard=c;
@@ -1,124 +0,0 @@
1
- import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
2
- import { Card as n } from "../ui/card/index.js";
3
- import { Skeleton as r, SkeletonText as i } from "../ui/skeleton/index.js";
4
- import "react";
5
- import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
6
- //#region src/components/display/info-card.tsx
7
- var c = {
8
- compact: "gap-2",
9
- default: "gap-3",
10
- comfortable: "gap-4"
11
- }, l = {
12
- sm: "text-sm font-semibold",
13
- md: "text-base font-semibold",
14
- lg: "text-lg font-semibold"
15
- };
16
- function u({ eyebrow: u, title: d, description: f, media: p, icon: m, status: h, actions: g, meta: _, content: v, footer: y, orientation: b = "vertical", variant: x = "outline", size: S = "md", density: C, compact: w, loading: T = !1, disabled: E = !1, selected: D = !1, interactive: O, className: k, classNames: A, renderHeader: j, renderMedia: M, renderContent: N, renderFooter: P, children: F, onClick: I, ...L }) {
17
- let R = {
18
- eyebrow: u,
19
- title: d,
20
- description: f,
21
- media: p,
22
- icon: m,
23
- status: h,
24
- actions: g,
25
- meta: _,
26
- content: v,
27
- footer: y
28
- }, z = !!(I || O), B = w ? "compact" : C ?? "default";
29
- return /* @__PURE__ */ o(n, {
30
- "data-slot": "info-card",
31
- "data-selected": D || void 0,
32
- "data-disabled": E || void 0,
33
- "data-loading": T || void 0,
34
- "data-info-variant": x,
35
- "data-info-size": S,
36
- "data-info-density": B,
37
- "data-orientation": b,
38
- variant: x,
39
- size: S === "md" ? "default" : S,
40
- density: B,
41
- interactive: z,
42
- selected: D,
43
- disabled: E,
44
- className: e("overflow-hidden", b === "horizontal" && "flex", k, A?.root),
45
- onClick: E ? void 0 : I,
46
- ...L,
47
- children: T ? /* @__PURE__ */ s("div", {
48
- "data-slot": "info-card-loading",
49
- className: "grid gap-3",
50
- children: [/* @__PURE__ */ o(r, { className: "h-5 w-1/2" }), /* @__PURE__ */ o(i, { rows: 3 })]
51
- }) : /* @__PURE__ */ s(a, { children: [p && (M?.(R) ?? /* @__PURE__ */ o("div", {
52
- "data-slot": "info-card-media",
53
- className: e(b === "horizontal" ? "w-40 shrink-0" : "aspect-video", A?.media),
54
- children: p
55
- })), /* @__PURE__ */ s("div", {
56
- "data-slot": "info-card-body",
57
- className: e("grid min-w-0 flex-1 gap-3", c[B], A?.body),
58
- children: [
59
- j?.(R) ?? /* @__PURE__ */ s("div", {
60
- "data-slot": "info-card-header",
61
- className: e("flex items-start justify-between gap-3", A?.header),
62
- children: [/* @__PURE__ */ s("div", {
63
- className: "flex min-w-0 items-start gap-3",
64
- children: [m && /* @__PURE__ */ o("div", {
65
- "data-slot": "info-card-icon",
66
- className: e("flex shrink-0 items-center justify-center", A?.icon),
67
- children: m
68
- }), /* @__PURE__ */ s("div", {
69
- className: "grid min-w-0 gap-1",
70
- children: [
71
- u && /* @__PURE__ */ o("div", {
72
- "data-slot": "info-card-eyebrow",
73
- className: A?.eyebrow,
74
- children: u
75
- }),
76
- /* @__PURE__ */ s("div", {
77
- className: "flex flex-wrap items-center gap-2",
78
- children: [d && /* @__PURE__ */ o("div", {
79
- "data-slot": "info-card-title",
80
- className: e("truncate", l[S], A?.title),
81
- children: d
82
- }), h && /* @__PURE__ */ o("div", {
83
- "data-slot": "info-card-status",
84
- className: A?.status,
85
- children: h
86
- })]
87
- }),
88
- f && /* @__PURE__ */ o("div", {
89
- "data-slot": "info-card-description",
90
- className: e("line-clamp-2", A?.description),
91
- children: f
92
- })
93
- ]
94
- })]
95
- }), g && /* @__PURE__ */ o("div", {
96
- "data-slot": "info-card-actions",
97
- className: e("shrink-0", A?.actions),
98
- onClick: t,
99
- onMouseDown: t,
100
- onDoubleClick: t,
101
- children: g
102
- })]
103
- }),
104
- _ && /* @__PURE__ */ o("div", {
105
- "data-slot": "info-card-meta",
106
- className: A?.meta,
107
- children: _
108
- }),
109
- (v || F) && (N?.(R) ?? /* @__PURE__ */ o("div", {
110
- "data-slot": "info-card-content",
111
- className: A?.content,
112
- children: v ?? F
113
- })),
114
- y && (P?.(R) ?? /* @__PURE__ */ o("div", {
115
- "data-slot": "info-card-footer",
116
- className: A?.footer,
117
- children: y
118
- }))
119
- ]
120
- })] })
121
- });
122
- }
123
- //#endregion
124
- export { u as InfoCard };
@@ -1 +0,0 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({label:e,value:n,prefix:r,suffix:o,description:s,trend:c=`neutral`,change:l,loading:u=!1,className:d,...f}){let p=c===`up`?(0,a.jsx)(i.ArrowUpIcon,{className:`size-3`}):c===`down`?(0,a.jsx)(i.ArrowDownIcon,{className:`size-3`}):null;return(0,a.jsxs)(`div`,{"data-slot":`statistic`,"data-loading":u||void 0,"data-trend":c,"aria-busy":u||void 0,className:t.cn(`grid gap-1`,d),...f,children:[(0,a.jsx)(`div`,{"data-slot":`statistic-label`,className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{"data-slot":`statistic-value-row`,className:`flex flex-wrap items-baseline gap-1.5`,children:u?(0,a.jsx)(`div`,{"data-slot":`statistic-skeleton`,className:`h-8 w-28 animate-pulse rounded-md bg-muted`}):(0,a.jsxs)(a.Fragment,{children:[r&&(0,a.jsx)(`span`,{"data-slot":`statistic-prefix`,className:`text-base text-muted-foreground`,children:r}),(0,a.jsx)(`span`,{"data-slot":`statistic-value`,className:`text-2xl font-semibold tracking-tight`,children:n}),o&&(0,a.jsx)(`span`,{"data-slot":`statistic-suffix`,className:`text-sm text-muted-foreground`,children:o})]})}),(s||l)&&(0,a.jsxs)(`div`,{"data-slot":`statistic-meta`,className:`flex flex-wrap items-center gap-2 text-xs text-muted-foreground`,children:[l&&(0,a.jsxs)(`span`,{"data-slot":`statistic-change`,"data-trend":c,className:t.cn(`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium`,c===`up`&&`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,c===`down`&&`bg-destructive/10 text-destructive`,c===`neutral`&&`bg-muted text-muted-foreground`),children:[p,l]}),s&&(0,a.jsx)(`span`,{"data-slot":`statistic-description`,children:s})]})]})}function s({action:e,density:r=`default`,label:i,value:s,prefix:c,suffix:l,description:u,trend:d,change:f,loading:p,className:m,...h}){return(0,a.jsxs)(n.Card,{"data-slot":`statistic-card`,"data-density":r,className:m,...h,children:[(0,a.jsxs)(n.CardHeader,{"data-slot":`statistic-card-header`,className:t.cn(`flex flex-row items-center justify-between gap-3 pb-2`,r===`compact`&&`px-4 pt-4 pb-1`),children:[(0,a.jsx)(n.CardTitle,{className:`text-sm font-medium text-muted-foreground`,children:i}),e?(0,a.jsx)(`div`,{"data-slot":`statistic-card-action`,children:e}):null]}),(0,a.jsx)(n.CardContent,{className:t.cn(r===`compact`&&`px-4 pb-4`),children:(0,a.jsx)(o,{label:(0,a.jsx)(`span`,{className:`sr-only`,children:i}),value:s,prefix:c,suffix:l,description:u,trend:d,change:f,loading:p})})]})}function c({columns:e=4,gap:n=`default`,className:r,...i}){return(0,a.jsx)(`div`,{"data-slot":`statistic-grid`,className:t.cn(`grid`,n===`sm`&&`gap-3`,n==="default"&&`gap-4`,n===`lg`&&`gap-6`,e===1&&`grid-cols-1`,e===2&&`grid-cols-1 sm:grid-cols-2`,e===3&&`grid-cols-1 sm:grid-cols-2 xl:grid-cols-3`,e===4&&`grid-cols-1 sm:grid-cols-2 xl:grid-cols-4`,r),...i})}exports.Statistic=o,exports.StatisticCard=s,exports.StatisticGrid=c;
@@ -1,104 +0,0 @@
1
- import { cn as e } from "../../lib/utils.js";
2
- import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "../ui/card/index.js";
3
- import "react";
4
- import { ArrowDownIcon as a, ArrowUpIcon as o } from "lucide-react";
5
- import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
6
- //#region src/components/display/statistic.tsx
7
- function u({ label: t, value: n, prefix: r, suffix: i, description: u, trend: d = "neutral", change: f, loading: p = !1, className: m, ...h }) {
8
- let g = d === "up" ? /* @__PURE__ */ c(o, { className: "size-3" }) : d === "down" ? /* @__PURE__ */ c(a, { className: "size-3" }) : null;
9
- return /* @__PURE__ */ l("div", {
10
- "data-slot": "statistic",
11
- "data-loading": p || void 0,
12
- "data-trend": d,
13
- "aria-busy": p || void 0,
14
- className: e("grid gap-1", m),
15
- ...h,
16
- children: [
17
- /* @__PURE__ */ c("div", {
18
- "data-slot": "statistic-label",
19
- className: "text-sm text-muted-foreground",
20
- children: t
21
- }),
22
- /* @__PURE__ */ c("div", {
23
- "data-slot": "statistic-value-row",
24
- className: "flex flex-wrap items-baseline gap-1.5",
25
- children: p ? /* @__PURE__ */ c("div", {
26
- "data-slot": "statistic-skeleton",
27
- className: "h-8 w-28 animate-pulse rounded-md bg-muted"
28
- }) : /* @__PURE__ */ l(s, { children: [
29
- r && /* @__PURE__ */ c("span", {
30
- "data-slot": "statistic-prefix",
31
- className: "text-base text-muted-foreground",
32
- children: r
33
- }),
34
- /* @__PURE__ */ c("span", {
35
- "data-slot": "statistic-value",
36
- className: "text-2xl font-semibold tracking-tight",
37
- children: n
38
- }),
39
- i && /* @__PURE__ */ c("span", {
40
- "data-slot": "statistic-suffix",
41
- className: "text-sm text-muted-foreground",
42
- children: i
43
- })
44
- ] })
45
- }),
46
- (u || f) && /* @__PURE__ */ l("div", {
47
- "data-slot": "statistic-meta",
48
- className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
49
- children: [f && /* @__PURE__ */ l("span", {
50
- "data-slot": "statistic-change",
51
- "data-trend": d,
52
- className: e("inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium", d === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", d === "down" && "bg-destructive/10 text-destructive", d === "neutral" && "bg-muted text-muted-foreground"),
53
- children: [g, f]
54
- }), u && /* @__PURE__ */ c("span", {
55
- "data-slot": "statistic-description",
56
- children: u
57
- })]
58
- })
59
- ]
60
- });
61
- }
62
- function d({ action: a, density: o = "default", label: s, value: d, prefix: f, suffix: p, description: m, trend: h, change: g, loading: _, className: v, ...y }) {
63
- return /* @__PURE__ */ l(t, {
64
- "data-slot": "statistic-card",
65
- "data-density": o,
66
- className: v,
67
- ...y,
68
- children: [/* @__PURE__ */ l(r, {
69
- "data-slot": "statistic-card-header",
70
- className: e("flex flex-row items-center justify-between gap-3 pb-2", o === "compact" && "px-4 pt-4 pb-1"),
71
- children: [/* @__PURE__ */ c(i, {
72
- className: "text-sm font-medium text-muted-foreground",
73
- children: s
74
- }), a ? /* @__PURE__ */ c("div", {
75
- "data-slot": "statistic-card-action",
76
- children: a
77
- }) : null]
78
- }), /* @__PURE__ */ c(n, {
79
- className: e(o === "compact" && "px-4 pb-4"),
80
- children: /* @__PURE__ */ c(u, {
81
- label: /* @__PURE__ */ c("span", {
82
- className: "sr-only",
83
- children: s
84
- }),
85
- value: d,
86
- prefix: f,
87
- suffix: p,
88
- description: m,
89
- trend: h,
90
- change: g,
91
- loading: _
92
- })
93
- })]
94
- });
95
- }
96
- function f({ columns: t = 4, gap: n = "default", className: r, ...i }) {
97
- return /* @__PURE__ */ c("div", {
98
- "data-slot": "statistic-grid",
99
- className: e("grid", n === "sm" && "gap-3", n === "default" && "gap-4", n === "lg" && "gap-6", t === 1 && "grid-cols-1", t === 2 && "grid-cols-1 sm:grid-cols-2", t === 3 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3", t === 4 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", r),
100
- ...i
101
- });
102
- }
103
- //#endregion
104
- export { u as Statistic, d as StatisticCard, f as StatisticGrid };
@@ -1 +0,0 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s={default:`secondary`,success:`secondary`,warning:`outline`,danger:`destructive`,info:`outline`,muted:`outline`};function c({className:e,search:c,filters:l,actions:u,chips:d,activeCount:f,activeLabel:p=e=>`${e} active`,resetLabel:m=`Reset`,clearChipLabel:h,onReset:g,onRemoveChip:_,collapsible:v=!1,defaultExpanded:y=!1,emptyChips:b,chipLimit:x,chipOverflowLabel:S=e=>`+${e} more`,children:C,...w}){let[T,E]=i.useState(y),D=d?.filter(e=>!e.hidden)??[],O=x&&x>0?D.slice(0,x):D,k=Math.max(D.length-O.length,0),A=f??D.length,j=!!(l||C),M=!!d,N=!v||T,P=D.length>0||M&&b;return(0,o.jsxs)(`div`,{"data-slot":`filter-bar`,className:t.cn(`flex flex-col gap-3 rounded-lg border bg-card p-3`,e),...w,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between`,children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[c&&(0,o.jsx)(`div`,{className:`min-w-0 flex-1`,children:c}),v&&j&&(0,o.jsxs)(n.Button,{type:`button`,variant:T?`secondary`:`outline`,size:`sm`,onClick:()=>E(e=>!e),children:[(0,o.jsx)(a.SlidersHorizontalIcon,{"data-icon":`inline-start`}),`Filters`,A>0&&(0,o.jsx)(`span`,{className:`ml-1 rounded-full bg-background px-1.5 text-xs`,children:A})]})]}),(0,o.jsxs)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:[A>0&&(0,o.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:p(A)}),A>0&&g&&(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:g,children:[(0,o.jsx)(a.XIcon,{"data-icon":`inline-start`}),m]}),u]})]}),j&&N&&(0,o.jsxs)(`div`,{className:`flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center`,children:[l,C]}),P&&(0,o.jsx)(`div`,{"data-slot":`filter-bar-chips`,className:`flex flex-wrap items-center gap-2`,children:D.length>0?(0,o.jsxs)(o.Fragment,{children:[O.map(e=>(0,o.jsxs)(r.Badge,{variant:s[e.tone??`default`],className:t.cn(`gap-1.5`,e.disabled&&`opacity-60`),children:[(0,o.jsx)(`span`,{children:e.label}),e.value!==void 0&&(0,o.jsx)(`span`,{className:`text-muted-foreground`,children:e.value}),_&&!e.disabled&&(0,o.jsx)(`button`,{type:`button`,"aria-label":typeof h==`string`?h:`Remove filter`,className:`rounded-full p-0.5 hover:bg-muted`,onClick:n=>{t.stopInteractivePropagation(n),_(e.key)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e.key)),k>0?(0,o.jsx)(r.Badge,{variant:`outline`,children:S(k)}):null]}):(0,o.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:b})})]})}exports.FilterBar=c;
@@ -1,103 +0,0 @@
1
- "use client";
2
- import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
3
- import { Button as n } from "../ui/button/index.js";
4
- import { Badge as r } from "../ui/badge/index.js";
5
- import * as i from "react";
6
- import { SlidersHorizontalIcon as a, XIcon as o } from "lucide-react";
7
- import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
8
- //#region src/components/filters/filter-bar.tsx
9
- var u = {
10
- default: "secondary",
11
- success: "secondary",
12
- warning: "outline",
13
- danger: "destructive",
14
- info: "outline",
15
- muted: "outline"
16
- };
17
- function d({ className: d, search: f, filters: p, actions: m, chips: h, activeCount: g, activeLabel: _ = (e) => `${e} active`, resetLabel: v = "Reset", clearChipLabel: y, onReset: b, onRemoveChip: x, collapsible: S = !1, defaultExpanded: C = !1, emptyChips: w, chipLimit: T, chipOverflowLabel: E = (e) => `+${e} more`, children: D, ...O }) {
18
- let [k, A] = i.useState(C), j = h?.filter((e) => !e.hidden) ?? [], M = T && T > 0 ? j.slice(0, T) : j, N = Math.max(j.length - M.length, 0), P = g ?? j.length, F = !!(p || D), I = !!h, L = !S || k, R = j.length > 0 || I && w;
19
- return /* @__PURE__ */ l("div", {
20
- "data-slot": "filter-bar",
21
- className: e("flex flex-col gap-3 rounded-lg border bg-card p-3", d),
22
- ...O,
23
- children: [
24
- /* @__PURE__ */ l("div", {
25
- className: "flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
26
- children: [/* @__PURE__ */ l("div", {
27
- className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center",
28
- children: [f && /* @__PURE__ */ c("div", {
29
- className: "min-w-0 flex-1",
30
- children: f
31
- }), S && F && /* @__PURE__ */ l(n, {
32
- type: "button",
33
- variant: k ? "secondary" : "outline",
34
- size: "sm",
35
- onClick: () => A((e) => !e),
36
- children: [
37
- /* @__PURE__ */ c(a, { "data-icon": "inline-start" }),
38
- "Filters",
39
- P > 0 && /* @__PURE__ */ c("span", {
40
- className: "ml-1 rounded-full bg-background px-1.5 text-xs",
41
- children: P
42
- })
43
- ]
44
- })]
45
- }), /* @__PURE__ */ l("div", {
46
- className: "flex shrink-0 flex-wrap items-center gap-2",
47
- children: [
48
- P > 0 && /* @__PURE__ */ c("span", {
49
- className: "text-sm text-muted-foreground",
50
- children: _(P)
51
- }),
52
- P > 0 && b && /* @__PURE__ */ l(n, {
53
- type: "button",
54
- variant: "ghost",
55
- size: "sm",
56
- onClick: b,
57
- children: [/* @__PURE__ */ c(o, { "data-icon": "inline-start" }), v]
58
- }),
59
- m
60
- ]
61
- })]
62
- }),
63
- F && L && /* @__PURE__ */ l("div", {
64
- className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center",
65
- children: [p, D]
66
- }),
67
- R && /* @__PURE__ */ c("div", {
68
- "data-slot": "filter-bar-chips",
69
- className: "flex flex-wrap items-center gap-2",
70
- children: j.length > 0 ? /* @__PURE__ */ l(s, { children: [M.map((n) => /* @__PURE__ */ l(r, {
71
- variant: u[n.tone ?? "default"],
72
- className: e("gap-1.5", n.disabled && "opacity-60"),
73
- children: [
74
- /* @__PURE__ */ c("span", { children: n.label }),
75
- n.value !== void 0 && /* @__PURE__ */ c("span", {
76
- className: "text-muted-foreground",
77
- children: n.value
78
- }),
79
- x && !n.disabled && /* @__PURE__ */ c("button", {
80
- type: "button",
81
- "aria-label": typeof y == "string" ? y : "Remove filter",
82
- className: "rounded-full p-0.5 hover:bg-muted",
83
- onClick: (e) => {
84
- t(e), x(n.key);
85
- },
86
- onMouseDown: t,
87
- onDoubleClick: t,
88
- children: /* @__PURE__ */ c(o, { className: "size-3" })
89
- })
90
- ]
91
- }, n.key)), N > 0 ? /* @__PURE__ */ c(r, {
92
- variant: "outline",
93
- children: E(N)
94
- }) : null] }) : /* @__PURE__ */ c("span", {
95
- className: "text-sm text-muted-foreground",
96
- children: w
97
- })
98
- })
99
- ]
100
- });
101
- }
102
- //#endregion
103
- export { d as FilterBar };
@@ -1 +0,0 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("react-easy-crop");a=e.__toESM(a,1);function o(e){return e*Math.PI/180}function s(e,t,n){let r=o(n);return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}function c(e,t){return new Promise((n,r)=>{let i=new Image;t&&(i.crossOrigin=t),i.onload=()=>n(i),i.onerror=()=>r(Error(`Crop source image could not be loaded`)),i.src=e})}async function l({src:e,crop:t,rotation:n=0,type:r=`image/png`,quality:i=.92,crossOrigin:a=`anonymous`}){let l=await c(e,a),u=s(l.naturalWidth,l.naturalHeight,n),d=document.createElement(`canvas`);d.width=Math.ceil(u.width),d.height=Math.ceil(u.height);let f=d.getContext(`2d`);if(!f)throw Error(`Canvas 2D context is unavailable`);f.translate(d.width/2,d.height/2),f.rotate(o(n)),f.translate(-l.naturalWidth/2,-l.naturalHeight/2),f.drawImage(l,0,0);let p=document.createElement(`canvas`);p.width=Math.max(1,Math.round(t.width)),p.height=Math.max(1,Math.round(t.height));let m=p.getContext(`2d`);if(!m)throw Error(`Canvas 2D context is unavailable`);return m.drawImage(d,Math.round(t.x),Math.round(t.y),Math.round(t.width),Math.round(t.height),0,0,p.width,p.height),new Promise((e,t)=>{p.toBlob(n=>n?e(n):t(Error(`Cropped image could not be encoded`)),r,i)})}function u({src:e,alt:o=`Image crop preview`,crop:s,defaultCrop:c={x:0,y:0},onCropChange:l,zoom:u,defaultZoom:d=1,onZoomChange:f,rotation:p,defaultRotation:m=0,onRotationChange:h,onCropComplete:g,aspect:_=1,cropShape:v=`rect`,objectFit:y=`contain`,minZoom:b=1,maxZoom:x=3,zoomStep:S=.1,showGrid:C=!0,disabled:w=!1,labels:T,className:E,...D}){let[O,k]=n.useState(c),[A,j]=n.useState(d),[M,N]=n.useState(m),P=s??O,F=u??A,I=p??M;return(0,i.jsxs)(`div`,{"data-slot":`image-cropper`,"data-disabled":w||void 0,className:t.cn(`grid gap-3 data-[disabled]:opacity-60`,E),...D,children:[(0,i.jsx)(`div`,{role:`img`,"aria-label":T?.cropper??o,className:t.cn(`relative min-h-64 overflow-hidden rounded-md bg-black`,w&&`pointer-events-none`),style:{aspectRatio:_},children:(0,i.jsx)(a.default,{image:e,crop:P,zoom:F,rotation:I,aspect:_,cropShape:v,objectFit:y,minZoom:b,maxZoom:x,zoomSpeed:S,showGrid:C,onCropChange:e=>{s===void 0&&k(e),l?.(e)},onZoomChange:e=>{u===void 0&&j(e),f?.(e)},onRotationChange:e=>{p===void 0&&N(e),h?.(e)},onCropComplete:g})}),(0,i.jsxs)(`div`,{className:`grid gap-2 sm:grid-cols-2`,children:[(0,i.jsxs)(`label`,{className:`grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.ZoomInIcon,{className:`size-4`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:T?.zoom??`Zoom`}),(0,i.jsx)(`input`,{type:`range`,min:b,max:x,step:S,value:F,disabled:w,"aria-label":T?.zoom??`Zoom`,className:`w-full accent-foreground`,onChange:e=>{let t=Number(e.target.value);u===void 0&&j(t),f?.(t)}}),(0,i.jsxs)(`span`,{className:`w-9 text-right tabular-nums`,children:[F.toFixed(1),`x`]})]}),(0,i.jsxs)(`label`,{className:`grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.RotateCwIcon,{className:`size-4`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:T?.rotation??`Rotation`}),(0,i.jsx)(`input`,{type:`range`,min:`-180`,max:`180`,step:`1`,value:I,disabled:w,"aria-label":T?.rotation??`Rotation`,className:`w-full accent-foreground`,onChange:e=>{let t=Number(e.target.value);p===void 0&&N(t),h?.(t)}}),(0,i.jsxs)(`span`,{className:`w-10 text-right tabular-nums`,children:[Math.round(I),`°`]})]})]})]})}exports.ImageCropper=u,exports.createCroppedImageBlob=l;
@@ -1,143 +0,0 @@
1
- "use client";
2
- import { cn as e } from "../../lib/utils.js";
3
- import * as t from "react";
4
- import { RotateCwIcon as n, ZoomInIcon as r } from "lucide-react";
5
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
- import o from "react-easy-crop";
7
- //#region src/components/modern/image-cropper.tsx
8
- function s(e) {
9
- return e * Math.PI / 180;
10
- }
11
- function c(e, t, n) {
12
- let r = s(n);
13
- return {
14
- width: Math.abs(Math.cos(r) * e) + Math.abs(Math.sin(r) * t),
15
- height: Math.abs(Math.sin(r) * e) + Math.abs(Math.cos(r) * t)
16
- };
17
- }
18
- function l(e, t) {
19
- return new Promise((n, r) => {
20
- let i = new Image();
21
- t && (i.crossOrigin = t), i.onload = () => n(i), i.onerror = () => r(/* @__PURE__ */ Error("Crop source image could not be loaded")), i.src = e;
22
- });
23
- }
24
- async function u({ src: e, crop: t, rotation: n = 0, type: r = "image/png", quality: i = .92, crossOrigin: a = "anonymous" }) {
25
- let o = await l(e, a), u = c(o.naturalWidth, o.naturalHeight, n), d = document.createElement("canvas");
26
- d.width = Math.ceil(u.width), d.height = Math.ceil(u.height);
27
- let f = d.getContext("2d");
28
- if (!f) throw Error("Canvas 2D context is unavailable");
29
- f.translate(d.width / 2, d.height / 2), f.rotate(s(n)), f.translate(-o.naturalWidth / 2, -o.naturalHeight / 2), f.drawImage(o, 0, 0);
30
- let p = document.createElement("canvas");
31
- p.width = Math.max(1, Math.round(t.width)), p.height = Math.max(1, Math.round(t.height));
32
- let m = p.getContext("2d");
33
- if (!m) throw Error("Canvas 2D context is unavailable");
34
- return m.drawImage(d, Math.round(t.x), Math.round(t.y), Math.round(t.width), Math.round(t.height), 0, 0, p.width, p.height), new Promise((e, t) => {
35
- p.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Cropped image could not be encoded")), r, i);
36
- });
37
- }
38
- function d({ src: s, alt: c = "Image crop preview", crop: l, defaultCrop: u = {
39
- x: 0,
40
- y: 0
41
- }, onCropChange: d, zoom: f, defaultZoom: p = 1, onZoomChange: m, rotation: h, defaultRotation: g = 0, onRotationChange: _, onCropComplete: v, aspect: y = 1, cropShape: b = "rect", objectFit: x = "contain", minZoom: S = 1, maxZoom: C = 3, zoomStep: w = .1, showGrid: T = !0, disabled: E = !1, labels: D, className: O, ...k }) {
42
- let [A, j] = t.useState(u), [M, N] = t.useState(p), [P, F] = t.useState(g), I = l ?? A, L = f ?? M, R = h ?? P;
43
- return /* @__PURE__ */ a("div", {
44
- "data-slot": "image-cropper",
45
- "data-disabled": E || void 0,
46
- className: e("grid gap-3 data-[disabled]:opacity-60", O),
47
- ...k,
48
- children: [/* @__PURE__ */ i("div", {
49
- role: "img",
50
- "aria-label": D?.cropper ?? c,
51
- className: e("relative min-h-64 overflow-hidden rounded-md bg-black", E && "pointer-events-none"),
52
- style: { aspectRatio: y },
53
- children: /* @__PURE__ */ i(o, {
54
- image: s,
55
- crop: I,
56
- zoom: L,
57
- rotation: R,
58
- aspect: y,
59
- cropShape: b,
60
- objectFit: x,
61
- minZoom: S,
62
- maxZoom: C,
63
- zoomSpeed: w,
64
- showGrid: T,
65
- onCropChange: (e) => {
66
- l === void 0 && j(e), d?.(e);
67
- },
68
- onZoomChange: (e) => {
69
- f === void 0 && N(e), m?.(e);
70
- },
71
- onRotationChange: (e) => {
72
- h === void 0 && F(e), _?.(e);
73
- },
74
- onCropComplete: v
75
- })
76
- }), /* @__PURE__ */ a("div", {
77
- className: "grid gap-2 sm:grid-cols-2",
78
- children: [/* @__PURE__ */ a("label", {
79
- className: "grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground",
80
- children: [
81
- /* @__PURE__ */ i(r, {
82
- className: "size-4",
83
- "aria-hidden": "true"
84
- }),
85
- /* @__PURE__ */ i("span", {
86
- className: "sr-only",
87
- children: D?.zoom ?? "Zoom"
88
- }),
89
- /* @__PURE__ */ i("input", {
90
- type: "range",
91
- min: S,
92
- max: C,
93
- step: w,
94
- value: L,
95
- disabled: E,
96
- "aria-label": D?.zoom ?? "Zoom",
97
- className: "w-full accent-foreground",
98
- onChange: (e) => {
99
- let t = Number(e.target.value);
100
- f === void 0 && N(t), m?.(t);
101
- }
102
- }),
103
- /* @__PURE__ */ a("span", {
104
- className: "w-9 text-right tabular-nums",
105
- children: [L.toFixed(1), "x"]
106
- })
107
- ]
108
- }), /* @__PURE__ */ a("label", {
109
- className: "grid grid-cols-[auto_1fr_auto] items-center gap-2 text-xs text-muted-foreground",
110
- children: [
111
- /* @__PURE__ */ i(n, {
112
- className: "size-4",
113
- "aria-hidden": "true"
114
- }),
115
- /* @__PURE__ */ i("span", {
116
- className: "sr-only",
117
- children: D?.rotation ?? "Rotation"
118
- }),
119
- /* @__PURE__ */ i("input", {
120
- type: "range",
121
- min: "-180",
122
- max: "180",
123
- step: "1",
124
- value: R,
125
- disabled: E,
126
- "aria-label": D?.rotation ?? "Rotation",
127
- className: "w-full accent-foreground",
128
- onChange: (e) => {
129
- let t = Number(e.target.value);
130
- h === void 0 && F(t), _?.(t);
131
- }
132
- }),
133
- /* @__PURE__ */ a("span", {
134
- className: "w-10 text-right tabular-nums",
135
- children: [Math.round(R), "°"]
136
- })
137
- ]
138
- })]
139
- })]
140
- });
141
- }
142
- //#endregion
143
- export { d as ImageCropper, u as createCroppedImageBlob };