trepur_components 2.3.8 → 2.3.10

package/lib/components/Stars/Star.stories.d.ts

@@ -0,0 +1,14 @@
+import { Stars } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: any;
+    args: {
+        stars: number;
+        size: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Stars>;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface StarProps {
+    stars?: 1 | 2 | 3 | 4 | 5;
+    size?: SizeProp;
+}
+declare const Stars: any;
+export { Stars };

package/lib/components/Stars/index.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { Icon as i } from "../Icon/index.js";
+import { faStar as n } from "@fortawesome/fontawesome-free-solid";
+import f from "clsx";
+const o = c(({ className: s, stars: a = 0, size: p }, e) => {
+  const m = () => [...Array(5)].map((d, r) => /* @__PURE__ */ t(
+    i,
+    {
+      className: r < a ? "text-star" : "",
+      icon: n,
+      size: "2x"
+    },
+    `checked_star_${r}`
+  ));
+  return /* @__PURE__ */ t("div", { ref: e, className: f("flex", s), children: m() });
+});
+o.displayName = "Stars";
+const _ = Object.assign(o);
+export {
+  _ as Stars
+};

package/lib/components/Testimonial/Testimonial.stories.d.ts

@@ -3,168 +3,17 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, text, imageProps, companyName, position, date, positionStartDate, positionEndDate, authorsName, authorsPosition, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        text: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        companyName: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        positionStartDate: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        positionEndDate: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        position: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        date: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        authorsName: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        authorsPosition: {
-            description: string;
-            control: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        imageProps: {
-            type: {
-                name: string;
-                value: string;
-            };
-            description: 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;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Section: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Position: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Date: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        AuthorDetails: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     };
     args: {
-        imageProps: {
-            src: string;
-            height: number;
-            width: number;
-            roundedFull: boolean;
-            centerAligned: boolean;
-        };
-        authorsName: string;
-        authorsPosition: string;
-        position: string;
-        positionEndDate: string;
-        positionStartDate: string;
-        date: string;
-        companyName: string;
-        text: string;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,16 +1,13 @@
-import { Props as imageProps } from '../Image';
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id?: string;
-    className?: string;
-    text?: string;
-    imageProps?: imageProps;
-    companyName?: string;
-    position?: string;
-    date?: string;
-    positionStartDate?: string;
-    positionEndDate?: string;
-    authorsName?: string;
-    authorsPosition?: string;
-}
-export declare const Testimonial: ({ id, className, text, imageProps, companyName, position, date, positionStartDate, positionEndDate, authorsName, authorsPosition, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Testimonial: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Image: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+    Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Section: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Position: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Date: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    AuthorDetails: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Testimonial };

package/lib/components/Testimonial/index.js

@@ -1,42 +1,42 @@
-import { jsx as c, jsxs as e } from "react/jsx-runtime";
-import { Container as N } from "../Container/index.js";
-import { Image as u } from "../Image/index.js";
-import v from "classnames";
-const C = ({
-  id: l,
-  className: n,
-  text: s,
-  imageProps: t,
-  companyName: r,
-  position: d,
-  date: m,
-  positionStartDate: i,
-  positionEndDate: a,
-  authorsName: h,
-  authorsPosition: o
-}) => {
-  const x = v(n, "text-center"), f = (t == null ? void 0 : t.src) !== void 0 ? t == null ? void 0 : t.src : "";
-  return /* @__PURE__ */ c("div", { id: l, className: x, children: /* @__PURE__ */ e(N, { withPadding: !0, children: [
-    /* @__PURE__ */ c("div", { className: "mx-auto", children: /* @__PURE__ */ c(u, { src: f, ...t }) }),
-    /* @__PURE__ */ e("div", { children: [
-      /* @__PURE__ */ c("h3", { className: "text-lg font-medium", children: r }),
-      /* @__PURE__ */ c("p", { className: "pt-2 text-md font-regular", children: d }),
-      /* @__PURE__ */ e("p", { className: "text-sm font-regular", children: [
-        i,
-        " - ",
-        a
-      ] }),
-      /* @__PURE__ */ c("p", { className: "py-4 text-md font-light", children: s }),
-      /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: [
-        h,
-        " - ",
-        o,
-        ": ",
-        m
-      ] })
-    ] })
-  ] }) });
-};
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Card as u } from "../Card/index.js";
+import { Image as x } from "../Image/index.js";
+import o from "clsx";
+const n = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(u, { ref: a, className: o("grid gap-4", s), ...t, children: e })), l = m(({ className: s, src: e, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: "mx-auto w-40 ", children: /* @__PURE__ */ i(x, { className: "rounded-full", src: e, ...t }) })), r = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("h3", { ref: a, className: "text-center text-lg font-medium", ...t, children: e })), c = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: o("text-center", s), ...t, children: e })), T = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(
+  "p",
+  {
+    ref: a,
+    className: o("text-md font-regular text-sm", s),
+    ...t,
+    children: e
+  }
+)), N = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("p", { ref: a, className: "font-regular text-sm", ...t, children: e })), d = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i("p", { className: o("text-md text-center font-light"), ...t, children: e })), p = m(({ className: s, children: e, ...t }, a) => /* @__PURE__ */ i(
+  "p",
+  {
+    ref: a,
+    className: o("text-center text-sm font-medium", s),
+    ...t,
+    children: e
+  }
+));
+n.displayName = "Testimonial";
+l.displayName = "Testimonial.Image";
+r.displayName = "Testimonial.Title";
+c.displayName = "Testimonial.Section";
+T.displayName = "Testimonial.Position";
+N.displayName = "Testimonial.Date";
+d.displayName = "Testimonial.Text";
+p.displayName = "Testimonial.AuthorDetails";
+const I = Object.assign(n, {
+  Image: l,
+  Title: r,
+  Section: c,
+  Position: T,
+  Date: N,
+  Text: d,
+  AuthorDetails: p
+});
 export {
-  C as Testimonial
+  I as Testimonial
 };

package/lib/components/TextArea/TextArea.stories.d.ts

@@ -3,81 +3,17 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, autoComplete, disabled, formId, maxLength, minLength, required, readOnly, label, name, placeholder, onChange, onBlur, onFocus, onClick, withValidation, errors, errorState, value, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        label: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        placeholder: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        bold: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        bgColour: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            options: string[];
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-            defaultValue: string;
-            control: 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;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').TextAreaContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            required?: boolean | undefined;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Box: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Validation: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     };
     args: {
-        label: string;
         placeholder: string;
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,16 +1,17 @@
-import { Colours } from '../../utils/controls';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id?: string;
-    className?: string;
+export interface TextAreaContextProps {
     autoComplete?: string;
     disabled?: boolean;
     formId?: string;
+    height?: string;
     maxLength?: number;
     minLength?: number;
+    pattern?: string;
     required?: boolean;
     readOnly?: boolean;
     label?: string;
+    type?: string;
     name?: string;
     placeholder?: string;
     withValidation?: boolean;
@@ -19,8 +20,14 @@ export interface Props {
     onFocus?: () => void;
     onClick?: () => void;
     errors?: string[];
-    errorState?: boolean;
     value?: string;
-    bgColour?: Colours;
 }
-export declare const TextArea: ({ id, className, autoComplete, disabled, formId, maxLength, minLength, required, readOnly, label, name, placeholder, onChange, onBlur, onFocus, onClick, withValidation, errors, errorState, value, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const TextArea: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & TextAreaContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        required?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Box: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Validation: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { TextArea };

package/lib/components/TextArea/index.js

@@ -1,86 +1,76 @@
-import { jsxs as o, Fragment as B, jsx as t } from "react/jsx-runtime";
-import { useRef as F } from "react";
-import a from "classnames";
-const E = ({
-  id: l,
-  className: m,
-  autoComplete: u,
-  disabled: f,
-  formId: p,
-  maxLength: x,
-  minLength: b,
-  required: c = !1,
-  readOnly: h,
-  label: N,
-  name: w,
-  placeholder: k,
-  onChange: s,
-  onBlur: v,
-  onFocus: g,
-  onClick: $,
-  withValidation: C,
-  errors: r,
-  errorState: n = !1,
-  value: L
-}) => {
-  const d = l !== void 0 ? `-${l}` : "", j = a(
-    {
-      "border-2 border-error": r != null || n
-    },
-    "w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md"
-  ), R = a(
-    {
-      "text-error": r != null || n
-    },
-    "text-error"
-  ), y = a(
-    m,
-    "mt-4 w-full bg-white cursor-pointer"
-  ), i = F(null);
-  return /* @__PURE__ */ o(B, { children: [
-    /* @__PURE__ */ o("div", { id: l, className: y, onClick: () => {
-      var e;
-      (e = i.current) == null || e.focus();
-    }, children: [
-      /* @__PURE__ */ o("div", { className: "absolute -mt-3 ml-3 rounded-2xl bg-white px-1 text-sm font-regular", children: [
-        /* @__PURE__ */ t("p", { className: R, children: N }),
-        c && /* @__PURE__ */ t("p", { className: "font-semiBold text-error", children: " *" })
-      ] }),
-      /* @__PURE__ */ t(
-        "textarea",
-        {
-          ref: i,
-          id: `input${d}`,
-          className: j,
-          autoComplete: u,
-          disabled: f,
-          form: p,
-          maxLength: x,
-          minLength: b,
-          required: c,
-          readOnly: h,
-          name: w,
-          value: L,
-          placeholder: k,
-          onChange: (e) => {
-            s == null || s(e);
-          },
-          onBlur: v,
-          onFocus: g,
-          onClick: $
-        }
-      )
-    ] }),
-    C && /* @__PURE__ */ t("div", { id: `errors${d}`, className: "text-sm font-regular text-error", children: r == null ? void 0 : r.map((e, A) => /* @__PURE__ */ t(
-      "p",
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { createContext as b, forwardRef as n, useMemo as A, useRef as T, useContext as d } from "react";
+const i = b(null), x = n(({ children: o, errors: e, placeholder: t, ...r }, l) => {
+  const s = A(
+    () => ({
+      errors: e,
+      placeholder: t,
+      ...r
+    }),
+    [e, r]
+  );
+  return /* @__PURE__ */ a(i.Provider, { value: s, children: /* @__PURE__ */ a("div", { ref: l, children: o }) });
+}), c = n(
+  ({ children: o, ...e }, t) => {
+    const r = T(null);
+    return /* @__PURE__ */ a(
+      "div",
       {
-        className: "mt-1 border-l-4 border-error pl-3",
-        children: e
-      },
-      `error-msg-${A + 0}`
-    )) })
-  ] });
-};
+        className: "mt-4 w-full cursor-pointer bg-white",
+        onClick: () => {
+          var l;
+          return (l = r.current) == null ? void 0 : l.focus();
+        },
+        ref: t,
+        ...e,
+        children: o
+      }
+    );
+  }
+), m = n(({ children: o, required: e = !1 }, t) => /* @__PURE__ */ f(
+  "div",
+  {
+    ref: t,
+    className: "font-regular absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm ",
+    children: [
+      /* @__PURE__ */ a("p", { children: o }),
+      e && /* @__PURE__ */ a("p", { className: "font-semiBold text-lg text-error-default", children: " *" })
+    ]
+  }
+)), u = n(
+  ({ ...o }) => {
+    const { errors: e, placeholder: t } = d(i) || {};
+    return /* @__PURE__ */ a(
+      "textarea",
+      {
+        className: "text-ink text-md w-full cursor-pointer rounded-md border border-black bg-white py-2 pl-4",
+        placeholder: t
+      }
+    );
+  }
+), p = n(({ children: o, ...e }, t) => {
+  const { errors: r } = d(i) || {};
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: "font-regular gap-y-2 text-sm text-error-default",
+      ...e,
+      children: r == null ? void 0 : r.map((l, s) => /* @__PURE__ */ a("p", { children: l }, `error-msg-${s + 1}`))
+    }
+  );
+});
+x.displayName = "TextArea";
+c.displayName = "TextArea.Item";
+m.displayName = "TextArea.Label";
+u.displayName = "TextArea.Box";
+p.displayName = "TextArea.Validation";
+const g = Object.assign(x, {
+  Item: c,
+  Label: m,
+  Box: u,
+  Validation: p
+});
 export {
-  E as TextArea
+  g as TextArea
 };