@bccampus/ui-components 0.5.7 → 0.5.9

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

@@ -17,14 +17,11 @@ type CardTitleProps = React.ComponentProps<"div"> & {
 };
 declare function CardTitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
 declare function CardSubtitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
-export type CardChildProps = React.ComponentProps<"div"> & {
-    asChild?: boolean;
-};
-declare function CardCaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
-declare function CardSubcaption({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
-declare function CardMeta({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
-declare function CardContent({ asChild, ...props }: CardChildProps): import("react").JSX.Element;
-declare function CardToolbar({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
-declare function CardMedia({ className, asChild, ...props }: CardChildProps): import("react").JSX.Element;
+declare function CardCaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardSubcaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardMeta(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardContent(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function CardImage({ className, ...props }: React.ComponentProps<"img">): import("react").JSX.Element;
 export { Card, CardArea, CardItemGroup, CardToolbar, CardTitle, CardSubtitle, CardCaption, CardSubcaption, CardMeta, CardContent, CardMedia, CardImage, };

package/dist/components/ui/card.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { S as Slot } from "../../_chunks/index.js";
 import { c as cn } from "../../_chunks/utils.js";
 import { Caption } from "./typography/caption.js";
 import { c as cva } from "../../_chunks/index2.js";
@@ -73,29 +72,23 @@ function CardSubtitle({ size = "md", className, ...props }) {
     }
   );
 }
-function CardCaption({ asChild, ...props }) {
-  const Comp = asChild ? Slot : Caption;
-  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
+function CardCaption(props) {
+  return /* @__PURE__ */ jsx(Caption, { ...props });
 }
-function CardSubcaption({ asChild, ...props }) {
-  const Comp = asChild ? Slot : Caption;
-  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
+function CardSubcaption(props) {
+  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
 }
-function CardMeta({ asChild, ...props }) {
-  const Comp = asChild ? Slot : Caption;
-  return /* @__PURE__ */ jsx(Comp, { variant: "light", ...props });
+function CardMeta(props) {
+  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
 }
-function CardContent({ asChild, ...props }) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(Comp, { ...props });
+function CardContent(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
 }
-function CardToolbar({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(Comp, { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
+function CardToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
 }
-function CardMedia({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(Comp, { className: cn("relative w-full h-full", className), ...props });
+function CardMedia({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full", className), ...props });
 }
 function CardImage({ className, ...props }) {
   return /* @__PURE__ */ jsx(CardMedia, { children: /* @__PURE__ */ jsx("img", { className: cn("w-full h-full rounded-lg aspect-9/5 object-cover object-top", className), ...props }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
@@ -26,7 +26,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "publish": "yarn build && npm publish --access public",
+    "publish": "yarn build && npm publish --access public --scope=@bccampus",
     "preview": "vite preview"
   },
   "dependencies": {

package/src/components/ui/card.tsx

@@ -1,4 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@/lib/utils";
 import { Caption } from "./typography/caption";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -84,38 +83,28 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
   );
 }
 
-export type CardChildProps = React.ComponentProps<"div"> & {
-  asChild?: boolean;
-};
-
-function CardCaption({ asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : Caption;
-  return <Comp variant="light" {...props} />;
+function CardCaption(props: React.ComponentProps<"div">) {
+  return <Caption {...props} />;
 }
 
-function CardSubcaption({ asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : Caption;
-  return <Comp variant="light" {...props} />;
+function CardSubcaption(props: React.ComponentProps<"div">) {
+  return <Caption variant="light" {...props} />;
 }
 
-function CardMeta({ asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : Caption;
-  return <Comp variant="light" {...props} />;
+function CardMeta(props: React.ComponentProps<"div">) {
+  return <Caption variant="light" {...props} />;
 }
 
-function CardContent({ asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : "div";
-  return <Comp {...props} />;
+function CardContent(props: React.ComponentProps<"div">) {
+  return <div {...props} />;
 }
 
-function CardToolbar({ className, asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : "div";
-  return <Comp className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
+function CardToolbar({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
 }
 
-function CardMedia({ className, asChild, ...props }: CardChildProps) {
-  const Comp = asChild ? Slot : "div";
-  return <Comp className={cn("relative w-full h-full", className)} {...props} />;
+function CardMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("relative w-full h-full", className)} {...props} />;
 }
 
 function CardImage({ className, ...props }: React.ComponentProps<"img">) {

package/src/styles/theme.css

@@ -168,9 +168,10 @@
   }
 }
 
+/* prettier-ignore */
 @utility areas-* {
-  grid-template-areas: --value(*, [ *]);
-  grid-template-columns: --modifier(*, [ *]);
+  grid-template-areas: --value([*]);
+  grid-template-columns: --modifier([*]);
 }
 
 @utility stick-to-page {

package/dist/components/ui/composite/layout-grid.d.ts

@@ -1,2 +0,0 @@
-import { BaseCompositeProps } from './types';
-export declare function LayoutGrid<T extends object>({ data, ...props }: BaseCompositeProps<T>): import("react").JSX.Element;

package/dist/components/ui/composite/layout-grid.js

@@ -1,59 +0,0 @@
-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 LayoutGrid({ data, ...props }) {
-  const compositeRef = useRef(null);
-  const focusElement = useCallback(() => {
-    const itemKey = data.focusProvider.focusedItem.get()?.key;
-    if (itemKey && compositeRef.current) {
-      const focusedItemEl = compositeRef.current.querySelector(`[data-key="${itemKey}"]`);
-      if (focusedItemEl) focusedItemEl.focus();
-    }
-  }, [data]);
-  const handleKeyboardEvent = useKeyboardEvent({
-    ArrowUp: () => {
-      data.focusProvider.focusUp();
-      focusElement();
-    },
-    ArrowDown: () => {
-      data.focusProvider.focusDown();
-      focusElement();
-    },
-    Home: () => {
-      data.focusProvider.focusToFirst();
-      focusElement();
-    },
-    End: () => {
-      data.focusProvider.focusToLast();
-      focusElement();
-    },
-    Space: () => {
-      data.selectionProvider?.toggleSelect();
-      focusElement();
-    }
-  });
-  const handleItemMouseEvent = useCallback(
-    (item) => {
-      data.focusProvider.focus(item.key);
-      data.selectionProvider?.toggleSelect(item);
-      focusElement();
-    },
-    [data.focusProvider, data.selectionProvider, focusElement]
-  );
-  return /* @__PURE__ */ jsx(
-    CompositeComponent,
-    {
-      ref: compositeRef,
-      variant: "listbox",
-      data,
-      onKeyDown: handleKeyboardEvent,
-      itemMouseEventHandler: handleItemMouseEvent,
-      ...props
-    }
-  );
-}
-export {
-  LayoutGrid
-};

package/src/components/ui/composite/layout-grid.tsx

@@ -1,61 +0,0 @@
-import { CompositeComponent } from "./composite-component";
-import { useCallback, useRef } from "react";
-import { CompositeDataItem } from "./CompositeDataItem";
-import type { BaseCompositeProps } from "./types";
-import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
-
-export function LayoutGrid<T extends object>({ data, ...props }: BaseCompositeProps<T>) {
-  const compositeRef = useRef<HTMLDivElement>(null);
-
-  const focusElement = useCallback(() => {
-    const itemKey = data.focusProvider.focusedItem.get()?.key;
-
-    if (itemKey && compositeRef.current) {
-      const focusedItemEl = compositeRef.current.querySelector<HTMLDivElement>(`[data-key="${itemKey}"]`);
-      if (focusedItemEl) focusedItemEl.focus();
-    }
-  }, [data]);
-
-  const handleKeyboardEvent = useKeyboardEvent({
-    ArrowUp: () => {
-      data.focusProvider.focusUp();
-      focusElement();
-    },
-    ArrowDown: () => {
-      data.focusProvider.focusDown();
-      focusElement();
-    },
-    Home: () => {
-      data.focusProvider.focusToFirst();
-      focusElement();
-    },
-    End: () => {
-      data.focusProvider.focusToLast();
-      focusElement();
-    },
-    Space: () => {
-      data.selectionProvider?.toggleSelect();
-      focusElement();
-    },
-  });
-
-  const handleItemMouseEvent = useCallback(
-    (item: CompositeDataItem<T>) => {
-      data.focusProvider.focus(item.key);
-      data.selectionProvider?.toggleSelect(item);
-      focusElement();
-    },
-    [data.focusProvider, data.selectionProvider, focusElement]
-  );
-
-  return (
-    <CompositeComponent
-      ref={compositeRef}
-      variant="listbox"
-      data={data}
-      onKeyDown={handleKeyboardEvent}
-      itemMouseEventHandler={handleItemMouseEvent}
-      {...props}
-    />
-  );
-}