@bccampus/ui-components 0.5.6 → 0.5.7

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 (5) hide show
  1. package/dist/components/ui/card.d.ts +9 -6
  2. package/dist/components/ui/card.js +19 -12
  3. package/package.json +2 -2
  4. package/src/components/ui/card.tsx +23 -12
  5. package/src/styles/typography.css +15 -10
package/dist/components/ui/card.d.ts CHANGED
@@ -17,11 +17,14 @@ type CardTitleProps = React.ComponentProps<"div"> & {
17
17
  };
18
18
  declare function CardTitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
19
19
  declare function CardSubtitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
20
- declare function CardCaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
21
- declare function CardSubcaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
22
- declare function CardMeta(props: React.ComponentProps<"div">): import("react").JSX.Element;
23
- declare function CardContent(props: React.ComponentProps<"div">): import("react").JSX.Element;
24
- declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
25
- declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
20
+ export type CardChildProps = React.ComponentProps<"div"> & {
21
+ asChild?: boolean;
22
+ };
23
+ declare function CardCaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
24
+ declare function CardSubcaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
25
+ declare function CardMeta({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
26
+ declare function CardContent({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
27
+ declare function CardToolbar({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
28
+ declare function CardMedia({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
26
29
  declare function CardImage({ className, ...props }: React.ComponentProps<"img">): import("react").JSX.Element;
27
30
  export { Card, CardArea, CardItemGroup, CardToolbar, CardTitle, CardSubtitle, CardCaption, CardSubcaption, CardMeta, CardContent, CardMedia, CardImage, };
package/dist/components/ui/card.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { S as Slot } from "../../_chunks/index.js";
2
3
  import { c as cn } from "../../_chunks/utils.js";
3
4
  import { Caption } from "./typography/caption.js";
4
5
  import { c as cva } from "../../_chunks/index2.js";
@@ -72,23 +73,29 @@ function CardSubtitle({ size = "md", className, ...props }) {
72
73
  }
73
74
  );
74
75
  }
75
- function CardCaption(props) {
76
- return /* @__PURE__ */ jsx(Caption, { ...props });
76
+ function CardCaption({ asChild, ...props }) {
77
+ const Comp = asChild ? Slot : Caption;
78
+ return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
77
79
  }
78
- function CardSubcaption(props) {
79
- return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
80
+ function CardSubcaption({ asChild, ...props }) {
81
+ const Comp = asChild ? Slot : Caption;
82
+ return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
80
83
  }
81
- function CardMeta(props) {
82
- return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
84
+ function CardMeta({ asChild, ...props }) {
85
+ const Comp = asChild ? Slot : Caption;
86
+ return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
83
87
  }
84
- function CardContent(props) {
85
- return /* @__PURE__ */ jsx("div", { ...props });
88
+ function CardContent({ asChild, ...props }) {
89
+ const Comp = asChild ? Slot : "div";
90
+ return /* @__PURE__ */ jsx(Comp, { ...props });
86
91
  }
87
- function CardToolbar({ className, ...props }) {
88
- return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
92
+ function CardToolbar({ className, asChild, ...props }) {
93
+ const Comp = asChild ? Slot : "div";
94
+ return /* @__PURE__ */ jsx(Comp, { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
89
95
  }
90
- function CardMedia({ className, ...props }) {
91
- return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full", className), ...props });
96
+ function CardMedia({ className, asChild, ...props }) {
97
+ const Comp = asChild ? Slot : "div";
98
+ return /* @__PURE__ */ jsx(Comp, { className: cn("relative w-full h-full", className), ...props });
92
99
  }
93
100
  function CardImage({ className, ...props }) {
94
101
  return /* @__PURE__ */ jsx(CardMedia, { children: /* @__PURE__ */ jsx("img", { className: cn("w-full h-full rounded-lg aspect-9/5 object-cover object-top", className), ...props }) });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bccampus/ui-components",
3
- "version": "0.5.6",
3
+ "version": "0.5.7",
4
4
  "type": "module",
5
5
  "packageManager": "yarn@4.10.3",
6
6
  "exports": {
@@ -73,4 +73,4 @@
73
73
  "vite": "^7.2.7",
74
74
  "vite-plugin-dts": "^4.5.4"
75
75
  }
76
- }
76
+ }
package/src/components/ui/card.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Slot } from "@radix-ui/react-slot";
1
2
  import { cn } from "@/lib/utils";
2
3
  import { Caption } from "./typography/caption";
3
4
  import { cva, type VariantProps } from "class-variance-authority";
@@ -83,28 +84,38 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
83
84
  );
84
85
  }
85
86
 
86
- function CardCaption(props: React.ComponentProps<"div">) {
87
- return <Caption {...props} />;
87
+ export type CardChildProps = React.ComponentProps<"div"> & {
88
+ asChild?: boolean;
89
+ };
90
+
91
+ function CardCaption({ asChild, ...props }: CardChildProps) {
92
+ const Comp = asChild ? Slot : Caption;
93
+ return <Comp variant="light" {...props} />;
88
94
  }
89
95
 
90
- function CardSubcaption(props: React.ComponentProps<"div">) {
91
- return <Caption variant="light" {...props} />;
96
+ function CardSubcaption({ asChild, ...props }: CardChildProps) {
97
+ const Comp = asChild ? Slot : Caption;
98
+ return <Comp variant="light" {...props} />;
92
99
  }
93
100
 
94
- function CardMeta(props: React.ComponentProps<"div">) {
95
- return <Caption variant="light" {...props} />;
101
+ function CardMeta({ asChild, ...props }: CardChildProps) {
102
+ const Comp = asChild ? Slot : Caption;
103
+ return <Comp variant="light" {...props} />;
96
104
  }
97
105
 
98
- function CardContent(props: React.ComponentProps<"div">) {
99
- return <div {...props} />;
106
+ function CardContent({ asChild, ...props }: CardChildProps) {
107
+ const Comp = asChild ? Slot : "div";
108
+ return <Comp {...props} />;
100
109
  }
101
110
 
102
- function CardToolbar({ className, ...props }: React.ComponentProps<"div">) {
103
- return <div className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
111
+ function CardToolbar({ className, asChild, ...props }: CardChildProps) {
112
+ const Comp = asChild ? Slot : "div";
113
+ return <Comp className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
104
114
  }
105
115
 
106
- function CardMedia({ className, ...props }: React.ComponentProps<"div">) {
107
- return <div className={cn("relative w-full h-full", className)} {...props} />;
116
+ function CardMedia({ className, asChild, ...props }: CardChildProps) {
117
+ const Comp = asChild ? Slot : "div";
118
+ return <Comp className={cn("relative w-full h-full", className)} {...props} />;
108
119
  }
109
120
 
110
121
  function CardImage({ className, ...props }: React.ComponentProps<"img">) {
package/src/styles/typography.css CHANGED
@@ -323,6 +323,12 @@
323
323
  border-radius: var(--radius-container);
324
324
  }
325
325
 
326
+ table.no-wrap {
327
+ td {
328
+ white-space: nowrap;
329
+ }
330
+ }
331
+
326
332
  table {
327
333
  table-layout: auto;
328
334
  position: relative;
@@ -367,8 +373,8 @@
367
373
  padding-inline: --spacing(4);
368
374
  padding-block: --spacing(2);
369
375
  text-align: left;
370
- vertical-align: middle;
371
- white-space: nowrap;
376
+ vertical-align: top;
377
+ white-space: pre-wrap;
372
378
 
373
379
  &[align="center"] {
374
380
  text-align: center;
@@ -414,7 +420,7 @@
414
420
  }
415
421
 
416
422
  /* Media */
417
- :is(img, audio, video) {
423
+ :is(img, audio, video, iframe) {
418
424
  border-width: 1px;
419
425
  border-radius: var(--radius-container);
420
426
  overflow: hidden;
@@ -422,11 +428,12 @@
422
428
  margin-inline: auto;
423
429
  }
424
430
 
425
- :is(audio, video)::-webkit-media-controls-enclosure {
431
+ :is(audio, video, iframe)::-webkit-media-controls-enclosure {
426
432
  border-radius: 0px;
427
433
  }
428
434
 
429
- video {
435
+ video,
436
+ iframe {
430
437
  object-fit: cover;
431
438
  }
432
439
 
@@ -459,12 +466,12 @@
459
466
  }
460
467
  }
461
468
 
462
- :is(img, audio, video, .bordered-enclosure) {
469
+ :is(img, audio, video, iframe, .bordered-enclosure) {
463
470
  border-radius: 0;
464
471
  border: none;
465
472
  }
466
473
 
467
- :is(img, video) {
474
+ :is(img, video, iframe) {
468
475
  object-fit: contain;
469
476
  }
470
477
  }
@@ -476,10 +483,8 @@
476
483
  h5,
477
484
  h6,
478
485
  p,
479
- table,
480
- figure,
481
486
  pre,
482
- .scroll-enclosure {
487
+ figure {
483
488
  &:not(:first-child) {
484
489
  margin-top: --spacing(4);
485
490
  }