@bccampus/ui-components 0.5.0 → 0.5.2

package/dist/components/ui/composite/SelectionProvider/MultipleSelectionProvider.js

@@ -1,4 +1,4 @@
-import { C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+import { CompositeDataItem } from "../CompositeDataItem.js";
 import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
 import { union, difference } from "../../../../lib/set-operations.js";
 class MultipleSelectionProvider extends AbstractSelectionProvider {

package/dist/components/ui/composite/SelectionProvider/SingleSelectionProvider.js

@@ -1,4 +1,4 @@
-import { C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+import { CompositeDataItem } from "../CompositeDataItem.js";
 import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
 import { difference } from "../../../../lib/set-operations.js";
 class SingleSelectionProvider extends AbstractSelectionProvider {

package/dist/components/ui/composite/composite-component-item.js

@@ -1,28 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";
-function listenKeys($store, keys, listener) {
-  let keysSet = new Set(keys).add(void 0);
-  return $store.listen((value, oldValue, changed) => {
-    if (keysSet.has(changed)) {
-      listener(value, oldValue, changed);
-    }
-  });
-}
-let emit = (snapshotRef, onChange) => (value) => {
-  if (snapshotRef.current === value) return;
-  snapshotRef.current = value;
-  onChange();
-};
-function useStore(store, { keys, deps = [store, keys] } = {}) {
-  let snapshotRef = useRef();
-  snapshotRef.current = store.get();
-  let subscribe = useCallback((onChange) => {
-    emit(snapshotRef, onChange)(store.value);
-    return keys?.length > 0 ? listenKeys(store, keys, emit(snapshotRef, onChange)) : store.listen(emit(snapshotRef, onChange));
-  }, deps);
-  let get = () => snapshotRef.current;
-  return useSyncExternalStore(subscribe, get, get);
-}
+import { useMemo } from "react";
+import { useStore } from "@nanostores/react";
 function CompositeComponentItem({
   id,
   className,

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

@@ -5,3 +5,4 @@ export * from './SelectionProvider';
 export * from './composite-component.tsx';
 export * from './composite-component-item.tsx';
 export * from './listbox.tsx';
+export type * from './types';

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

@@ -1,5 +1,5 @@
 import { CompositeData } from "./CompositeData.js";
-import { C } from "../../../_chunks/CompositeDataItem.js";
+import { CompositeDataItem } from "./CompositeDataItem.js";
 import { AbstractFocusProvider } from "./FocusProvider/AbstractFocusProvider.js";
 import { ListboxFocusProvider } from "./FocusProvider/ListboxFocusProvider.js";
 import { AbstractSelectionProvider } from "./SelectionProvider/AbstractSelectionProvider.js";
@@ -14,7 +14,7 @@ export {
   CompositeComponent,
   CompositeComponentItem,
   CompositeData,
-  C as CompositeDataItem,
+  CompositeDataItem,
   Listbox,
   ListboxFocusProvider,
   MultipleSelectionProvider,

package/dist/components/ui/composite/listbox.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { CompositeComponent } from "./composite-component.js";
 import { useRef, useCallback } from "react";
+import "nanostores";
 import { useKeyboardEvent } from "../../../hooks/use-keyboard-event.js";
 function Listbox({ data, ...props }) {
   const compositeRef = useRef(null);

package/dist/components/ui/horizontal-list.js

@@ -4,20 +4,8 @@ import { Button } from "./button.js";
 import { useRef, useCallback } from "react";
 import { c as cva } from "../../_chunks/index2.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$1 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
 const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1);
-/**
- * @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: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode);
 const horizontalListVariants = cva(

package/dist/components/ui/navigation-menu.js

@@ -2,17 +2,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default from "react";
 import ReactDOM__default from "react-dom";
-import { c as createContextScope, P as Primitive, u as useControllableState, a as useId, b as Presence, d as composeEventHandlers, e as useCallbackRef, D as DismissableLayer, f as useLayoutEffect2, g as dispatchDiscreteCustomEvent } from "../../_chunks/index3.js";
-import { u as useComposedRefs, c as createSlot, a as composeRefs } from "../../_chunks/index.js";
+import { c as createContextScope, P as Primitive, u as useControllableState, a as useId, b as Presence, d as composeEventHandlers, e as useCallbackRef, D as DismissableLayer, f as useLayoutEffect2, g as dispatchDiscreteCustomEvent } from "../../_chunks/index4.js";
+import { c as composeRefs, u as useComposedRefs } from "../../_chunks/index3.js";
 import { c as cn } from "../../_chunks/utils.js";
 import { buttonVariants } from "./button.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: "m6 9 6 6 6-6", key: "qrunsl" }]];
 const ChevronDown = createLucideIcon("chevron-down", __iconNode);
 var DirectionContext = React.createContext(void 0);
@@ -20,6 +14,88 @@ function useDirection(localDir) {
   const globalDir = React.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
@@ -35,7 +111,7 @@ function createCollection(name) {
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
+  const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React__default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
@@ -47,7 +123,7 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
+  const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
   const CollectionItemSlot = React__default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;

package/dist/components/ui/popover.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useLayoutEffect, useState } from "react";
-import { e as useCallbackRef$1, P as Primitive, f as useLayoutEffect2, c as createContextScope, u as useControllableState, a as useId, d as composeEventHandlers, b as Presence, D as DismissableLayer } from "../../_chunks/index3.js";
-import { u as useComposedRefs, c as createSlot } from "../../_chunks/index.js";
+import { e as useCallbackRef$1, P as Primitive, f as useLayoutEffect2, c as createContextScope, u as useControllableState, a as useId, d as composeEventHandlers, b as Presence, D as DismissableLayer } from "../../_chunks/index4.js";
+import { u as useComposedRefs, c as composeRefs } from "../../_chunks/index3.js";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 import { c as cn } from "../../_chunks/utils.js";
@@ -2437,6 +2437,88 @@ var Portal$1 = React.forwardRef((props, forwardedRef) => {
   return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal$1.displayName = PORTAL_NAME$1;
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 var getDefaultParent = function(originalTarget) {
   if (typeof document === "undefined") {
     return null;
@@ -3311,7 +3393,7 @@ var PopoverContent$1 = React.forwardRef(
   }
 );
 PopoverContent$1.displayName = CONTENT_NAME;
-var Slot = createSlot("PopoverContent.RemoveScroll");
+var Slot = /* @__PURE__ */ createSlot("PopoverContent.RemoveScroll");
 var PopoverContentModal = React.forwardRef(
   (props, forwardedRef) => {
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);

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

@@ -2,12 +2,6 @@ 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" }]

package/package.json

@@ -1,67 +1,75 @@
-{
-  "name": "@bccampus/ui-components",
-  "version": "0.5.0",
-  "type": "module",
-  "packageManager": "yarn@4.10.3",
-  "exports": {
-    ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./dist/lib/index.d.ts",
-      "import": "./dist/lib/index.js"
-    },
-    "./all.css": "./src/styles/all.css",
-    "./colors.css": "./src/styles/colors.css",
-    "./fonts.css": "./src/styles/fonts.css",
-    "./theme.css": "./src/styles/theme.css",
-    "./typography.css": "./src/styles/typography.css"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@bccampus/media-kit": "^0.1.1",
-    "@bcgov/bc-sans": "^2.1.0",
-    "@fontsource-variable/inter-tight": "^5.2.7",
-    "@ladle/react": "^5.0.3",
-    "@nanostores/react": "^1.0.0",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.544.0",
-    "nanostores": "^1.0.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13",
-    "tw-animate-css": "^1.3.8"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.35.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react-swc": "^4.0.1",
-    "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",
-    "vite": "^7.1.6",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+  "name": "@bccampus/ui-components",
+  "version": "0.5.2",
+  "type": "module",
+  "packageManager": "yarn@4.10.3",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./all.css": "./src/styles/all.css",
+    "./colors.css": "./src/styles/colors.css",
+    "./fonts.css": "./src/styles/fonts.css",
+    "./theme.css": "./src/styles/theme.css",
+    "./typography.css": "./src/styles/typography.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@bccampus/media-kit": "^0.1.1",
+    "@bcgov/bc-sans": "^2.1.0",
+    "@fontsource-variable/inter-tight": "^5.2.7",
+    "@nanostores/react": "^1.0.0",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.560.0",
+    "nanostores": "^1.1.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@nanostores/react": "^1.0.0",
+    "nanostores": "^1.1.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@ladle/react": "^5.1.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.10.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "glob": "^13.0.0",
+    "globals": "^16.5.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/App.tsx

@@ -1,14 +1,44 @@
-import { Button } from "@/components/ui/button";
-
-function App() {
-  return (
-    <div className="flex min-h-svh flex-col items-center justify-center">
-      <h1 className="font-inter-tight scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
-        Taxing Laughter: The Joke Tax Chronicles
-      </h1>
-      <Button>Click Here</Button>
-    </div>
-  );
-}
-
-export default App;
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardArea,
+  CardCaption,
+  CardContent,
+  CardItemGroup,
+  CardMeta,
+  CardSubcaption,
+  CardSubtitle,
+  CardTitle,
+  CardToolbar,
+} from "@/components/ui/card";
+
+function App() {
+  return (
+    <div className="bcc-typography flex min-h-svh flex-col items-center justify-center">
+      <Card className="w-md areas-['a''b']" bordered rounded>
+        <CardArea name="a">
+          <CardItemGroup>
+            <CardCaption>Caption Example</CardCaption>
+            <CardSubcaption>Subcaption Example</CardSubcaption>
+          </CardItemGroup>
+          <CardItemGroup>
+            <CardTitle>Title Example Lorem</CardTitle>
+            <CardSubtitle>Subtitle Example Lorem</CardSubtitle>
+          </CardItemGroup>
+          <CardContent>
+            Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis posuere orci.
+          </CardContent>
+          <CardMeta>Meta Example Date: November 8th 2025</CardMeta>
+        </CardArea>
+        <CardArea name="b">
+          <CardToolbar>
+            <Button>Action A</Button>
+            <Button variant="secondary">Action B</Button>
+          </CardToolbar>
+        </CardArea>
+      </Card>
+    </div>
+  );
+}
+
+export default App;

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

@@ -4,4 +4,5 @@ export * from './FocusProvider'
 export * from './SelectionProvider'
 export * from './composite-component.tsx'
 export * from './composite-component-item.tsx'
-export * from './listbox.tsx'
+export * from './listbox.tsx'
+export type * from './types'

package/src/components/ui/page-header.tsx

@@ -1,21 +1,18 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Root, Slottable } from "@radix-ui/react-slot";
 import { PageSection } from "./page-section";
-import { LogoBCcampusWithTagline } from "@bccampus/media-kit";
 
 export type PageHeaderProps = React.ComponentProps<"div"> & {
   asChild?: boolean;
+  logo?: React.ReactNode;
 };
 
-function PageHeader({ children, asChild, ...props }: PageHeaderProps) {
-  const Comp = asChild ? Slot : "div";
+function PageHeader({ children, asChild, logo, ...props }: PageHeaderProps) {
+  const Comp = asChild ? Root : "div";
   return (
     <PageSection py="none" className="sticky top-0 right-0 left-0 z-50 bg-background" {...props}>
       <Comp className="h-page-nav overflow-hidden flex flex-row flex-nowrap border-b-1 border-b-complement-1-50 gap-2 sm:gap-12 justify-between items-center sm:justify-start">
-        <div className="py-4 h-full">
-          <LogoBCcampusWithTagline height="100%" variant="color" />
-        </div>
-
-        {children}
+        {logo}
+        <Slottable>{children}</Slottable>
       </Comp>
     </PageSection>
   );

package/src/main.tsx

@@ -1,12 +1,12 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import App from "./App.tsx";
-
-import "./index.css";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App.tsx";
+
+import "./styles/index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/vite.config.ts

@@ -42,10 +42,14 @@ export default defineConfig({
     rollupOptions: {
       external: [
         'react',
-        'react-dom',
         'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'react-dom',
+        'react-dom/client',
         'tailwindcss',
-        'tw-animate-css'
+        'tw-animate-css',
+        'nanostores',
+        '@nanostores/react'
       ],
       output: {
         assetFileNames: '[name][extname]',