@dgshahr/ui-kit 0.0.1

package/dist/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+interface AccordionGroupProps {
+    defaultActiveKey?: string;
+    className?: string;
+}
+declare const AccordionGroup: FC<PropsWithChildren<AccordionGroupProps>>;
+export default AccordionGroup;
+//# sourceMappingURL=AccordionGroup.d.ts.map

package/dist/Accordion/AccordionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/AccordionGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAgB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Accordion/AccordionItem.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+interface AccordionItemProps {
+    title: string | ReactNode;
+    accordionKey?: string;
+    className?: string;
+    contentClassName?: string;
+}
+declare const AccordionItem: FC<PropsWithChildren<AccordionItemProps>>;
+export default AccordionItem;
+//# sourceMappingURL=AccordionItem.d.ts.map

package/dist/Accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA6C5D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Accordion/context.d.ts

@@ -0,0 +1,8 @@
+interface IAccordionContext {
+    activeKey: string | null;
+    setActiveKey: (key: IAccordionContext['activeKey']) => void;
+}
+export declare const accordionContext: import('react').Context<IAccordionContext>;
+export declare const useAccordionData: () => IAccordionContext;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/Accordion/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/context.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,gBAAgB,4CAG3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,yBAAqC,CAAC"}

package/dist/Accordion/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../assets/styles.css');;/* empty css                   */
+const AccordionItem = require('../AccordionItem-BOXOB5GK.cjs');
+
+
+
+exports.AccordionGroup = AccordionItem.AccordionGroup;
+exports.AccordionItem = AccordionItem.AccordionItem;

package/dist/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AccordionGroup } from './AccordionGroup';
+export { default as AccordionItem } from './AccordionItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/Accordion/index.js

@@ -0,0 +1,2 @@
+import '../assets/styles.css';/* empty css                 */
+export { A as AccordionGroup, a as AccordionItem } from '../AccordionItem-BBbE__nk.js';

package/dist/AccordionItem-BBbE__nk.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useId } from 'react';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+import Divider from './Divider/index.js';
+
+const accordionContext = createContext({
+  activeKey: null,
+  setActiveKey: () => {
+  }
+});
+const useAccordionData = () => useContext(accordionContext);
+
+const AccordionGroup = (props) => {
+  const { defaultActiveKey = null, className, children } = props;
+  const [activeKey, setActiveKey] = useState(defaultActiveKey);
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex flex-col", className), children: /* @__PURE__ */ jsx(
+    accordionContext.Provider,
+    {
+      value: {
+        activeKey,
+        setActiveKey
+      },
+      children
+    }
+  ) });
+};
+
+const ArrowDown2Icon = (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: "M4.47 7.97a.75.75 0 0 1 .976-.073l.084.073L12 14.439l6.47-6.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084-7 7a.75.75 0 0 1-.976.073l-.084-.073-7-7a.75.75 0 0 1 0-1.06"
+      }
+    )
+  }
+);
+
+const AccordionItem = (props) => {
+  const { children, title, accordionKey, className, contentClassName } = props;
+  const { activeKey, setActiveKey } = useAccordionData();
+  const reactUseId = useId();
+  const accordionItemKey = accordionKey ?? reactUseId;
+  const isItemActive = accordionItemKey === activeKey;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("bg-white px-4 pt-4", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: clsx(
+          "flex justify-between items-center w-full",
+          isItemActive ? "text-primary-500" : "text-gray-600"
+        ),
+        onClick: () => {
+          if (isItemActive) setActiveKey(null);
+          else setActiveKey(accordionItemKey);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: isItemActive ? "font-h5-bold" : "font-p1-medium", children: title }),
+          /* @__PURE__ */ jsx(
+            ArrowDown2Icon,
+            {
+              className: clsx(
+                "transition duration-300 ease-in-out shrink-0 w-auto h-auto",
+                isItemActive && "rotate-180"
+              ),
+              width: 20,
+              height: 20
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "grid font-p1-regular text-gray-600 overflow-hidden transition-all duration-300 ease-in-out",
+          isItemActive ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0",
+          contentClassName
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Divider,
+      {
+        type: "horizontal",
+        color: "white",
+        className: "mt-4"
+      }
+    )
+  ] });
+};
+
+export { AccordionGroup as A, AccordionItem as a };

package/dist/AccordionItem-BOXOB5GK.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const clsx = require('./clsx-BtxeOLZW.cjs');
+const Divider = require('./Divider/index.cjs');
+
+const accordionContext = react.createContext({
+  activeKey: null,
+  setActiveKey: () => {
+  }
+});
+const useAccordionData = () => react.useContext(accordionContext);
+
+const AccordionGroup = (props) => {
+  const { defaultActiveKey = null, className, children } = props;
+  const [activeKey, setActiveKey] = react.useState(defaultActiveKey);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex flex-col", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    accordionContext.Provider,
+    {
+      value: {
+        activeKey,
+        setActiveKey
+      },
+      children
+    }
+  ) });
+};
+
+const ArrowDown2Icon = (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: "M4.47 7.97a.75.75 0 0 1 .976-.073l.084.073L12 14.439l6.47-6.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084-7 7a.75.75 0 0 1-.976.073l-.084-.073-7-7a.75.75 0 0 1 0-1.06"
+      }
+    )
+  }
+);
+
+const AccordionItem = (props) => {
+  const { children, title, accordionKey, className, contentClassName } = props;
+  const { activeKey, setActiveKey } = useAccordionData();
+  const reactUseId = react.useId();
+  const accordionItemKey = accordionKey ?? reactUseId;
+  const isItemActive = accordionItemKey === activeKey;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("bg-white px-4 pt-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: clsx.clsx(
+          "flex justify-between items-center w-full",
+          isItemActive ? "text-primary-500" : "text-gray-600"
+        ),
+        onClick: () => {
+          if (isItemActive) setActiveKey(null);
+          else setActiveKey(accordionItemKey);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: isItemActive ? "font-h5-bold" : "font-p1-medium", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ArrowDown2Icon,
+            {
+              className: clsx.clsx(
+                "transition duration-300 ease-in-out shrink-0 w-auto h-auto",
+                isItemActive && "rotate-180"
+              ),
+              width: 20,
+              height: 20
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(
+          "grid font-p1-regular text-gray-600 overflow-hidden transition-all duration-300 ease-in-out",
+          isItemActive ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0",
+          contentClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Divider,
+      {
+        type: "horizontal",
+        color: "white",
+        className: "mt-4"
+      }
+    )
+  ] });
+};
+
+exports.AccordionGroup = AccordionGroup;
+exports.AccordionItem = AccordionItem;

package/dist/Alert/index.cjs

@@ -0,0 +1,242 @@
+'use strict';
+
+require('../assets/styles.css');const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('../clsx-BtxeOLZW.cjs');
+const Button = require('../Button/index.cjs');
+const react = require('react');
+;/* 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__ */ 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: "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__ */ 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",
+        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__ */ 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",
+        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__ */ 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: "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__ */ jsxRuntime.jsx(
+    IconComponent,
+    {
+      className: clsx.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] = react.useState(true);
+  if (show)
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          "w-full flex gap-x-3 rounded-xl border border-solid",
+          alertVariantClassNames.container[variant],
+          alertSizeClassNames.container[size],
+          className
+        ),
+        children: [
+          getAlertIcon(variant, size),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
+            Boolean(title) && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: clsx.clsx(
+                  alertVariantClassNames.title[variant],
+                  alertSizeClassNames.title[size]
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx(alertVariantClassNames.text[variant], alertSizeClassNames.text[size]), children: text }),
+            (Boolean(primaryButton?.text) || Boolean(outlineButton?.text)) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("flex gap-x-2 items-center", size === "large" ? "mt-4" : "mt-3"), children: [
+              Boolean(primaryButton?.text) && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "primary",
+                  color: variant,
+                  size: "small",
+                  ...primaryButton,
+                  children: primaryButton?.text
+                }
+              ),
+              Boolean(outlineButton?.text) && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  color: variant,
+                  size: "small",
+                  ...outlineButton,
+                  children: outlineButton?.text
+                }
+              )
+            ] })
+          ] }),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "shrink-0 my-[2px] h-fit",
+              onClick: () => setShow(false),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                CloseRemoveIcon,
+                {
+                  className: clsx.clsx(alertVariantClassNames.close[variant]),
+                  width: alertSizeClassNames.close[size],
+                  height: alertSizeClassNames.close[size]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  return null;
+};
+
+module.exports = Alert;

package/dist/Alert/index.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from '../Button';
+interface AlertButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'size' | 'children'> {
+    text: string;
+}
+export interface AlertProps {
+    variant?: 'warning' | 'primary' | 'error' | 'success' | 'gray';
+    size?: 'large' | 'small';
+    title?: string;
+    text: string;
+    primaryButton?: AlertButtonProps;
+    outlineButton?: AlertButtonProps;
+    closable?: boolean;
+    className?: string;
+}
+declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Alert;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Alert/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAQrD,OAAO,kBAAkB,CAAC;AAE1B,UAAU,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC7F,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,QAAA,MAAM,KAAK,UAAW,UAAU,mDA+E/B,CAAC;AAEF,eAAe,KAAK,CAAC"}