trepur_components 2.4.2 → 2.4.3

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

@@ -4,9 +4,7 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & import('./').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
-        Icon: import('react').ForwardRefExoticComponent<{
-            icon: any;
-        } & import('react').RefAttributes<SVGSVGElement>>;
+        Icon: import('react').ForwardRefExoticComponent<Omit<any, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
     args: {

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

@@ -10,9 +10,7 @@ export interface ButtonProps {
     size?: 'sm' | 'md' | 'lg';
 }
 declare const Button: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
-    Icon: import('react').ForwardRefExoticComponent<{
-        icon: any;
-    } & import('react').RefAttributes<SVGSVGElement>>;
+    Icon: import('react').ForwardRefExoticComponent<Omit<any, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
 };
 export { Button };

package/lib/components/Button/index.js

@@ -8,7 +8,7 @@ const u = s(
     children: r,
     loading: t = !1,
     variant: o = "primary",
-    type: m = "button",
+    type: i = "button",
     disabled: b,
     size: n = "md",
     ...g
@@ -18,20 +18,20 @@ const u = s(
       ref: p,
       "aria-disabled": b,
       disabled: t || b,
-      type: m,
+      type: i,
       className: c(
         "flex items-center gap-3 rounded border text-center font-thin tracking-wider",
         {
           "duration-200": !t,
           "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": o === "primary" && !t && !b,
           "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": o === "secondary" && !t,
-          "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": o === "ghost" && !t,
+          "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-transparent": o === "ghost" && !t,
           "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": o === "bordered" && !t,
           "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": o === "basic" && !t,
           "w-40 animate-pulse border-loading bg-loading": t,
-          "px-12 py-3 text-base font-normal leading-4": n === "sm",
-          "px-12 py-3 text-lg font-normal leading-8": n === "md",
-          "px-12 py-4 text-xl font-normal leading-8": n === "lg"
+          "px-2 py-2 text-base font-normal leading-4": n === "sm",
+          "px-4 py-3 text-lg font-normal leading-8": n === "md",
+          "px-8 py-4 text-xl font-normal leading-8": n === "lg"
         },
         e
       ),
@@ -39,13 +39,24 @@ const u = s(
       children: !t && r
     }
   )
-), d = s(({ className: e, children: r, ...t }, o) => /* @__PURE__ */ a("p", { className: c("text-md", e), ref: o, ...t, children: r })), i = s(({ icon: e, ...r }, t) => /* @__PURE__ */ a(x, { size: "sm", ref: t, icon: e, ...r }));
+), m = s(({ className: e, children: r, ...t }, o) => /* @__PURE__ */ a("p", { className: c("text-md", e), ref: o, ...t, children: r })), d = s(
+  ({ icon: e, className: r, ...t }, o) => /* @__PURE__ */ a(
+    x,
+    {
+      className: c("w-4", r),
+      size: "sm",
+      ref: o,
+      icon: e,
+      ...t
+    }
+  )
+);
 u.displayName = "Button";
-i.displayName = "Button.Icon";
-d.displayName = "Button.Label";
+d.displayName = "Button.Icon";
+m.displayName = "Button.Label";
 const f = Object.assign(u, {
-  Icon: i,
-  Label: d
+  Icon: d,
+  Label: m
 });
 export {
   f as Button

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

@@ -4,12 +4,12 @@ import { Input } from '.';
 declare const meta: {
     title: 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;
         } & import('react').RefAttributes<HTMLDivElement>>;
-        Box: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;
         Validation: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Actions: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Wrapper: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLInputElement> & import('.').InputContextProps & import('react').RefAttributes<HTMLInputElement>>;
     };
     args: {
         placeholder: string;
@@ -19,3 +19,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
+export declare const WithAction: Story;
+export declare const WithValidation: Story;

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

@@ -15,7 +15,7 @@ export interface InputContextProps {
     name?: string;
     placeholder?: string;
     withValidation?: boolean;
-    onChange?: (e: any) => void;
+    handleChange?: (e: any) => void;
     onBlur?: () => void;
     onFocus?: () => void;
     onClick?: () => void;
@@ -23,11 +23,11 @@ export interface InputContextProps {
     value?: string;
 }
 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;
     } & import('react').RefAttributes<HTMLDivElement>>;
-    Box: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;
     Validation: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Actions: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Wrapper: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & InputContextProps & import('react').RefAttributes<HTMLInputElement>>;
 };
 export { Input };

package/lib/components/Input/index.js

@@ -1,84 +1,102 @@
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as a, useMemo as b, createContext as N, useContext as d, useRef as y } from "react";
-import m from "clsx";
-const s = N(null), p = a(({ children: r, errors: e, placeholder: t, ...n }, l) => {
-  const f = b(
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as o, useMemo as v, createContext as L, useContext as p } from "react";
+import d from "clsx";
+const s = L(null), x = o(({ children: n, className: a, errors: t, placeholder: l, ...e }, i) => {
+  const m = v(
     () => ({
-      errors: e,
-      placeholder: t,
-      ...n
+      errors: t,
+      placeholder: l,
+      ...e
     }),
-    [e, n]
+    [t, e]
   );
-  return /* @__PURE__ */ o(s.Provider, { value: f, children: /* @__PURE__ */ o("div", { ref: l, children: r }) });
-}), u = a(
-  ({ children: r, ...e }, t) => {
-    const n = y(null);
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        className: "mt-4 w-full",
-        onClick: () => {
-          var l;
-          return (l = n.current) == null ? void 0 : l.focus();
-        },
-        ref: t,
-        ...e,
-        children: r
-      }
-    );
-  }
-), i = a(({ className: r, children: e, required: t = !1 }, n) => /* @__PURE__ */ I(
-  "div",
-  {
-    ref: n,
-    className: m("flex px-1 text-sm font-normal leading-5", r),
-    children: [
-      /* @__PURE__ */ o("p", { children: e }),
-      t && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
-    ]
-  }
-)), c = a(
-  ({ ...r }, e) => {
-    const { errors: t, placeholder: n } = d(s) || {};
-    return /* @__PURE__ */ o(
+  return /* @__PURE__ */ r(s.Provider, { value: m, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ref: i,
+      className: d("grid grid-cols-1 gap-2 w-full rounded-md", a),
+      ...e,
+      children: n
+    }
+  ) });
+}), f = o(({ children: n, handleChange: a, onClick: t, onBlur: l, ...e }, i) => {
+  const { placeholder: m, value: g, errors: u } = p(s) || {};
+  return /* @__PURE__ */ c("div", { ref: i, className: "group/input relative isolate flex w-full", children: [
+    /* @__PURE__ */ r(
       "input",
       {
-        ref: e,
-        placeholder: n,
-        className: m(
-          "text-ink text-md w-full rounded-md border border-gray-300 bg-white py-2 pl-4",
+        placeholder: m,
+        className: d(
+          "rounded-md flex w-full bg-card px-3 py-1.5 text-sm placeholder:text-gray-500",
           {
-            "border-error border-2": t != null
+            "border-border border": !u,
+            "border-red-600 border-2": u
           }
         ),
-        ...r
+        value: g,
+        readOnly: e.readOnly,
+        disabled: e.disabled,
+        autoComplete: e.autoComplete,
+        form: e.formId,
+        maxLength: e.maxLength,
+        minLength: e.minLength,
+        pattern: e.pattern,
+        required: e.required,
+        type: e.type,
+        name: e.name,
+        onChange: (N) => a == null ? void 0 : a(N.target.value),
+        onClick: t,
+        onBlur: l,
+        onFocus: e.onFocus
       }
-    );
+    ),
+    n
+  ] });
+}), b = o(
+  ({ className: n, children: a }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      className: d(
+        "absolute right-1 top-1/2 my-auto -translate-y-1/2",
+        n
+      ),
+      children: a
+    }
+  )
+), y = o(({ className: n, children: a, required: t = !1 }, l) => /* @__PURE__ */ c(
+  "div",
+  {
+    ref: l,
+    className: d("flex px-1 text-sm font-normal leading-5", n),
+    children: [
+      /* @__PURE__ */ r("p", { children: a }),
+      t && /* @__PURE__ */ r("p", { className: "text-sm font-normal", children: "*" })
+    ]
   }
-), x = a(({ ...r }, e) => {
-  const { errors: t } = d(s) || {};
-  return /* @__PURE__ */ o(
+)), I = o(({ ...n }, a) => {
+  const { errors: t } = p(s) || {};
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: e,
-      className: "text-md gap-y-2 pl-1 pt-2 font-semibold text-error-default",
-      ...r,
-      children: t == null ? void 0 : t.map((n, l) => /* @__PURE__ */ o("p", { children: n }, `error-msg-${l + 1}`))
+      ref: a,
+      className: "text-sm pl-1 font-medium text-error-default",
+      ...n,
+      children: t == null ? void 0 : t.map((l, e) => /* @__PURE__ */ r("p", { children: l }, `error-msg-${e + 1}`))
     }
   );
 });
-p.displayName = "Input";
-u.displayName = "Input.Item";
-i.displayName = "Input.Label";
-c.displayName = "Input.Box";
-x.displayName = "Input.Validation";
-const C = Object.assign(p, {
-  Item: u,
-  Label: i,
-  Box: c,
-  Validation: x
+x.displayName = "Input";
+b.displayName = "Input.Actions";
+y.displayName = "Input.Label";
+I.displayName = "Input.Validation";
+f.displayName = "Input.Wrapper";
+const A = Object.assign(x, {
+  Label: y,
+  Validation: I,
+  Actions: b,
+  Wrapper: f
 });
 export {
-  C as Input
+  A as Input
 };

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

@@ -1,22 +1,16 @@
-import { Select } from './';
 import { StoryObj } from '@storybook/react';
+import { Select } from '.';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, options, value, label, onClick, required, fullWidth }: import('./').SelectProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        label: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('.').SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Item: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLLIElement> & {
+            value: string;
+        } & import('react').RefAttributes<HTMLLIElement>>;
     };
+    parameters: {};
     args: {
-        label: string;
-        options: string[];
+        children: import("react/jsx-runtime").JSX.Element[];
     };
 };
 export default meta;

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

@@ -1,11 +1,18 @@
-export interface SelectProps {
-    id?: string;
-    className?: string;
-    options: string[];
-    label: string;
-    value?: string;
-    onClick?: any;
-    fullWidth?: boolean;
-    required?: boolean;
+import { HTMLAttributes } from 'react';
+
+export interface SelectContextProps {
+    loading?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onChange?: (value: string) => void;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    internalValue: string;
+    setInternalValue: (val: string) => void;
 }
-export declare const Select: ({ id, className, options, value, label, onClick, required, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SelectContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+        value: string;
+    } & import('react').RefAttributes<HTMLLIElement>>;
+};
+export { Select };

package/lib/components/Select/index.js

@@ -1,68 +1,149 @@
-import { jsxs as r, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { Icon as D } from "../Icon/index.js";
-import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import s from "classnames";
-const A = ({
-  id: h,
-  className: m,
-  options: l,
-  value: a,
-  label: f,
-  onClick: w,
-  required: x = !1,
-  fullWidth: c = !1
-}) => {
-  const [n, i] = d(!1), [u, b] = d(
-    a !== void 0 ? a : l == null ? void 0 : l[0]
-  ), p = (t) => {
-    w(t.target.textContent), b(t.target.textContent), i(!1);
-  }, o = s({
-    "w-full": c,
-    "sm:w-72": !c
-  }), g = s(
-    o,
-    m,
-    "w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4"
-  ), v = s(
-    o,
-    "absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll"
-  ), C = "bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2";
-  return /* @__PURE__ */ r(y, { children: [
-    /* @__PURE__ */ r(
-      "div",
-      {
-        id: h,
-        className: g,
-        onClick: () => {
-          i(!n);
-        },
-        children: [
-          /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ r("div", { className: "absolute mt-2 flex bg-white text-xs font-thin", children: [
-              /* @__PURE__ */ e("p", { children: f }),
-              x && /* @__PURE__ */ e("p", { className: "font-semiBold text-error", children: " *" })
-            ] }),
-            /* @__PURE__ */ e("p", { className: "border-ink text-ink flex justify-between rounded-xl bg-white pb-1 pt-6", children: u })
-          ] }),
-          /* @__PURE__ */ e(D, { colour: "ink", icon: j })
-        ]
-      }
-    ),
-    n && /* @__PURE__ */ e("div", { className: s("relative z-20", o), children: /* @__PURE__ */ e("ul", { className: v, children: l == null ? void 0 : l.map((t, N) => /* @__PURE__ */ e(
-      "li",
-      {
-        className: C,
-        value: t,
-        onClick: (k) => {
-          p(k);
-        },
-        children: t
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as i, useState as N, useCallback as b, useEffect as M, createContext as V, useContext as p } from "react";
+import c from "clsx";
+import { Input as u } from "../Input/index.js";
+import { Card as z } from "../Card/index.js";
+import { Button as y } from "../Button/index.js";
+import { faCaretDown as A } from "@fortawesome/fontawesome-free-solid";
+const m = V(null), v = i(
+  ({
+    id: l,
+    open: a,
+    defaultOpen: r,
+    onOpenChange: t,
+    onChange: e,
+    className: n,
+    children: d,
+    loading: k,
+    ...T
+  }) => {
+    const [h, B] = N(a ?? r), [f, S] = N(""), x = b(
+      (s) => {
+        B(s), t == null || t(s);
       },
-      `key_${N}`
-    )) }) })
-  ] });
-};
+      [t]
+    ), D = {
+      loading: k,
+      open: h,
+      setOpen: x,
+      internalValue: f,
+      setInternalValue: S
+    };
+    M(
+      () => x(a ?? r ?? !1),
+      [a, r, x]
+    );
+    const L = b(
+      (s) => {
+        f.includes(s) ? (S(""), e == null || e("")) : (S(s), e == null || e(s));
+      },
+      [f, e]
+    );
+    return /* @__PURE__ */ o(m.Provider, { value: D, children: /* @__PURE__ */ I("div", { className: "grid gap-1", children: [
+      /* @__PURE__ */ o(
+        w,
+        {
+          id: l,
+          className: n,
+          onChange: () => L,
+          ...T,
+          children: d
+        }
+      ),
+      /* @__PURE__ */ o(g, { children: d })
+    ] }) });
+  }
+), E = i(({ className: l, ...a }, r) => {
+  const { open: t, setOpen: e } = p(m) || {};
+  return /* @__PURE__ */ o(
+    y,
+    {
+      ref: r,
+      className: l,
+      "aria-label": "toggle open",
+      onClick: () => e == null ? void 0 : e(!t),
+      variant: "ghost",
+      size: "sm",
+      ...a,
+      children: /* @__PURE__ */ o(
+        y.Icon,
+        {
+          className: c("transition-transform duration-300 ease-in-out", {
+            "rotate-180 transform": t
+          }),
+          icon: A
+        }
+      )
+    }
+  );
+}), w = i(({ className: l }, a) => {
+  const { open: r, setOpen: t, internalValue: e } = p(m) || {};
+  return /* @__PURE__ */ I(
+    u,
+    {
+      className: c(
+        "w-full rounded-md bg-white caret-transparent ",
+        l
+      ),
+      ref: a,
+      "data-open": r,
+      placeholder: "boo",
+      value: e ?? "",
+      children: [
+        /* @__PURE__ */ o(u.Label, { children: "sdfgh" }),
+        /* @__PURE__ */ o(
+          u.Wrapper,
+          {
+            onClick: () => t == null ? void 0 : t(!r),
+            onBlur: () => t == null ? void 0 : t(!1),
+            className: c(
+              "caret-transparent rounded hover:cursor-pointer data-[open=true]:border-primary data-[open=true]:ring-1 data-[open=true]:ring-primary",
+              l
+            ),
+            children: /* @__PURE__ */ o(u.Actions, { children: /* @__PURE__ */ o(E, {}) })
+          }
+        )
+      ]
+    }
+  );
+}), g = i(({ children: l, className: a, ...r }, t) => {
+  const { open: e } = p(m) || {};
+  return e ? /* @__PURE__ */ o(
+    z,
+    {
+      ref: t,
+      className: c(
+        "!px-0 data-[state=open]:animate-in w-full data-[state=open]:fade-in-0",
+        a
+      ),
+      ...r,
+      children: /* @__PURE__ */ o("ul", { children: l })
+    }
+  ) : null;
+}), j = i(({ children: l, value: a, className: r, ...t }, e) => {
+  const { setInternalValue: n } = p(m) || {};
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      ref: e,
+      className: c(
+        "hover:cursor-pointer hover:bg-gray-100 w-full py-2 px-4",
+        r
+      ),
+      value: a,
+      onMouseDown: (d) => n == null ? void 0 : n(d.target.innerHTML),
+      ...t,
+      children: l
+    }
+  );
+});
+v.displayName = "Select";
+g.displayName = "Select.Content";
+w.displayName = "Select.Trigger";
+j.displayName = "Select.Item";
+const J = Object.assign(v, {
+  Item: j
+});
 export {
-  A as Select
+  J as Select
 };

package/lib/styles/themes/paa.css

@@ -0,0 +1,78 @@
+body.theme-penrithmrt {
+  --color-primary: #68a97b;
+  --color-secondary: #1d341e;
+  --color-tertiary: #ede9d3;
+
+  --color-loading: #a3a3a3;
+
+  /* pill */
+  --color-error-default: #ffffff;
+  --color-warning-default: #a16207;
+  --color-success-default: #047857;
+  --color-info-default: #0369a1;
+
+  --color-error-light: #e94439;
+  --color-warning-light: #fde047;
+  --color-success-light: #6ee7b7;
+  --color-info-light: #7dd3fc;
+
+  /* Button */
+  --color-button-primary-active: #68a97b;
+  --color-button-primary-border: #68a97b;
+  --color-button-primary-bg: #68a97b;
+  --color-button-primary-text: #68a97b;
+  --color-button-primary-hover: #68a97b;
+
+  --color-button-secondary-active: #1d341e;
+  --color-button-secondary-border: #1d341e;
+  --color-button-secondary-bg: #1d341e;
+  --color-button-secondary-text: #1d341e;
+  --color-button-secondary-hover: #1d341e;
+
+  --color-button-ghost-active: #242424;
+  --color-button-ghost-border: #ffffff00;
+  --color-button-ghost-bg: #cbcbcb00;
+  --color-button-ghost-text: #3c2f71;
+  --color-button-ghost-hover: #c8c7c7;
+
+  --color-button-bordered-active: #242424;
+  --color-button-bordered-border: #9d9d9d;
+  --color-button-bordered-bg: #0055ff00;
+  --color-button-bordered-text: #000000;
+  --color-button-bordered-hover: #5f5f5f;
+
+  --color-button-basic-active: #acacac;
+  --color-button-basic-border: #ffffff;
+  --color-button-basic-bg: #ffffff;
+  --color-button-basic-text: #3c2f71;
+  --color-button-basic-hover: #cecece;
+
+  /* Carousel */
+  --color-carousel-arrow-default: #3c2f71;
+  --color-carousel-arrow-hover: #e94439;
+  --color-carousel-dots-default: #3c2f71;
+  --color-carousel-dots-active: #e94439;
+  --color-carousel-dots-hover: #e94439;
+
+  /* Footer */
+  --color-footer-bg: #68a97b;
+  --color-footer-text: #ffffff;
+
+  /* Star */
+  --color-star: #f5bf1f;
+
+  /* Tubestops */
+  --color-tubestop-station-active: #57e31b;
+  --color-tubestop-station-complete: #c9c8c8;
+  --color-tubestop-station-future: #5a4f45;
+  --color-tubestop-line-complete: #c9c8c8;
+  --color-tubestop-line-future: #707070;
+  --color-tubestop-text-active: #000000;
+  --color-tubestop-text-complete: #c9c8c8;
+  --color-tubestop-text-future: #5b5b5b;
+
+  /* Nav */
+  --color-nav-bg: #68a97b;
+  --color-nav-shadow-bg: #d1d5db;
+  --color-nav-text: #ede9d3;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,