@bccampus/ui-components 0.4.2 → 0.5.0

package/dist/components/ui/search-input.d.ts

@@ -0,0 +1,3 @@
+export type SearchInputProps = React.ComponentProps<"input">;
+declare function SearchInput({ className, ...props }: SearchInputProps): import("react").JSX.Element;
+export { SearchInput };

package/dist/components/ui/search-input.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as cn } from "../../_chunks/utils.js";
+import { Input } from "./input.js";
+import { c as createLucideIcon } from "../../_chunks/createLucideIcon.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 __iconNode = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode);
+function SearchInput({ className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Input, { ...props }),
+    /* @__PURE__ */ jsx(Search, { className: "absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" })
+  ] });
+}
+export {
+  SearchInput
+};

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const tagVariants: (props?: ({
+    variant?: "button" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
+    asChild?: boolean;
+}
+declare function Tag({ className, size, variant, asChild, ...props }: TagProps): import("react").JSX.Element;
+export { Tag, tagVariants };

package/dist/{tag.js → components/ui/tag.js}

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "./index-U7DVCmS_.js";
-import { c as o } from "./index-CQhYMnjT.js";
-import { c as l } from "./utils-CRiPKpXj.js";
-const p = o(
+import { jsx } from "react/jsx-runtime";
+import { S as Slot } from "../../_chunks/index.js";
+import { c as cva } from "../../_chunks/index2.js";
+import { c as cn } from "../../_chunks/utils.js";
+const tagVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm bg-complement-3 text-white [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
@@ -23,10 +23,11 @@ const p = o(
     }
   }
 );
-function u({ className: i, size: e, variant: t, asChild: s = !1, ...a }) {
-  return /* @__PURE__ */ r(s ? n : "div", { "data-slot": "tag", className: l(p({ variant: t, size: e }), i), ...a });
+function Tag({ className, size, variant, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "tag", className: cn(tagVariants({ variant, size }), className), ...props });
 }
 export {
-  u as Tag,
-  p as tagVariants
+  Tag,
+  tagVariants
 };

package/dist/components/ui/typography/caption.d.ts

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

package/dist/components/ui/typography/caption.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { S as Slot } from "../../../_chunks/index.js";
+import { c as cva } from "../../../_chunks/index2.js";
+import { c as cn } from "../../../_chunks/utils.js";
+const captionVariants = cva("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 Caption({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { className: cn(captionVariants({ variant, className })), ...props });
+}
+export {
+  Caption,
+  captionVariants
+};

package/dist/components/ui/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './caption.tsx';

package/dist/components/ui/typography/index.js

@@ -0,0 +1,5 @@
+import { Caption, captionVariants } from "./caption.js";
+export {
+  Caption,
+  captionVariants
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-effect-after-mount';
+export * from './use-id';
+export * from './use-keyboard-event';

package/dist/hooks/index.js

@@ -0,0 +1,9 @@
+import { useEffectAfterMount } from "./use-effect-after-mount.js";
+import { useId } from "./use-id.js";
+import { keyboardEventHandler, useKeyboardEvent } from "./use-keyboard-event.js";
+export {
+  keyboardEventHandler,
+  useEffectAfterMount,
+  useId,
+  useKeyboardEvent
+};

package/dist/hooks/use-effect-after-mount.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from 'react';
+export declare function useEffectAfterMount(fn: EffectCallback, dependencies?: DependencyList): void;

package/dist/hooks/use-effect-after-mount.js

@@ -0,0 +1,24 @@
+import { useRef, useEffect } from "react";
+function useEffectAfterMount(fn, dependencies) {
+  const mounted = useRef(false);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+  useEffect(
+    () => {
+      if (mounted.current) {
+        return fn();
+      }
+      mounted.current = true;
+      return void 0;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies
+  );
+}
+export {
+  useEffectAfterMount
+};

package/dist/hooks/use-id.d.ts

@@ -0,0 +1 @@
+export declare function useId(id?: string): string;

package/dist/hooks/use-id.js

@@ -0,0 +1,7 @@
+import { useId as useId$1 } from "react";
+function useId(id) {
+  return id ?? useId$1();
+}
+export {
+  useId
+};

package/dist/hooks/use-keyboard-event.d.ts

@@ -0,0 +1,59 @@
+import { KeyboardEvent, KeyboardEventHandler } from 'react';
+interface KeyBindings {
+    [sequence: string]: (event: KeyboardEvent) => void;
+}
+interface UseKeyboardEventOptions {
+    eventKeyProp: 'key' | 'code';
+}
+export declare function keyboardEventHandler(bindings: KeyBindings, options?: UseKeyboardEventOptions): KeyboardEventHandler;
+/**
+ * Returns a `KeyboardEventHandler`
+ * that checks the defined key sequences against a keyboard event
+ * and executes the handler of the first matched key binding.
+ *
+ * Key Sequence Rules:
+ *  - Multiple key must be seperated by `+`
+ *  - Only the following modifier key values as allowed: ctrl, shift, alt, meta
+ *  - Modifier key must followed by a key
+ *  - Space character (` `) cannot be used in the key sequences. Use the `space` keyword instead.
+ *  - Plus character (`+`) cannot be used in the key sequences. Use the `shit + =` sequence instead.
+ *
+ * @example
+ * ```
+ * export function Input({ value, onChange }: Props) {
+ *   const [inputValue, setInputValue] = useState<string>('');
+ *
+ *   const clearInput = () => {
+ *     setInputValue('');
+ *   };
+ *
+ *   const addItem = () => {
+ *     if (inputValue) {
+ *       onChange([...value, inputValue]);
+ *       clearInput();
+ *     }
+ *   };
+ *
+ *   const deleteAll = () => {
+ *     onChange([]);
+ *     clearInput();
+ *   };
+ *
+ *   const handleKeyDown = useKeyboardEvent({
+ *     'enter': addItem,
+ *     'escape': clearInput,
+ *     'ctrl+c': clearInput,
+ *     'ctrl + shift + c': deleteAll,
+ *   });
+ *
+ *   return (
+ *      <input
+ *        value={inputValue}
+ *        onChange={event => setInputValue(event.target.value)}
+ *        onKeyDown={handleKeyDown}
+ *      />;
+ * }
+ * ```
+ */
+export declare function useKeyboardEvent(bindings: KeyBindings, options?: UseKeyboardEventOptions): KeyboardEventHandler;
+export {};

package/dist/hooks/use-keyboard-event.js

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+const MODIFIER_KEYS = /* @__PURE__ */ new Set(["ctrl", "shift", "alt", "meta"]);
+const KEY_MAPPINGS = {
+  " ": "space"
+};
+function parseKeybindings(bindings) {
+  const parsedKeybindings = [];
+  for (const [sequence, handler] of Object.entries(bindings)) {
+    const parsedSequence = sequence.toLowerCase().trim().split(/\s*\+\s*/g);
+    if (parsedSequence.length === 1 && MODIFIER_KEYS.has(parsedSequence[0])) {
+      console.error(`[useKeyboardEvent] '${sequence}': A key sequence cannot be only a modifier key.`);
+    } else if (parsedSequence.includes("")) {
+      console.error(`[useKeyboardEvent] '${sequence}': Invalid key sequence defined in the sequence.`);
+    } else {
+      parsedKeybindings.push({
+        sequence: new RegExp("^" + parsedSequence.join("\\+") + "$"),
+        handler
+      });
+    }
+  }
+  return parsedKeybindings;
+}
+const defaultOptions = {
+  eventKeyProp: "key"
+};
+function keyboardEventHandler(bindings, options = defaultOptions) {
+  const _options = { ...options, ...defaultOptions };
+  const keyBindings = parseKeybindings(bindings);
+  return (event) => {
+    const eventKey = event[_options.eventKeyProp];
+    const keySequence = [];
+    if (event.ctrlKey) keySequence.push("ctrl");
+    if (event.shiftKey) keySequence.push("shift");
+    if (event.altKey) keySequence.push("alt");
+    if (event.metaKey) keySequence.push("meta");
+    if (!KEY_MAPPINGS[eventKey]) keySequence.push(eventKey.toLowerCase());
+    else keySequence.push(KEY_MAPPINGS[eventKey]);
+    const matchedSequence = keyBindings.find((keyBinding) => keyBinding.sequence.test(keySequence.join("+")));
+    if (matchedSequence) {
+      event.preventDefault();
+      event.stopPropagation();
+      matchedSequence.handler(event);
+    }
+  };
+}
+function useKeyboardEvent(bindings, options) {
+  return useMemo(() => keyboardEventHandler(bindings, options), [bindings, options]);
+}
+export {
+  keyboardEventHandler,
+  useKeyboardEvent
+};

package/dist/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './object';
+export * from './set-operations';
+export * from './utils';

package/dist/lib/index.js

@@ -0,0 +1,16 @@
+import { get, isObject, omit, pick, set } from "./object.js";
+import { difference, intersection, isSuperset, symmetricDifference, union } from "./set-operations.js";
+import { c } from "../_chunks/utils.js";
+export {
+  c as cn,
+  difference,
+  get,
+  intersection,
+  isObject,
+  isSuperset,
+  omit,
+  pick,
+  set,
+  symmetricDifference,
+  union
+};

package/dist/lib/object.d.ts

@@ -0,0 +1,5 @@
+export declare const get: <T extends object>(object: T, prop: string) => any;
+export declare const set: <T extends object, V>(object: T, prop: string, value: V) => T;
+export declare const pick: <T extends object>(object: T, props: string[]) => Partial<T>;
+export declare const omit: <T extends object>(object: T, props: string[]) => Partial<T>;
+export declare const isObject: (object: unknown) => boolean;

package/dist/lib/object.js

@@ -0,0 +1,38 @@
+const get = (object, prop) => prop.split(".").reduce((reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0, object);
+const set = (object, prop, value) => {
+  const propChunks = prop.split(".");
+  const lastChunk = propChunks.pop();
+  if (!lastChunk) return object;
+  const ref = propChunks.reduce((reducedObject, key) => {
+    reducedObject[key] = {};
+    return reducedObject[key];
+  }, object);
+  ref[lastChunk] = value;
+  return object;
+};
+const pick = (object, props) => {
+  return props.reduce((result, key) => {
+    set(result, key, get(object, key));
+    return result;
+  }, {});
+};
+const omit = (object, props) => {
+  const result = { ...object };
+  props.forEach((prop) => {
+    const propChunks = prop.split(".");
+    const lastChunk = propChunks.pop();
+    if (lastChunk) {
+      const ref = propChunks.reduce((reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0, result);
+      if (ref && lastChunk in ref) delete ref[lastChunk];
+    }
+  });
+  return result;
+};
+const isObject = (object) => typeof object === "object" && !Array.isArray(object) && object !== null;
+export {
+  get,
+  isObject,
+  omit,
+  pick,
+  set
+};

package/dist/lib/set-operations.d.ts

@@ -0,0 +1,5 @@
+export declare function isSuperset(set: Iterable<any>, subset: Iterable<any>): boolean;
+export declare function union(setA: Iterable<any>, setB: Iterable<any>): Set<any>;
+export declare function intersection(setA: Iterable<any>, setB: Iterable<any>): Set<unknown>;
+export declare function symmetricDifference(setA: Iterable<any>, setB: Iterable<any>): Set<any>;
+export declare function difference(setA: Iterable<any>, setB: Iterable<any>): Set<any>;

package/dist/lib/set-operations.js

@@ -0,0 +1,51 @@
+function isSuperset(set, subset) {
+  const _set = set instanceof Set ? set : new Set(set);
+  for (const elem of subset) {
+    if (!_set.has(elem)) {
+      return false;
+    }
+  }
+  return true;
+}
+function union(setA, setB) {
+  const _union = new Set(setA);
+  for (const elem of setB) {
+    _union.add(elem);
+  }
+  return _union;
+}
+function intersection(setA, setB) {
+  const _setA = setA instanceof Set ? setA : new Set(setA);
+  const _intersection = /* @__PURE__ */ new Set();
+  for (const elem of setB) {
+    if (_setA.has(elem)) {
+      _intersection.add(elem);
+    }
+  }
+  return _intersection;
+}
+function symmetricDifference(setA, setB) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
+    if (_difference.has(elem)) {
+      _difference.delete(elem);
+    } else {
+      _difference.add(elem);
+    }
+  }
+  return _difference;
+}
+function difference(setA, setB) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
+    _difference.delete(elem);
+  }
+  return _difference;
+}
+export {
+  difference,
+  intersection,
+  isSuperset,
+  symmetricDifference,
+  union
+};

package/dist/{utils.d.ts → lib/utils.d.ts}

@@ -1,5 +1,2 @@
-import { ClassValue } from 'clsx';
-
-export declare function cn(...inputs: ClassValue[]): string;
-
-export { }
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,4 @@
+import { c } from "../_chunks/utils.js";
+export {
+  c as cn
+};

package/package.json

@@ -1,88 +1,20 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
     ".": {
-      "types": "./dist/ui-components.d.ts",
-      "import": "./dist/ui-components.js"
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
     },
-    "./composite": {
-      "types": "./dist/composite.d.ts",
-      "import": "./dist/composite.js"
-    },
-    "./listbox": {
-      "types": "./dist/listbox.d.ts",
-      "import": "./dist/listbox.js"
-    },
-    "./icon-generator": {
-      "types": "./dist/icon-generator.d.ts",
-      "import": "./dist/icon-generator.js"
-    },
-    "./generate-tiles": {
-      "types": "./dist/generate-tiles.d.ts",
-      "import": "./dist/generate-tiles.js"
-    },
-    "./masked-image-generator": {
-      "types": "./dist/masked-image-generator.d.ts",
-      "import": "./dist/masked-image-generator.js"
-    },
-    "./caption": {
-      "types": "./dist/caption.d.ts",
-      "import": "./dist/caption.js"
-    },
-    "./banner": {
-      "types": "./dist/banner.d.ts",
-      "import": "./dist/banner.js"
-    },
-    "./button": {
-      "types": "./dist/button.d.ts",
-      "import": "./dist/button.js"
-    },
-    "./card": {
-      "types": "./dist/card.d.ts",
-      "import": "./dist/card.js"
-    },
-    "./horizontal-list": {
-      "types": "./dist/horizontal-list.d.ts",
-      "import": "./dist/horizontal-list.js"
-    },
-    "./input": {
-      "types": "./dist/input.d.ts",
-      "import": "./dist/input.js"
-    },
-    "./navigation-menu": {
-      "types": "./dist/navigation-menu.d.ts",
-      "import": "./dist/navigation-menu.js"
-    },
-    "./overlay": {
-      "types": "./dist/overlay.d.ts",
-      "import": "./dist/overlay.js"
-    },
-    "./page-header": {
-      "types": "./dist/page-header.d.ts",
-      "import": "./dist/page-header.js"
-    },
-    "./page-section": {
-      "types": "./dist/page-section.d.ts",
-      "import": "./dist/page-section.js"
-    },
-    "./page": {
-      "types": "./dist/page.d.ts",
-      "import": "./dist/page.js"
-    },
-    "./search-input": {
-      "types": "./dist/search-input.d.ts",
-      "import": "./dist/search-input.js"
-    },
-    "./tag": {
-      "types": "./dist/tag.d.ts",
-      "import": "./dist/tag.js"
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
     },
     "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.js"
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
     },
     "./all.css": "./src/styles/all.css",
     "./colors.css": "./src/styles/colors.css",
@@ -125,6 +57,7 @@
     "eslint": "^9.35.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "glob": "^13.0.0",
     "globals": "^16.4.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.43.0",

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export * from '@/components/ui/composite'
+export * from '@/components/ui/icon-generator'
+export * from '@/components/ui/typography'
+
+export * from '@/components/ui/banner.tsx'
+export * from '@/components/ui/button.tsx'
+export * from '@/components/ui/card.tsx'
+export * from '@/components/ui/horizontal-list.tsx'
+export * from '@/components/ui/input.tsx'
+export * from '@/components/ui/navigation-menu.tsx'
+export * from '@/components/ui/overlay.tsx'
+export * from '@/components/ui/page-header.tsx'
+export * from '@/components/ui/page-section.tsx'
+export * from '@/components/ui/page.tsx'
+export * from '@/components/ui/popover.tsx'
+export * from '@/components/ui/search-input.tsx'
+export * from '@/components/ui/tag.tsx'

package/src/components/ui/composite/FocusProvider/index.ts

@@ -0,0 +1,2 @@
+export * from '@/components/ui/composite/FocusProvider/AbstractFocusProvider'
+export * from '@/components/ui/composite/FocusProvider/ListboxFocusProvider'

package/src/components/ui/composite/SelectionProvider/MultipleSelectionProvider.ts

@@ -3,7 +3,7 @@ import type { CompositeItemKey } from '../types';
 import { AbstractSelectionProvider } from './AbstractSelectionProvider';
 import { difference, union } from "@/lib/set-operations";
 
-export class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+export class MultipleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
 
 
   select(itemKey: CompositeItemKey, recursive?: boolean): void;

package/src/components/ui/composite/SelectionProvider/index.ts

@@ -0,0 +1,3 @@
+export * from '@/components/ui/composite/SelectionProvider/AbstractSelectionProvider'
+export * from '@/components/ui/composite/SelectionProvider/SingleSelectionProvider'
+export * from '@/components/ui/composite/SelectionProvider/MultipleSelectionProvider' 

package/src/components/ui/composite/index.ts

@@ -1,7 +1,7 @@
-export * from './composite-component.tsx'
-export * from './composite-component-item.tsx'
 export * from './CompositeData.ts'
 export * from './CompositeDataItem.ts'
-export * from './FocusProvider/AbstractFocusProvider.ts'
-export * from './SelectionProvider/AbstractSelectionProvider.ts'
-export * from './types.ts'
+export * from './FocusProvider'
+export * from './SelectionProvider'
+export * from './composite-component.tsx'
+export * from './composite-component-item.tsx'
+export * from './listbox.tsx'

package/src/components/ui/icon-generator/index.ts

@@ -1,2 +1,4 @@
 export * from "./icon-generator.tsx"
+export * from "./generate-tiles.tsx"
+export * from "./masked-image-generator.tsx"
 export * from "./types"

package/src/components/ui/typography/index.ts

@@ -0,0 +1 @@
+export * from './caption.tsx' 

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './use-effect-after-mount'
+export * from './use-id'
+export * from './use-keyboard-event'

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from '@/components'
+export * from '@/hooks'
+export * from '@/lib'

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './object'
+export * from './set-operations'
+export * from './utils'