trepur_components 2.3.8 → 2.3.10

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

@@ -3,154 +3,9 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, src, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned, bordered, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        image: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        altText: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        title: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        rounded: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        roundedFull: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        height: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        width: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        overlayText: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        centerAligned: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    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: any;
     args: {
         src: string;
-        height: number;
-        width: number;
-        overlayText: string;
     };
 };
 export default meta;

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

@@ -1,15 +1,5 @@
-export interface Props {
-    id?: string;
-    className?: string;
+export interface ImageProps {
     src: string;
-    altText?: string;
-    title?: string;
-    rounded?: boolean;
-    roundedFull?: boolean;
-    height?: number;
-    width?: number;
-    overlayText?: string;
-    centerAligned?: boolean;
-    bordered?: boolean;
 }
-export declare const Image: ({ id, className, src, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned, bordered, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Image: any;
+export { Image };

package/lib/components/Image/index.js

@@ -1,99 +1,17 @@
-import { jsxs as u, Fragment as w, jsx as l } from "react/jsx-runtime";
-import { useState as z } from "react";
-import o from "classnames";
-const E = ({
-  id: p,
-  className: f,
-  src: d,
-  altText: v,
-  title: x,
-  rounded: y = !1,
-  roundedFull: L = !1,
-  height: s = 8,
-  width: a = 8,
-  overlayText: e,
-  centerAligned: N = !1,
-  bordered: b = !1
-}) => {
-  const [c, t] = z(!1), m = o({
-    "opacity-80": c,
-    "opacity-0": !c
-  }), r = o({
-    "w-6": a === 1,
-    "w-10": a === 2,
-    "w-14": a === 3,
-    "w-16": a === 4,
-    "w-20": a === 5,
-    "w-24": a === 6,
-    "w-28": a === 7,
-    "w-32": a === 8,
-    "w-36": a === 9,
-    "w-40": a === 10,
-    "w-44": a === 11,
-    "w-full": a === void 0 || ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(a)
-  }), n = o({
-    "h-6": s === 1,
-    "h-10": s === 2,
-    "h-14": s === 3,
-    "h-16": s === 4,
-    "h-20": s === 5,
-    "h-24": s === 6,
-    "h-28": s === 7,
-    "h-32": s === 8,
-    "h-36": s === 9,
-    "h-40": s === 10,
-    "h-44": s === 11,
-    "h-full": s === void 0 || ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(s)
-  }), i = o(
-    {
-      "rounded-2xl": y,
-      "rounded-full": L,
-      "mx-auto": N,
-      "border-4 border-primary": b
-    },
-    f,
-    r,
-    n
-  ), C = o(
-    r,
-    n,
-    m,
-    "absolute z-10 bg-white transition-opacity duration-700"
-  ), j = o(
-    r,
-    n,
-    m,
-    "absolute z-20 flex transition-opacity duration-700"
-  );
-  return /* @__PURE__ */ u("div", { className: i, children: [
-    e !== void 0 && /* @__PURE__ */ u(w, { children: [
-      /* @__PURE__ */ l("div", { className: C }),
-      /* @__PURE__ */ l(
-        "div",
-        {
-          className: j,
-          onMouseEnter: () => {
-            t(!0);
-          },
-          onMouseLeave: () => {
-            t(!1);
-          },
-          children: /* @__PURE__ */ l("p", { className: "m-auto text-center text-primary", children: e })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(
-      "img",
-      {
-        id: p,
-        className: i,
-        src: d,
-        alt: v ?? e,
-        title: x ?? e
-      }
-    )
-  ] });
-};
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import f from "clsx";
+const m = t(({ className: o, src: a, ...e }, r) => /* @__PURE__ */ s(
+  "img",
+  {
+    className: f("h-full w-full", o),
+    ref: r,
+    src: a,
+    ...e
+  }
+));
+m.displayName = "Image";
+const c = Object.assign(m);
 export {
-  E as Image
+  c as Image
 };

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

@@ -0,0 +1,19 @@
+import { ImageCard } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+        Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<import('../Image').ImageProps> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+        Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Subtitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+        Text: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageCard>;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+import { ImageProps } from '../Image';
+import { HTMLAttributes } from 'react';
+
+declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>> & {
+    Image: import('react').ForwardRefExoticComponent<HTMLAttributes<ImageProps> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Subtitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+};
+export { ImageCard };

package/lib/components/ImageCard/index.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Image as p } from "../Image/index.js";
+import C from "clsx";
+const d = m(({ className: a, children: e, ...r }, n) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: C(
+      "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
+      a
+    ),
+    ref: n,
+    ...r,
+    children: e
+  }
+)), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), g = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
+d.displayName = "ImageCard";
+s.displayName = "ImageCard.Image";
+i.displayName = "ImageCard.Title";
+l.displayName = "ImageCard.Subtitle";
+o.displayName = "ImageCard.Content";
+g.displayName = "ImageCard.Text";
+const f = Object.assign(d, {
+  Image: s,
+  Content: o,
+  Title: i,
+  Subtitle: l,
+  Text: g
+});
+export {
+  f as ImageCard
+};

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

@@ -3,110 +3,18 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, label, type, 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;
-            };
-        };
-        required: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        withValidation: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        errors: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        value: {
-            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('.').InputContextProps & 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;
-        errors: never[];
+        errors: string[];
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,8 +1,6 @@
-import { Colours } from '../../utils/controls';
+import { HTMLAttributes } from 'react';
 
-export interface Props {
-    id?: string;
-    className?: string;
+export interface InputContextProps {
     autoComplete?: string;
     disabled?: boolean;
     formId?: string;
@@ -22,8 +20,14 @@ export interface Props {
     onFocus?: () => void;
     onClick?: () => void;
     errors?: string[];
-    errorState?: boolean;
     value?: string;
-    bgColour?: Colours;
 }
-export declare const Input: ({ id, className, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, label, type, name, placeholder, onChange, onBlur, onFocus, onClick, withValidation, errors, errorState, value, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Input: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & InputContextProps & 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 { Input };

package/lib/components/Input/index.js

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