@pinuts/bsr-uikit-relaunch 0.0.22 → 0.2.7

package/dist/styles/_exports.module.scss

@@ -0,0 +1,34 @@
+@import './variables/_variables.scss';
+
+:export {
+  // Breakpoints
+  screenSmMin: $screen-sm-min;
+  screenSmMax: $screen-sm-max;
+  screenMdMin: $screen-md-min;
+  screenMdMax: $screen-md-max;
+  screenLgMin: $screen-lg-min;
+  screenLgMax: $screen-lg-max;
+  screenXlMin: $screen-xl-min;
+
+  // Colors
+  bsrGrey100: $bsr-grey-100;
+  bsrBlack90: $bsr-black-90;
+  bsrOrange: $bsr-orange-100;
+  bsrWhite100: $bsr-white-100;
+  bsrBrick100: $bsr-brick-100;
+  bsrBlack10: $bsr-black-10;
+  bsrRedOrange: $bsr-red-orange-100;
+  bsrBrightBlue100: $bsr-bright-blue-100;
+  bsrBlue100: $bsr-blue-100;
+  bsrLightGreen100: $bsr-light-green-100;
+  bsrGreen100: $bsr-green-100;
+  bsrGrey100: $bsr-grey-100;
+  bsrYellow100: $bsr-yellow-100;
+  bsrBrown100: $bsr-brown-100;
+  bsrRustOrange100: $bsr-rust-orange-100;
+
+  // Icon Size
+  iconSize40: $base-gap * 10;
+  iconSize48: $base-gap * 12;
+  iconSize160: $base-gap * 40;
+}

package/dist/styles/form.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
-@import "./variables/variables";
+@import "./variables/_variables.scss";
 
-// GENERAL INPUT STYLES
+/* GENERAL INPUT STYLES */
 .topRow {
   display: flex;
   justify-content: space-between;
@@ -9,7 +9,7 @@
   padding: 0 $base-gap * 4 0 $base-gap * 0.5;
 
   .label {
-    font-family: "TradeGothic";
+    font-family: "TradeGothicNext";
     font-size: $input-label-font-size;
     font-weight: $fontweight-bold;
     line-height: $input-label-line-height;
@@ -104,14 +104,14 @@
 .input,
 .select,
 .textarea {
-  font-family: "TradeGothicNextLT";
+  font-family: "TradeGothicNext";
   font-size: $inputField-font-size;
   font-weight: $fontweight-normal;
   line-height: $inputField-line-height;
   letter-spacing: $letter-spacing-xs;
-  color: $bsr-grey-100;
+  color: $bsr-black-90;
   background: $bsr-white-100;
-  border: $bsr-border-width-m solid $bsr-border-color-default;
+  border: $bsr-border-width-m solid $bsr-grey-100;
   border-radius: $border-radius-sm;
   padding: ($base-gap * 2) ($base-gap * 4);
   gap: ($base-gap * 2);
@@ -125,7 +125,7 @@
   }
 }
 
-// SELECT INPUT
+/* SELECT INPUT */ 
 .select {
   appearance:none;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.75L6 5.25L10.5 0.75' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@@ -139,13 +139,13 @@
   }
 }
 
-
-// TEXT INPUT
+/* TEXT INPUT */
 .formInput {
   display: flex;
   flex-direction: column;
   gap: ($base-gap * 2);
   margin-bottom: $base-gap * 5;
+  font-family: "TradeGothicNext";
 
   ul {
     list-style-type: none;
@@ -175,7 +175,6 @@
         align-self: flex-start;
         min-width: 18px;
         margin-inline-end: $base-gap * 2;
-        // transform: translateY($base-gap);
       }
     }
   }
@@ -199,31 +198,55 @@
   }
 }
 
-// GROUP INPUT
+/* GROUP INPUT */
 .groupInputList {
   margin: 0;
   padding: 0;
   display: flex;
   gap: $base-gap * 2 $base-gap * 5;
   flex-wrap: wrap;
+  column-gap: $base-gap * 10 !important;
+
+  &.inline {
+    display: inline-flex;
+    gap: $base-gap * 2;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
 
   li {
     display: inline-flex;
     align-items: center;
+    margin-right: 0 !important;
+    gap: $base-gap * 2 !important;
+
+    label {
+      padding-left: 0 !important;
+    }
+
+    &::before {
+      content: none !important;
+    }
   }
 }
 
-// RADIO INPUT
+/* RADIO INPUT */
 input[type="radio"] {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  border-radius: $border-radius;
+  border: $bsr-border-width-m solid $bsr-black-90;
+
   height: $base-gap * 6;
   width: $base-gap * 6;
   position: relative;
   appearance: none;
-  border-radius: 5000px;
-  border-color: black;
   outline: 3.4px solid white;
   outline-offset: $bsr-border-width-m * -1 - 3px;
-  margin-right: $base-gap * 3;
 
   &:hover, &:active, &:focus-visible, &:focus {
     cursor: pointer;
@@ -238,6 +261,7 @@ input[type="radio"] {
   }
 
   + label {
+    font-weight: 400 !important;
     &:hover {
       cursor: pointer;
     }
@@ -249,4 +273,213 @@ input[type="radio"] {
     outline: 2px solid white;
     outline-offset: $bsr-border-width-m * -1 - 3px;
   }
-}
+}
+button {
+  text-underline-offset: 3px;
+  gap: $base-gap * 3;
+  justify-content: center;
+  min-height: $base-gap * 10;
+  p { 
+    margin: 0;
+  }
+
+  &.btn-white {
+    background-color: $bsr-white-100;
+    color: $bsr-brick-100;
+    border-color: $bsr-brick-100;
+    gap: $base-gap * 3;
+    justify-content: center;
+    min-height: $base-gap * 10;
+
+    &:hover, &:focus-visible {
+      background-color: $bsr-brick-100 !important;
+      color: $bsr-white-100 !important;
+      border-color: $bsr-brick-100 !important;
+      text-decoration-color: currentColor;
+    }
+  }
+
+  &.btn-brick {
+    background-color: $bsr-brick-100;
+    color: $bsr-white-100;
+    border-color: $bsr-brick-100;
+    gap: $base-gap * 3;
+    justify-content: center;
+    min-height: $base-gap * 10;
+  }
+
+}
+
+button[type="submit"] {
+  padding: $btn-padding-y $btn-padding-x;
+  border-radius: $btn-border-radius;
+  background-color: $bsr-brick-100;
+  color: $bsr-white-100;
+  border: $bsr-border-width-m solid $bsr-brick-100;
+
+  &:hover, &:focus-visible {
+      background-color: $bsr-white-100;
+      color: $bsr-brick-100;
+      text-decoration-color: currentColor;
+  }
+
+  &:focus, &:focus-visible {
+      outline: none;
+  }
+}
+
+form input[type="checkbox"]:read-only {
+  background-color: #eee;
+  border-color: #ddd;
+  border-width: 2px;
+}
+
+form input[type="checkbox"], form input[type="checkbox"] {
+  height: 0;
+  width: 0;
+  position: absolute;
+  opacity: 0;
+}
+
+form input[type="checkbox"]+label {
+  padding-left: 0;
+}
+
+form input[type="checkbox"]:checked+label {
+  color: #1e1e1e;
+}
+
+form input[type="checkbox"]:checked+label:before {
+  border-color: #1e1e1e;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
+}
+
+form input[type="checkbox"]+label:hover:before{
+  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75001 11.6251C5.57001 11.6251 5.38626 11.5613 5.24376 11.4263L0.743764 7.3013C0.440014 7.02005 0.417514 6.54755 0.698764 6.24005C0.980014 5.9363 1.45251 5.9138 1.76001 6.19505L5.70876 9.8138L14.2025 0.611304C14.4838 0.307554 14.9563 0.288804 15.2638 0.570054C15.5675 0.851304 15.5863 1.3238 15.305 1.6313L6.30501 11.3813C6.15876 11.5426 5.95626 11.6213 5.75376 11.6213L5.75001 11.6251Z%27 fill=%27%23808080%27 stroke=%27%23808080%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
+  border-width: 2px;
+}
+
+form input[type="checkbox"]:checked+label:hover:before {
+  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
+}
+
+form input[type="checkbox"]+label:before {
+  content: "";
+  position: relative;
+  height: 24px;
+  width: 24px;
+  top: 0;
+  margin-top: 0;
+  transform: none;
+  border-radius: 4px;
+  border: 1.4px solid #1e1e1e;
+  box-shadow: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+  margin-bottom: -5px;
+  margin-right: 8px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* TAG */
+.tag {
+  position:relative;
+  color: $bsr-grey-100;
+  display: inline-flex;
+  align-items: center;
+  gap: $base-gap * 4;
+  transition: $transition-duration-base;
+  border-radius: $border-radius-sm;
+  border: $bsr-border-width-m solid $bsr-grey-100;
+  background-color: $white;
+  width: fit-content !important;
+  border-radius: $border-radius-lg * 2;
+  padding-inline: $base-gap * 3;
+  padding-bottom: 5px;
+  padding-top: 3px;
+  min-height: fit-content;
+
+  p {
+    margin: 0;
+  }
+
+  .closeBtn {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    color: $text-secondary;
+  }
+  
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus, &:focus-within {
+    box-shadow: rgba($bsr-brick-100, 0.5) 0px 0px 0px 4px;
+    &:is(button):not(.disabled) {
+      outline: $base-gap solid $bsr-brick-100;
+    }
+  }
+
+  &.selected {
+    background-color: $secondary;
+    color: $text-light;
+    text-decoration: none;
+    border: $bsr-border-width-m solid $secondary;
+    &.selected {
+      background-color: $secondary;
+      color: $text-light;
+      text-decoration: none;
+
+      .closeBtn {
+        color: $text-light;
+      }
+    }
+    &:hover,
+    &:focus {
+      &:is(button):not(.disabled) {
+        background-color: $secondary;
+        color: $text-light;
+
+        .closeBtn {
+          color: $text-light;
+          background-color: transparent;
+        }
+      }
+
+      &:focus, &:focus-visible {
+        outline: none;
+      }
+    }
+    &.disabled {
+      background-color: $white;
+      border-color: $bsr-black-40;
+      color: $bsr-black-40;
+      text-decoration: none;
+      cursor: default;
+
+      .closeBtn {
+        color: $bsr-black-40;
+        cursor: not-allowed;
+      }
+
+      &:hover,
+      :focus {
+        background-color: $secondary;
+        cursor: pointer;
+        color: $text-light;
+
+        .btn {
+          color: $text-light;
+        }
+      }
+    }
+  }
+  &.isStatic {
+    cursor: default;
+  }
+}

package/dist/styles/main.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import "./variables/variables";
+@import "./variables/_variables.scss";
 @import "./ariakit_combobox";
 
 .sr-only {

package/dist/styles/variables/_buttons.scss

@@ -59,7 +59,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
 
         @each $color, $value in $theme-colors {
             @if $color == "light" {
-                &.btn-#{$color} {
+                &.btn-light {
                     background-color: $value;
                     border-color: currentColor;
                     color: $bsr-brick-100;
@@ -67,7 +67,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
                     cursor: not-allowed;
                 }
 
-                &.btn-outline-#{$color} {
+                &.btn-outline-light {
                     background-color: transparent;
                     border-color: $value;
                     color: $value;
@@ -75,6 +75,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
                     cursor: not-allowed;
                 }
             } @else {
+                /*
                 &.btn-#{$color} {
                     background-color: shade-color($value, 100%) !important;
                     border-color: shade-color($value, 100%);
@@ -90,8 +91,10 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
                     opacity: .4;
                     cursor: not-allowed;
                 }
+                */
             }
         }
+
     }
 }
 

package/dist/styles/variables/_colors.scss

@@ -3,7 +3,7 @@
 
 $min-contrast-ratio: 4.5;
 
-// Primary
+/* Primary */
 $bsr-orange-100: #F66504;
 $bsr-orange-90: #F6741D;
 $bsr-orange-80: #F68234;
@@ -12,14 +12,14 @@ $bsr-orange-60: #F69F64;
 $bsr-orange-50: #F5AC7C;
 $bsr-orange-40: #F4BA94;
 
-// Secondary
+/* Secondary */
 $bsr-brick-100: #D74116;
 
-// Black & White
+/* Black & White */
 $bsr-black-90: #1E1E1E;
 $bsr-white-100: #FFFFFF;
 
-// Additional
+/* Additional */
 $bsr-red-orange-100: #E5271A;
 $bsr-bright-blue-100: #0092BD;
 $bsr-blue-100: #0055AA;
@@ -33,7 +33,7 @@ $bsr-light-brown-100: #7A4A39;
 $bsr-grey-100: #5f6a72;
 $bsr-red-100: #E42C1B;
 
-// Neutrals
+/* Neutrals */
 $bsr-black-60: #808080;
 $bsr-black-50: #A0A0A0;
 $bsr-black-40: #B4B4B4;
@@ -41,7 +41,7 @@ $bsr-black-30: #CACACA;
 $bsr-black-20: #DDDDDD;
 $bsr-black-10: #EEEEEE;
 
-// Theme colors
+/* Theme colors */
 $primary: $bsr-orange-100;
 $secondary: $bsr-brick-100;
 $success: $bsr-green-100;
@@ -97,7 +97,7 @@ $theme-colors: (
     "black-10":   $bsr-black-10,
 );
 
-// Text colors
+/* Text colors */
 $text-dark: $bsr-black-90;
 $text-light: $bsr-white-100;
 $text-primary: $bsr-orange-100;
@@ -107,6 +107,5 @@ $text-secondary: $bsr-brick-100;
     grey100: $bsr-grey-100;
     white: $bsr-white-100;
 }
-// Background-shadow (Modal)
-// $modal-bg-color: rgb(30, 30, 30, 0.8); // #1E1E1ECC
-$modal-bg-color: $bsr-white-100
+/* Background-shadow (Modal) */
+$modal-bg-color: rgb(30, 30, 30, 0.8); /* #1E1E1ECC */

package/dist/styles/variables/_fonts.scss

@@ -1,9 +1,50 @@
+/* TradeGothicNextSR Regular */
+/* @font-face {
+    font-family: "TradeGothicNextSR";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""), url("../../assets/fonts/TradeGothicNextSR/TradeGothicNextSoftRoundedRegular_normal_normal.woff2") format("woff2");
+} */
+
+/* TradeGothicNextSR Bold */
+/* @font-face {
+    font-family: "TradeGothicNextSR";
+    font-style: normal;
+    font-weight: 700;
+    src: local(""), url("../../assets/fonts/TradeGothicNextSR/TradeGothicNextSoftRoundedBold_normal_normal.woff2") format("woff2");
+} */
+
+/* TradeGothicNext Regular */
+/* @font-face {
+    font-family: "TradeGothicNext";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""), url("../../assets/fonts/TradeGothicNextLT/TradeGothicNextRegular_normal_normal.woff2") format("woff2");
+} */
+
+/* TradeGothicNext Bold */
+/* @font-face {
+    font-family: "TradeGothicNext";
+    font-style: normal;
+    font-weight: 700;
+    src: local(""), url("../../assets/fonts/TradeGothicNextLT/TradeGothicNextBold_normal_normal.woff2") format("woff2");
+} */
+
+/* TradeGothicNext Condensed */
+/* for future use */
+/* @font-face {
+     font-family: "TradeGothicNextCondensed";
+     font-style: normal;
+     font-weight: 400;
+     src: local(""), url("../../assets/fonts/TradeGothicNextLT/TradeGothicNextCondensed_normal_condensed.woff2") format("woff2");
+ }
+*/
 $fontsize-base: 18px;
 
-$fontfamily-base: "TradeGothicNextLT", sans-serif;
+$fontfamily-base: "TradeGothicNext", sans-serif;
 $fontfamily-heading: "TradeGothicNextSR", sans-serif;
 
-// Font sizes
+/* Font sizes */
 $h1-fontsize: 48px;
 $h2-fontsize: 36px;
 $h3-fontsize: 28px;
@@ -48,7 +89,7 @@ $textlink-subline-font-size: 14px;
 
 $listItem-font-size: 18px;
 
-// Line heights
+/* Line heights */
 $lineheight-base: 26px;
 
 $h1-lineheight: 56px;
@@ -96,11 +137,11 @@ $textlink-line-height: 26px;
 
 $listItem-line-height: 26px;
 
-// Font weights
+/* Font weights */
 $fontweight-normal: 400;
 $fontweight-bold: 700;
 
-// Letter spacing
+/* Letter spacing */
 $letter-spacing-xs: 0.2px;
 $letter-spacing-sm: 0.32px;
 $letter-spacing-md: 0.4px;

package/dist/styles/variables/_gaps.scss

@@ -1,15 +1,15 @@
-// bsr-spacing-1x
+/* bsr-spacing-1x */
 $base-gap: 4px;
 
-// default module gap large
+/* default module gap large */
 $module-gap-lg: 10 * $base-gap;
 
-// default module gap small
+/* default module gap small */
 $module-gap-sm: 5 * $base-gap;
 
 $grid-gutter-width: 20px;
 
-// Text Margins
+/* Text Margins */
 $default-text-margin-bottom: $base-gap * 10;
 $default-text-margin-bottom-sm: $base-gap * 8;
 

package/dist/styles/variables/_images.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 
-//  Aspect Ratio
+/*  Aspect Ratio */
 $aspect-ratio-16-9: math.div(16, 9);
 $aspect-ratio-4-3: math.div(4, 3);
 

package/dist/styles/variables/_shadows.scss

@@ -1,4 +1,4 @@
-// box shadow
+/* box shadow */
 $bsr-shadow-default: 0px 2px 12px 0px rgba(0, 0, 0, 0.10);
 $bsr-shadow-hover: 0px 2px 12px 0px rgba(0, 0, 0, 0.30);
 

package/dist/styles/variables/_variables.scss

@@ -1,15 +1,15 @@
-@import 'colors';
-@import 'gaps';
-@import 'responsive';
-@import 'shadows';
-@import 'borders';
-@import 'fonts';
-@import 'images';
-@import 'fonts';
-@import 'buttons';
-@import 'focus';
+@import '_colors.scss';
+@import '_gaps.scss';
+@import '_responsive.scss';
+@import '_shadows.scss';
+@import '_borders.scss';
+@import '_fonts.scss';
+@import '_images.scss';
+@import '_fonts.scss';
+@import '_buttons.scss';
+@import '_focus.scss';
 
-$font-family-main: 'Manrope';
+$font-family-main: 'TradeGothicNext', sans-serif;
 $base-transition: all 0.2s ease-in;
 $transition-duration-base: 0.2s;
 $transition-duration-short: 0.1s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.0.22",
+  "version": "0.2.7",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",
@@ -63,11 +63,12 @@
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.3",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.8",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-env": "^7.26.8",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@pinuts/build-scripts": "^1.1.0",
     "@pinuts/eslint-config-pinuts-react": "^2.0.1",
     "babel-loader": "^9.1.2",
@@ -81,6 +82,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.2.0",
     "i18next": "^22.4.14",
     "npm": "^9.4.2",
     "prop-types": "^15.7.2",
@@ -92,6 +94,9 @@
     "react-router-dom": "^6.11.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.77.2",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1"

package/tsconfig.json

@@ -1,11 +1,12 @@
 {
     // Change this to match your project
-    "include": ["src/**/*.js", "src/**/*.jsx"],
+    "include": ["src/**/*.js", "src/**/*.jsx", "src/assets/Icon.tsx"],
     "exclude": ["node_modules", "src/assets","**/*.svg"],
     "compilerOptions": {
         // Tells TypeScript to read JS files, as
         // normally they are ignored as source files
         "allowJs": true,
+        "allowSyntheticDefaultImports": true,
         // Generate d.ts files
         "declaration": true,
         // This compiler run should