@bccampus/ui-components 0.1.0 → 0.2.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 { j as t } from "./jsx-runtime-BzflLqGi.js";
+import { c as m } from "./index-CQhYMnjT.js";
+import { c as l } from "./utils-CRiPKpXj.js";
+import { useState as d } from "react";
+import { Button as f } from "./button.js";
+import { c as x } 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 p = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], u = x("x", p), v = m("flex flex-row items-center justify-between px-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 w({ className: e, size: s, variant: i, dismissible: a, children: n, ...r }) {
+  const [o, c] = d(!1);
+  return o ? null : /* @__PURE__ */ t.jsxs("div", { className: l(v({ variant: i, size: s }), e), ...r, children: [
+    /* @__PURE__ */ t.jsx("div", { className: "flex-auto text-center", children: n }),
+    a && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(f, { variant: "ghost", size: "icon", className: "size-6 text-white", onClick: () => c(!0), children: /* @__PURE__ */ t.jsx(u, {}) }) })
+  ] });
+}
+export {
+  w 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" | "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 { j as s } from "./jsx-runtime-BzflLqGi.js";
+import { S as d } from "./index-DlfV3JTY.js";
+import { c } from "./index-CQhYMnjT.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",
+const v = c(
+  "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 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",
         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"
+        icon: "size-9",
+        text: "py-2"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "default",
+      block: !1
     }
   }
 );
-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 m({ className: e, variant: r, size: t, block: o, asChild: i = !1, ...a }) {
+  const n = i ? d : "button";
+  return /* @__PURE__ */ s.jsx(n, { "data-slot": "button", className: u(v({ variant: r, size: t, block: o }), e), ...a });
 }
 export {
-  p as Button,
-  c as buttonVariants
+  m as Button,
+  v 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 { S as i } from "./index-DlfV3JTY.js";
+import { c as e } from "./index-CQhYMnjT.js";
+import { c as m } from "./utils-CRiPKpXj.js";
+const l = e("tracking-tight text-balance", {
   variants: {
     variant: {
       default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
@@ -12,16 +13,16 @@ const c = i("tracking-tight text-balance", {
     variant: "default"
   }
 });
-function x({
+function d({
   className: t,
   variant: a,
   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 });
+  const n = r ? i : "div";
+  return /* @__PURE__ */ s.jsx(n, { className: m(l({ variant: a, className: t })), ...o });
 }
 export {
-  x as Caption,
-  c as captionVariants
+  d as Caption,
+  l 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 { j as e } from "./jsx-runtime-BzflLqGi.js";
+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 s } from "./index-CQhYMnjT.js";
+const u = s("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-card", {
   variants: {
-    variant: {
-      default: "bg-card text-card-foreground",
-      dark: "bg-card-foreground text-card"
+    bordered: {
+      true: "p-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 j({ className: r, asLink: a, bordered: n, rounded: o, ...l }) {
+  const i = a ? "a" : "div", c = 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.jsx(i, { "data-slot": "card", className: t(u({ bordered: n, rounded: o }), c, r), ...l })
   );
 }
-function b({ className: a, ...t }) {
-  return /* @__PURE__ */ r.jsx(
+function v({ name: r, className: a, ...n }) {
+  return /* @__PURE__ */ e.jsx(
     "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("relative flex flex-col gap-(--card-area-gap)", 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 C({ className: r, ...a }) {
+  return /* @__PURE__ */ e.jsx("div", { className: t("flex flex-col gap-(--card-item-group-gap)", r), ...a });
 }
-function C({ size: a = "md", className: t, ...o }) {
-  return /* @__PURE__ */ r.jsx(
+function b({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e.jsx(
     "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 h({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e.jsx(
     "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 N(r) {
+  return /* @__PURE__ */ e.jsx(d, { ...r });
 }
-function w(a) {
-  return /* @__PURE__ */ r.jsx(d, { "data-slot": "card-meta", variant: "light", ...a });
+function w(r) {
+  return /* @__PURE__ */ e.jsx(d, { variant: "light", ...r });
 }
-function k(a) {
-  return /* @__PURE__ */ r.jsx("div", { "data-slot": "card-content", ...a });
+function y(r) {
+  return /* @__PURE__ */ e.jsx(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.jsx("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.jsx("div", { className: t("flex flex-wrap items-center gap-(--card-item-group-gap)", r), ...a });
+}
+function m({ className: r, ...a }) {
+  return /* @__PURE__ */ e.jsx("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.jsx(m, { children: /* @__PURE__ */ e.jsx("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,
+  j as Card,
+  v as CardArea,
   N as CardCaption,
   k as CardContent,
-  y as CardFooter,
-  b as CardHeader,
-  B as CardImage,
-  p as CardMedia,
-  w as CardMeta,
+  I as CardImage,
+  C as CardItemGroup,
+  m as CardMedia,
+  y as CardMeta,
+  w as CardSubcaption,
   h as CardSubtitle,
-  C as CardTitle
+  b 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 { }