@bccampus/ui-components 0.5.8 → 0.6.0

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/dist/components/ui/input.d.ts

@@ -1,3 +1,7 @@
-export type InputProps = React.ComponentProps<"input">;
-declare function Input({ className, ...props }: InputProps): import("react").JSX.Element;
+import { LucideProps } from 'lucide-react';
+export interface InputProps extends React.ComponentProps<"input"> {
+    leftIcon?: React.JSXElementConstructor<LucideProps>;
+    rightIcon?: React.JSXElementConstructor<LucideProps>;
+}
+declare function Input({ className, leftIcon, rightIcon, ...props }: InputProps): import("react").JSX.Element;
 export { Input };

package/dist/components/ui/input.js

@@ -1,17 +1,23 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cn } from "../../_chunks/utils.js";
-function Input({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      className: cn(
-        "w-full p-2 pr-8 text-brand-1 placeholder:text-brand-1 rounded-sm bg-complement-1-50 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2",
-        className
-      ),
-      name: "search",
-      ...props
-    }
-  );
+function Input({ className, leftIcon, rightIcon, ...props }) {
+  const LeftComp = leftIcon ? leftIcon : null;
+  const RightComp = rightIcon ? rightIcon : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    LeftComp && /* @__PURE__ */ jsx(LeftComp, { className: "absolute size-4 top-1/2 left-2 -translate-y-1/2 pointer-events-none text-primary" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: cn(
+          "w-full p-2  rounded-sm outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2",
+          "text-brand-1 placeholder:text-brand-1 bg-complement-1-50 dark:text-foreground dark:placeholder:text-white dark:bg-brand-1",
+          { "pl-8": LeftComp, "pr-8": RightComp }
+        ),
+        ...props
+      }
+    ),
+    RightComp && /* @__PURE__ */ jsx(RightComp, { className: "absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" })
+  ] });
 }
 export {
   Input

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

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

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

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as cn } from "../../_chunks/utils.js";
+import { jsx } from "react/jsx-runtime";
 import { Input } from "./input.js";
 import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
 const __iconNode = [
@@ -7,11 +6,8 @@ const __iconNode = [
   ["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" })
-  ] });
+function SearchInput({ ...props }) {
+  return /* @__PURE__ */ jsx(Input, { rightIcon: Search, ...props });
 }
 export {
   SearchInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {

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/components/ui/input.tsx

@@ -1,16 +1,33 @@
 import { cn } from "@/lib/utils";
-export type InputProps = React.ComponentProps<"input">;
+import type { LucideProps } from "lucide-react";
 
-function Input({ className, ...props }: InputProps) {
+export interface InputProps extends React.ComponentProps<"input"> {
+  leftIcon?: React.JSXElementConstructor<LucideProps>;
+  rightIcon?: React.JSXElementConstructor<LucideProps>;
+}
+
+function Input({ className, leftIcon, rightIcon, ...props }: InputProps) {
+  const LeftComp = leftIcon ? leftIcon : null;
+  const RightComp = rightIcon ? rightIcon : null;
   return (
-    <input
-      className={cn(
-        "w-full p-2 pr-8 text-brand-1 placeholder:text-brand-1 rounded-sm bg-complement-1-50 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2",
-        className
+    <div className={cn("relative", className)}>
+      {LeftComp && (
+        <LeftComp className="absolute size-4 top-1/2 left-2 -translate-y-1/2 pointer-events-none text-primary" />
+      )}
+
+      <input
+        className={cn(
+          "w-full p-2  rounded-sm outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2",
+          "text-brand-1 placeholder:text-brand-1 bg-complement-1-50 dark:text-foreground dark:placeholder:text-white dark:bg-brand-1",
+          { "pl-8": LeftComp, "pr-8": RightComp },
+        )}
+        {...props}
+      />
+
+      {RightComp && (
+        <RightComp className="absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" />
       )}
-      name="search" 
-      {...props}
-    />
+    </div>
   );
 }
 

package/src/components/ui/search-input.tsx

@@ -1,16 +1,8 @@
-import { cn } from "@/lib/utils";
 import { Search } from "lucide-react";
-import { Input } from "./input";
+import { Input, type InputProps } from "./input";
 
-export type SearchInputProps = React.ComponentProps<"input">;
-
-function SearchInput({ className, ...props }: SearchInputProps) {
-  return (
-    <div className={cn("relative", className)}>
-      <Input {...props} />
-      <Search className="absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" />
-    </div>
-  );
+function SearchInput({ ...props }: InputProps) {
+  return <Input rightIcon={Search} {...props} />;
 }
 
 export { SearchInput };

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}
-    />
-  );
-}