@hexdspace/react 0.1.17 → 0.1.18
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.d.ts +6 -3
- package/dist/index.js +44 -11
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -546,9 +546,11 @@ declare class DialogController {
|
|
|
546
546
|
}
|
|
547
547
|
declare const dialogController: DialogController;
|
|
548
548
|
|
|
549
|
-
declare const
|
|
549
|
+
declare const dialogSurfaceVariants: (props?: ({
|
|
550
|
+
chrome?: "flat" | "glass" | "glow" | "hairline" | null | undefined;
|
|
551
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
550
552
|
declare function DialogContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
551
|
-
interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof
|
|
553
|
+
interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dialogSurfaceVariants> {
|
|
552
554
|
id: string;
|
|
553
555
|
template: DialogTemplate<TPayload>;
|
|
554
556
|
payload: TPayload;
|
|
@@ -565,7 +567,7 @@ interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTML
|
|
|
565
567
|
open?: boolean;
|
|
566
568
|
defaultOpen?: boolean;
|
|
567
569
|
}
|
|
568
|
-
declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
|
|
570
|
+
declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, chrome, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
|
|
569
571
|
|
|
570
572
|
type ControlLikeProps = {
|
|
571
573
|
id?: string;
|
|
@@ -610,6 +612,7 @@ declare const skeletonVariants: (props?: ({
|
|
|
610
612
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
611
613
|
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
612
614
|
animate?: boolean;
|
|
615
|
+
asChild?: boolean;
|
|
613
616
|
}
|
|
614
617
|
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
615
618
|
|
package/dist/index.js
CHANGED
|
@@ -1562,6 +1562,35 @@ var dialogOverlayClass = cn(
|
|
|
1562
1562
|
"data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
|
|
1563
1563
|
"data-[state=closed]:pointer-events-none"
|
|
1564
1564
|
);
|
|
1565
|
+
var dialogSurfaceVariants = cva2("dialog-surface relative overflow-hidden", {
|
|
1566
|
+
variants: {
|
|
1567
|
+
chrome: {
|
|
1568
|
+
flat: "shell",
|
|
1569
|
+
glass: cn(
|
|
1570
|
+
"border border-[color:color-mix(in_oklab,var(--border),transparent_50%)]",
|
|
1571
|
+
"bg-[color:color-mix(in_oklab,var(--surface-1),transparent_25%)]",
|
|
1572
|
+
"backdrop-blur-[6px]",
|
|
1573
|
+
"rounded-[var(--radius-shell)]",
|
|
1574
|
+
"shadow-[0_18px_40px_rgba(0,0,0,0.18)]"
|
|
1575
|
+
),
|
|
1576
|
+
glow: cn(
|
|
1577
|
+
"rounded-[var(--radius-shell)]",
|
|
1578
|
+
"border border-[color:color-mix(in_oklab,var(--border),transparent_60%)]",
|
|
1579
|
+
"bg-[color:var(--surface-1)]",
|
|
1580
|
+
"shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%),0_16px_36px_color-mix(in_oklab,var(--border),transparent_70%)]"
|
|
1581
|
+
),
|
|
1582
|
+
hairline: cn(
|
|
1583
|
+
"rounded-[var(--radius-shell)]",
|
|
1584
|
+
"border border-[color:color-mix(in_oklab,var(--border),transparent_70%)]",
|
|
1585
|
+
"bg-transparent",
|
|
1586
|
+
"shadow-none"
|
|
1587
|
+
)
|
|
1588
|
+
}
|
|
1589
|
+
},
|
|
1590
|
+
defaultVariants: {
|
|
1591
|
+
chrome: "flat"
|
|
1592
|
+
}
|
|
1593
|
+
});
|
|
1565
1594
|
function DialogContent({ className, ...props }) {
|
|
1566
1595
|
return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
|
|
1567
1596
|
}
|
|
@@ -1611,7 +1640,7 @@ function AutoHeight({
|
|
|
1611
1640
|
return /* @__PURE__ */ jsx7(
|
|
1612
1641
|
"div",
|
|
1613
1642
|
{
|
|
1614
|
-
className: cn("transition-[height] duration-(--motion-med) ease
|
|
1643
|
+
className: cn("transition-[height] duration-(--motion-med) ease"),
|
|
1615
1644
|
style: {
|
|
1616
1645
|
height: height === "auto" ? "auto" : height,
|
|
1617
1646
|
maxHeight: "calc(100vh - 4rem)",
|
|
@@ -1638,6 +1667,7 @@ function Dialog({
|
|
|
1638
1667
|
closeLabel = "Close dialog",
|
|
1639
1668
|
open: open2,
|
|
1640
1669
|
defaultOpen,
|
|
1670
|
+
chrome,
|
|
1641
1671
|
className,
|
|
1642
1672
|
style,
|
|
1643
1673
|
...props
|
|
@@ -1700,7 +1730,7 @@ function Dialog({
|
|
|
1700
1730
|
overlayReady ? "animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)] [animation-fill-mode:both]" : null
|
|
1701
1731
|
);
|
|
1702
1732
|
const surfaceClassName = cn(
|
|
1703
|
-
|
|
1733
|
+
dialogSurfaceVariants({ chrome }),
|
|
1704
1734
|
isOpen && !surfaceReady ? "opacity-0 translate-y-5" : null,
|
|
1705
1735
|
surfaceReady ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)] [animation-fill-mode:both]" : null
|
|
1706
1736
|
);
|
|
@@ -1729,7 +1759,7 @@ function Dialog({
|
|
|
1729
1759
|
if (!dismissible) event.preventDefault();
|
|
1730
1760
|
},
|
|
1731
1761
|
...props,
|
|
1732
|
-
children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, children: [
|
|
1762
|
+
children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, style: { willChange: "transform" }, children: [
|
|
1733
1763
|
showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
|
|
1734
1764
|
Button,
|
|
1735
1765
|
{
|
|
@@ -1752,7 +1782,7 @@ function Dialog({
|
|
|
1752
1782
|
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1753
1783
|
var ConfirmDialog = (props) => {
|
|
1754
1784
|
const p = props.payload ?? { title: "Are you sure?" };
|
|
1755
|
-
const confirmVariant = p.variant ?? (p.danger ? "danger" : "
|
|
1785
|
+
const confirmVariant = p.variant ?? (p.danger ? "danger" : "success");
|
|
1756
1786
|
return /* @__PURE__ */ jsxs4(DialogContent, { children: [
|
|
1757
1787
|
/* @__PURE__ */ jsx8(DialogPrimitive2.Title, { className: "text-lg font-semibold", children: p.title }),
|
|
1758
1788
|
p.children && p.children,
|
|
@@ -2220,6 +2250,7 @@ Input.displayName = "Input";
|
|
|
2220
2250
|
|
|
2221
2251
|
// src/ui/components/Skeleton.tsx
|
|
2222
2252
|
import { cva as cva4 } from "class-variance-authority";
|
|
2253
|
+
import { Slot as Slot2 } from "radix-ui";
|
|
2223
2254
|
import * as React7 from "react";
|
|
2224
2255
|
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
2225
2256
|
var skeletonBase = cn(
|
|
@@ -2232,7 +2263,7 @@ var shimmerEffect = cn(
|
|
|
2232
2263
|
"before:content-[''] before:absolute before:inset-0",
|
|
2233
2264
|
"before:bg-[linear-gradient(110deg,transparent_0%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_25%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_55%)_50%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_75%,transparent_100%)]",
|
|
2234
2265
|
"before:[background-size:200%_100%]",
|
|
2235
|
-
"before:animate-[skeleton-shimmer_1.6s_linear_infinite]
|
|
2266
|
+
"before:animate-[skeleton-shimmer_1.6s_linear_infinite]"
|
|
2236
2267
|
);
|
|
2237
2268
|
var skeletonVariants = cva4(skeletonBase, {
|
|
2238
2269
|
variants: {
|
|
@@ -2255,7 +2286,7 @@ var skeletonVariants = cva4(skeletonBase, {
|
|
|
2255
2286
|
fullWidth: { true: "w-full", false: "w-auto" },
|
|
2256
2287
|
animation: {
|
|
2257
2288
|
none: "",
|
|
2258
|
-
pulse: "animate-pulse
|
|
2289
|
+
pulse: "animate-pulse",
|
|
2259
2290
|
shimmer: shimmerEffect
|
|
2260
2291
|
},
|
|
2261
2292
|
preset: {
|
|
@@ -2276,10 +2307,11 @@ var skeletonVariants = cva4(skeletonBase, {
|
|
|
2276
2307
|
}
|
|
2277
2308
|
});
|
|
2278
2309
|
var Skeleton = React7.forwardRef(
|
|
2279
|
-
({ variant, size, radius, fullWidth, animation, preset, animate, className, ...props }, ref) => {
|
|
2310
|
+
({ variant, size, radius, fullWidth, animation, preset, animate, asChild, className, children, ...props }, ref) => {
|
|
2280
2311
|
const resolvedAnimation = animation ?? (animate === false ? "none" : animate ? "pulse" : void 0);
|
|
2312
|
+
const Component = asChild ? Slot2.Root : "div";
|
|
2281
2313
|
return /* @__PURE__ */ jsx15(
|
|
2282
|
-
|
|
2314
|
+
Component,
|
|
2283
2315
|
{
|
|
2284
2316
|
ref,
|
|
2285
2317
|
className: cn(
|
|
@@ -2293,7 +2325,9 @@ var Skeleton = React7.forwardRef(
|
|
|
2293
2325
|
}),
|
|
2294
2326
|
className
|
|
2295
2327
|
),
|
|
2296
|
-
|
|
2328
|
+
"aria-hidden": props["aria-hidden"] ?? true,
|
|
2329
|
+
...props,
|
|
2330
|
+
children: asChild ? /* @__PURE__ */ jsx15(Slot2.Slottable, { children }) : children
|
|
2297
2331
|
}
|
|
2298
2332
|
);
|
|
2299
2333
|
}
|
|
@@ -2439,8 +2473,7 @@ var tooltipContentBase = cn(
|
|
|
2439
2473
|
"data-[side=right]:[--tooltip-x:-4px] data-[side=right]:[--tooltip-y:0px]",
|
|
2440
2474
|
"data-[state=delayed-open]:animate-[tooltip-in_140ms_ease-out]",
|
|
2441
2475
|
"data-[state=instant-open]:animate-[tooltip-in_140ms_ease-out]",
|
|
2442
|
-
"data-[state=closed]:animate-[tooltip-out_120ms_ease-in]"
|
|
2443
|
-
"motion-reduce:animate-none"
|
|
2476
|
+
"data-[state=closed]:animate-[tooltip-out_120ms_ease-in]"
|
|
2444
2477
|
);
|
|
2445
2478
|
function Tooltip({
|
|
2446
2479
|
children,
|