@dgshahr/ui-kit 0.0.1

package/dist/Alert/index.js

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as clsx } from '../clsx-ChV9xqsO.js';
+import Button from '../Button/index.js';
+import { useState } from 'react';
+import '../assets/styles.css';/* empty css                 */
+
+const alertVariantClassNames = {
+  container: {
+    warning: "bg-warning-50 border-warning-200",
+    primary: "bg-primary-50 border-primary-100",
+    error: "bg-error-50 border-error-200",
+    success: "bg-success-50 border-success-200",
+    gray: "bg-gray-50 border-gray-200"
+  },
+  icon: {
+    warning: "text-warning-700",
+    primary: "text-primary-400",
+    error: "text-error-600",
+    success: "text-success-600",
+    gray: "text-gray-600"
+  },
+  title: {
+    warning: "text-warning-800",
+    primary: "text-primary-700",
+    error: "text-error-700",
+    success: "text-success-800",
+    gray: "text-gray-800"
+  },
+  close: {
+    warning: "text-warning-800",
+    primary: "text-primary-600",
+    error: "text-error-600",
+    success: "text-success-800",
+    gray: "text-gray-800"
+  },
+  text: {
+    warning: "text-warning-800",
+    primary: "text-primary-600",
+    error: "text-error-600",
+    success: "text-success-800",
+    gray: "text-gray-700"
+  }
+};
+const alertSizeClassNames = {
+  container: {
+    large: "p-4",
+    small: "p-3"
+  },
+  icon: {
+    large: 24,
+    small: 20
+  },
+  title: {
+    large: "font-h5-bold mb-2",
+    small: "font-h6-bold mb-1"
+  },
+  close: {
+    large: 20,
+    small: 20
+  },
+  text: {
+    large: "font-p2-regular",
+    small: "font-p3-regular"
+  }
+};
+
+const DangerBoldIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M10.628 3.353a2.85 2.85 0 0 1 3.85 1.09l7.268 12.614c.16.377.23.683.25 1.001a2.76 2.76 0 0 1-.73 2.021c-.51.554-1.2.881-1.95.921H4.68c-.31-.019-.62-.09-.91-.198-1.45-.585-2.15-2.23-1.56-3.656L9.53 4.433a2.73 2.73 0 0 1 1.099-1.08m1.37 11.92c-.48 0-.88.396-.88.873 0 .474.4.872.88.872s.87-.398.87-.883a.867.867 0 0 0-.87-.862m0-6.183c-.48 0-.88.386-.88.862v2.804c0 .475.4.873.88.873s.87-.398.87-.873V9.952a.866.866 0 0 0-.87-.862"
+      }
+    )
+  }
+);
+
+const InfoCircleBoldIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12.756 15.693a.75.75 0 0 1-1.5 0v-4.299a.75.75 0 0 1 1.5 0zM11.25 8.291a.75.75 0 0 1 1.5 0c0 .414-.336.782-.75.782s-.75-.305-.75-.719zM12 2.5c-5.238 0-9.5 4.261-9.5 9.5s4.262 9.5 9.5 9.5 9.5-4.262 9.5-9.5-4.262-9.5-9.5-9.5",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+
+const CheckCircleBoldIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m15.993 10.222-4.618 4.618a.746.746 0 0 1-1.061 0l-2.309-2.309a.75.75 0 0 1 1.06-1.061l1.78 1.779 4.087-4.088a.75.75 0 1 1 1.061 1.061M12 2.5c-5.238 0-9.5 4.262-9.5 9.5s4.262 9.5 9.5 9.5 9.5-4.261 9.5-9.5-4.262-9.5-9.5-9.5",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+
+const CloseRemoveIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06l5.47 5.47-5.47 5.47a.75.75 0 1 0 1.06 1.06l5.47-5.47 5.47 5.47a.75.75 0 1 0 1.06-1.06l-5.47-5.47 5.47-5.47a.75.75 0 0 0-1.06-1.06l-5.47 5.47z"
+      }
+    )
+  }
+);
+
+function getAlertIcon(variant, size) {
+  let IconComponent = InfoCircleBoldIcon;
+  if (variant === "error") IconComponent = DangerBoldIcon;
+  else if (variant === "success") IconComponent = CheckCircleBoldIcon;
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      className: clsx("shrink-0 my-[2px]", alertVariantClassNames.icon[variant]),
+      width: alertSizeClassNames.icon[size],
+      height: alertSizeClassNames.icon[size]
+    }
+  );
+}
+const Alert = (props) => {
+  const {
+    variant = "primary",
+    size = "small",
+    title,
+    text,
+    primaryButton,
+    outlineButton,
+    closable,
+    className
+  } = props;
+  const [show, setShow] = useState(true);
+  if (show)
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "w-full flex gap-x-3 rounded-xl border border-solid",
+          alertVariantClassNames.container[variant],
+          alertSizeClassNames.container[size],
+          className
+        ),
+        children: [
+          getAlertIcon(variant, size),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
+            Boolean(title) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  alertVariantClassNames.title[variant],
+                  alertSizeClassNames.title[size]
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: clsx(alertVariantClassNames.text[variant], alertSizeClassNames.text[size]), children: text }),
+            (Boolean(primaryButton?.text) || Boolean(outlineButton?.text)) && /* @__PURE__ */ jsxs("div", { className: clsx("flex gap-x-2 items-center", size === "large" ? "mt-4" : "mt-3"), children: [
+              Boolean(primaryButton?.text) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  color: variant,
+                  size: "small",
+                  ...primaryButton,
+                  children: primaryButton?.text
+                }
+              ),
+              Boolean(outlineButton?.text) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  color: variant,
+                  size: "small",
+                  ...outlineButton,
+                  children: outlineButton?.text
+                }
+              )
+            ] })
+          ] }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "shrink-0 my-[2px] h-fit",
+              onClick: () => setShow(false),
+              children: /* @__PURE__ */ jsx(
+                CloseRemoveIcon,
+                {
+                  className: clsx(alertVariantClassNames.close[variant]),
+                  width: alertSizeClassNames.close[size],
+                  height: alertSizeClassNames.close[size]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  return null;
+};
+
+export { Alert as default };

package/dist/Alert/variants.d.ts

@@ -0,0 +1,14 @@
+import { AlertProps } from '.';
+type AlertVariantRecords = Record<Required<AlertProps>['variant'], string>;
+type AlertSizeRecords = Record<Required<AlertProps>['size'], string | number>;
+interface SectionRecords<T extends AlertVariantRecords | AlertSizeRecords> {
+    container: T;
+    icon: T;
+    title: T;
+    close: T;
+    text: T;
+}
+export declare const alertVariantClassNames: SectionRecords<AlertVariantRecords>;
+export declare const alertSizeClassNames: SectionRecords<AlertSizeRecords>;
+export {};
+//# sourceMappingURL=variants.d.ts.map

package/dist/Alert/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/components/Alert/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,KAAK,mBAAmB,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAC3E,KAAK,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE9E,UAAU,cAAc,CAAC,CAAC,SAAS,mBAAmB,GAAG,gBAAgB;IACvE,SAAS,EAAE,CAAC,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,CAAC,CAAC;CACT;AAED,eAAO,MAAM,sBAAsB,EAAE,cAAc,CAAC,mBAAmB,CAoCtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,cAAc,CAAC,gBAAgB,CAqBhE,CAAC"}

package/dist/ArrowLeft2-BURhvXT2.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ArrowLeft2Icon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M16.28 4.47a.75.75 0 0 1 .073.976l-.073.084L9.811 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073-7-7a.75.75 0 0 1-.073-.976l.073-.084 7-7a.75.75 0 0 1 1.06 0"
+      }
+    )
+  }
+);
+
+export { ArrowLeft2Icon as A };

package/dist/ArrowLeft2-iZ0Au6Fn.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const ArrowLeft2Icon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M16.28 4.47a.75.75 0 0 1 .073.976l-.073.084L9.811 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073-7-7a.75.75 0 0 1-.073-.976l.073-.084 7-7a.75.75 0 0 1 1.06 0"
+      }
+    )
+  }
+);
+
+exports.ArrowLeft2Icon = ArrowLeft2Icon;

package/dist/ArrowRight2-DCxJPvNC.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ArrowRight2Icon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "m8.5 5 7 7-7 7"
+      }
+    )
+  }
+);
+
+export { ArrowRight2Icon as A };

package/dist/ArrowRight2-DTuru_sP.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const ArrowRight2Icon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "m8.5 5 7 7-7 7"
+      }
+    )
+  }
+);
+
+exports.ArrowRight2Icon = ArrowRight2Icon;

package/dist/Badge/index.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+require('../assets/styles.css');const jsxRuntime = require('react/jsx-runtime');
+;/* empty css                   */
+
+function styleBadge(options) {
+  const defaultClassName = "inline-flex items-center justify-center rounded-[20px]";
+  const typeClassName = {
+    twoTone: {
+      primary: "bg-primary-50 text-primary-600",
+      secondary: "bg-secondary-100 text-secondary-700",
+      gray: "bg-gray-100 text-gray-600",
+      success: "bg-success-50 text-success-800",
+      error: "bg-error-50 text-error-600",
+      warning: "bg-warning-50 text-warning-700"
+    },
+    solid: {
+      primary: "bg-primary-500 text-white",
+      secondary: "bg-secondary-600 text-white",
+      gray: "bg-gray-600 text-white",
+      success: "bg-success-600 text-white",
+      error: "bg-error-500 text-white",
+      warning: "bg-warning-500 text-black"
+    }
+  };
+  const textSizeClassName = {
+    small: "font-oveline-demibold py-1 px-2 gap-[2px]",
+    medium: "font-caption-demibold py-1 px-[10px] gap-1",
+    large: "font-button-small py-2 px-4 gap-[6px]"
+  };
+  const numberSizeClassName = {
+    small: "font-caption-demibold py-[2px] px-[6px] min-w-5",
+    medium: "font-p3-medium px-[6px] min-w-6",
+    large: "font-h5-bold py-[2px] px-2 min-w-8"
+  };
+  return [
+    defaultClassName,
+    typeClassName[options.type][options.color],
+    options.valueType === "text" ? textSizeClassName[options.size] : numberSizeClassName[options.size],
+    options.className.length > 0 ? options.className : ""
+  ].slice().join(" ");
+}
+function getIconSize(badgSize) {
+  if (badgSize === "small") return "w-3 h-3";
+  if (badgSize === "medium") return "w-[14px] h-[14px]";
+  return "w-4 h-4";
+}
+const Badge = (props) => {
+  const {
+    type = "solid",
+    color = "primary",
+    size = "medium",
+    valueType = "text",
+    value,
+    width,
+    className = ""
+  } = props;
+  const icon = props.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styleBadge({ type, color, size, valueType, className }),
+      style: { width: width ?? "auto" },
+      children: [
+        icon && valueType === "text" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: getIconSize(size), children: icon }),
+        value
+      ]
+    }
+  );
+};
+
+module.exports = Badge;

package/dist/Badge/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface BadgePropsBase {
+    type?: 'twoTone' | 'solid';
+    color?: 'primary' | 'secondary' | 'gray' | 'success' | 'error' | 'warning';
+    size?: 'small' | 'medium' | 'large';
+    valueType?: 'text' | 'number';
+    value: string | number;
+    width?: string | number;
+    className?: string;
+}
+interface BadgePropsWithIcon extends BadgePropsBase {
+    valueType?: 'text';
+    icon?: ReactNode;
+}
+interface BadgePropsWithoutIcon extends Omit<BadgePropsBase, 'icon'> {
+    valueType: 'number';
+}
+type BadgeProps = BadgePropsWithIcon | BadgePropsWithoutIcon;
+declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;
+//# sourceMappingURL=index.d.ts.map

package/dist/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAE1B,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3E,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAClE,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,KAAK,UAAU,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAyD7D,QAAA,MAAM,KAAK,UAAW,UAAU,4CAsB/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/Badge/index.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../assets/styles.css';/* empty css                 */
+
+function styleBadge(options) {
+  const defaultClassName = "inline-flex items-center justify-center rounded-[20px]";
+  const typeClassName = {
+    twoTone: {
+      primary: "bg-primary-50 text-primary-600",
+      secondary: "bg-secondary-100 text-secondary-700",
+      gray: "bg-gray-100 text-gray-600",
+      success: "bg-success-50 text-success-800",
+      error: "bg-error-50 text-error-600",
+      warning: "bg-warning-50 text-warning-700"
+    },
+    solid: {
+      primary: "bg-primary-500 text-white",
+      secondary: "bg-secondary-600 text-white",
+      gray: "bg-gray-600 text-white",
+      success: "bg-success-600 text-white",
+      error: "bg-error-500 text-white",
+      warning: "bg-warning-500 text-black"
+    }
+  };
+  const textSizeClassName = {
+    small: "font-oveline-demibold py-1 px-2 gap-[2px]",
+    medium: "font-caption-demibold py-1 px-[10px] gap-1",
+    large: "font-button-small py-2 px-4 gap-[6px]"
+  };
+  const numberSizeClassName = {
+    small: "font-caption-demibold py-[2px] px-[6px] min-w-5",
+    medium: "font-p3-medium px-[6px] min-w-6",
+    large: "font-h5-bold py-[2px] px-2 min-w-8"
+  };
+  return [
+    defaultClassName,
+    typeClassName[options.type][options.color],
+    options.valueType === "text" ? textSizeClassName[options.size] : numberSizeClassName[options.size],
+    options.className.length > 0 ? options.className : ""
+  ].slice().join(" ");
+}
+function getIconSize(badgSize) {
+  if (badgSize === "small") return "w-3 h-3";
+  if (badgSize === "medium") return "w-[14px] h-[14px]";
+  return "w-4 h-4";
+}
+const Badge = (props) => {
+  const {
+    type = "solid",
+    color = "primary",
+    size = "medium",
+    valueType = "text",
+    value,
+    width,
+    className = ""
+  } = props;
+  const icon = props.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styleBadge({ type, color, size, valueType, className }),
+      style: { width: width ?? "auto" },
+      children: [
+        icon && valueType === "text" && /* @__PURE__ */ jsx("span", { className: getIconSize(size), children: icon }),
+        value
+      ]
+    }
+  );
+};
+
+export { Badge as default };

package/dist/Breadcrumb/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+require('../assets/styles.css');const jsxRuntime = require('react/jsx-runtime');
+const ArrowLeft2 = require('../ArrowLeft2-iZ0Au6Fn.cjs');
+const clsx = require('../clsx-BtxeOLZW.cjs');
+;/* empty css                   */
+
+const Breadcrumb = (props) => {
+  const { items, pageTitle, className } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("bg-gray-100 overflow-x-hidden w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1 w-full py-3 container", children: [
+    items.map((breadcrumbItem) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: breadcrumbItem.link,
+        className: "transition flex items-center gap-x-1 text-gray-500 hover:text-primary-500",
+        children: [
+          breadcrumbItem.icon && breadcrumbItem.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-caption-demibold", children: breadcrumbItem.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ArrowLeft2.ArrowLeft2Icon,
+            {
+              width: 16,
+              height: 16
+            }
+          )
+        ]
+      },
+      breadcrumbItem.link
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 font-caption-regular", children: pageTitle })
+  ] }) });
+};
+
+module.exports = Breadcrumb;

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface BreadcrumbProps {
+    items: {
+        link: string;
+        title: string;
+        icon?: ReactNode;
+    }[];
+    pageTitle: string;
+    className?: string;
+}
+declare const Breadcrumb: (props: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;
+//# sourceMappingURL=index.d.ts.map

package/dist/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAe;IACvB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,UAAW,eAAe,4CAwBzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Breadcrumb/index.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { A as ArrowLeft2Icon } from '../ArrowLeft2-BURhvXT2.js';
+import { c as clsx } from '../clsx-ChV9xqsO.js';
+import '../assets/styles.css';/* empty css                 */
+
+const Breadcrumb = (props) => {
+  const { items, pageTitle, className } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx("bg-gray-100 overflow-x-hidden w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 w-full py-3 container", children: [
+    items.map((breadcrumbItem) => /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: breadcrumbItem.link,
+        className: "transition flex items-center gap-x-1 text-gray-500 hover:text-primary-500",
+        children: [
+          breadcrumbItem.icon && breadcrumbItem.icon,
+          /* @__PURE__ */ jsx("div", { className: "font-caption-demibold", children: breadcrumbItem.title }),
+          /* @__PURE__ */ jsx(
+            ArrowLeft2Icon,
+            {
+              width: 16,
+              height: 16
+            }
+          )
+        ]
+      },
+      breadcrumbItem.link
+    )),
+    /* @__PURE__ */ jsx("div", { className: "text-gray-500 font-caption-regular", children: pageTitle })
+  ] }) });
+};
+
+export { Breadcrumb as default };