@dev-blinq/ui-systems 1.0.3 → 1.0.5

package/src/components/CustomButton/css/color/focused.css

@@ -1,39 +0,0 @@
-.button[data-colorHierarchy="brand/primary"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
-}
-
-.button[data-colorHierarchy="gray/secondary"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
-}
-
-.button[data-colorHierarchy="white/secondary"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
-}
-
-.button[data-colorHierarchy="gray/linkContainer"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
-}
-
-.button[data-colorHierarchy="gray/link"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--neutural-50, #e6e6e6);
-}
-
-.button[data-colorHierarchy="brand/link"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--primary-30, #b5c5e7);
-}
-
-.button[data-colorHierarchy="destructive/primary"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
-}
-
-.button[data-colorHierarchy="destructive/secondary"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
-}
-
-.button[data-colorHierarchy="destructive/linkContainer"]:focus {
-  box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
-}
-
-.button[data-colorHierarchy=""]:focus {
-  box-shadow: 0px 0px 0px 4px var(--destructive-30, #f9c7bc);
-}

package/src/components/CustomButton/css/color/hover.css

@@ -1,39 +0,0 @@
-.button[data-colorHierarchy="brand/primary"]:hover {
-  background: var(--surface-primary-hover, #08379e);
-}
-
-.button[data-colorHierarchy="gray/secondary"]:hover {
-  background: var(--surface-secondary-hover, #ececed);
-}
-
-.button[data-colorHierarchy="white/secondary"]:hover {
-  background: var(--surface-white---hover, #f9f9f9);
-}
-
-.button[data-colorHierarchy="gray/linkContainer"]:hover {
-  background: var(--surface-secondary, #f1f1f1);
-}
-
-.button[data-colorHierarchy="gray/link"]:hover {
-  background-color: #fff;
-}
-
-.button[data-colorHierarchy="brand/link"]:hover {
-  background-color: #fff;
-}
-
-.button[data-colorHierarchy="destructive/primary"]:hover {
-  background: var(--surface-error-hover, #d33f1e);
-}
-
-.button[data-colorHierarchy="destructive/secondary"]:hover {
-  background: var(--surface-error-secondary-hover, #fbdad3);
-}
-
-.button[data-colorHierarchy="destructive/linkContainer"]:hover {
-  background: var(--colors-red-5, #fef6f4);
-}
-
-.button[data-colorHierarchy=""]:hover {
-  background-color: #fff;
-}

package/src/components/CustomButton/css/customButton.css

@@ -1,73 +0,0 @@
-.button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border: none;
-}
-
-/* .button[data-color='brand'] {
-  background-color: var(--brand-color, #093DB0);
-  color: #fff;
-}
-
-.button[data-color='gray'] {
-  background-color: var(--gray-color, #6c757d);
-  color: #fff;
-}
-
-.button[data-color='destructive'] {
-  background-color: var(--destructive-color, #dc3545);
-  color: #fff;
-} */
-
-/* .button[data-color='white'] {
-  background-color: #fff;
-  color: #000;
-  border: 1px solid var(--gray-color, #6c757d);
-} */
-
-/* .button[data-hierarchy='primary'] {
-  box-shadow: 0px 0px 0px 2px var(--primary-color, #007bff);
-}
-
-.button[data-hierarchy='secondary'] {
-  box-shadow: none;
-  border: 1px solid var(--secondary-color, #6c757d);
-}
-
-.button[data-hierarchy='link'] {
-  background: none;
-  border: none;
-  color: var(--brand-color, #007bff);
-}
-
-.button[data-hierarchy='linkContainer'] {
-  background-color: #f8f9fa;
-  color: var(--brand-color, #007bff);
-  border: 1px solid var(--gray-color, #6c757d);
-} */
-
-/*
-.button[data-state='default'] {
-  opacity: 1;
-}
-
-.button[data-state='hover'] {
-  opacity: 0.9;
-  background: #08379E;
-  
-}
-
-.button[data-state='focused'] {
-  box-shadow: 0px 0px 0px 4px var(--primary-30, #B5C5E7);
-}
-
-.button[data-state='disabled'] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-*/

package/src/components/CustomButton/css/index.css

@@ -1,6 +0,0 @@
-@import "./size.css";
-@import "./customButton.css";
-@import "./color/default.css";
-@import "./color/disabled.css";
-@import "./color/focused.css";
-@import "./color/hover.css";

package/src/components/CustomButton/css/size.css

@@ -1,23 +0,0 @@
-.button[data-size="sm"] {
-  padding: 8px 12px;
-  gap: 8px;
-  border-radius: 12px;
-}
-
-.button[data-size="md"] {
-  padding: 10px 14px;
-  gap: 8px;
-  border-radius: 12px;
-}
-
-.button[data-size="lg"] {
-  padding: 12px 16px;
-  gap: 10px;
-  border-radius: 12px;
-}
-
-.button[data-size="xl"] {
-  padding: 16px 24px;
-  gap: 12px;
-  border-radius: 16px;
-}

package/src/components/CustomCheckbox.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-type CustomCheckboxProps = {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: string;
-  disabled?: boolean;
-};
-
-const CustomCheckbox: React.FC<CustomCheckboxProps> = ({ checked, onChange, label, disabled }) => {
-  return (
-    <label className="flex items-center space-x-3">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange && onChange(e.target.checked)}
-        disabled={disabled}
-      />
-      {label && <span>{label}</span>}
-    </label>
-  );
-};
-
-export default CustomCheckbox;

package/src/components/CustomInput/ChooseInput.tsx

@@ -1,36 +0,0 @@
-import { InputContext } from "./CustomInputProps";
-import { DefaultInput } from "./types/Text";
-import { ActionInput } from "./types/Action";
-import { CurrencyInput } from "./types/Currency";
-import { CreditCardInput } from "./types/CreditCard";
-import { DateInput } from "./types/Date";
-import { LinkInput } from "./types/Link";
-import { PasswordInput } from "./types/Password";
-
-import { NumberInput } from "./types/Number";
-
-// export type Type = "default" | "action" | "currency" | "creditCard" | "date" | "link" | "password" | "search" | "tel" | "number"
-
-export const ChooseInput = (context: InputContext) => {
-  switch (context.type) {
-    case "default":
-      return DefaultInput(context);
-    case "action":
-      return ActionInput(context);
-    case "currency":
-      return CurrencyInput(context);
-    case "creditCard":
-      return CreditCardInput(context);
-    case "date":
-      return DateInput(context);
-    case "link":
-      return LinkInput(context);
-    case "password":
-      return PasswordInput(context);
-
-    case "number":
-      return NumberInput(context);
-    default:
-      return DefaultInput(context);
-  }
-};

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>
-  );
-};