@bccampus/ui-components 0.1.0 → 0.3.0

package/dist/banner.d.ts

@@ -0,0 +1,16 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+export declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): JSX.Element | null;
+
+export declare interface BannerProps extends VariantProps<typeof bannerVariants>, React.ComponentProps<"div"> {
+    dismissible?: boolean;
+}
+
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "alert" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/banner.js

@@ -0,0 +1,42 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { c as l } from "./index-CQhYMnjT.js";
+import { c as d } from "./utils-CRiPKpXj.js";
+import { useState as f } from "react";
+import { Button as p } from "./button.js";
+import { c as u } from "./createLucideIcon-CzehbSja.js";
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const x = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], b = u("x", x), v = l("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
+  variants: {
+    variant: {
+      default: "bg-complement-3 text-white",
+      alert: "bg-complement-2-200 text-black"
+    },
+    size: {
+      default: "py-2",
+      sm: "py-1",
+      lg: "py-3 text-md font-semibold"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function N({ className: e, size: a, variant: s, dismissible: i, children: n, ...r }) {
+  const [o, c] = f(!1);
+  return o ? null : /* @__PURE__ */ m("div", { "data-slot": "banner", className: d(v({ variant: s, size: a }), e), ...r, children: [
+    /* @__PURE__ */ t("div", { className: "flex-auto text-center", children: n }),
+    i && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(p, { variant: "ghost", size: "icon", className: "size-6 text-white", onClick: () => c(!0), children: /* @__PURE__ */ t(b, {}) }) })
+  ] });
+}
+export {
+  N as Banner
+};

package/dist/button.d.ts

@@ -2,15 +2,16 @@ import { ClassProp } from 'class-variance-authority/types';
 import { JSX } from 'react/jsx-runtime';
 import { VariantProps } from 'class-variance-authority';
 
-export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ className, variant, size, block, asChild, ...props }: ButtonProps): JSX.Element;
 
-declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+export declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 };
 
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "item" | "destructive" | null | undefined;
+    block?: boolean | null | undefined;
+    size?: "text" | "default" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export { }

package/dist/button.js

@@ -1,36 +1,42 @@
-import { j as a } from "./jsx-runtime-BzflLqGi.js";
-import { c as s, S as d } from "./index-DcqAdr0d.js";
-import { c as u } from "./utils-CRiPKpXj.js";
-const c = s(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+import { jsx as n } from "react/jsx-runtime";
+import { S as s } from "./index-U7DVCmS_.js";
+import { c as d } from "./index-CQhYMnjT.js";
+import { c } from "./utils-CRiPKpXj.js";
+const u = d(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 px-6 has-[>svg]:px-4 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-secondary dark:bg-complement-1-50 dark:text-brand-1 dark:hover:bg-complement-1-100",
+        default: "bg-primary text-primary-foreground hover:bg-secondary dark:bg-complement-1-100 dark:text-brand-1 dark:hover:bg-complement-1-50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-background hover:text-primary dark:bg-complement-1-500 dark:text-foreground dark:hover:bg-complement-1-600",
         outline: "border border-primary bg-transparent hover:border-secondary hover:bg-secondary/10 dark:border-input dark:hover:bg-input/50",
-        ghost: "text-secondary hover:bg-primary/10 dark:text-foreground dark:hover:bg-complement-1-800",
-        link: "text-primary underline-offset-4 hover:underline",
+        ghost: "text-primary hover:text-secondary dark:text-foreground dark:hover:bg-complement-1-800",
+        item: "justify-between px-2 has-[>svg]:px-2 text-primary hover:bg-complement-1-50 dark:text-foreground dark:hover:bg-complement-1-800",
         destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       },
+      block: {
+        false: "w-fit",
+        true: "w-full"
+      },
       size: {
-        default: "h-9 px-6 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
+        default: "h-9",
+        sm: "h-8 gap-1.5",
+        lg: "h-10 text-base",
+        icon: "size-9",
+        text: "h-9 text-base"
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
+      size: "default",
+      block: !1,
+      variant: "default"
     }
   }
 );
-function p({ className: e, variant: r, size: t, asChild: i = !1, ...n }) {
-  const o = i ? d : "button";
-  return /* @__PURE__ */ a.jsx(o, { "data-slot": "button", className: u(c({ variant: r, size: t }), e), ...n });
+function p({ className: e, variant: r, size: t, block: o, asChild: a = !1, ...i }) {
+  return /* @__PURE__ */ n(a ? s : "button", { "data-slot": "button", className: c(u({ size: t, block: o, variant: r }), e), ...i });
 }
 export {
   p as Button,
-  c as buttonVariants
+  u as buttonVariants
 };

package/dist/caption.js

@@ -1,7 +1,8 @@
-import { j as s } from "./jsx-runtime-BzflLqGi.js";
-import { c as i, S as e } from "./index-DcqAdr0d.js";
-import { c as l } from "./utils-CRiPKpXj.js";
-const c = i("tracking-tight text-balance", {
+import { jsx as n } from "react/jsx-runtime";
+import { S as i } from "./index-U7DVCmS_.js";
+import { c as e } from "./index-CQhYMnjT.js";
+import { c as m } from "./utils-CRiPKpXj.js";
+const s = e("tracking-tight text-balance", {
   variants: {
     variant: {
       default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
@@ -18,10 +19,9 @@ function x({
   asChild: r = !1,
   ...o
 }) {
-  const n = r ? e : "div";
-  return /* @__PURE__ */ s.jsx(n, { "data-slot": "caption", className: l(c({ variant: a, className: t })), ...o });
+  return /* @__PURE__ */ n(r ? i : "div", { className: m(s({ variant: a, className: t })), ...o });
 }
 export {
   x as Caption,
-  c as captionVariants
+  s as captionVariants
 };

package/dist/card.d.ts

@@ -2,28 +2,32 @@ import { ClassProp } from 'class-variance-authority/types';
 import { JSX } from 'react/jsx-runtime';
 import { VariantProps } from 'class-variance-authority';
 
-export declare function Card<T extends boolean = false>({ className, asLink, variant, noBorder, ...props }: CardProps<T>): JSX.Element;
+export declare function Card<T extends boolean = false>({ className, asLink, bordered, rounded, ...props }: CardProps<T>): JSX.Element;
 
-export declare function CardBody({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function CardArea({ name, className, ...props }: CardAreaProps): JSX.Element;
+
+declare type CardAreaProps = React.ComponentProps<"div"> & {
+    name: string;
+};
 
 export declare function CardCaption(props: React.ComponentProps<"div">): JSX.Element;
 
 export declare function CardContent(props: React.ComponentProps<"div">): JSX.Element;
 
-export declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
-
-export declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
-
 export declare function CardImage({ className, ...props }: React.ComponentProps<"img">): JSX.Element;
 
+export declare function CardItemGroup({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+
 export declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
 export declare function CardMeta(props: React.ComponentProps<"div">): JSX.Element;
 
-declare type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) & VariantProps<typeof cardVariants> & {
+export declare type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) & VariantProps<typeof cardVariants> & {
     asLink?: T;
 };
 
+export declare function CardSubcaption(props: React.ComponentProps<"div">): JSX.Element;
+
 export declare function CardSubtitle({ size, className, ...props }: CardTitleProps): JSX.Element;
 
 export declare function CardTitle({ size, className, ...props }: CardTitleProps): JSX.Element;
@@ -32,9 +36,11 @@ declare type CardTitleProps = React.ComponentProps<"div"> & {
     size?: "sm" | "md" | "lg";
 };
 
+export declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+
 declare const cardVariants: (props?: ({
-    variant?: "default" | "dark" | null | undefined;
-    noBorder?: boolean | null | undefined;
+    bordered?: boolean | null | undefined;
+    rounded?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export { }

package/dist/card.js

@@ -1,130 +1,108 @@
-import { j as r } from "./jsx-runtime-BzflLqGi.js";
-import { c as e } from "./utils-CRiPKpXj.js";
+import { jsx as e } from "react/jsx-runtime";
+import { c as t } from "./utils-CRiPKpXj.js";
 import { Caption as d } from "./caption.js";
-import { c as i } from "./index-DcqAdr0d.js";
-const f = i("group @container/card flex flex-col rounded-2xl gap-3", {
+import { c as u } from "./index-CQhYMnjT.js";
+const m = u("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-(--gap-card)", {
   variants: {
-    variant: {
-      default: "bg-card text-card-foreground",
-      dark: "bg-card-foreground text-card"
+    bordered: {
+      true: "p-(--spacing-card) border border-complement-1-100  dark:border-brand-1-900 ",
+      false: ""
     },
-    noBorder: {
-      true: "",
-      false: "border border-complement-1-100  dark:border-complement-1-900"
+    rounded: {
+      true: "rounded-2xl",
+      false: ""
     }
   },
   defaultVariants: {
-    variant: "default",
-    noBorder: !1
+    bordered: !1,
+    rounded: !1
   }
 });
-function v({ className: a, asLink: t, variant: o, noBorder: n, ...l }) {
-  const s = t ? "a" : "div", c = t ? "transition-all hover:bg-complement-1-50 dark:hover:border-complement-1-950" : "";
+function C({ className: r, asLink: a, bordered: n, rounded: o, ...c }) {
+  const i = a ? "a" : "div", l = a ? "transition-all hover:bg-complement-1-50 dark:hover:bg-gray-900" : "";
   return (
     //@ts-expect-error: props type will be correct
-    /* @__PURE__ */ r.jsx(s, { "data-slot": "card", className: e(f({ variant: o, noBorder: n }), c, a), ...l })
+    /* @__PURE__ */ e(i, { "data-slot": "card", className: t(m({ bordered: n, rounded: o }), l, r), ...c })
   );
 }
-function b({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(
+function b({ name: r, className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      "data-slot": "card-header",
-      className: e("flex flex-col items-start gap-3 px-6 first:pt-6 last:pb-6", a),
-      ...t
+      style: { gridArea: r },
+      className: t("@container/card-area relative flex flex-col gap-(--gap-card-area)", a),
+      ...n
     }
   );
 }
-function j({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      "data-slot": "card-body",
-      className: e("flex flex-col items-start gap-3 px-6 first:pt-6 last:pb-6", a),
-      ...t
-    }
-  );
+function h({ className: r, ...a }) {
+  return /* @__PURE__ */ e("div", { className: t("flex flex-col gap-(--gap-card-item-group)", r), ...a });
 }
-function C({ size: a = "md", className: t, ...o }) {
-  return /* @__PURE__ */ r.jsx(
+function x({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      "data-slot": "card-title",
-      className: e(
+      className: t(
         {
-          "heading-1": a === "lg",
-          "heading-2": a === "md",
-          "heading-3": a === "sm"
+          "heading-1": r === "lg",
+          "heading-2": r === "md",
+          "heading-3": r === "sm"
         },
-        t
+        a
       ),
-      ...o
+      ...n
     }
   );
 }
-function h({ size: a = "md", className: t, ...o }) {
-  return /* @__PURE__ */ r.jsx(
+function N({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      "data-slot": "card-title",
-      className: e(
+      className: t(
         "text-secondary",
         {
-          "heading-1": a === "lg",
-          "heading-2": a === "md",
-          "heading-3": a === "sm"
+          "heading-1": r === "lg",
+          "heading-2": r === "md",
+          "heading-3": r === "sm"
         },
-        t
+        a
       ),
-      ...o
+      ...n
     }
   );
 }
-function N(a) {
-  return /* @__PURE__ */ r.jsx(d, { "data-slot": "card-caption", ...a });
+function w(r) {
+  return /* @__PURE__ */ e(d, { ...r });
 }
-function w(a) {
-  return /* @__PURE__ */ r.jsx(d, { "data-slot": "card-meta", variant: "light", ...a });
+function j(r) {
+  return /* @__PURE__ */ e(d, { variant: "light", ...r });
 }
-function k(a) {
-  return /* @__PURE__ */ r.jsx("div", { "data-slot": "card-content", ...a });
+function y(r) {
+  return /* @__PURE__ */ e(d, { variant: "light", ...r });
 }
-function y({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: e("flex flex-wrap items-center gap-2 px-6 pt-3 last:pb-6", a),
-      ...t
-    }
-  );
+function k(r) {
+  return /* @__PURE__ */ e("div", { ...r });
 }
-function p({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      "data-slot": "card-media",
-      className: e(
-        "relative flex-1 p-6 first:pb-3 last:pt-3 group-[.flex-row]:first:pr-0 group-[.flex-row]:first:pb-6 group-[.flex-row]:last:pl-0 group-[.flex-row]:last:pt-6",
-        a
-      ),
-      ...t
-    }
-  );
+function A({ className: r, ...a }) {
+  return /* @__PURE__ */ e("div", { className: t("flex flex-wrap items-center gap-(--gap-card-item-group)", r), ...a });
+}
+function s({ className: r, ...a }) {
+  return /* @__PURE__ */ e("div", { className: t("relative w-full h-full", r), ...a });
 }
-function B({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(p, { children: /* @__PURE__ */ r.jsx("img", { className: e("w-full h-full rounded-lg aspect-9/5 object-cover object-top", a), ...t }) });
+function I({ className: r, ...a }) {
+  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e("img", { className: t("w-full h-full rounded-lg aspect-9/5 object-cover object-top", r), ...a }) });
 }
 export {
-  v as Card,
-  j as CardBody,
-  N as CardCaption,
+  C as Card,
+  b as CardArea,
+  w as CardCaption,
   k as CardContent,
-  y as CardFooter,
-  b as CardHeader,
-  B as CardImage,
-  p as CardMedia,
-  w as CardMeta,
-  h as CardSubtitle,
-  C as CardTitle
+  I as CardImage,
+  h as CardItemGroup,
+  s as CardMedia,
+  y as CardMeta,
+  j as CardSubcaption,
+  N as CardSubtitle,
+  x as CardTitle,
+  A as CardToolbar
 };

package/dist/createLucideIcon-CzehbSja.js

@@ -0,0 +1,94 @@
+import { forwardRef as l, createElement as n } from "react";
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const w = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), h = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, r, o) => o ? o.toUpperCase() : r.toLowerCase()
+), i = (t) => {
+  const e = h(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, u = (...t) => t.filter((e, r, o) => !!e && e.trim() !== "" && o.indexOf(e) === r).join(" ").trim(), f = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+};
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var g = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const A = l(
+  ({
+    color: t = "currentColor",
+    size: e = 24,
+    strokeWidth: r = 2,
+    absoluteStrokeWidth: o,
+    className: s = "",
+    children: a,
+    iconNode: p,
+    ...c
+  }, m) => n(
+    "svg",
+    {
+      ref: m,
+      ...g,
+      width: e,
+      height: e,
+      stroke: t,
+      strokeWidth: o ? Number(r) * 24 / Number(e) : r,
+      className: u("lucide", s),
+      ...!a && !f(c) && { "aria-hidden": "true" },
+      ...c
+    },
+    [
+      ...p.map(([C, d]) => n(C, d)),
+      ...Array.isArray(a) ? a : [a]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const k = (t, e) => {
+  const r = l(
+    ({ className: o, ...s }, a) => n(A, {
+      ref: a,
+      iconNode: e,
+      className: u(
+        `lucide-${w(i(t))}`,
+        `lucide-${t}`,
+        o
+      ),
+      ...s
+    })
+  );
+  return r.displayName = i(t), r;
+};
+export {
+  k as c
+};

package/dist/horizontal-list.d.ts

@@ -1,9 +1,16 @@
+import { ClassProp } from 'class-variance-authority/types';
 import { JSX } from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
 
-export declare function HorizontalList({ className, children, toolbarLocation, ...props }: HorizontalListProps): JSX.Element;
+export declare function HorizontalList({ variant, className, children, toolbarLocation, scrollBy, ...props }: HorizontalListProps): JSX.Element;
 
-declare interface HorizontalListProps extends React.ComponentProps<"div"> {
+export declare interface HorizontalListProps extends VariantProps<typeof horizontalListVariants>, React.ComponentProps<"div"> {
     toolbarLocation?: "bottom" | "top";
+    scrollBy?: number;
 }
 
+declare const horizontalListVariants: (props?: ({
+    variant?: "overflow" | "contain" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export { }