digitinary-ui 1.0.258 → 1.0.260

package/dist/types/all.scss.d.ts

@@ -0,0 +1,5 @@
+declare module '*.module.scss' {
+    const classes: { [key: string]: string };
+    export default classes;
+  }
+  

package/dist/types/jsx.d.ts

@@ -0,0 +1,13 @@
+// In a file named `jsx.d.ts` in your project's root or a suitable directory
+declare namespace JSX {
+    interface IntrinsicElements {
+      // Define the types for HTML tags
+      div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+      span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+
+      // Define the types for custom components
+    SVG: React.SVGProps<SVGSVGElement>;
+
+    }
+  }
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digitinary-ui",
-  "version": "1.0.258",
+  "version": "1.0.260",
   "description": "Digitinary UI Library",
   "author": "Digitinary Company",
   "repository": {

package/dist/components/Accordion/style.scss

@@ -1,110 +0,0 @@
-@import '../../Global/global';
-
-.accordion-container {
-  border-top: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
-  &.disabled {
-    background-color: var(--primary-disabled);
-    color: var(--text-color-tertiary);
-  }
-
-  &.expanded {
-    border-bottom: 0.0625rem solid $border-color-neutral;
-
-    .accordion-header {
-      border-bottom: 0.0625rem solid $border-color-neutral;
-    }
-  }
-
-  &.expanded + .accordion {
-    border-top: 0.0625rem solid $border-color-neutral;
-  }
-
-  &:first-of-type {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  &:last-of-type {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
-
-.accordion-header {
-  cursor: pointer;
-  padding: 20px 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline-end: 2.5rem;
-  position: relative;
-  color: var(--text-color-primary);
-  border: 0.0625rem solid $border-color-neutral;
-  background-color: var(--background-color-white-primary);
-  font-family: Cairo;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 25px;
-  text-align: start;
-
-  &:focus {
-    outline: none;
-    border-radius: inherit;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  .iconContainer {
-    position: absolute;
-    inset-inline-end: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      path {
-        fill: var(--icon-color-main);
-      }
-    }
-  }
-
-  .dropdownIcon {
-    width: 1.5rem;
-    height: 1.5rem;
-    transition: transform 0.3s ease;
-
-    &.rotateFlip {
-      transform: rotate(180deg);
-    }
-
-    &.disabled {
-      path {
-        fill: var(--primary-disabled);
-      }
-    }
-  }
-}
-
-.accordion-details {
-  display: none;
-  background-color: var(--background-color-white-primary);
-  border: 0.0625rem solid $border-color-neutral;
-  padding: 1rem;
-  border-bottom: 0px;
-
-  &.expanded {
-    display: block;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}

package/dist/components/ActionDropdown/style.scss

@@ -1,97 +0,0 @@
-.actions-menu-container {
-  position: absolute;
-  z-index: 3;
-  width: fit-content;
-
-  .triangle-container {
-    width: 100%;
-    display: flex;
-    justify-content: end;
-    position: relative;
-
-    html[dir='rtl'] &,
-    html[lang='ar'] & {
-      justify-content: start;
-    }
-
-    .triangle {
-      height: 11px;
-      width: 11px;
-      border: 1px solid var(--background-color-gray-50);
-      rotate: 45deg;
-      z-index: -1;
-      position: absolute;
-
-      right: 30px;
-      left: auto;
-
-      html[dir='rtl'] &,
-      html[lang='ar'] & {
-        right: auto;
-        left: 12px;
-      }
-    }
-  }
-
-  .actions-list {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--background-color-gray-50);
-    z-index: 3;
-    border-radius: 5px;
-    background-color: var(--background-color-white-primary);
-    overflow: overlay;
-    min-width: 120px;
-    text-align: left;
-    direction: ltr;
-
-    html[dir='rtl'] &,
-    html[lang='ar'] & {
-      text-align: right;
-      direction: rtl;
-
-      transform: rotateY(180deg);
-
-      .dropdown-item {
-        transform: rotateY(180deg);
-        text-align: right;
-      }
-    }
-
-    &::-webkit-scrollbar {
-      width: 3px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgb(226, 227, 229);
-      border-radius: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgb(129, 129, 129);
-      border-radius: 5px;
-      border: 2px solid rgb(129, 129, 129);
-    }
-  }
-
-  .dropdown-item {
-    &:hover {
-      background-color: var(--background-color-gray-40);
-    }
-
-    text-align: left;
-
-    html[dir='rtl'] &,
-    html[lang='ar'] & {
-      text-align: right;
-    }
-  }
-}
-
-.action-dropdown-container {
-  .more-square-button {
-    border: none;
-    background-color: #ffffff00;
-    cursor: pointer;
-  }
-}

package/dist/components/Alert/style.scss

@@ -1,244 +0,0 @@
-@import '../../Global/global';
-
-.alertContainer {
-  width: 100%;
-  padding: 0.9375rem 1.25rem;
-  border-radius: 0.3125rem;
-  column-gap: 0.625rem;
-  font-size: 0.875rem;
-  position: relative;
-  display: flex;
-  align-items: center;
-  transition:
-    opacity 0.5s,
-    max-height 0.5s ease,
-    padding 0.5s ease;
-  opacity: 1;
-  height: fit-content;
-  max-height: fit-content;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 20px auto;
-  &.exit {
-    opacity: 0;
-    max-height: 0;
-    padding: 0 1.25rem;
-  }
-
-  .alertIcon {
-    min-width: 1.25rem;
-    min-height: 1.25rem;
-    margin-top: 0.25rem;
-  }
-
-  + .alertContent {
-    margin-inline-start: 2rem;
-  }
-
-  .alertIcon {
-    &.success {
-      &.default {
-        path {
-          fill: var(--black);
-        }
-      }
-
-      &.outlined {
-        path {
-          fill: var(--alert-success);
-        }
-      }
-
-      &.filled {
-        path {
-          fill: var(--white);
-        }
-      }
-    }
-    &.natural {
-      &.default {
-        path {
-          fill: var(--black);
-        }
-      }
-      &.outlined {
-        path {
-          fill: var(--alert-natural);
-        }
-      }
-      &.filled {
-        path {
-          fill: var(--white);
-        }
-      }
-    }
-    &.info {
-      &.default {
-        path {
-          fill: var(--black);
-        }
-      }
-
-      &.outlined {
-        path {
-          fill: var(--alert-info);
-        }
-      }
-
-      &.filled {
-        path {
-          fill: var(--white);
-        }
-      }
-    }
-
-    &.warning {
-      &.default {
-        path {
-          fill: var(--black);
-        }
-      }
-
-      &.outlined {
-        path {
-          fill: var(--alert-warning);
-        }
-      }
-
-      &.filled {
-        path {
-          fill: var(--white);
-        }
-      }
-    }
-
-    &.error {
-      &.default {
-        path {
-          fill: var(--black);
-        }
-      }
-
-      &.outlined {
-        path {
-          fill: var(--alert-error);
-        }
-      }
-
-      &.filled {
-        path {
-          fill: var(--white);
-        }
-      }
-    }
-  }
-
-  .alertContent {
-    min-height: 1.125rem;
-  }
-
-  .actionContainer {
-    display: flex;
-    column-gap: 0.625rem;
-    width: fit-content;
-    height: fit-content;
-    position: absolute;
-    top: 1.125rem;
-    inset-inline-end: 1rem;
-
-    .closeIcon {
-      cursor: pointer;
-
-      &:focus:not(:focus-visible) {
-        outline: none;
-      }
-    }
-  }
-
-  &.success {
-    &.default {
-      background: var(--alert-light-success);
-      color: var(--black);
-    }
-
-    &.outlined {
-      background: transparent;
-      color: var(--alert-success);
-      border: 1px solid var(--alert-success);
-    }
-
-    &.filled {
-      background: var(--alert-success);
-      color: var(--white);
-    }
-  }
-  &.natural {
-    &.default {
-      background: var(--alert-natural);
-      color: var(--black);
-    }
-
-    &.outlined {
-      background: transparent;
-      color: var(--alert-natural);
-      border: 1px solid var(--alert-natural);
-    }
-    &.filled {
-      background: var(--alert-natural);
-      color: var(--white);
-    }
-  }
-  &.info {
-    &.default {
-      background: var(--alert-light-info);
-      color: var(--black);
-    }
-
-    &.outlined {
-      background: transparent;
-      color: var(--alert-info);
-      border: 1px solid var(--alert-info);
-    }
-
-    &.filled {
-      background: var(--alert-info);
-      color: var(--white);
-    }
-  }
-
-  &.warning {
-    &.default {
-      background: var(--alert-light-warning);
-      color: var(--black);
-    }
-
-    &.outlined {
-      background: transparent;
-      color: var(--alert-warning);
-      border: 1px solid var(--alert-warning);
-    }
-
-    &.filled {
-      background: var(--alert-warning);
-      color: var(--white);
-    }
-  }
-
-  &.error {
-    &.default {
-      background: var(--alert-light-error);
-      color: var(--black);
-    }
-
-    &.outlined {
-      background: transparent;
-      color: var(--alert-error);
-      border: 1px solid var(--alert-error);
-    }
-
-    &.filled {
-      background: var(--alert-error);
-      color: var(--white);
-    }
-  }
-}