@bccampus/ui-components 0.5.9 → 0.6.0

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.9",
+  "version": "0.6.0",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {

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