@bccampus/ui-components 0.5.5 → 0.5.7

package/dist/components/ui/card.d.ts

@@ -17,11 +17,14 @@ type CardTitleProps = React.ComponentProps<"div"> & {
 };
 declare function CardTitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
 declare function CardSubtitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
-declare function CardCaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function CardSubcaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function CardMeta(props: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function CardContent(props: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export type CardChildProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
+declare function CardCaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardSubcaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardMeta({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardContent({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardToolbar({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardMedia({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
 declare function CardImage({ className, ...props }: React.ComponentProps<"img">): import("react").JSX.Element;
 export { Card, CardArea, CardItemGroup, CardToolbar, CardTitle, CardSubtitle, CardCaption, CardSubcaption, CardMeta, CardContent, CardMedia, CardImage, };

package/dist/components/ui/card.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { S as Slot } from "../../_chunks/index.js";
 import { c as cn } from "../../_chunks/utils.js";
 import { Caption } from "./typography/caption.js";
 import { c as cva } from "../../_chunks/index2.js";
@@ -62,9 +63,9 @@ function CardSubtitle({ size = "md", className, ...props }) {
       className: cn(
         "text-secondary",
         {
-          "heading-1": size === "lg",
-          "heading-2": size === "md",
-          "heading-3": size === "sm"
+          "heading-2": size === "lg",
+          "heading-3": size === "md",
+          "text-base": size === "sm"
         },
         className
       ),
@@ -72,23 +73,29 @@ function CardSubtitle({ size = "md", className, ...props }) {
     }
   );
 }
-function CardCaption(props) {
-  return /* @__PURE__ */ jsx(Caption, { ...props });
+function CardCaption({ asChild, ...props }) {
+  const Comp = asChild ? Slot : Caption;
+  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
 }
-function CardSubcaption(props) {
-  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
+function CardSubcaption({ asChild, ...props }) {
+  const Comp = asChild ? Slot : Caption;
+  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
 }
-function CardMeta(props) {
-  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
+function CardMeta({ asChild, ...props }) {
+  const Comp = asChild ? Slot : Caption;
+  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
 }
-function CardContent(props) {
-  return /* @__PURE__ */ jsx("div", { ...props });
+function CardContent({ asChild, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ...props });
 }
-function CardToolbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
+function CardToolbar({ className, asChild, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
 }
-function CardMedia({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full", className), ...props });
+function CardMedia({ className, asChild, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { className: cn("relative w-full h-full", className), ...props });
 }
 function CardImage({ className, ...props }) {
   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/dist/components/ui/overlay.d.ts

@@ -1,7 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 declare const overlayVariants: (props?: ({
     position?: "b" | "br" | "tr" | "r" | "t" | "l" | "tl" | "bl" | "c" | null | undefined;
+    rounded?: boolean | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export type OverlayProps = React.ComponentProps<"div"> & VariantProps<typeof overlayVariants>;
-declare function Overlay({ className, position, ...props }: OverlayProps): import("react").JSX.Element;
+declare function Overlay({ className, position, rounded, ...props }: OverlayProps): import("react").JSX.Element;
 export { Overlay };

package/dist/components/ui/overlay.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cn } from "../../_chunks/utils.js";
 import { c as cva } from "../../_chunks/index2.js";
-const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
+const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0", {
   variants: {
     position: {
       t: "top-0 left-1/2 -translate-x-1/2",
@@ -13,14 +13,66 @@ const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
       bl: "bottom-0 left-0",
       br: "bottom-0 right-0",
       c: "top-1/2 left-1/2 -translate-1/2"
+    },
+    rounded: {
+      true: null,
+      false: null
     }
   },
+  compoundVariants: [
+    {
+      position: "tl",
+      rounded: true,
+      className: "rounded-tl-lg"
+    },
+    {
+      position: "tr",
+      rounded: true,
+      className: "rounded-tr-lg"
+    },
+    {
+      position: "bl",
+      rounded: true,
+      className: "rounded-bl-lg"
+    },
+    {
+      position: "br",
+      rounded: true,
+      className: "rounded-br-lg"
+    },
+    {
+      position: "t",
+      rounded: true,
+      className: "rounded-b-lg"
+    },
+    {
+      position: "b",
+      rounded: true,
+      className: "rounded-t-lg"
+    },
+    {
+      position: "l",
+      rounded: true,
+      className: "rounded-r-lg"
+    },
+    {
+      position: "r",
+      rounded: true,
+      className: "rounded-l-lg"
+    },
+    {
+      position: "c",
+      rounded: true,
+      className: "rounded-lg"
+    }
+  ],
   defaultVariants: {
-    position: "br"
+    position: "br",
+    rounded: false
   }
 });
-function Overlay({ className, position, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(overlayVariants({ position }), className), ...props });
+function Overlay({ className, position, rounded, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(overlayVariants({ position, rounded }), className), ...props });
 }
 export {
   Overlay

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
@@ -73,4 +73,4 @@
     "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}

package/src/components/ui/card.tsx

@@ -1,3 +1,4 @@
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@/lib/utils";
 import { Caption } from "./typography/caption";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -72,9 +73,9 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
       className={cn(
         "text-secondary",
         {
-          "heading-1": size === "lg",
-          "heading-2": size === "md",
-          "heading-3": size === "sm",
+          "heading-2": size === "lg",
+          "heading-3": size === "md",
+          "text-base": size === "sm",
         },
         className
       )}
@@ -83,28 +84,38 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
   );
 }
 
-function CardCaption(props: React.ComponentProps<"div">) {
-  return <Caption {...props} />;
+export type CardChildProps = React.ComponentProps<"div"> & {
+  asChild?: boolean;
+};
+
+function CardCaption({ asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : Caption;
+  return <Comp variant="light" {...props} />;
 }
 
-function CardSubcaption(props: React.ComponentProps<"div">) {
-  return <Caption variant="light" {...props} />;
+function CardSubcaption({ asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : Caption;
+  return <Comp variant="light" {...props} />;
 }
 
-function CardMeta(props: React.ComponentProps<"div">) {
-  return <Caption variant="light" {...props} />;
+function CardMeta({ asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : Caption;
+  return <Comp variant="light" {...props} />;
 }
 
-function CardContent(props: React.ComponentProps<"div">) {
-  return <div {...props} />;
+function CardContent({ asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : "div";
+  return <Comp {...props} />;
 }
 
-function CardToolbar({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
+function CardToolbar({ className, asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : "div";
+  return <Comp className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
 }
 
-function CardMedia({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("relative w-full h-full", className)} {...props} />;
+function CardMedia({ className, asChild, ...props }: CardChildProps) {
+  const Comp = asChild ? Slot : "div";
+  return <Comp className={cn("relative w-full h-full", className)} {...props} />;
 }
 
 function CardImage({ className, ...props }: React.ComponentProps<"img">) {

package/src/components/ui/overlay.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
-const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
+const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0", {
   variants: {
     position: {
       t: "top-0 left-1/2 -translate-x-1/2",
@@ -14,16 +14,68 @@ const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
       br: "bottom-0 right-0",
       c: "top-1/2 left-1/2 -translate-1/2",
     },
+    rounded: {
+      true: null,
+      false: null,
+    },
   },
+  compoundVariants: [
+    {
+      position: "tl",
+      rounded: true,
+      className: "rounded-tl-lg",
+    },
+    {
+      position: "tr",
+      rounded: true,
+      className: "rounded-tr-lg",
+    },
+    {
+      position: "bl",
+      rounded: true,
+      className: "rounded-bl-lg",
+    },
+    {
+      position: "br",
+      rounded: true,
+      className: "rounded-br-lg",
+    },
+    {
+      position: "t",
+      rounded: true,
+      className: "rounded-b-lg",
+    },
+    {
+      position: "b",
+      rounded: true,
+      className: "rounded-t-lg",
+    },
+    {
+      position: "l",
+      rounded: true,
+      className: "rounded-r-lg",
+    },
+    {
+      position: "r",
+      rounded: true,
+      className: "rounded-l-lg",
+    },
+    {
+      position: "c",
+      rounded: true,
+      className: "rounded-lg",
+    },
+  ],
   defaultVariants: {
     position: "br",
+    rounded: false,
   },
 });
 
 export type OverlayProps = React.ComponentProps<"div"> & VariantProps<typeof overlayVariants>;
 
-function Overlay({ className, position, ...props }: OverlayProps) {
-  return <div className={cn(overlayVariants({ position }), className)} {...props} />;
+function Overlay({ className, position, rounded, ...props }: OverlayProps) {
+  return <div className={cn(overlayVariants({ position, rounded }), className)} {...props} />;
 }
 
 export { Overlay };

package/src/styles/typography.css

@@ -13,7 +13,7 @@
     color: var(--primary);
     text-wrap: balance;
     letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-normal);
     --tw-tracking: var(--tracking-tight);
     line-height: 1.125em;
   }
@@ -21,21 +21,36 @@
   h1,
   .heading-1 {
     font-size: calc(var(--text-base) * 2.5);
-    font-weight: var(--font-weight-semibold);
 
-    @media (width >= 64rem) {
+    @variant lg {
       font-size: calc(var(--text-base) * 5);
     }
   }
 
   h2,
   .heading-2 {
-    font-size: calc(var(--text-base) * 2);
+    font-size: calc(var(--text-base) * 1.875);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  h2.big,
+  .heading-2.big {
+    font-size: calc(var(--text-base) * 1.875);
+    font-weight: var(--font-weight-semibold);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 4.75);
+    }
   }
 
   h3,
   .heading-3 {
-    font-size: calc(var(--text-base) * 1.5);
+    font-size: calc(var(--text-base) * 1.25);
+    font-weight: var(--font-weight-medium);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 1.5);
+    }
   }
 
   p {
@@ -308,6 +323,12 @@
       border-radius: var(--radius-container);
     }
 
+    table.no-wrap {
+      td {
+        white-space: nowrap;
+      }
+    }
+
     table {
       table-layout: auto;
       position: relative;
@@ -352,8 +373,8 @@
       padding-inline: --spacing(4);
       padding-block: --spacing(2);
       text-align: left;
-      vertical-align: middle;
-      white-space: nowrap;
+      vertical-align: top;
+      white-space: pre-wrap;
 
       &[align="center"] {
         text-align: center;
@@ -399,7 +420,7 @@
     }
 
     /* Media */
-    :is(img, audio, video) {
+    :is(img, audio, video, iframe) {
       border-width: 1px;
       border-radius: var(--radius-container);
       overflow: hidden;
@@ -407,11 +428,12 @@
       margin-inline: auto;
     }
 
-    :is(audio, video)::-webkit-media-controls-enclosure {
+    :is(audio, video, iframe)::-webkit-media-controls-enclosure {
       border-radius: 0px;
     }
 
-    video {
+    video,
+    iframe {
       object-fit: cover;
     }
 
@@ -444,12 +466,12 @@
         }
       }
 
-      :is(img, audio, video, .bordered-enclosure) {
+      :is(img, audio, video, iframe, .bordered-enclosure) {
         border-radius: 0;
         border: none;
       }
 
-      :is(img, video) {
+      :is(img, video, iframe) {
         object-fit: contain;
       }
     }
@@ -461,10 +483,8 @@
     h5,
     h6,
     p,
-    table,
-    figure,
     pre,
-    .scroll-enclosure {
+    figure {
       &:not(:first-child) {
         margin-top: --spacing(4);
       }