@bccampus/ui-components 0.2.0 → 0.4.0

package/dist/banner.js

@@ -1,19 +1,19 @@
-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";
+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 p = [
+const x = [
   ["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", {
+], 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",
@@ -30,13 +30,13 @@ const p = [
     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, {}) }) })
+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 {
-  w as Banner
+  N as Banner
 };

package/dist/button.d.ts

@@ -9,7 +9,7 @@ export declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<
 };
 
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | 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;

package/dist/button.js

@@ -1,9 +1,9 @@
-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 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",
+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: {
@@ -11,6 +11,7 @@ const v = c(
         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-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: {
@@ -18,25 +19,24 @@ const v = c(
         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",
+        default: "h-9",
+        sm: "h-8 gap-1.5",
+        lg: "h-10 text-base",
         icon: "size-9",
-        text: "py-2"
+        text: "h-9 text-base"
       }
     },
     defaultVariants: {
-      variant: "default",
       size: "default",
-      block: !1
+      block: !1,
+      variant: "default"
     }
   }
 );
-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 });
+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 {
-  m as Button,
-  v as buttonVariants
+  p as Button,
+  u as buttonVariants
 };

package/dist/caption.js

@@ -1,8 +1,8 @@
-import { j as s } from "./jsx-runtime-BzflLqGi.js";
-import { S as i } from "./index-DlfV3JTY.js";
+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 l = e("tracking-tight text-balance", {
+const s = e("tracking-tight text-balance", {
   variants: {
     variant: {
       default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
@@ -13,16 +13,15 @@ const l = e("tracking-tight text-balance", {
     variant: "default"
   }
 });
-function d({
+function x({
   className: t,
   variant: a,
   asChild: r = !1,
   ...o
 }) {
-  const n = r ? i : "div";
-  return /* @__PURE__ */ s.jsx(n, { className: m(l({ variant: a, className: t })), ...o });
+  return /* @__PURE__ */ n(r ? i : "div", { className: m(s({ variant: a, className: t })), ...o });
 }
 export {
-  d as Caption,
-  l as captionVariants
+  x as Caption,
+  s as captionVariants
 };

package/dist/card.js

@@ -1,11 +1,11 @@
-import { j as e } from "./jsx-runtime-BzflLqGi.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 s } from "./index-CQhYMnjT.js";
-const u = s("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-card", {
+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: {
     bordered: {
-      true: "p-card border border-complement-1-100  dark:border-brand-1-900 ",
+      true: "p-(--spacing-card) border border-complement-1-100  dark:border-brand-1-900 ",
       false: ""
     },
     rounded: {
@@ -18,28 +18,28 @@ const u = s("group @container/card w-full max-w-full bg-card text-card-foregroun
     rounded: !1
   }
 });
-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" : "";
+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__ */ e.jsx(i, { "data-slot": "card", className: t(u({ bordered: n, rounded: o }), c, r), ...l })
+    /* @__PURE__ */ e(i, { "data-slot": "card", className: t(m({ bordered: n, rounded: o }), l, r), ...c })
   );
 }
-function v({ name: r, className: a, ...n }) {
-  return /* @__PURE__ */ e.jsx(
+function b({ name: r, className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       style: { gridArea: r },
-      className: t("relative flex flex-col gap-(--card-area-gap)", a),
+      className: t("@container/card-area relative flex flex-col gap-(--gap-card-area)", a),
       ...n
     }
   );
 }
-function C({ className: r, ...a }) {
-  return /* @__PURE__ */ e.jsx("div", { className: t("flex flex-col gap-(--card-item-group-gap)", r), ...a });
+function h({ className: r, ...a }) {
+  return /* @__PURE__ */ e("div", { className: t("flex flex-col gap-(--gap-card-item-group)", r), ...a });
 }
-function b({ size: r = "md", className: a, ...n }) {
-  return /* @__PURE__ */ e.jsx(
+function x({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       className: t(
@@ -54,8 +54,8 @@ function b({ size: r = "md", className: a, ...n }) {
     }
   );
 }
-function h({ size: r = "md", className: a, ...n }) {
-  return /* @__PURE__ */ e.jsx(
+function N({ size: r = "md", className: a, ...n }) {
+  return /* @__PURE__ */ e(
     "div",
     {
       className: t(
@@ -71,38 +71,38 @@ function h({ size: r = "md", className: a, ...n }) {
     }
   );
 }
-function N(r) {
-  return /* @__PURE__ */ e.jsx(d, { ...r });
-}
 function w(r) {
-  return /* @__PURE__ */ e.jsx(d, { variant: "light", ...r });
+  return /* @__PURE__ */ e(d, { ...r });
+}
+function j(r) {
+  return /* @__PURE__ */ e(d, { variant: "light", ...r });
 }
 function y(r) {
-  return /* @__PURE__ */ e.jsx(d, { variant: "light", ...r });
+  return /* @__PURE__ */ e(d, { variant: "light", ...r });
 }
 function k(r) {
-  return /* @__PURE__ */ e.jsx("div", { ...r });
+  return /* @__PURE__ */ e("div", { ...r });
 }
 function A({ className: r, ...a }) {
-  return /* @__PURE__ */ e.jsx("div", { className: t("flex flex-wrap items-center gap-(--card-item-group-gap)", r), ...a });
+  return /* @__PURE__ */ e("div", { className: t("flex flex-wrap items-center gap-(--gap-card-item-group)", r), ...a });
 }
-function m({ className: r, ...a }) {
-  return /* @__PURE__ */ e.jsx("div", { className: t("relative w-full h-full", r), ...a });
+function s({ className: r, ...a }) {
+  return /* @__PURE__ */ e("div", { className: t("relative w-full h-full", r), ...a });
 }
 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 }) });
+  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 {
-  j as Card,
-  v as CardArea,
-  N as CardCaption,
+  C as Card,
+  b as CardArea,
+  w as CardCaption,
   k as CardContent,
   I as CardImage,
-  C as CardItemGroup,
-  m as CardMedia,
+  h as CardItemGroup,
+  s as CardMedia,
   y as CardMeta,
-  w as CardSubcaption,
-  h as CardSubtitle,
-  b as CardTitle,
+  j as CardSubcaption,
+  N as CardSubtitle,
+  x as CardTitle,
   A as CardToolbar
 };

package/dist/composite.d.ts

@@ -0,0 +1,151 @@
+import { JSX } from 'react/jsx-runtime';
+import { KeyboardEventHandler } from 'react';
+import { MouseEventHandler } from 'react';
+import { PreinitializedMapStore } from 'nanostores';
+import { PreinitializedWritableAtom } from 'nanostores';
+import { ReactNode } from 'react';
+
+export declare function CompositeComponent<T extends object>({ renderItem, className, itemClassName, ref, id, ...props }: CompositeProps<T>): JSX.Element;
+
+export declare function CompositeComponentContext<T extends object>({ data, children, ...compositeOptions }: CompositeComponentContextProps<T>): JSX.Element;
+
+declare interface CompositeComponentContextProps<T extends object> extends CompositeOptions {
+    data: T[];
+    children: React.ReactNode;
+}
+
+export declare function CompositeComponentItem<T extends object>({ id, className, item, mouseEventHandler, keyboardEventHandler, render, }: CompositeItemProps<T>): JSX.Element;
+
+declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    lookup: Map<CompositeItemKey, CompositeDataItem<T>>;
+    firstFocusableItem: CompositeDataItem<T> | null;
+    focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null>;
+    disabledKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    root: CompositeDataItem<T>;
+    constructor(items: T[], options?: CompositeOptions);
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T[];
+    init(items: T[]): void;
+    isFocusable(itemAtom: CompositeDataItem<T>): boolean;
+    getFirstFocusableItem(): CompositeDataItem<T> | undefined;
+    item(key: CompositeItemKey): CompositeDataItem<T> | undefined;
+    descendants(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    ancestors(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    focus(itemKey: CompositeItemKey): void;
+    focus(item: CompositeDataItem<T>): void;
+    toggleSelect(itemKey: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    select(itemKey: CompositeItemKey, recursive?: boolean): void;
+    select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
+    deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    disable(itemKey: CompositeItemKey, recursive?: boolean): void;
+    disable(item: CompositeDataItem<T>, recursive?: boolean): void;
+    enable(itemKey: CompositeItemKey, recursive?: boolean): void;
+    enable(item: CompositeDataItem<T>, recursive?: boolean): void;
+    updateItem(key: CompositeItemKey, data: Partial<T> | ((item: T) => Partial<T>)): void;
+}
+
+declare class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    parent: CompositeDataItem<T> | null;
+    children?: CompositeDataItem<T>[];
+    level: number;
+    data: PreinitializedMapStore<T>;
+    state: PreinitializedMapStore<CompositeDataItemState>;
+    pointers: {
+        left?: CompositeItemKey;
+        right?: CompositeItemKey;
+        up?: CompositeItemKey;
+        down?: CompositeItemKey;
+    };
+    childrenProp: string;
+    constructor(item: T, options: CompositeDataItemOptions<T>, parent: CompositeDataItem<T> | null);
+    get key(): CompositeItemKey;
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T;
+    descendants(): CompositeDataItem<T>[];
+    ancestors(): CompositeDataItem<T>[];
+    toggleSelect(recursive?: boolean): void;
+    select(recursive?: boolean): CompositeItemKey[];
+    deselect(recursive?: boolean): CompositeItemKey[];
+    disable(recursive?: boolean): CompositeItemKey[];
+    enable(recursive?: boolean): CompositeItemKey[];
+}
+
+export declare type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
+    initialState?: CompositeDataItemState;
+    itemChildrenProp: string;
+};
+
+export declare interface CompositeDataItemState {
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+
+export declare type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
+
+declare interface CompositeDataPropGetters<T> {
+    getItemKey: (item: T) => CompositeItemKey;
+    getItemChildren: (item: T) => T[] | undefined;
+}
+
+export declare interface CompositeFocusProvider {
+    setPointers: () => void;
+    goFirst: () => void;
+    goLast: () => void;
+    goUp: () => void;
+    goDown: () => void;
+    goLeft: () => void;
+    goRight: () => void;
+}
+
+export declare interface CompositeHandle {
+    focusUp: () => void;
+    focusDown: () => void;
+    select: () => void;
+}
+
+export declare interface CompositeItemEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+
+export declare type CompositeItemKey = string | number;
+
+export declare interface CompositeItemProps<T extends object> {
+    id: string;
+    className?: string;
+    item: CompositeDataItem<T>;
+    mouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    keyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    remove?: () => void;
+    render: CompositeItemRenderFn<T>;
+}
+
+export declare type CompositeItemRenderFn<T extends object> = (item: {
+    data: T;
+    level: number;
+    key: CompositeItemKey;
+}, state: CompositeDataItemState, eventHandlers: CompositeItemEventHandlers) => ReactNode;
+
+export declare interface CompositeOptions {
+    disabledKeys?: CompositeItemKey[];
+    selectedKeys?: CompositeItemKey[];
+    itemKeyProp?: string;
+    itemChildrenProp?: string;
+}
+
+export declare interface CompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    renderItem: CompositeItemRenderFn<T>;
+    className?: string;
+    itemClassName?: string;
+    ref?: React.Ref<CompositeHandle>;
+}
+
+export declare function useCompositeContext<T extends object>(): CompositeData<T>;
+
+export { }