@dev-blinq/ui-systems 1.0.3 → 1.0.5

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

package/src/icons/lock.tsx

@@ -1,29 +0,0 @@
-export const LockIcon = () => {
-  return (
-    <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M11.6868 6.87324V5.08408C11.6868 2.98991 9.98844 1.29154 7.89427 1.29154C5.8001 1.28241 4.0951 2.97241 4.08594 5.06741V5.08408V6.87324"
-        stroke="#939197"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.0695 16.7081H4.70199C2.95699 16.7081 1.54199 15.294 1.54199 13.5481V9.97396C1.54199 8.22813 2.95699 6.81396 4.70199 6.81396H11.0695C12.8145 6.81396 14.2295 8.22813 14.2295 9.97396V13.5481C14.2295 15.294 12.8145 16.7081 11.0695 16.7081Z"
-        stroke="#939197"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M7.88574 10.8357V12.6865"
-        stroke="#939197"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};

package/src/icons/mail.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path d="M17.5 12.5786C17.5 14.8829 15.9627 16.7559 13.6819 16.7503H6.31811C4.0373 16.7559 2.5 14.8829 2.5 12.5786V7.42754C2.5 5.12565 4.0373 3.25024 6.31811 3.25024H13.6819C15.9627 3.25024 17.5 5.12565 17.5 7.42754V12.5786Z" stroke="#939197" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M14.4267 7.63843L11.0943 10.3482C10.4667 10.8468 9.57726 10.8468 8.94968 10.3482L5.58887 7.63843" stroke="#939197" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/icons/mail.tsx

@@ -1,23 +0,0 @@
-interface MailIconProps {
-  style?: React.CSSProperties;
-}
-
-export const MailIcon = ({ style }: MailIconProps) => (
-  // edited the svg to style it with the props
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" style={style}>
-    <path
-      d="M17.5 12.5786C17.5 14.8829 15.9627 16.7559 13.6819 16.7503H6.31811C4.0373 16.7559 2.5 14.8829 2.5 12.5786V7.42754C2.5 5.12565 4.0373 3.25024 6.31811 3.25024H13.6819C15.9627 3.25024 17.5 5.12565 17.5 7.42754V12.5786Z"
-      stroke="#939197"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M14.4267 7.63843L11.0943 10.3482C10.4667 10.8468 9.57726 10.8468 8.94968 10.3482L5.58887 7.63843"
-      stroke="#939197"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

package/src/icons/password-eye.tsx

@@ -1,10 +0,0 @@
-export const PasswordEyeIcon = () => {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M4.44393 2.49455C4.36161 2.40174 4.26167 2.3262 4.14993 2.2723C4.0382 2.2184 3.91687 2.18722 3.79299 2.18055C3.66911 2.17389 3.54514 2.19188 3.42826 2.23348C3.31138 2.27508 3.20392 2.33946 3.11211 2.4229C3.0203 2.50634 2.94596 2.60716 2.89341 2.71954C2.84085 2.83192 2.81112 2.95361 2.80594 3.07756C2.80076 3.20152 2.82024 3.32526 2.86324 3.44163C2.90624 3.558 2.9719 3.66468 3.05643 3.75549L4.30643 5.13439C1.61503 6.92658 0.44706 9.49846 0.39081 9.61955C0.337882 9.73955 0.310547 9.86926 0.310547 10.0004C0.310547 10.1316 0.337882 10.2613 0.39081 10.3813C0.419716 10.4453 1.10409 11.9641 2.61659 13.4758C4.63847 15.4953 7.18769 16.5625 10.0002 16.5625C11.3671 16.5701 12.7217 16.3045 13.9846 15.7813L15.5541 17.5078C15.7222 17.6884 15.9547 17.7954 16.2011 17.8057C16.4476 17.816 16.6882 17.7288 16.8708 17.5628C17.0534 17.3969 17.1632 17.1657 17.1764 16.9194C17.1897 16.6731 17.1053 16.4314 16.9416 16.2469L4.44393 2.49455ZM10.0002 14.6875C7.68847 14.6875 5.66659 13.8492 3.99159 12.1969C3.33273 11.5445 2.7658 10.8054 2.30643 10C2.71815 9.27267 3.7744 7.66408 5.58768 6.53986L12.626 14.2828C11.7772 14.5539 10.8912 14.6904 10.0002 14.6875ZM19.6096 10.3813C19.5814 10.4445 18.9064 11.9438 17.4221 13.4406C17.3371 13.535 17.2338 13.6111 17.1185 13.6643C17.0032 13.7175 16.8783 13.7468 16.7513 13.7503C16.6244 13.7538 16.4981 13.7315 16.38 13.6847C16.2619 13.6378 16.1546 13.5675 16.0646 13.478C15.9745 13.3885 15.9036 13.2816 15.8561 13.1638C15.8086 13.046 15.7855 12.9198 15.7882 12.7929C15.791 12.6659 15.8195 12.5408 15.8721 12.4252C15.9246 12.3096 16.0001 12.2059 16.0939 12.1203C16.7175 11.4864 17.2554 10.7735 17.6939 10C17.2348 9.19443 16.6679 8.45531 16.0088 7.80314C14.333 6.1508 12.3119 5.31252 10.0002 5.31252C9.73847 5.31252 9.47675 5.32346 9.21894 5.34533C9.0947 5.35864 8.96905 5.34698 8.84938 5.31104C8.72971 5.27509 8.61844 5.21559 8.52209 5.13602C8.42575 5.05646 8.34628 4.95844 8.28837 4.84772C8.23045 4.737 8.19525 4.61583 8.18483 4.49131C8.17442 4.3668 8.189 4.24145 8.22772 4.12265C8.26644 4.00385 8.32851 3.89399 8.4103 3.79953C8.49208 3.70506 8.59193 3.6279 8.70396 3.57257C8.816 3.51725 8.93796 3.48488 9.06269 3.47736C9.36972 3.4508 9.68769 3.43752 10.0002 3.43752C12.8127 3.43752 15.3619 4.50549 17.3822 6.52502C18.8939 8.03674 19.5783 9.55627 19.6072 9.61955C19.6605 9.73938 19.6882 9.86901 19.6887 10.0002C19.6891 10.1313 19.6621 10.2611 19.6096 10.3813Z"
-        fill="#080808"
-      />
-    </svg>
-  );
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { default as Button } from "./components/CustomButton/CustomButton";
-export { default as CustomInput } from "./components/CustomInput/CustomInput";
-export { default as CustomCheckbox } from "./components/CustomCheckbox";

package/src/playground/App.tsx

@@ -1,105 +0,0 @@
-import React, { useState } from "react";
-import { Button, CustomInput, CustomCheckbox } from "../";
-import TypographyCustom from "../components/Typography/Typography";
-import {
-  ButtonSize,
-  ButtonColorHierarchyType,
-  buttonColorHierarchyArray,
-} from "../components/CustomButton/CustomButtonTypes";
-import { MailIcon } from "../icons/index";
-
-function extractPossibleChoices(type: ButtonColorHierarchyType): string[] {
-  console.log(type);
-  return [...new Set(type.split("|").map((t) => t.trim()))];
-}
-
-const App: React.FC = () => {
-  const [size, setSize] = useState<ButtonSize>("md");
-  const [colorHierarchy, setColorHierarchy] = useState<ButtonColorHierarchyType>("brand/primary");
-
-  const [disabled, setDisabled] = useState<boolean>(false);
-  const [text, setText] = useState<string>("Test Button");
-
-  const [inputValue, setInputValue] = useState("");
-  const [checkboxChecked, setCheckboxChecked] = useState(false);
-
-  return (
-    <div className="playground-container">
-      <div className="controls">
-        <h2 className="controls-title">Controls</h2>
-        <div className="control-item">
-          <label htmlFor="size">Size</label>
-          <select id="size" value={size} onChange={(e) => setSize(e.target.value as "sm" | "md" | "lg")}>
-            <option value="sm">Small</option>
-            <option value="md">Medium</option>
-            <option value="lg">Large</option>
-            <option value="xl">Extra Large</option>
-          </select>
-        </div>
-
-        <div className="control-item">
-          <label htmlFor="colorHierarchy">Color Hierarchy</label>
-          <select
-            id="colorHierarchy"
-            value={colorHierarchy}
-            onChange={(e) => setColorHierarchy(e.target.value as ButtonColorHierarchyType)}
-          >
-            {buttonColorHierarchyArray.map((colorHierarchy, index) => (
-              <option key={index} value={colorHierarchy}>
-                {colorHierarchy}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div className="control-item">
-          <label htmlFor="disabled">Disabled</label>
-          <input type="checkbox" id="disabled" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
-        </div>
-
-        <div className="control-item">
-          <label htmlFor="text">Text</label>
-          <input type="text" id="text" value={text} onChange={(e) => setText(e.target.value)} />
-        </div>
-      </div>
-
-      <div className="preview">
-        <h2 className="preview-title">Preview</h2>
-        <Button
-          size={size}
-          colorHierarchy={colorHierarchy}
-          disabled={disabled}
-          text={text}
-          leftIcon={MailIcon}
-          onClick={() => alert("Button clicked!")}
-        />
-      </div>
-
-      <div className="mb-4">
-        <h2 className="text-xl mb-2">Typography</h2>
-        <TypographyCustom category="text" Size="md" bold="semibold">
-          This is a custom typography component
-        </TypographyCustom>
-      </div>
-
-      <div className="mb-4" style={{ paddingLeft: "3em" }}>
-        <h2 className="text-xl mb-2">Custom Input</h2>
-        <CustomInput
-          value={inputValue}
-          leftIcon={MailIcon}
-          actionLabel="Send"
-          errExists={true}
-          onChange={(e: any) => setInputValue(e.target.value)}
-          label="Label"
-          placeholder="Type here..."
-        />
-      </div>
-      <div className="mb-4">
-        {/* <h2 className="text-xl mb-2">Custom Checkbox</h2> */}
-        {/* <CustomCheckbox checked={checkboxChecked} onChange={setCheckboxChecked} label="Check me" /> */}
-      </div>
-    </div>
-  );
-};
-
-export default App;

package/src/playground/main.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/src/svg.d.ts

@@ -1,5 +0,0 @@
-declare module "*.svg" {
-  import React, { ReactNode } from "react";
-  const SVGComponent: any;
-  export default SVGComponent;
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-    "compilerOptions": {
-      "target": "es6",
-      "module": "esnext",
-      "jsx": "react-jsx",
-      "strict": true,
-      "moduleResolution": "node",
-      "esModuleInterop": true,
-      "skipLibCheck": true,
-      "forceConsistentCasingInFileNames": true,
-      "declaration": true,
-      "outDir": "dist"
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "dist"]
-  }
-  

package/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"], // Build for commonJS and ESmodules
-  dts: true, // Generate declaration file (.d.ts)
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-});