@dev-blinq/ui-systems 1.0.4 → 1.0.6

package/src/components/CustomInput/CustomInput.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { CustomInputProps, InputContext } from "./CustomInputProps";
-import "./css/index.css";
-import { DetailsIcon } from "../../icons/details";
-import TypographyCustom from "../Typography/Typography";
-import { ChooseInput } from "./ChooseInput";
-
-const CustomInput: React.FC<CustomInputProps> = ({
-  size = "lg",
-  type = "default",
-  disabled = false,
-  label = "",
-  errExists = false,
-  placeholder,
-  leftIcon,
-  rightIcon,
-  style,
-  onAction,
-  ...props
-}) => {
-  const context: InputContext = {
-    type,
-    placeholder,
-    disabled,
-    errExists,
-    leftIcon,
-    rightIcon,
-    onAction, // application if type is action
-    ...props,
-  };
-  return (
-    <div style={style}>
-      {label && (
-        <TypographyCustom category="text" Size="sm" bold="semibold">
-          {label}
-        </TypographyCustom>
-      )}
-      <ChooseInput {...context} />
-    </div>
-  );
-};
-
-export default CustomInput;

package/src/components/CustomInput/CustomInputProps.ts

@@ -1,40 +0,0 @@
-import { ReactNode, CSSProperties } from "react";
-// import inputprop from mui that will be extended by custominputprops
-import { InputProps } from "@mui/material";
-
-export type Size = "md" | "lg";
-export type Type =
-  | "default"
-  | "action"
-  | "currency"
-  | "creditCard"
-  | "date"
-  | "link"
-  | "password"
-  | "search"
-  | "tel"
-  | "number";
-export interface CustomInputProps {
-  Size?: Size;
-  type?: Type;
-  label?: string;
-  disabled?: boolean;
-  errExists?: boolean;
-  placeholder: string;
-  leftIcon?: any; //ReactNode
-  rightIcon?: any; //ReactNode
-  onAction?: () => void;
-  style?: CSSProperties;
-  [key: string]: any;
-}
-
-export interface InputContext {
-  type: string;
-  placeholder: string;
-  disabled: boolean;
-  errExists: boolean;
-  leftIcon?: any; //ReactNode
-  rightIcon?: any; //ReactNode
-  onAction?: (text: string | undefined) => void;
-  [key: string]: any;
-}

package/src/components/CustomInput/css/index.css

@@ -1,7 +0,0 @@
-@import "./input.css";
-@import "./state/default.css";
-@import "./state/hover.css";
-@import "./state/focused.css";
-@import "./state/disabled.css";
-@import "./state/error.css";
-@import "./state/filled.css";

package/src/components/CustomInput/css/input.css

@@ -1,76 +0,0 @@
-.custom-input {
-  display: flex;
-  flex-direction: row;
-  padding: 12px;
-  align-items: center;
-  gap: 12px;
-  width: 296px;
-  align-self: stretch;
-  border-radius: var(--border-radius-radius-pre-lg, 12px);
-
-  border: 1px solid var(--border-default, #e6e6e6);
-  background: var(--surface-white, #fff);
-
-  /* Shadow/xs */
-  box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
-}
-
-.custom-input input {
-  width: 100%;
-  border: none;
-}
-
-.custom-input input::placeholder {
-  color: var(--text-disabled, #939197);
-  font-weight: 500;
-}
-
-.custom-input input:hover,
-.custom-input input:focus,
-.custom-input input:active {
-  border: none;
-  outline: none;
-}
-
-.custom-input .left-icon,
-.custom-input .right-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.custom-input input {
-  font-family: var(--font-family);
-  color: var(--text-primary, #080808);
-  font-weight: 600;
-  font-size: 14px;
-  font-style: normal;
-}
-
-.custom-input .grey-box {
-  margin: -12px;
-  padding: 12px;
-  gap: 6px;
-  display: flex;
-  flex-direction: row;
-  background: #f9f9f9;
-}
-
-.custom-input .grey-right-box {
-  padding: 12px;
-  border-top-right-radius: 12px;
-  border-bottom-right-radius: 12px;
-  border-left: 1px solid #e6e6e6;
-}
-
-.custom-input .grey-left-box {
-  padding: 12px 14px;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-  border-right: 1px solid #e6e6e6;
-}
-
-.custom-input select:focus {
-  border: none;
-  outline: none;
-}

package/src/components/CustomInput/css/size.css

@@ -1,3 +0,0 @@
-/* .custom-input[data-size='md'] {
-  padding: 8px 12px;
-} */

package/src/components/CustomInput/css/state/disabled.css

@@ -1,5 +0,0 @@
-.custom-input:has(input:disabled) {
-  border-radius: var(--border-radius-radius-pre-lg, 12px);
-  border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
-  background: var(--surface-disabled, #f1f1f1);
-}

package/src/components/CustomInput/css/state/error.css

@@ -1,3 +0,0 @@
-.custom-input[data-error="true"] {
-  border: var(--border-radius-radius-none, 1px) solid var(--border-error, #ea4621);
-}

package/src/components/CustomInput/css/state/focused.css

@@ -1,6 +0,0 @@
-.custom-input:focus-within {
-  border: var(--border-radius-radius-none, 1px) solid var(--border-default, #e6e6e6);
-  background: var(--surface-white, #fff);
-
-  box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
-}

package/src/components/CustomInput/css/state/hover.css

@@ -1,5 +0,0 @@
-.custom-input:hover {
-  border: var(--border-radius-radius-none, 1px) solid var(--border-hover, #c9c9cc);
-  /* Shadow/xs */
-  box-shadow: 0px 1px 2px 0px rgba(23, 23, 23, 0.05);
-}

package/src/components/CustomInput/types/Action.tsx

@@ -1,34 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import TypographyCustom from "../../Typography/Typography";
-import React, { useRef } from "react";
-
-export const ActionInput = (context: InputContext) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
-      {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
-      <input
-        type="text"
-        placeholder={context.placeholder}
-        disabled={context.disabled}
-        ref={inputRef}
-        {...context.props}
-      />
-      <div className="grey-box grey-right-box">
-        <TypographyCustom
-          category="text"
-          Size="sm"
-          bold="medium"
-          onClick={() => {
-            context.onAction && context.onAction(inputRef.current?.value);
-          }}
-        >
-          {context.actionLabel}
-        </TypographyCustom>
-        {/* {context.rightIcon && <div className="right-icon">{context.rightIcon}</div>} */}
-        {context.rightIcon && <img src={context.rightIcon} alt="icon" />}
-      </div>
-    </div>
-  );
-};

package/src/components/CustomInput/types/CreditCard.tsx

@@ -1,25 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import { DetailsIcon } from "../../../icons/details";
-export const CreditCardInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      <input
-        type="text"
-        placeholder={"0000 0000 0000 0000"}
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-        }}
-      />
-      <div className="right-icon">
-        {" "}
-        <DetailsIcon />
-      </div>
-    </div>
-  );
-};

package/src/components/CustomInput/types/Currency.tsx

@@ -1,68 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import React, { useState, useEffect } from "react";
-import { countries } from "countries-list";
-import getSymbolFromCurrency from "currency-symbol-map";
-import TypographyCustom from "../../Typography/Typography";
-
-export const CurrencyInput = (context: InputContext) => {
-  const [amount, setAmount] = useState<string>("");
-  const [selectedCurrency, setSelectedCurrency] = useState<string>("USD");
-  const [countryCurrencies, setCountryCurrencies] = useState<string[]>([]);
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    // Create an array of unique currencies
-    const uniqueCurrencies = [...new Set(Object.values(countries).map((country: any) => country.currency))];
-    setCountryCurrencies(uniqueCurrencies);
-  }, []);
-
-  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAmount(e.target.value);
-  };
-
-  const handleCurrencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedCurrency(e.target.value);
-  };
-
-  return (
-    <div className="currency-input-container">
-      <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-        <div className="grey-box grey-left-box">
-          <TypographyCustom category="text" Size="sm" bold="semibold">
-            {getSymbolFromCurrency(selectedCurrency) || "$"}
-          </TypographyCustom>
-        </div>
-
-        <input
-          type="text"
-          placeholder={"amount"}
-          style={{ marginLeft: "12px" }}
-          onChange={handleAmountChange}
-          disabled={context.disabled}
-          ref={inputRef}
-          {...context.props}
-        />
-        <div className="grey-box grey-right-box">
-          <select
-            value={selectedCurrency}
-            onChange={handleCurrencyChange}
-            className="currency-select"
-            style={{
-              fontFamily: "var(--font-family)",
-              fontWeight: "500",
-              width: "55px",
-              border: "none",
-              background: "transparent",
-            }}
-          >
-            {countryCurrencies.map((currency) => (
-              <option key={currency} value={currency}>
-                {currency}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/CustomInput/types/Date.tsx

@@ -1,20 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-export const DateInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      <input
-        type="date"
-        placeholder={context.placeholder}
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-        }}
-      />
-    </div>
-  );
-};

package/src/components/CustomInput/types/Link.tsx

@@ -1,32 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import { DetailsIcon } from "../../../icons/details";
-import TypographyCustom from "../../Typography/Typography";
-export const LinkInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      <div className="grey-box grey-left-box">
-        <TypographyCustom category="text" Size="sm" bold="medium">
-          https://
-        </TypographyCustom>
-      </div>
-      <input
-        type="text"
-        placeholder="Link Text"
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-          marginLeft: "12px",
-        }}
-      />
-      <div className="right-icon">
-        {/* {context.rightIcon ? context.rightIcon : <DetailsIcon />} */}
-        {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <DetailsIcon />}
-      </div>
-    </div>
-  );
-};

package/src/components/CustomInput/types/Number.tsx

@@ -1,23 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-
-export const NumberInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
-      {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
-      <input
-        type="number"
-        placeholder={context.placeholder ? context.placeholder : "Enter Value"}
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-        }}
-      />
-    </div>
-  );
-};

package/src/components/CustomInput/types/Password.tsx

@@ -1,30 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import { LockIcon } from "../../../icons/lock";
-import { PasswordEyeIcon } from "../../../icons/password-eye";
-
-export const PasswordInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      <div className="left-icon">
-        <LockIcon />
-      </div>
-      <input
-        type="password"
-        placeholder="*****************"
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-        }}
-      />
-      <div className="right-icon">
-        {/* {context.rightIcon ? context.rightIcon : <PasswordEyeIcon />} */}
-        {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <PasswordEyeIcon />}
-      </div>
-    </div>
-  );
-};

package/src/components/CustomInput/types/Text.tsx

@@ -1,27 +0,0 @@
-import { InputContext } from "../CustomInputProps";
-import { DetailsIcon } from "../../../icons/details";
-export const DefaultInput = (context: InputContext) => {
-  return (
-    <div className="custom-input" data-type={context.type} data-error={context.errExists}>
-      {/* {context.leftIcon && <div className="left-icon">{context.leftIcon}</div>} */}
-      {context.leftIcon && <img src={context.leftIcon} alt="icon" />}
-      <input
-        type="text"
-        placeholder={context.placeholder}
-        disabled={context.disabled}
-        {...context.props}
-        style={{
-          fontFamily: "var(--font-family)",
-          color: "var(--text-primary, #080808)",
-          fontWeight: 600,
-          fontSize: "14px",
-          fontStyle: "normal",
-        }}
-      />
-      <div className="right-icon">
-        {/* {context.rightIcon ? context.rightIcon : <DetailsIcon />} */}
-        {context.rightIcon ? <img src={context.rightIcon} alt="icon" /> : <DetailsIcon />}
-      </div>
-    </div>
-  );
-};

package/src/components/Typography/Typography.tsx

@@ -1,28 +0,0 @@
-import { Typography, TypographyProps } from "@mui/material";
-import "./css/index.css";
-type category = "display" | "heading" | "text";
-type size = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-type bold = "semibold" | "bold" | "extrabold" | "medium";
-
-interface TypegraphyCustomType extends TypographyProps {
-  Size?: size;
-  category?: category;
-  bold?: bold;
-}
-
-const TypographyCustom: React.FC<TypegraphyCustomType> = ({ children, Size, category, bold, sx, ...props }) => {
-  return (
-    <Typography
-      className="TypographyCustom"
-      data-size={Size}
-      data-category={category}
-      data-bold={bold}
-      sx={{ fontFamily: "var(--font-family), sans-serif", ...sx }}
-      {...props}
-    >
-      {children}
-    </Typography>
-  );
-};
-
-export default TypographyCustom;

package/src/components/Typography/css/bold.css

@@ -1,20 +0,0 @@
-.TypographyCustom {
-  color: var(--Gray-110, var(--colors-greyscale-110, #2d2b32));
-}
-
-/* text bold css*/
-.TypographyCustom[data-bold="extrabold"] {
-  font-weight: 800;
-}
-
-.TypographyCustom[data-bold="bold"] {
-  font-weight: 700;
-}
-
-.TypographyCustom[data-bold="semibold"] {
-  font-weight: 600;
-}
-
-.TypographyCustom[data-bold="medium"] {
-  font-weight: 500;
-}

package/src/components/Typography/css/category/display.css

@@ -1,20 +0,0 @@
-.TypographyCustom[data-category="display"][data-size="lg"] {
-  font-size: 180px;
-  font-style: normal;
-  line-height: 188px; /* 104.444% */
-  letter-spacing: -9px;
-}
-
-.TypographyCustom[data-category="display"][data-size="md"] {
-  font-size: 128px;
-  font-style: normal;
-  line-height: 136px; /* 106.25% */
-  letter-spacing: -5.12px;
-}
-
-.TypographyCustom[data-category="display"][data-size="sm"] {
-  font-size: 96px;
-  font-style: normal;
-  line-height: 104px; /* 108.333% */
-  letter-spacing: -2.88px;
-}

package/src/components/Typography/css/category/heading.css

@@ -1,41 +0,0 @@
-.TypographyCustom[data-category="heading"][data-size="xxl"] {
-  font-size: 72px;
-  font-style: normal;
-  line-height: 80px; /* 111.111% */
-  letter-spacing: -1.44px;
-}
-
-.TypographyCustom[data-category="heading"][data-size="xl"] {
-  font-size: 60px;
-  font-style: normal;
-  line-height: 68px; /* 113.333% */
-  letter-spacing: -1.08px;
-}
-
-.TypographyCustom[data-category="heading"][data-size="lg"] {
-  font-size: 48px;
-  font-style: normal;
-  line-height: 56px; /* 116.667% */
-  letter-spacing: -0.768px;
-}
-
-.TypographyCustom[data-category="heading"][data-size="md"] {
-  font-size: 36px;
-  font-style: normal;
-  line-height: 44px; /* 122.222% */
-  letter-spacing: -0.504px;
-}
-
-.TypographyCustom[data-category="heading"][data-size="sm"] {
-  font-size: 30px;
-  font-style: normal;
-  line-height: 38px; /* 126.667% */
-  letter-spacing: -0.39px;
-}
-
-.TypographyCustom[data-category="heading"][data-size="xs"] {
-  font-size: 24px;
-  font-style: normal;
-  line-height: 32px; /* 133.333% */
-  letter-spacing: -0.288px;
-}

package/src/components/Typography/css/category/text.css

@@ -1,48 +0,0 @@
-.TypographyCustom[data-category="text"][data-size="xxl"] {
-  font-size: 24px;
-  font-style: normal;
-  line-height: 32px; /* 133.333% */
-  letter-spacing: -0.288px;
-}
-
-.TypographyCustom[data-category="text"][data-size="xl"] {
-  font-size: 20px;
-  font-style: normal;
-  line-height: 28px; /* 140% */
-  letter-spacing: -0.2px;
-}
-
-.TypographyCustom[data-category="text"][data-size="lg"] {
-  font-size: 18px;
-  font-style: normal;
-  line-height: 24px; /* 133.333% */
-  letter-spacing: -0.144px;
-}
-
-.TypographyCustom[data-category="text"][data-size="md"] {
-  font-size: 16px;
-  font-style: normal;
-  line-height: 22px; /* 137.5% */
-  letter-spacing: -0.112px;
-}
-
-.TypographyCustom[data-category="text"][data-size="sm"] {
-  font-size: 14px;
-  font-style: normal;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: -0.084px;
-}
-
-.TypographyCustom[data-category="text"][data-size="xs"] {
-  font-size: 12px;
-  font-style: normal;
-  line-height: 16px; /* 133.333% */
-  letter-spacing: -0.06px;
-}
-
-.TypographyCustom[data-category="text"][data-size="xxs"] {
-  font-size: 10px;
-  font-style: normal;
-  line-height: 14px; /* 140% */
-  letter-spacing: -0.04px;
-}

package/src/components/Typography/css/index.css

@@ -1,4 +0,0 @@
-@import "./bold.css";
-@import "./category/display.css";
-@import "./category/heading.css";
-@import "./category/text.css";

package/src/icons/details.tsx

@@ -1,10 +0,0 @@
-export const DetailsIcon = () => {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M11.25 14.0625C11.25 14.3097 11.1767 14.5514 11.0393 14.757C10.902 14.9625 10.7068 15.1227 10.4784 15.2173C10.2499 15.312 9.99862 15.3367 9.75614 15.2885C9.51366 15.2402 9.29094 15.1212 9.11612 14.9464C8.9413 14.7716 8.82225 14.5488 8.77402 14.3064C8.72579 14.0639 8.75054 13.8126 8.84515 13.5841C8.93976 13.3557 9.09998 13.1605 9.30554 13.0232C9.5111 12.8858 9.75278 12.8125 10 12.8125C10.3315 12.8125 10.6495 12.9442 10.8839 13.1786C11.1183 13.413 11.25 13.731 11.25 14.0625ZM18.4375 10C18.4375 11.6688 17.9427 13.3001 17.0155 14.6876C16.0884 16.0752 14.7706 17.1566 13.2289 17.7952C11.6871 18.4338 9.99064 18.6009 8.35393 18.2754C6.71721 17.9498 5.2138 17.1462 4.03379 15.9662C2.85378 14.7862 2.05019 13.2828 1.72463 11.6461C1.39907 10.0094 1.56616 8.31286 2.20477 6.77111C2.84338 5.22936 3.92484 3.9116 5.31238 2.98448C6.69992 2.05735 8.33122 1.5625 10 1.5625C12.237 1.56498 14.3817 2.45473 15.9635 4.03653C17.5453 5.61833 18.435 7.763 18.4375 10ZM16.5625 10C16.5625 8.70206 16.1776 7.43327 15.4565 6.35407C14.7354 5.27487 13.7105 4.43374 12.5114 3.93704C11.3122 3.44034 9.99272 3.31038 8.71972 3.5636C7.44672 3.81681 6.2774 4.44183 5.35962 5.35961C4.44183 6.27739 3.81682 7.44672 3.5636 8.71972C3.31038 9.99272 3.44034 11.3122 3.93704 12.5114C4.43374 13.7105 5.27488 14.7354 6.35407 15.4565C7.43327 16.1776 8.70206 16.5625 10 16.5625C11.7399 16.5606 13.408 15.8686 14.6383 14.6383C15.8686 13.408 16.5606 11.7399 16.5625 10ZM10 5C8.10469 5 6.5625 6.40156 6.5625 8.125V8.4375C6.5625 8.68614 6.66127 8.9246 6.83709 9.10041C7.01291 9.27623 7.25136 9.375 7.5 9.375C7.74864 9.375 7.9871 9.27623 8.16292 9.10041C8.33873 8.9246 8.4375 8.68614 8.4375 8.4375V8.125C8.4375 7.43594 9.14063 6.875 10 6.875C10.8594 6.875 11.5625 7.43594 11.5625 8.125C11.5625 8.81406 10.8594 9.375 10 9.375C9.75136 9.375 9.51291 9.47377 9.33709 9.64959C9.16127 9.8254 9.0625 10.0639 9.0625 10.3125V10.9375C9.06194 11.1691 9.14715 11.3927 9.30169 11.5653C9.45623 11.7378 9.66916 11.847 9.89945 11.8719C10.1297 11.8967 10.3611 11.8354 10.5488 11.6998C10.7366 11.5642 10.8676 11.3639 10.9164 11.1375C12.368 10.7719 13.4375 9.56016 13.4375 8.125C13.4375 6.40156 11.8953 5 10 5Z"
-        fill="#080808"
-      />
-    </svg>
-  );
-};

package/src/icons/index.tsx

@@ -1,2 +0,0 @@
-import MailIcon from "./mail.svg";
-export { MailIcon };