trepur_components 2.3.2 → 2.3.3

package/lib/archive/Breadcrumbs/index.js

@@ -0,0 +1,12 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import d from "classnames";
+const o = ({ id: l, className: m, links: a }) => {
+  const r = a != null ? Object.keys(a).length : 0, h = d(m, "flex py-2", "theme-local");
+  return /* @__PURE__ */ e("ul", { id: l, className: h, children: a == null ? void 0 : a.map((c, s) => /* @__PURE__ */ t("div", { className: "flex", children: [
+    /* @__PURE__ */ e("li", { className: "h-8", children: s + 1 >= r ? /* @__PURE__ */ e("p", { className: "px-1 py-1", children: c.name }) : /* @__PURE__ */ e("p", { className: "px-1 py-1", children: /* @__PURE__ */ e("a", { className: "text-facebook hover:underline", href: c.href, children: c.name }) }) }),
+    s + 1 < r && /* @__PURE__ */ e("li", { className: "h-8", children: /* @__PURE__ */ e("p", { className: "py-1", children: "  >  " }) })
+  ] }, `breadcrumb_${s + 1}`)) });
+};
+export {
+  o as default
+};

package/lib/archive/BreadcrumbsBordered/index.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import p from "classnames";
+import "react";
+import u from "../BreadcrumbsItem/index.js";
+const x = ({ id: c, className: s, links: e }) => {
+  const t = (e == null ? void 0 : e.length) !== void 0 ? e.length : 0, d = p(s, "flex theme-local");
+  return /* @__PURE__ */ o("ul", { id: c, className: d, children: e == null ? void 0 : e.map((m, r) => {
+    const f = r === 0 ? "mr-3" : "mx-3", n = r === 0;
+    let a = "standard";
+    return t >= 1 && r + 1 < t && (a = "link"), /* @__PURE__ */ o(
+      u,
+      {
+        className: f,
+        name: m.name,
+        link: m.link,
+        type: a,
+        firstItem: n
+      },
+      `breadcrumb_item_${r + 0}`
+    );
+  }) });
+};
+export {
+  x as default
+};

package/lib/archive/BreadcrumbsItem/index.js

@@ -0,0 +1,117 @@
+import { jsx as e, jsxs as s, Fragment as f } from "react/jsx-runtime";
+import { useState as N } from "react";
+import p from "classnames";
+const g = ({
+  id: m,
+  className: u,
+  name: t,
+  link: v,
+  href: o,
+  type: n,
+  firstItem: l
+}) => {
+  const [b, r] = N(!1), h = p(u, "item theme-local"), a = p(
+    {
+      "hover:underline": n === "link",
+      "mb-0": b
+    },
+    "bc-item relative px-4 h-8"
+  ), i = /* @__PURE__ */ e(
+    "span",
+    {
+      style: {
+        borderTop: "17px solid transparent",
+        borderBottom: "15px solid transparent",
+        borderLeft: "16px solid",
+        right: "-16px"
+      },
+      className: "absolute top-0 h-0 w-0 border-t"
+    }
+  ), x = /* @__PURE__ */ s(f, { children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        style: {
+          borderTop: "17px solid",
+          borderBottom: "18px solid transparent",
+          borderLeft: "17px solid transparent",
+          left: "-17px",
+          // '-webkit-transform': 'scaleY(-1)',
+          transform: "scaleY(-1)"
+        },
+        className: "absolute h-0 w-0 border-l-transparent bg-transparent bottom-0"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        style: {
+          borderTop: "18px solid",
+          borderBottom: "17px solid transparent",
+          borderLeft: "17px solid transparent",
+          left: "-17px"
+        },
+        className: "top-0 absolute h-0 w-0 border-l-transparent bg-transparent"
+      }
+    )
+  ] }), c = /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ s("p", { className: "pt-1 text-center", children: [
+    t,
+    i
+  ] }) }), d = /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ s("p", { className: "pt-1 text-center", children: [
+    x,
+    t,
+    i
+  ] }) });
+  return /* @__PURE__ */ e("div", { id: m, className: h, children: n === "link" ? l !== null ? /* @__PURE__ */ e(
+    "a",
+    {
+      onMouseOver: () => {
+        r(!0);
+      },
+      onMouseOut: () => {
+        r(!1);
+      },
+      href: o,
+      children: /* @__PURE__ */ e("li", { className: "list-none", children: c })
+    }
+  ) : /* @__PURE__ */ e(
+    "a",
+    {
+      onMouseOver: () => {
+        r(!0);
+      },
+      onMouseOut: () => {
+        r(!1);
+      },
+      href: o,
+      children: /* @__PURE__ */ e("li", { className: "list-none", children: d })
+    }
+  ) : l !== null ? /* @__PURE__ */ e(
+    "li",
+    {
+      className: "list-none",
+      onMouseOver: () => {
+        r(!0);
+      },
+      onMouseOut: () => {
+        r(!1);
+      },
+      children: c
+    }
+  ) : /* @__PURE__ */ e(
+    "li",
+    {
+      className: "list-none",
+      onMouseOver: () => {
+        r(!0);
+      },
+      onMouseOut: () => {
+        r(!1);
+      },
+      children: d
+    }
+  ) });
+};
+export {
+  g as default
+};

package/lib/components/Accordion/index.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "classnames";
+const t = ({
+  id: a,
+  className: c,
+  items: r
+}) => /* @__PURE__ */ o("div", { id: a, className: e(c, "theme-local"), children: r == null ? void 0 : r.map((l, d) => (
+  // <Collapsible key={`collapsible_item_${i}`} {...item}>
+  //   {item.children}
+  // </Collapsible>
+  /* @__PURE__ */ o("div", {})
+)) });
+export {
+  t as default
+};

package/lib/components/AlertBar/index.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as d } from "react";
+import t from "classnames";
+const x = ({
+  id: a,
+  className: o,
+  type: s = "warning",
+  text: i,
+  // leftIconProps,
+  // rightIconProps,
+  textCenter: n = !1,
+  isDismissable: l = !1,
+  onDismissClick: f
+}) => {
+  const [e, g] = d({
+    state: "open",
+    display: !0
+  }), c = t({
+    "bg-success": s === "success",
+    "bg-warning": s === "warning",
+    "bg-error": s === "error",
+    "bg-info-light": s === "info"
+  }), p = t({
+    "opacity-100": e.state === "open",
+    "opacity-0": e.state === "closed",
+    hidden: !e.display
+  }), u = t(
+    o,
+    c,
+    p,
+    "flex py-2 text-white duration-700 theme-local w-parent transition-opactiy"
+  ), m = t(
+    {
+      "text-center": n
+      // 'pl-20': !textCenter && leftIconProps !== null,
+      // 'pl-4': !textCenter && leftIconProps === null,
+    },
+    "w-full py-3"
+  );
+  return t(
+    {
+      "hover:cursor-pointer": l
+    },
+    "absolute right-0 pr-8 pt-3"
+  ), /* @__PURE__ */ r("div", { id: a, className: u, children: /* @__PURE__ */ r("h3", { className: m, children: i }) });
+};
+export {
+  x as default
+};

package/lib/index.js

@@ -0,0 +1,12 @@
+import { default as a } from "./components/Accordion/index.js";
+import { default as t } from "./components/AlertBar/index.js";
+import { default as f } from "./archive/Breadcrumbs/index.js";
+import { default as s } from "./archive/BreadcrumbsBordered/index.js";
+import { default as l } from "./archive/BreadcrumbsItem/index.js";
+export {
+  a as Accordion,
+  t as AlertBar,
+  f as Breadcrumbs,
+  s as BreadcrumbsBordered,
+  l as BreadcrumbsItem
+};

package/lib/src/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,94 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('.').Props>;
+    argTypes: {
+        items: {
+            description: string;
+            control: {
+                type: string;
+                default: undefined;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        items: ({
+            preText: string;
+            title: string;
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+        } | {
+            preText: string;
+            title: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            subtitle?: undefined;
+        } | {
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            preText?: undefined;
+            title?: undefined;
+        } | {
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            preText?: undefined;
+            title?: undefined;
+            subtitle?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    items: any;
+}
+declare const Accordion: React.FC<Props>;
+export default Accordion;

package/lib/src/components/AlertBar/AlertBar.stories.d.ts

@@ -0,0 +1,162 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: import('.').Props) => JSX.Element;
+    argTypes: {
+        type: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        leftIconProps: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        rightIconProps: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        textCenter: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        isDismissable: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        onDismissClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        text: string;
+        leftIconProps: {
+            type: string;
+            colour: string;
+            hollow: boolean;
+        };
+        rightIconProps: {
+            type: string;
+            colour: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/AlertBar/index.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    type?: 'success' | 'warning' | 'error' | 'info';
+    text?: string;
+    textCenter?: boolean;
+    isDismissable?: boolean;
+    onDismissClick?: MouseEventHandler;
+}
+declare const AlertBar: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: Props) => JSX.Element;
+export default AlertBar;

package/lib/src/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<{}>;
+    argTypes: {
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const Avatar: React.FC;
+export default Avatar;

package/lib/src/components/index.d.ts

@@ -0,0 +1,7 @@
+import { default as BreadcrumbsItem } from '../../archive/BreadcrumbsItem';
+import { default as BreadcrumbsBordered } from '../../archive/BreadcrumbsBordered';
+import { default as Breadcrumbs } from '../../archive/Breadcrumbs';
+import { default as AlertBar } from './AlertBar';
+import { default as Accordion } from './Accordion';
+
+export { Accordion, AlertBar, Breadcrumbs, BreadcrumbsBordered, BreadcrumbsItem, };

package/lib/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/lib/src/utils/controls.d.ts

@@ -0,0 +1,36 @@
+export type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'grey' | 'gold' | 'facebook' | 'linkedin' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-linkedin' | 'interactive-instagram' | 'interactive-github' | 'success' | 'error' | 'ink' | 'transparent';
+export type SocialTypes = 'facebook' | 'instagram' | 'github' | 'linkedin';
+export declare const idAndClassName: {
+    id: {
+        description: string;
+        control: {
+            type: string;
+            default: boolean;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    className: {
+        description: string;
+        control: {
+            type: string;
+            default: boolean;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};

package/lib/src/utils/matchMedia.d.ts

@@ -0,0 +1,2 @@
+declare const MatchMedia: (query: string) => boolean;
+export default MatchMedia;

package/lib/src/utils/screens.d.ts

@@ -0,0 +1,7 @@
+export declare const Screens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/lib/styles/base.css

@@ -0,0 +1,116 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css');
+
+@tailwind base;
+@tailwind components;
+
+.theme-local {
+  --color-primary: #0036a0;
+  --color-secondary: #e2e2e2;
+  --color-tertiary: #921457;
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-error-light: #ffd9d9;
+  --color-success-light: #e7f5e7;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-error: #b11013;
+  --color-warning: #ffd35c;
+  --color-success: #69c364;
+  --color-info-light: #d8eaf5;
+  --color-linkedin: #0e76a8;
+}
+
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+.slick-track {
+  display: flex !important;
+}
+
+.slick-slide {
+  height: inherit !important;
+}
+
+.slick-slide > div {
+  height: 100%;
+  display: flex;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "private": false,
   "keywords": [
     "react",
@@ -10,12 +10,13 @@
     "ui"
   ],
   "license": "UNLICENSED",
-  "main": "dist/index.js",
+  "main": "lib/index.js",
   "module": "dist/index.js",
   "files": [
-    "dist",
-    "README.md"
+    "lib/**/*"
   ],
+  "types": "lib/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "rm -rf lib && concurrently -n \"VITE,CSS,SB\" -c \"magenta,blue,red\" \"npx vite build\" \"npm run build-css\" \"npm run storybook-css\"",
     "build-css": "tailwindcss -i ./src/styles/base.css -o ./lib/styles/base.css --minify",