@julseb-lib/react 0.1.70 → 0.1.72

package/dist/index.d.cts

@@ -2005,9 +2005,23 @@ declare const ListGroupTitle: FC$1<ILibListGroupTitle>;
 declare const ListGroupItem: FC$1<ILibListGroupItem>;
 
 /**
- * Breadcrumbs component for displaying navigational breadcrumb trails with customizable separators and flexible content.
+ * Breadcrumbs component for displaying navigational breadcrumb trails.
+ *
+ * Renders a customizable container (default: div) with children as breadcrumb items,
+ * separated by a customizable separator (string or React node).
+ * Supports accent and text color theming, and additional class names.
  *
  * @component
+ * @param {ILibBreadcrumbs} props - Breadcrumbs props.
+ * @param {string} [props.className] - Additional CSS classes for the container.
+ * @param {React.ElementType} [props.element="div"] - Container element type.
+ * @param {React.Ref<HTMLDivElement>} [props.ref] - Ref to the container element.
+ * @param {React.ReactNode} [props.children] - Breadcrumb items.
+ * @param {string|React.ReactNode} [props.separator="/"] - Separator between items.
+ * @param {"primary"|"secondary"|"success"|"danger"|"warning"|"gray"|"white"} [props.accentColor="primary"] - Accent color.
+ * @param {Any color from the library} [props.textColor="font"] - Text color.
+ * @param {any} [props.rest] - Additional props for the container.
+ * @returns {JSX.Element} Breadcrumbs component.
  *
  * @example
  * <Breadcrumbs separator=">">
@@ -2016,17 +2030,6 @@ declare const ListGroupItem: FC$1<ILibListGroupItem>;
  *   <Text>Current Page</Text>
  * </Breadcrumbs>
  *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the breadcrumbs container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the breadcrumbs container element.
- * @prop {React.ReactNode} [props.children] - Navigation items to display in the breadcrumb trail.
- * @prop {string | React.ReactNode} [props.separator="/"] - Separator to display between breadcrumb items.
- * @prop {any} [props.rest] - Additional props spread to the container element.
- *
- * @returns {JSX.Element} The rendered Breadcrumbs component.
- *
  * @see https://doc-julseb-lib-react.vercel.app/components/breadcrumbs
  */
 declare const Breadcrumbs: FC$1<ILibBreadcrumbs>;

package/dist/index.d.ts

@@ -2005,9 +2005,23 @@ declare const ListGroupTitle: FC$1<ILibListGroupTitle>;
 declare const ListGroupItem: FC$1<ILibListGroupItem>;
 
 /**
- * Breadcrumbs component for displaying navigational breadcrumb trails with customizable separators and flexible content.
+ * Breadcrumbs component for displaying navigational breadcrumb trails.
+ *
+ * Renders a customizable container (default: div) with children as breadcrumb items,
+ * separated by a customizable separator (string or React node).
+ * Supports accent and text color theming, and additional class names.
  *
  * @component
+ * @param {ILibBreadcrumbs} props - Breadcrumbs props.
+ * @param {string} [props.className] - Additional CSS classes for the container.
+ * @param {React.ElementType} [props.element="div"] - Container element type.
+ * @param {React.Ref<HTMLDivElement>} [props.ref] - Ref to the container element.
+ * @param {React.ReactNode} [props.children] - Breadcrumb items.
+ * @param {string|React.ReactNode} [props.separator="/"] - Separator between items.
+ * @param {"primary"|"secondary"|"success"|"danger"|"warning"|"gray"|"white"} [props.accentColor="primary"] - Accent color.
+ * @param {Any color from the library} [props.textColor="font"] - Text color.
+ * @param {any} [props.rest] - Additional props for the container.
+ * @returns {JSX.Element} Breadcrumbs component.
  *
  * @example
  * <Breadcrumbs separator=">">
@@ -2016,17 +2030,6 @@ declare const ListGroupItem: FC$1<ILibListGroupItem>;
  *   <Text>Current Page</Text>
  * </Breadcrumbs>
  *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the breadcrumbs container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the breadcrumbs container element.
- * @prop {React.ReactNode} [props.children] - Navigation items to display in the breadcrumb trail.
- * @prop {string | React.ReactNode} [props.separator="/"] - Separator to display between breadcrumb items.
- * @prop {any} [props.rest] - Additional props spread to the container element.
- *
- * @returns {JSX.Element} The rendered Breadcrumbs component.
- *
  * @see https://doc-julseb-lib-react.vercel.app/components/breadcrumbs
  */
 declare const Breadcrumbs: FC$1<ILibBreadcrumbs>;

package/dist/index.js

@@ -66717,6 +66717,8 @@ var Breadcrumbs = ({
   ref,
   children,
   separator = "/",
+  accentColor = "primary",
+  textColor = "font",
   ...rest
 }) => {
   const Element = element;
@@ -66727,6 +66729,8 @@ var Breadcrumbs = ({
       ref,
       className: clsx(
         "flex flex-wrap items-center gap-2",
+        genLinkColor[accentColor],
+        genTextAllColor[textColor],
         "breadcrumbs",
         className
       ),
@@ -66828,7 +66832,7 @@ var AccordionContent = ({
       className: clsx(
         "overflow-hidden transition-all duration-200 ease",
         "py-0 max-h-0 opacity-0",
-        variant === "rounded" && "px-2",
+        variant === "rounded" && "px-2 bg-background",
         isOpen && "open py-2 max-h-auto opacity-100",
         "accordion-content",
         className
@@ -66998,12 +67002,15 @@ import "react";
 import { BiX as BiX3 } from "react-icons/bi";
 
 // src/lib/components/Toast/utils.ts
-var genToastColors = {
-  success: "border-success-500 bg-success-50",
-  error: "border-danger-500 bg-danger-50",
-  warning: "border-warning-500 bg-warning-50",
-  info: "border-primary-500 bg-primary-50",
-  loading: "border-gray-500 bg-gray-50"
+var genToastColors = (theme) => {
+  const colors = {
+    success: theme === "dark" ? "border-success-500 bg-success-950" : "border-success-500 bg-success-50",
+    error: theme === "dark" ? "border-danger-500 bg-danger-950" : "border-danger-500 bg-danger-50",
+    warning: theme === "dark" ? "border-warning-500 bg-warning-950" : "border-warning-500 bg-warning-50",
+    info: theme === "dark" ? "border-primary-500 bg-primary-950" : "border-primary-500 bg-primary-50",
+    loading: theme === "dark" ? "border-gray-500 bg-gray-950" : "border-gray-500 bg-gray-50"
+  };
+  return colors;
 };
 
 // src/lib/components/Toast/Toast.tsx
@@ -67022,13 +67029,14 @@ var Toast = ({
   ...rest
 }) => {
   const Element = element;
+  const { theme } = useLibTheme();
   return /* @__PURE__ */ jsxs278(
     Element,
     {
       ref,
       className: clsx(
-        "relative p-3 border rounded-lg w-full max-w-[400px] overflow-hidden text-black",
-        genToastColors[status],
+        "relative p-3 border rounded-lg w-full max-w-[400px] overflow-hidden text-font",
+        genToastColors(theme)[status],
         "toast",
         className
       ),
@@ -67081,6 +67089,13 @@ var ToastContainer = ({
 // src/lib/components/Toast/ToastFn.tsx
 import { toast as toastFn } from "react-toastify";
 import { jsx as jsx334 } from "react/jsx-runtime";
+var COMMON_STYLES = {
+  padding: 0,
+  height: "unset",
+  minHeight: "unset",
+  overflow: "hidden",
+  borderRadius: "var(--radius-lg)"
+};
 var toast = {
   success: (title, options) => toastFn.success(
     ({ closeToast }) => /* @__PURE__ */ jsx334(
@@ -67097,12 +67112,7 @@ var toast = {
       ...options,
       icon: false,
       closeButton: false,
-      style: {
-        padding: 0,
-        height: "unset",
-        minHeight: "unset",
-        overflow: "hidden"
-      },
+      style: COMMON_STYLES,
       autoClose: options?.duration,
       className: "!relative !overflow-hidden",
       progressClassName: "!bg-success-500 absolute !left-0 !bottom-0"
@@ -67123,12 +67133,7 @@ var toast = {
       ...options,
       icon: false,
       closeButton: false,
-      style: {
-        padding: 0,
-        height: "unset",
-        minHeight: "unset",
-        overflow: "hidden"
-      },
+      style: COMMON_STYLES,
       hideProgressBar: false,
       autoClose: options?.duration,
       className: "!relative !overflow-hidden",
@@ -67150,12 +67155,7 @@ var toast = {
       ...options,
       icon: false,
       closeButton: false,
-      style: {
-        padding: 0,
-        height: "unset",
-        minHeight: "unset",
-        overflow: "hidden"
-      },
+      style: COMMON_STYLES,
       hideProgressBar: false,
       autoClose: options?.duration,
       className: "!relative !overflow-hidden",
@@ -67177,12 +67177,7 @@ var toast = {
       ...options,
       icon: false,
       closeButton: false,
-      style: {
-        padding: 0,
-        height: "unset",
-        minHeight: "unset",
-        overflow: "hidden"
-      },
+      style: COMMON_STYLES,
       hideProgressBar: false,
       autoClose: options?.duration,
       className: "!relative !overflow-hidden",
@@ -67205,12 +67200,7 @@ var toast = {
       ...options,
       icon: false,
       closeButton: false,
-      style: {
-        padding: 0,
-        height: "unset",
-        minHeight: "unset",
-        overflow: "hidden"
-      },
+      style: COMMON_STYLES,
       hideProgressBar: false,
       autoClose: options?.duration,
       className: "!relative !overflow-hidden",