UNPKG

@ultraviolet/plus

Version:

Ultraviolet Plus

github.com/scaleway/ultraviolet

scaleway/ultraviolet

43 lines (42 loc) • 6.33 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"use client"; import { jsxs, jsx } from "@emotion/react/jsx-runtime"; import _styled from "@emotion/styled/base"; import { Stack, Skeleton as Skeleton$1 } from "@ultraviolet/ui"; const SkeletonImage = /* @__PURE__ */ _styled(Skeleton$1, process.env.NODE_ENV === "production" ? { shouldForwardProp: (prop) => !["height", "width", "direction"].includes(prop), target: "e1wwr9dc1" } : { shouldForwardProp: (prop) => !["height", "width", "direction"].includes(prop), target: "e1wwr9dc1", label: "SkeletonImage" })("border-radius:", ({ theme, direction }) => `${direction === "column" ? `${theme.radii.default} ${theme.radii.default} 0 0` : `${theme.radii.default} 0 0 ${theme.radii.default}`}`, ";width:", ({ width }) => width, ";height:", ({ height }) => height, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmQvU2tlbGV0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdFIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmQvU2tlbGV0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgU3RhY2ssIFNrZWxldG9uIGFzIFVsdHJhdmlvbGV0U2tlbGV0b24gfSBmcm9tICdAdWx0cmF2aW9sZXQvdWknXG5cbmNvbnN0IFNrZWxldG9uSW1hZ2UgPSBzdHlsZWQoVWx0cmF2aW9sZXRTa2VsZXRvbiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhWydoZWlnaHQnLCAnd2lkdGgnLCAnZGlyZWN0aW9uJ10uaW5jbHVkZXMocHJvcCksXG59KTx7XG4gIHdpZHRoPzogc3RyaW5nXG4gIGhlaWdodD86IHN0cmluZ1xuICBkaXJlY3Rpb246ICdyb3cnIHwgJ2NvbHVtbidcbn0+YFxuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lLCBkaXJlY3Rpb24gfSkgPT5cbiAgICBgJHtcbiAgICAgIGRpcmVjdGlvbiA9PT0gJ2NvbHVtbidcbiAgICAgICAgPyBgJHt0aGVtZS5yYWRpaS5kZWZhdWx0fSAke3RoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMGBcbiAgICAgICAgOiBgJHt0aGVtZS5yYWRpaS5kZWZhdWx0fSAwIDAgJHt0aGVtZS5yYWRpaS5kZWZhdWx0fWBcbiAgICB9YH07XG4gIHdpZHRoOiAkeyh7IHdpZHRoIH0pID0+IHdpZHRofTtcbiAgaGVpZ2h0OiAkeyh7IGhlaWdodCB9KSA9PiBoZWlnaHR9O1xuYFxuXG5jb25zdCBTdHlsZWRTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzMnXX07XG5gXG5cbnR5cGUgU2tlbGV0b25Qcm9wcyA9IHtcbiAgZGlyZWN0aW9uOiAncm93JyB8ICdjb2x1bW4nXG59XG5cbmV4cG9ydCBjb25zdCBTa2VsZXRvbiA9ICh7IGRpcmVjdGlvbiB9OiBTa2VsZXRvblByb3BzKSA9PiAoXG4gIDxTdGFjayBkaXJlY3Rpb249e2RpcmVjdGlvbn0+XG4gICAgPFNrZWxldG9uSW1hZ2VcbiAgICAgIHZhcmlhbnQ9XCJzcXVhcmVcIlxuICAgICAgaGVpZ2h0PXtkaXJlY3Rpb24gPT09ICdjb2x1bW4nID8gJzEyMHB4JyA6ICd1bnNldCd9XG4gICAgICB3aWR0aD17ZGlyZWN0aW9uID09PSAncm93JyA/ICcyMjBweCcgOiB1bmRlZmluZWR9XG4gICAgICBkaXJlY3Rpb249e2RpcmVjdGlvbn1cbiAgICAvPlxuICAgIDxTdHlsZWRTdGFjayBnYXA9ezJ9PlxuICAgICAgPFVsdHJhdmlvbGV0U2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgPFVsdHJhdmlvbGV0U2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgPFVsdHJhdmlvbGV0U2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgPFVsdHJhdmlvbGV0U2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgICAgPFVsdHJhdmlvbGV0U2tlbGV0b24gdmFyaWFudD1cImxpbmVcIiAvPlxuICAgIDwvU3R5bGVkU3RhY2s+XG4gIDwvU3RhY2s+XG4pXG4iXX0= */")); const StyledStack = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? { target: "e1wwr9dc0" } : { target: "e1wwr9dc0", label: "StyledStack" })("padding:", ({ theme }) => theme.space["3"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvQ29udGVudENhcmQvU2tlbGV0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvcGx1cy9zcmMvY29tcG9uZW50cy9Db250ZW50Q2FyZC9Ta2VsZXRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBTdGFjaywgU2tlbGV0b24gYXMgVWx0cmF2aW9sZXRTa2VsZXRvbiB9IGZyb20gJ0B1bHRyYXZpb2xldC91aSdcblxuY29uc3QgU2tlbGV0b25JbWFnZSA9IHN0eWxlZChVbHRyYXZpb2xldFNrZWxldG9uLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ2hlaWdodCcsICd3aWR0aCcsICdkaXJlY3Rpb24nXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHtcbiAgd2lkdGg/OiBzdHJpbmdcbiAgaGVpZ2h0Pzogc3RyaW5nXG4gIGRpcmVjdGlvbjogJ3JvdycgfCAnY29sdW1uJ1xufT5gXG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUsIGRpcmVjdGlvbiB9KSA9PlxuICAgIGAke1xuICAgICAgZGlyZWN0aW9uID09PSAnY29sdW1uJ1xuICAgICAgICA/IGAke3RoZW1lLnJhZGlpLmRlZmF1bHR9ICR7dGhlbWUucmFkaWkuZGVmYXVsdH0gMCAwYFxuICAgICAgICA6IGAke3RoZW1lLnJhZGlpLmRlZmF1bHR9IDAgMCAke3RoZW1lLnJhZGlpLmRlZmF1bHR9YFxuICAgIH1gfTtcbiAgd2lkdGg6ICR7KHsgd2lkdGggfSkgPT4gd2lkdGh9O1xuICBoZWlnaHQ6ICR7KHsgaGVpZ2h0IH0pID0+IGhlaWdodH07XG5gXG5cbmNvbnN0IFN0eWxlZFN0YWNrID0gc3R5bGVkKFN0YWNrKWBcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMyddfTtcbmBcblxudHlwZSBTa2VsZXRvblByb3BzID0ge1xuICBkaXJlY3Rpb246ICdyb3cnIHwgJ2NvbHVtbidcbn1cblxuZXhwb3J0IGNvbnN0IFNrZWxldG9uID0gKHsgZGlyZWN0aW9uIH06IFNrZWxldG9uUHJvcHMpID0+IChcbiAgPFN0YWNrIGRpcmVjdGlvbj17ZGlyZWN0aW9ufT5cbiAgICA8U2tlbGV0b25JbWFnZVxuICAgICAgdmFyaWFudD1cInNxdWFyZVwiXG4gICAgICBoZWlnaHQ9e2RpcmVjdGlvbiA9PT0gJ2NvbHVtbicgPyAnMTIwcHgnIDogJ3Vuc2V0J31cbiAgICAgIHdpZHRoPXtkaXJlY3Rpb24gPT09ICdyb3cnID8gJzIyMHB4JyA6IHVuZGVmaW5lZH1cbiAgICAgIGRpcmVjdGlvbj17ZGlyZWN0aW9ufVxuICAgIC8+XG4gICAgPFN0eWxlZFN0YWNrIGdhcD17Mn0+XG4gICAgICA8VWx0cmF2aW9sZXRTa2VsZXRvbiB2YXJpYW50PVwibGluZVwiIC8+XG4gICAgICA8VWx0cmF2aW9sZXRTa2VsZXRvbiB2YXJpYW50PVwibGluZVwiIC8+XG4gICAgICA8VWx0cmF2aW9sZXRTa2VsZXRvbiB2YXJpYW50PVwibGluZVwiIC8+XG4gICAgICA8VWx0cmF2aW9sZXRTa2VsZXRvbiB2YXJpYW50PVwibGluZVwiIC8+XG4gICAgICA8VWx0cmF2aW9sZXRTa2VsZXRvbiB2YXJpYW50PVwibGluZVwiIC8+XG4gICAgPC9TdHlsZWRTdGFjaz5cbiAgPC9TdGFjaz5cbilcbiJdfQ== */")); const Skeleton = ({ direction }) => /* @__PURE__ */ jsxs(Stack, { direction, children: [ /* @__PURE__ */ jsx(SkeletonImage, { variant: "square", height: direction === "column" ? "120px" : "unset", width: direction === "row" ? "220px" : void 0, direction }), /* @__PURE__ */ jsxs(StyledStack, { gap: 2, children: [ /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }), /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }), /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }), /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }), /* @__PURE__ */ jsx(Skeleton$1, { variant: "line" }) ] }) ] }); export { Skeleton };