@undp/design-system-react
Version:
React based design system for UNDP
107 lines (106 loc) • 4.93 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./dist-DxuGUd9a.js";
import { Button as r } from "./Button.js";
import { jsx as i } from "react/jsx-runtime";
//#region src/components/ui/attachment.tsx
var a = t("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-md border border-surface bg-surface text-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-surface-hover data-[state=error]:border-error data-[state=idle]:border-dashed", {
variants: {
size: {
default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
xs: "gap-1.5 rounded-md text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
},
orientation: {
horizontal: "min-w-40 items-center",
vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
}
},
defaultVariants: {
size: "default",
orientation: "horizontal"
}
});
function o({ className: t, state: n = "done", size: r, orientation: o, ...s }) {
return /* @__PURE__ */ i("div", {
"data-slot": "attachment",
"data-state": n,
"data-size": r,
"data-orientation": o,
className: e(a({
size: r,
orientation: o
}), t),
...s
});
}
var s = t("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-surface text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:text-error group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
variants: { variant: {
icon: "",
image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
} },
defaultVariants: { variant: "icon" }
});
function c({ className: t, variant: n = "icon", ...r }) {
return /* @__PURE__ */ i("div", {
"data-slot": "attachment-media",
"data-variant": n,
className: e(s({ variant: n }), t),
...r
});
}
function l({ className: t, ...n }) {
return /* @__PURE__ */ i("div", {
"data-slot": "attachment-content",
className: e("min-w-0 max-w-full flex-1 leading-sm group-data-[orientation=vertical]/attachment:px-1", t),
...n
});
}
function u({ className: t, ...n }) {
return /* @__PURE__ */ i("span", {
"data-slot": "attachment-title",
className: e("group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block min-w-0 max-w-full truncate font-medium group-data-[state=error]/attachment:text-error", t),
...n
});
}
function d({ className: t, ...n }) {
return /* @__PURE__ */ i("span", {
"data-slot": "attachment-description",
className: e("mt-0.5 block min-w-0 truncate text-content-tertiary text-xs group-data-[state=error]/attachment:text-error/80", "max-w-full", t),
...n
});
}
function f({ className: t, ...n }) {
return /* @__PURE__ */ i("div", {
"data-slot": "attachment-actions",
className: e("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", t),
...n
});
}
function p({ variant: e, size: t = "xs", ...n }) {
return /* @__PURE__ */ i(r, {
"data-slot": "attachment-action",
variant: e ?? "icon",
size: t,
padding: "none",
...n
});
}
function m({ className: t, asChild: r = !1, type: a, ...o }) {
return /* @__PURE__ */ i(r ? n : "button", {
"data-slot": "attachment-trigger",
type: r ? void 0 : a ?? "button",
className: e("absolute inset-0 z-10 outline-none", t),
...o
});
}
function h({ className: t, ...n }) {
return /* @__PURE__ */ i("div", {
"data-slot": "attachment-group",
className: e("scroll-fade-x scrollbar-none flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", t),
...n
});
}
//#endregion
export { o as Attachment, p as AttachmentAction, f as AttachmentActions, l as AttachmentContent, d as AttachmentDescription, h as AttachmentGroup, c as AttachmentMedia, u as AttachmentTitle, m as AttachmentTrigger };
//# sourceMappingURL=Attachment.js.map