@bccampus/ui-components 0.1.0

package/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/dist/button.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 Button({ className, variant, size, asChild, ...props }: ButtonProps): JSX.Element;
+
+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;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/button.js

@@ -0,0 +1,36 @@
+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",
+  {
+    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",
+        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",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+      },
+      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"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "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 });
+}
+export {
+  p as Button,
+  c as buttonVariants
+};

package/dist/caption.d.ts

@@ -0,0 +1,13 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+export declare function Caption({ className, variant, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof captionVariants> & {
+    asChild?: boolean;
+}): JSX.Element;
+
+export declare const captionVariants: (props?: ({
+    variant?: "default" | "light" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/caption.js

@@ -0,0 +1,27 @@
+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", {
+  variants: {
+    variant: {
+      default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
+      light: "scroll-mr-4 text-sm/4 font-normal text-primary"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function x({
+  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 });
+}
+export {
+  x as Caption,
+  c as captionVariants
+};

package/dist/card.d.ts

@@ -0,0 +1,40 @@
+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 CardBody({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
+
+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 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> & {
+    asLink?: T;
+};
+
+export declare function CardSubtitle({ size, className, ...props }: CardTitleProps): JSX.Element;
+
+export declare function CardTitle({ size, className, ...props }: CardTitleProps): JSX.Element;
+
+declare type CardTitleProps = React.ComponentProps<"div"> & {
+    size?: "sm" | "md" | "lg";
+};
+
+declare const cardVariants: (props?: ({
+    variant?: "default" | "dark" | null | undefined;
+    noBorder?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/card.js

@@ -0,0 +1,130 @@
+import { j as r } from "./jsx-runtime-BzflLqGi.js";
+import { c as e } 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", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      dark: "bg-card-foreground text-card"
+    },
+    noBorder: {
+      true: "",
+      false: "border border-complement-1-100  dark:border-complement-1-900"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    noBorder: !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" : "";
+  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 })
+  );
+}
+function b({ className: a, ...t }) {
+  return /* @__PURE__ */ r.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
+    }
+  );
+}
+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({ size: a = "md", className: t, ...o }) {
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: e(
+        {
+          "heading-1": a === "lg",
+          "heading-2": a === "md",
+          "heading-3": a === "sm"
+        },
+        t
+      ),
+      ...o
+    }
+  );
+}
+function h({ size: a = "md", className: t, ...o }) {
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: e(
+        "text-secondary",
+        {
+          "heading-1": a === "lg",
+          "heading-2": a === "md",
+          "heading-3": a === "sm"
+        },
+        t
+      ),
+      ...o
+    }
+  );
+}
+function N(a) {
+  return /* @__PURE__ */ r.jsx(d, { "data-slot": "card-caption", ...a });
+}
+function w(a) {
+  return /* @__PURE__ */ r.jsx(d, { "data-slot": "card-meta", variant: "light", ...a });
+}
+function k(a) {
+  return /* @__PURE__ */ r.jsx("div", { "data-slot": "card-content", ...a });
+}
+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 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 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 }) });
+}
+export {
+  v as Card,
+  j as CardBody,
+  N 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
+};

package/dist/horizontal-list.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react/jsx-runtime';
+
+export declare function HorizontalList({ className, children, toolbarLocation, ...props }: HorizontalListProps): JSX.Element;
+
+declare interface HorizontalListProps extends React.ComponentProps<"div"> {
+    toolbarLocation?: "bottom" | "top";
+}
+
+export { }

package/dist/horizontal-list.js

@@ -0,0 +1,145 @@
+import { j as a } from "./jsx-runtime-BzflLqGi.js";
+import { c as m } from "./utils-CRiPKpXj.js";
+import { Button as u } from "./button.js";
+import { forwardRef as d, createElement as l, useRef as v, useCallback as f } 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 j = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), y = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, o, r) => r ? r.toUpperCase() : o.toLowerCase()
+), p = (t) => {
+  const e = y(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, h = (...t) => t.filter((e, o, r) => !!e && e.trim() !== "" && r.indexOf(e) === o).join(" ").trim(), k = (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 N = {
+  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 b = d(
+  ({
+    color: t = "currentColor",
+    size: e = 24,
+    strokeWidth: o = 2,
+    absoluteStrokeWidth: r,
+    className: n = "",
+    children: s,
+    iconNode: c,
+    ...i
+  }, C) => l(
+    "svg",
+    {
+      ref: C,
+      ...N,
+      width: e,
+      height: e,
+      stroke: t,
+      strokeWidth: r ? Number(o) * 24 / Number(e) : o,
+      className: h("lucide", n),
+      ...!s && !k(i) && { "aria-hidden": "true" },
+      ...i
+    },
+    [
+      ...c.map(([g, w]) => l(g, w)),
+      ...Array.isArray(s) ? s : [s]
+    ]
+  )
+);
+/**
+ * @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 = (t, e) => {
+  const o = d(
+    ({ className: r, ...n }, s) => l(b, {
+      ref: s,
+      iconNode: e,
+      className: h(
+        `lucide-${j(p(t))}`,
+        `lucide-${t}`,
+        r
+      ),
+      ...n
+    })
+  );
+  return o.displayName = p(t), o;
+};
+/**
+ * @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 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], L = x("chevron-left", 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 R = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], B = x("chevron-right", R);
+function I({ className: t, children: e, toolbarLocation: o = "bottom", ...r }) {
+  const n = v(null), s = f(() => {
+    n.current?.scrollBy({ left: -320 });
+  }, []), c = f(() => {
+    n.current?.scrollBy({ left: 320 });
+  }, []);
+  return /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      className: m("flex gap-4", {
+        "flex-col": o === "bottom",
+        "flex-col-reverse": o === "top"
+      }),
+      children: [
+        /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            ref: n,
+            className: m(
+              "scrollbar-hidden overscroll-contain -ms-4 py-1 px-4 gap-4 sm:-ms-8 sm:px-8 sm:gap-8 flex flex-row flex-nowrap overflow-x-auto w-screen snap-x snap-mandatory touch-pan-x scroll-smooth",
+              t
+            ),
+            ...r,
+            children: e
+          }
+        ),
+        /* @__PURE__ */ a.jsxs("div", { className: "flex justify-center sm:justify-start", children: [
+          /* @__PURE__ */ a.jsx(u, { size: "icon", variant: "ghost", className: "rounded-full", onClick: s, children: /* @__PURE__ */ a.jsx(L, { className: "size-9" }) }),
+          /* @__PURE__ */ a.jsx(u, { size: "icon", variant: "ghost", className: "rounded-full", onClick: c, children: /* @__PURE__ */ a.jsx(B, { className: "size-9" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  I as HorizontalList
+};

package/dist/icon-generator.d.ts

@@ -0,0 +1,50 @@
+import { JSX } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare function IconGenerator({ pattern, tileSize, tileClassName, tileBgClassName, renderChildren, ...props }: IconGeneratorProps): JSX_2.Element;
+
+declare interface IconGeneratorProps extends Omit<React.ComponentProps<"svg">, "children" | "width" | "height" | "overflow"> {
+    pattern?: (TileShape | TileConfig)[][];
+    tileSize?: number;
+    tileClassName?: string;
+    tileBgClassName?: string;
+    renderChildren?: (paths: (JSX.Element | null)[], width: number, height: number) => React.ReactNode;
+}
+
+declare interface TileConfig {
+    shape: TileShape;
+    scale?: number;
+    className?: string;
+}
+
+declare const TileShape: {
+    readonly Blank: 0;
+    readonly Rand: 1;
+    readonly Mosaic: 2;
+    readonly MosaicCircle: 3;
+    readonly MosaicDiamond: 4;
+    readonly Square: 6;
+    readonly Circle: 7;
+    readonly Diamond: 8;
+    readonly Hexagon: 9;
+    readonly RandBasic: 10;
+    readonly TriangleSE: 11;
+    readonly TriangleSW: 12;
+    readonly TriangleNW: 13;
+    readonly TriangleNE: 14;
+    readonly TriangleRand: 15;
+    readonly CaretN: 16;
+    readonly CaretE: 17;
+    readonly CaretS: 18;
+    readonly CaretW: 19;
+    readonly CaretRand: 20;
+    readonly PieSE: 21;
+    readonly PieSW: 22;
+    readonly PieNW: 23;
+    readonly PieNE: 24;
+    readonly PieRand: 25;
+};
+
+declare type TileShape = (typeof TileShape)[keyof typeof TileShape];
+
+export { }