@spies-ui/react 1.0.7 → 1.0.9
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.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +42 -5
- package/dist/index.mjs +42 -5
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -884,6 +884,8 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
|
|
|
884
884
|
}, {}>>;
|
|
885
885
|
|
|
886
886
|
interface AvatarProps extends ComponentProps<typeof AvatarImage> {
|
|
887
|
+
size: 'default' | 'large';
|
|
888
|
+
border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
|
|
887
889
|
}
|
|
888
890
|
declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
889
891
|
declare namespace Avatar {
|
package/dist/index.d.ts
CHANGED
|
@@ -884,6 +884,8 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
|
|
|
884
884
|
}, {}>>;
|
|
885
885
|
|
|
886
886
|
interface AvatarProps extends ComponentProps<typeof AvatarImage> {
|
|
887
|
+
size: 'default' | 'large';
|
|
888
|
+
border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
|
|
887
889
|
}
|
|
888
890
|
declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
889
891
|
declare namespace Avatar {
|
package/dist/index.js
CHANGED
|
@@ -342,14 +342,51 @@ var Heading = styled("h2", {
|
|
|
342
342
|
});
|
|
343
343
|
Heading.displayName = "Heading";
|
|
344
344
|
|
|
345
|
-
// src/components/Avatar/styles.
|
|
345
|
+
// src/components/Avatar/styles.ts
|
|
346
346
|
var Avatar = __toESM(require("@radix-ui/react-avatar"));
|
|
347
347
|
var AvatarContainer = styled(Avatar.Root, {
|
|
348
348
|
borderRadius: "$full",
|
|
349
349
|
display: "inline-block",
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
350
|
+
overflow: "hidden",
|
|
351
|
+
variants: {
|
|
352
|
+
size: {
|
|
353
|
+
default: {
|
|
354
|
+
width: "$12",
|
|
355
|
+
height: "$12"
|
|
356
|
+
},
|
|
357
|
+
large: {
|
|
358
|
+
width: "$20",
|
|
359
|
+
height: "$20"
|
|
360
|
+
}
|
|
361
|
+
},
|
|
362
|
+
border: {
|
|
363
|
+
none: {
|
|
364
|
+
border: "0"
|
|
365
|
+
},
|
|
366
|
+
default: {
|
|
367
|
+
border: "2px solid $smokedWhite"
|
|
368
|
+
},
|
|
369
|
+
primary: {
|
|
370
|
+
border: "2px solid $primary"
|
|
371
|
+
},
|
|
372
|
+
primaryLight: {
|
|
373
|
+
border: "2px solid $primaryLight"
|
|
374
|
+
},
|
|
375
|
+
success: {
|
|
376
|
+
border: "2px solid $success"
|
|
377
|
+
},
|
|
378
|
+
danger: {
|
|
379
|
+
border: "2px solid $danger"
|
|
380
|
+
},
|
|
381
|
+
warning: {
|
|
382
|
+
border: "2px solid $warning"
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
defaultVariants: {
|
|
387
|
+
size: "default",
|
|
388
|
+
border: "none"
|
|
389
|
+
}
|
|
353
390
|
});
|
|
354
391
|
var AvatarImage = styled(Avatar.Image, {
|
|
355
392
|
width: "100%",
|
|
@@ -375,7 +412,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
|
|
|
375
412
|
var import_phosphor_react = require("phosphor-react");
|
|
376
413
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
377
414
|
function Avatar2(props) {
|
|
378
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { children: [
|
|
415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, border: props.border, children: [
|
|
379
416
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, __spreadValues({}, props)),
|
|
380
417
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.User, {}) })
|
|
381
418
|
] });
|
package/dist/index.mjs
CHANGED
|
@@ -313,14 +313,51 @@ var Heading = styled("h2", {
|
|
|
313
313
|
});
|
|
314
314
|
Heading.displayName = "Heading";
|
|
315
315
|
|
|
316
|
-
// src/components/Avatar/styles.
|
|
316
|
+
// src/components/Avatar/styles.ts
|
|
317
317
|
import * as Avatar from "@radix-ui/react-avatar";
|
|
318
318
|
var AvatarContainer = styled(Avatar.Root, {
|
|
319
319
|
borderRadius: "$full",
|
|
320
320
|
display: "inline-block",
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
321
|
+
overflow: "hidden",
|
|
322
|
+
variants: {
|
|
323
|
+
size: {
|
|
324
|
+
default: {
|
|
325
|
+
width: "$12",
|
|
326
|
+
height: "$12"
|
|
327
|
+
},
|
|
328
|
+
large: {
|
|
329
|
+
width: "$20",
|
|
330
|
+
height: "$20"
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
border: {
|
|
334
|
+
none: {
|
|
335
|
+
border: "0"
|
|
336
|
+
},
|
|
337
|
+
default: {
|
|
338
|
+
border: "2px solid $smokedWhite"
|
|
339
|
+
},
|
|
340
|
+
primary: {
|
|
341
|
+
border: "2px solid $primary"
|
|
342
|
+
},
|
|
343
|
+
primaryLight: {
|
|
344
|
+
border: "2px solid $primaryLight"
|
|
345
|
+
},
|
|
346
|
+
success: {
|
|
347
|
+
border: "2px solid $success"
|
|
348
|
+
},
|
|
349
|
+
danger: {
|
|
350
|
+
border: "2px solid $danger"
|
|
351
|
+
},
|
|
352
|
+
warning: {
|
|
353
|
+
border: "2px solid $warning"
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
defaultVariants: {
|
|
358
|
+
size: "default",
|
|
359
|
+
border: "none"
|
|
360
|
+
}
|
|
324
361
|
});
|
|
325
362
|
var AvatarImage = styled(Avatar.Image, {
|
|
326
363
|
width: "100%",
|
|
@@ -346,7 +383,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
|
|
|
346
383
|
import { User } from "phosphor-react";
|
|
347
384
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
348
385
|
function Avatar2(props) {
|
|
349
|
-
return /* @__PURE__ */ jsxs(AvatarContainer, { children: [
|
|
386
|
+
return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, border: props.border, children: [
|
|
350
387
|
/* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
|
|
351
388
|
/* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
|
|
352
389
|
] });
|