kahuna-base-react-components 1.2.12 → 1.3.2

package/src/components/KSelectRangeDate/KSelectRangeDateCustom.css

@@ -0,0 +1,351 @@
+.left-calendar {
+    border-top-right-radius: 0 !important;
+    border-right: none !important;
+}
+
+.react-calendar.kselect-range {
+    width: 350px;
+    max-width: 100%;
+    background: white;
+    /*border: 1px solid #E7E7E7;*/
+    border: 1px solid #F3F3F3;
+    font-family: Inter !important;
+    line-height: 1.125em;
+    border-top-right-radius: 16px;
+    border-top-left-radius: 0px;
+    padding: 20px;
+    font-size: 14px;
+    color: #1F1F1F;
+    font-weight: 500;
+}
+
+.kselect-range .react-calendar--doubleView {
+    width: 700px;
+}
+
+.kselect-range .react-calendar--doubleView .react-calendar__viewContainer {
+    display: flex;
+    margin: -0.5em;
+    border-radius: 16px;
+}
+
+.kselect-range .react-calendar--doubleView .react-calendar__viewContainer>* {
+    width: 50%;
+    margin: 0.5em;
+}
+
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.kselect-range .react-calendar button {
+    margin: 0;
+    border: 0;
+    outline: none;
+}
+
+.kselect-range .react-calendar button:enabled:hover {
+    cursor: pointer;
+}
+
+.kselect-range .react-calendar__navigation {
+    display: flex;
+    height: 36px;
+    align-items: center;
+}
+
+.kselect-range .react-calendar__navigation button {
+    width: 44px;
+    color: #111;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: -0.176px;
+    background: none;
+}
+
+.kselect-range .react-calendar__navigation button:disabled {
+    background-color: #FFF;
+}
+
+.kselect-range .react-calendar__navigation button:enabled:hover,
+.kselect-range .react-calendar__navigation button:enabled:focus {
+    background-color: #F0F0F0;
+}
+
+.kselect-range .react-calendar__month-view__weekdays {
+    text-align: center;
+    text-transform: uppercase;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: bold;
+}
+
+.kselect-range .react-calendar__month-view__weekdays__weekday {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: -0.084px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.kselect-range .react-calendar__month-view__weekNumbers .react-calendar__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: bold;
+    position: relative;
+}
+
+.kselect-range .react-calendar__month-view__days {
+    justify-content: space-between;
+
+}
+
+.kselect-range .react-calendar__month-view__days__day {
+    flex-basis: auto !important;
+    border-radius: 20px;
+}
+
+.kselect-range .react-calendar__month-view__days__day--weekend {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+    letter-spacing: -0.084px;
+    color: #1F1F1F;
+}
+
+.kselect-range .react-calendar__month-view__days__day--neighboringMonth,
+.kselect-range .react-calendar__decade-view__years__year--neighboringDecade,
+.kselect-range .react-calendar__century-view__decades__decade--neighboringCentury {
+    color: #D6D6D6;
+}
+
+.kselect-range .react-calendar__year-view .react-calendar__tile,
+.kselect-range .react-calendar__decade-view .react-calendar__tile,
+.kselect-range .react-calendar__century-view .react-calendar__tile {
+    padding: 0;
+    /*old value : 2em 0.5em*/
+}
+
+.kselect-range .react-calendar__navigation__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px !important;
+    height: 24px;
+    border-radius: 12px;
+    ;
+}
+
+.kselect-range .react-calendar__tile {
+    height: 40px;
+    width: 40px !important;
+    background: none;
+    text-align: center;
+    font: inherit;
+}
+
+.kselect-range .react-calendar__tile:disabled {
+    background-color: #f0f0f0;
+    color: #ababab;
+}
+
+.kselect-range .react-calendar__month-view__days__day--neighboringMonth:disabled,
+.kselect-range .react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.kselect-range .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+    color: #cdcdcd;
+}
+
+.kselect-range .react-calendar__tile:enabled:hover,
+.kselect-range .react-calendar__tile:enabled:focus {
+    background-color: #F0F0F0;
+}
+
+.kselect-range .react-calendar__tile--now {
+    background: #F2FE67
+}
+
+.kselect-range .react-calendar__tile--now:enabled:hover,
+.kselect-range.react-calendar__tile--now:enabled:focus {
+    background: #FFFFA9;
+}
+
+.kselect-range .react-calendar__tile--hasActive {
+    background: #111111;
+    /*76baff*/
+    color: #FFFFFF;
+}
+
+.kselect-range .react-calendar__tile--hasActive:enabled:hover,
+.kselect-range .react-calendar__tile--hasActive:enabled:focus {
+    background: #111111;
+    /*old value: #a9d4ff*/
+}
+
+.kselect-range .react-calendar__tile--active {
+    background-color: #111;
+    color: white;
+    border-radius: 0px;
+    height: 40px;
+    width: 40px !important;
+}
+.react-calendar__tile--hover.react-calendar__tile--active {
+    background-color: #111 !important;
+}
+.kselect-range .react-calendar__tile--active:enabled:focus {
+    background: #111111;
+    /*old value: 1087ff*/
+}
+
+.kselect-range .react-calendar--selectRange .react-calendar__tile--hover {
+    background-color: #F0F0F0;
+}
+
+.kselect-range .react-calendar__month-view__weekdays__weekday {
+    text-decoration: none !important;
+}
+
+.kselect-range .react-calendar__month-view__weekdays__weekday--weekend {
+    text-decoration: none;
+}
+
+abbr:where([title]) {
+    text-decoration: none !important;
+    color: #3D3D3D;
+}
+
+.kselect-range .react-calendar__navigation__label__labelText {
+    color: #111;
+    font-size: 16px;
+    font-weight: 500 !important;
+    line-height: 24px;
+    letter-spacing: -0.176px;
+}
+
+.kselect-range .react-calendar__year-view__months {
+    row-gap: 8px;
+}
+
+.kselect-range .react-calendar__year-view__months__month {
+    padding: 0px !important;
+    position: relative;
+}
+
+.kselect-range .active-month-first-month {
+    background-color: #F0F0F0 !important;
+    border-top-left-radius: 999px !important;
+    border-bottom-left-radius: 999px !important;
+}
+
+.active-month-first-month .tile-content-external-div {
+    background-color: #111;
+    border-radius: 999px !important;
+}
+
+.kselect-range .active-month-last-month {
+    background-color: #F0F0F0 !important;
+    border-top-right-radius: 999px !important;
+    border-bottom-right-radius: 999px !important;
+}
+
+.active-month-last-month .tile-content-external-div {
+    background-color: #111;
+    border-radius: 999px !important;
+}
+
+.kselect-range .active-month-range-month-left {
+    background: linear-gradient(90deg, #FFF 0%, #F0F0F0 30.28%, #F0F0F0 100%);
+    color: #1F1F1F;
+}
+
+.kselect-range .active-month-range-month-middle {
+    background-color: #F0F0F0 !important;
+    color: #1F1F1F;
+}
+
+.kselect-range .active-month-range-month-right {
+    background: linear-gradient(90deg, #F0F0F0 0%, #F0F0F0 69.72%, #FFF 100%);
+    color: #1F1F1F;
+}
+.range-bottom-center {
+    top: 100%;
+    margin-top: 10px;
+    left:50%;
+    transform: translateX(-50%);
+}
+.range-bottom-left {
+    top: 100%;
+    margin-top: 10px;
+    left:0%;
+    transform: translateX(-100%);
+}
+.range-bottom-right {
+    top: 100%;
+    margin-top: 10px;
+    left:100%;
+}
+.range-top-center {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:50%;
+    transform: translateX(-50%);
+}
+.range-top-left {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:0%;
+    transform: translateX(-100%);
+}
+.range-top-right {
+    bottom: 100%;
+    margin-bottom: 10px;
+    left:100%;
+}
+.range-left-center {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    margin-right: 10px;
+}
+.range-left-top {
+    top: 0%;
+    right: 100%;
+    transform: translateY(-100%);
+    margin-right: 10px;
+}
+.range-left-bottom {
+    top: 100%;
+    right: 100%;
+    margin-right: 10px;
+}
+.range-right-center {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+}
+.range-right-top {
+    top: 0%;
+    left: 100%;
+    transform: translateY(-100%);
+    margin-left: 10px;
+}
+.range-right-bottom {
+    top: 100%;
+    left: 100%;
+    margin-left: 10px;
+}

package/src/components/KSelectRangeDate/index.ts

@@ -0,0 +1 @@
+export {default} from './KSelectRangeDate';

package/src/index.ts

@@ -11,6 +11,7 @@ import KTooltip from "./components/KTooltip"
 import KSliderLabel from "./components/KSliderLabel"
 import KCodeInput from "./components/KCodeInput"
 import KSelectRange from "./components/KSelectRange"
+import KSelectRangeDate from "./components/KSelectRangeDate"
 
 export {
   KButton,
@@ -25,5 +26,6 @@ export {
   KTooltip,
   KSliderLabel,
   KCodeInput,
-  KSelectRange
+  KSelectRange,
+  KSelectRangeDate
 }

package/src/languages/en.json

@@ -18,6 +18,11 @@
         "range": "Range"
     },
     "button_text": {
+        "yesterday": "Yesterday",
+        "last_three_days": "Last 3 days",
+        "last_week": "Last week",
+        "last_two_week": "Last 2 week",
+        "last_month": "Last Month",
         "last_three_months": "Last 3 months",
         "last_six_months": "Last 6 months",
         "last_twelve_months": "Last 12 months",

package/src/languages/tr.json

@@ -18,6 +18,11 @@
         "range": "Tarih Aralığı"
     },
     "button_text": {
+        "yesterday": "Dün",
+        "last_three_days": "Son 3 gün",
+        "last_week": "Son hafta",
+        "last_two_week": "Son 2 hafta",
+        "last_month": "Son ay",
         "last_three_months": "Son 3 ay",
         "last_six_months": "Son 6 ay",
         "last_twelve_months": "Son 12 ay",