Dev bqx

README.md

@@ -1,15 +1,16 @@
-# Aurora UI Library  <img src="https://img.shields.io/badge/State-developing-blue" alt="State" />
+# Aurora UI Library <img src="https://img.shields.io/badge/State-developing-blue" alt="State" />
 
 ![Logo](/public/README.jpg)
 
 > [!WARNING]
 > 🚧 Unstable 🚧
-> 
-> Aurora UI is published in order to get feedback on the design and not ready for production. Breaking changes are likely to happen frequently. 
+>
+> Aurora UI is published in order to get feedback on the design and not ready for production. Breaking changes are likely to happen frequently.
 
 Aurora [ɔ:'rɔ:rə], an extensive UI library for web applications, which is designed for both mobile and desktop.
 
 ## Documentation
+
 Visit https://ui.sast.fun/ to view the universal documentation (developing).
 
 Visit http://sast-ui-react.vercel.app/ to view the react documentation (beta).
@@ -26,5 +27,5 @@ Visit http://sast-ui-react.vercel.app/ to view the react documentation (beta).
 We welcome all contributions, please read the [contributing guide](/CONTRIBUTING.md). You can submit any ideas as pull requests or as issues.
 
 ## Repo status
-![Alt](https://repobeats.axiom.co/api/embed/8ffc434c3e60c65b3082a253ef29dee2a8be0dbe.svg "Repobeats analytics image")
 
+![Alt](https://repobeats.axiom.co/api/embed/62d195cb52045b5b58df0644680ca56a0d45bba9.svg "Repobeats analytics image")

package.json

@@ -7,10 +7,10 @@
   "scripts": {
     "ui-uni:dev": "pnpm --filter @sast/ui-universal dev",
     "ui-uni:build": "pnpm --filter @sast/ui-universal build",
-    "ui-react:start": "pnpm --filter @sast/ui-react dev:lib",
-    "ui-react:dev": "pnpm --filter @sast/ui-react dev",
-    "ui-react:build": "pnpm --filter @sast/ui-react build:lib",
-    "ui-react:build-story": "pnpm --filter @sast/ui-react build",
+    "ui-react:start": "pnpm --filter @ui-aurora/react dev:lib",
+    "ui-react:dev": "pnpm --filter @ui-aurora/react dev",
+    "ui-react:build": "pnpm --filter @ui-aurora/react build:lib",
+    "ui-react:build-story": "pnpm --filter @ui-aurora/react build",
     "docs:dev": "pnpm --filter @sast/ui-docs dev",
     "commit": "git add . && pnpm lint-staged -p false && pnpm cz",
     "prepare": "husky"

packages/ui-react/lib/Accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styles from './Accordion.module.scss';
 import classnames from 'classnames';
+import { ChevronDown } from 'lucide-react';
 
 export interface AccordionProps {
   /**
@@ -38,18 +39,10 @@ export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
           disabled={disabled}
         >
           <div> {accordionTrigger}</div>
-          <svg
-            width={15}
-            height={15}
+          <ChevronDown
+            size={15}
             className={`${styles['icon']} ${visible ? styles['rotate'] : ''}`}
-          >
-            <path
-              d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
-              fill="currentColor"
-              fillRule="evenodd"
-              clipRule="evenodd"
-            ></path>
-          </svg>
+          />
         </button>
         <div className={styles['accordionContentWrap']}>
           <div className={`${styles['inner']} ${visible ? styles['show'] : ''}`}>

packages/ui-react/lib/Badge/Badge.module.scss

@@ -1,8 +1,4 @@
-@use '../_variables/color.scss' as *;
-@use '../_variables/radius.scss' as *;
-@use '../_variables/shadow.scss' as *;
-@use '../_variables/duration.scss' as *;
-@use '../_variables/animation.scss' as *;
+@use '../variables' as *;
 @mixin color-badge($color-name) {
   background-color: $color-name;
   color: $white-color;
@@ -11,6 +7,7 @@
 
 .base {
   border-radius: $radius-5;
+  display: inline-flex;
   @include shadow;
   transition: all $duration-100 $cubic-bezier;
   &:hover {

packages/ui-react/lib/Button/Button.module.scss

@@ -1,5 +1,4 @@
 @use '../variables' as *;
-@use '../_variables/color.scss' as *;
 .base {
   background-color: $primary-color;
   color: $white-color;
@@ -56,15 +55,15 @@
     filter: grayscale(1);
   }
   &.small {
-    padding: 5px;
+    padding: 6px 7px;
     font-size: 12px;
   }
   &.medium {
-    padding: 10px;
+    padding: 8px 10px;
     font-size: 16px;
   }
   &.large {
-    padding: 15px;
+    padding: 15px 18px;
     font-size: 20px;
   }
 }

packages/ui-react/lib/Calendar/Calendar.module.scss

@@ -8,7 +8,7 @@ $animation-duration: $duration-300;
   background-color: var(--white-color);
   color: var(--black-color);
   box-shadow: $shadow;
-  min-width: 19.6875rem;
+  min-width: 18rem;
   .calendarTitle {
     font-size: 18px;
     font-weight: 1000;
@@ -69,15 +69,16 @@ $animation-duration: $duration-300;
     }
   }
   .weekdays {
-    grid-column: 1 / 8;
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
     background-color: var(--title-shadow);
     box-sizing: border-box;
     gap: 5px;
     padding: 10px;
     border-radius: 5px;
     font-weight: 600;
     color: var(--shadow-color);
+    justify-items: center;
     .weekday {
       font-size: 14px;
       width: 35px;

packages/ui-react/lib/Calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import styles from './Calendar.module.scss';
 import DayItem from './DayItem';
 import { Button } from '..';
+import { ChevronsLeft, ChevronsRight } from 'lucide-react';
 
 export interface CalendarProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
   /**
@@ -103,32 +104,20 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
               onClick={() => changeMonth(true)}
               className={styles['button']}
             >
-              <svg
-                width="16"
-                height="16"
-                fill="#333333"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M11.7265 12L12.6665 11.06L9.61317 8L12.6665 4.94L11.7265 4L7.7265 8L11.7265 12Z" />
-                <path d="M7.33344 12L8.27344 11.06L5.2201 8L8.27344 4.94L7.33344 4L3.33344 8L7.33344 12Z" />
-              </svg>
+              <ChevronsLeft
+                size={16}
+                color="#333333"
+              />
             </Button>
             <Button
               color="border"
               onClick={() => changeMonth(false)}
               className={styles['button']}
             >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="#333333"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M4.2735 4L3.3335 4.94L6.38683 8L3.3335 11.06L4.2735 12L8.2735 8L4.2735 4Z" />
-                <path d="M8.66656 4L7.72656 4.94L10.7799 8L7.72656 11.06L8.66656 12L12.6666 8L8.66656 4Z" />
-              </svg>
+              <ChevronsRight
+                size={16}
+                color="#333333"
+              />
             </Button>
           </div>
           <span>

packages/ui-react/lib/Card/Card.module.scss

@@ -35,8 +35,8 @@ $radius: $radius-8;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      min-height: 100px;
       flex-grow: 1;
+      // min-height: 100px;
       .header {
         width: 100%;
       }

packages/ui-react/lib/Card/Card.tsx

@@ -62,6 +62,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       className = '',
       padding = 20,
       gap = 8,
+      width,
       ...rest
     },
     ref,
@@ -78,6 +79,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
         ref={ref}
         className={`${cardClass} ${className}`}
         {...rest}
+        style={{ width: `${width}px` }}
       >
         {titleImage && <div className={styles['titleImage']}>{<>{titleImage}</>}</div>}
         <div
@@ -91,7 +93,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
             {header && <div className={styles['header']}>{header}</div>}
             {mainContent && <div className={styles['content']}>{mainContent}</div>}
           </div>
-          {footer && <div className={styles['footer']}>{footer}</div>}{' '}
+          {footer && <div className={styles['footer']}>{footer}</div>}
         </div>
       </div>
     );

packages/ui-react/lib/Checkbox/Checkbox.module.scss

@@ -20,11 +20,16 @@
     border-radius: 6px;
     cursor: inherit;
     transition: all 0.2s $cubic-bezier;
-    .checkPath {
-      stroke-dasharray: 24;
-      stroke-dashoffset: 24;
-      animation: draw 0.3s linear forwards;
-      animation-delay: 0.2s;
+    .check-icon {
+      path {
+        stroke: white;
+        stroke-dasharray: 24;
+        stroke-dashoffset: 24;
+        animation: draw 0.3s linear forwards;
+        animation-delay: 0.2s;
+        stroke-width: 3;
+        animation-direction: reverse;
+      }
     }
     &::after {
       content: '';
@@ -55,10 +60,10 @@
 }
 
 @keyframes draw {
-  50% {
-    stroke-dashoffset: 18;
+  0% {
+    stroke-dashoffset: 0;
   }
   100% {
-    stroke-dashoffset: 0;
+    stroke-dashoffset: -24;
   }
 }

packages/ui-react/lib/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styles from './Checkbox.module.scss';
 import classNames from 'classnames';
+import { Check } from 'lucide-react';
 export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * value of the checkbox
@@ -55,20 +56,10 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           {...rest}
         >
           {isChecked && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path
-                className={`${styles['checkPath']} ${styles[isChecked ? 'checked' : '']}`}
-                fill="none"
-                stroke="white"
-                strokeWidth="4.5"
-                d="M4 12 L9 17 L20 6"
-              />
-            </svg>
+            <Check
+              size={16}
+              className={styles['check-icon']}
+            />
           )}
         </button>
         <label className={styles['labelSpan']}>{label}</label>

packages/ui-react/lib/DatePicker/DatePicker.module.scss

@@ -26,20 +26,10 @@ $border: $border-1;
   &.is-select-date {
     border: $border solid var(--primary-color) !important;
     color: var(--primary-color) !important;
-    svg {
-      fill: var(--primary-color) !important;
-    }
-  }
-  svg {
-    fill: var(--shadow-color);
-    transition: all $animation-duration $cubic-bezier;
   }
   &:hover {
     color: var(--primary-color) !important;
     border: $border solid var(--primary-color) !important;
-    svg {
-      fill: var(--primary-color);
-    }
   }
 }
 .calendar-container {

packages/ui-react/lib/DatePicker/DatePicker.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Calendar } from '..';
 import styles from './DatePicker.module.scss';
+import { CalendarDays } from 'lucide-react';
 
 export interface DatePickerProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
   /**
@@ -50,8 +51,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
       const newCalendarVisible = !calendarVisible;
       if (newCalendarVisible) {
         openCalendar();
-      }
-      if (!newCalendarVisible) {
+      } else {
         closeCalendar();
       }
     };
@@ -74,7 +74,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
       }, 200);
     };
 
-    console.log('selectDateString', selectDateString);
+    // console.log('selectDateString', selectDateString);
 
     return (
       <>
@@ -89,19 +89,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
              ${styles[selectDateString ? 'have-select-date' : '']}`}
             onClick={handleCalendarVisible}
           >
-            <svg
-              width="15"
-              height="15"
-              viewBox="0 0 15 15"
-              xmlns="http://www.w3.org/2000/svg"
-              className="mr-2 h-4 w-4"
-            >
-              <path
-                d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z"
-                fillRule="evenodd"
-                clipRule="evenodd"
-              ></path>
-            </svg>
+            <CalendarDays size={18} />
             {!selectDateString ? (
               <span>Pick a date</span>
             ) : (

packages/ui-react/lib/Dialog/Dialog.module.scss

@@ -1,6 +1,4 @@
-@use '../_variables/shadow.scss' as *;
-@use '../_variables/animation.scss' as *;
-@use '../_variables/color.scss' as *;
+@use '../variables' as *;
 
 @property --blur {
   syntax: '<length>';