athameui 0.0.7 → 0.0.9-c

package/dist/styles/components/form-label.css

@@ -0,0 +1,42 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-form-input-label {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    display: flex;
+    gap: 0.25rem;
+    color: var(--color-primary-900);
+  }
+
+  .ath-form-input-label-dark {
+    color: var(--color-tertiary-50);
+  }
+
+  .ath-form-input-label-left {
+    flex-direction: row;
+    margin-right: 0.5rem;
+    align-self: flex-start;
+  }
+
+  .ath-form-input-label-right {
+    flex-direction: row-reverse;
+    margin-left: 0.5rem;
+    align-self: flex-end;
+  }
+
+  .ath-form-input-label-above {
+    /* flex-direction: column; */
+    margin-bottom: 0.25rem;
+  }
+
+  .ath-form-input-label-below {
+    flex-direction: column-reverse;
+    margin-top: 0.25rem;
+  }
+
+  .ath-form-input-label-required {
+    color: var(--color-error-500);
+    font-size: var(--font-size-md);
+  }
+}

package/dist/styles/components/main.css

@@ -4,11 +4,20 @@
   .ath-main {
     overflow-x: hidden;
     position: relative;
-    padding: 32px;
+    padding: 25px 0;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 20px;
-    flex-grow: 1;
+    flex: 1;
+    min-height: 100vh;
+  }
+
+  .ath-main-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    max-width: 1200px;
+    padding: 0 15px;
   }
 }

package/dist/styles/components/modals.css

@@ -52,7 +52,8 @@
 
   .ath-modal-content {
     padding: 1.5rem;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     flex: 1;
     display: flex;
     justify-content: center;

package/dist/styles/components/slide-out.css

@@ -0,0 +1,69 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-slide-out {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .ath-slide-out-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-end;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+  }
+
+  .ath-slide-out-overlay-open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .ath-slide-out-panel {
+    position: fixed;
+    top: 0;
+    z-index: 100;
+    background-color: var(--color-primary-500);
+    width: 280px;
+    height: 100%;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.1s ease-in-out;
+  }
+
+  .ath-slide-out-from-left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  .ath-slide-out-from-right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  .ath-slide-out-panel-open {
+    transform: translateX(0);
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .ath-slide-out-close-button {
+    padding: 0;
+    align-self: flex-end;
+    margin-bottom: 10px;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}

package/dist/styles/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./mediaQueries";
+export * from "./breakpoints";
 export * from "./tokens";
 //# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/styles/index.ts

@@ -1,2 +1,2 @@
-export * from "./mediaQueries";
+export * from "./breakpoints";
 export * from "./tokens";

package/dist/styles/theme.css

@@ -1,12 +1,16 @@
 @import "./components/accordion.css";
 @import "./components/avatar.css";
+@import "./components/block.css";
 @import "./components/button.css";
 @import "./components/button-group.css";
+@import "./components/dropdown.css";
 @import "./components/footer.css";
-@import "./components/form-elements.css";
+@import "./components/form-input.css";
+@import "./components/form-label.css";
 @import "./components/header.css";
 @import "./components/list.css";
 @import "./components/main.css";
 @import "./components/modals.css";
 @import "./components/search.css";
+@import "./components/slide-out.css";
 @import "./tokens.css";

package/dist/styles/tokens.css

@@ -126,36 +126,46 @@
   --radius-lg: 8px;
 
   /* ----- Font Sizes ----- */
-  --font-size-xs: 0.625rem;
-  --font-size-sm: 0.75rem;
-  --font-size-md: 0.875rem;
-  --font-size-lg: 1rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-  --font-size-4xl: 2.5rem;
-  --font-size-5xl: 3rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --font-size-3xl: 2.5rem;
+  --font-size-4xl: 3rem;
+  --font-size-5xl: 3.5rem;
 
   /* ----- Screen Sizes ----- */
-  --screen-xs: 360px;
+  /* --screen-xs: 320px;
   --screen-sm: 480px;
-  --screen-md: 768px;
-  --screen-lg: 896px;
-  --screen-xl: 1024px;
-  --screen-2xl: 1280px;
-  --screen-3xl: 1536px;
+  --screen-md: 620px;
+  --screen-lg: 768px;
+  --screen-xl: 896px;
+  --screen-2xl: 1024px;
+  --screen-3xl: 1280px;
+  --screen-4xl: 1536px; */
+
+  --screen-xs: 320;
+  --screen-sm: 480;
+  --screen-md: 620;
+  --screen-lg: 768;
+  --screen-xl: 896;
+  --screen-2xl: 1024;
+  --screen-3xl: 1280;
+  --screen-4xl: 1536;
 
   /* ----- Media Queries ----- */
   /* Only useful for CSS-in-JS media query handling */
-  --media-min-xs: @media (min-width: 360px);
+  --media-min-xs: @media (min-width: 320px);
   --media-min-sm: @media (min-width: 480px);
-  --media-min-md: @media (min-width: 768px);
-  --media-min-lg: @media (min-width: 896px);
-  --media-min-xl: @media (min-width: 1024px);
-  --media-min-2xl: @media (min-width: 1280px);
-  --media-min-3xl: @media (min-width: 1536px);
+  --media-min-md: @media (min-width: 620px);
+  --media-min-lg: @media (min-width: 768px);
+  --media-min-xl: @media (min-width: 896px);
+  --media-min-2xl: @media (min-width: 1024px);
+  --media-min-3xl: @media (min-width: 1280px);
 
-  --media-max-xs: @media (max-width: 359px);
+  --media-max-xs: @media (max-width: 319px);
   --media-max-sm: @media (max-width: 479px);
   --media-max-md: @media (max-width: 767px);
   --media-max-lg: @media (max-width: 895px);
@@ -174,30 +184,39 @@
     -moz-osx-font-smoothing: grayscale;
     margin: 0;
   }
+
   h1 {
     color: var(--color-text-light);
-    font-size: var(--font-size-3xl);
+    font-size: var(--font-size-2xl);
+    /* font-size: var(--font-size-3xl); */
     font-weight: 300;
     margin: 0 0 1rem;
     line-height: normal;
+    @media (max-width: var(--screen-lg)) {
+      font-size: var(--font-size-4xl);
+    }
   }
+
   h2 {
     color: var(--color-primary-300);
     font-size: var(--font-size-lg);
     font-weight: 400;
     margin: 0;
   }
+
   h3 {
     color: var(--color-primary-200);
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-lg);
     font-weight: 500;
-    margin: 0;
+    margin: 0 0 0.5rem 0;
   }
+
   p {
     margin: 0;
     margin-bottom: 1rem;
     line-height: 1.5;
   }
+
   button {
     font-family: inherit;
     background-color: transparent;
@@ -207,6 +226,7 @@
       outline: none;
     }
   }
+
   a {
     text-decoration: none;
     color: inherit;

package/dist/styles/tokens.d.ts

@@ -146,15 +146,6 @@ export declare const tokens: {
         md: string;
         lg: string;
     };
-    screen: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-    };
     media: {
         min: {
             xs: string;
@@ -181,6 +172,5 @@ export type FontTokens = typeof tokens.font;
 export type ColorTokens = typeof tokens.color;
 export type PaddingTokens = typeof tokens.padding;
 export type RadiusTokens = typeof tokens.radius;
-export type ScreenTokens = typeof tokens.screen;
 export type MediaTokens = typeof tokens.media;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/styles/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLlB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AAGnC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,OAAO,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKlB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AAGnC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,OAAO,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC"}

package/dist/styles/tokens.ts

@@ -5,15 +5,15 @@ export const tokens = {
       serif: "Libre Baskerville, serif"
     },
     size: {
-      xs: "0.625rem",
-      sm: "0.75rem",
-      md: "0.875rem",
-      lg: "1rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "2rem",
-      "4xl": "2.5rem",
-      "5xl": "3rem"
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "2rem",
+      "3xl": "2.5rem",
+      "4xl": "3rem",
+      "5xl": "3.5rem"
     }
   },
   color: {
@@ -146,27 +146,18 @@ export const tokens = {
     md: "5px",
     lg: "8px"
   },
-  screen: {
-    xs: "360px",
-    sm: "480px",
-    md: "768px",
-    lg: "896px",
-    xl: "1024px",
-    "2xl": "1280px",
-    "3xl": "1536px"
-  },
   media: {
     min: {
-      xs: "@media (min-width: 360px)",
+      xs: "@media (min-width: 320px)",
       sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 896px)",
-      xl: "@media (min-width: 1024px)",
-      "2xl": "@media (min-width: 1280px)",
-      "3xl": "@media (min-width: 1536px)"
+      md: "@media (min-width: 620px)",
+      lg: "@media (min-width: 768px)",
+      xl: "@media (min-width: 896px)",
+      "2xl": "@media (min-width: 1024px)",
+      "3xl": "@media (min-width: 1280px)"
     },
     max: {
-      xs: "@media (max-width: 359px)",
+      xs: "@media (max-width: 319px)",
       sm: "@media (max-width: 479px)",
       md: "@media (max-width: 767px)",
       lg: "@media (max-width: 895px)",
@@ -184,5 +175,4 @@ export type FontTokens = typeof tokens.font;
 export type ColorTokens = typeof tokens.color;
 export type PaddingTokens = typeof tokens.padding;
 export type RadiusTokens = typeof tokens.radius;
-export type ScreenTokens = typeof tokens.screen;
 export type MediaTokens = typeof tokens.media;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "athameui",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.9-c",
   "type": "module",
   "main": "./dist/athameui.cjs",
   "module": "./dist/athameui.mjs",

package/styles/breakpoints.ts

@@ -0,0 +1,13 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 480,
+  md: 620,
+  lg: 768,
+  xl: 896,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;

package/styles/components/accordion.css

@@ -4,48 +4,48 @@
   .ath-accordion {
     display: flex;
     flex-direction: column;
-    font-size: var(--font-size-md);
     margin: 0;
     width: 100%;
     border-radius: 3px;
     overflow: hidden;
-  }
 
-  .ath-accordion-item {
-    width: 100%;
-    border-bottom: 1px solid var(--color-primary-200);
-    list-style-type: none;
-  }
+    .ath-accordion-item-heading {
+      white-space: normal;
+      width: 100%;
+      padding: 10px;
+      background-color: transparent;
+      border: none;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      color: var(--color-tertiary-50);
+      text-align: left;
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+      border-radius: 0;
 
-  .ath-accordion-item-heading {
-    width: 100%;
-    padding: 12px 20px;
-    background-color: transparent;
-    border: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    color: var(--color-tertiary-50);
-    text-align: left;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
-    border-radius: 0;
+      &:active {
+        scale: 1;
+      }
 
-    &:active {
-      scale: 1;
-    }
+      &:hover {
+        background-color: var(--color-primary-50);
+        color: var(--color-primary-600);
+      }
 
-    &:hover {
-      background-color: var(--color-primary-50);
-      color: var(--color-primary-600);
+      &:focus {
+        color: var(--color-primary-600);
+        background-color: var(--color-primary-50);
+      }
     }
+  }
 
-    &:focus {
-      color: var(--color-primary-600);
-      background-color: var(--color-primary-50);
-    }
+  .ath-accordion-item {
+    width: 100%;
+    border-bottom: 1px solid var(--color-primary-200);
+    list-style-type: none;
   }
 
   .ath-accordion-item-heading-disabled {
@@ -71,7 +71,7 @@
     flex: 1;
     margin-right: 12px;
     font-weight: 600;
-    font-size: 18px;
+    font-size: var(--font-size-md);
   }
 
   .ath-accordion-item-icon {
@@ -91,8 +91,11 @@
   }
 
   .ath-accordion-content-wrapper {
-    padding: 14px 20px 14px 40px;
+    padding: 14px 20px 14px 20px;
+    /* padding: 14px 20px 14px 40px; */
     background-color: rgb(from var(--color-primary-50) r g b / 0.01);
-    font-size: var(--font-size-lg);
+    /* font-size: var(--font-size-lg); */
+    font-size: var(--font-size-md);
+    line-height: 1.5;
   }
 }

package/styles/components/avatar.css

@@ -2,18 +2,39 @@
 
 @layer components {
   .ath-avatar {
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--color-secondary-700);
-  }
-
-  .ath-avatar-initials {
+    border-radius: 50%;
     color: var(--color-tertiary-100);
     font-weight: 500;
   }
 
+  .ath-avatar-small {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+
+  .ath-avatar-medium {
+    width: 42px;
+    height: 42px;
+    font-size: 24px;
+  }
+
+  .ath-avatar-large {
+    width: 64px;
+    height: 64px;
+    font-size: 32px;
+  }
+
+  .ath-avatar-profile {
+    width: 135px;
+    height: 135px;
+    font-size: 60px;
+  }
+
   .ath-avatar-image {
     width: 100%;
     height: 100%;

package/styles/components/block.css

@@ -0,0 +1,8 @@
+@layer components {
+  .ath-block {
+    /* width: 100%; */
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 15px;
+  }
+}

package/styles/components/button.css

@@ -12,7 +12,7 @@
     transition:
       box-shadow 0.2s ease-in-out,
       scale 0.1s ease-in-out,
-      text-shadow 0s ease-in-out,
+      text-shadow 0.1s ease-in-out,
       transform 0.1s ease-in-out,
       filter 0.2s ease-in-out;
 
@@ -116,7 +116,7 @@
   .ath-button-full {
     font-size: var(--font-size-lg);
     line-height: var(--font-size-xl);
-    width: 100%;
+    /* width: 100%; */
     justify-content: center;
     padding: 10px 40px;
 

package/styles/components/dropdown.css

@@ -0,0 +1,18 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-dropdown {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    background-color: var(--color-tertiary-100);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 8px;
+    min-width: 160px;
+  }
+
+  .ath-dropdown-open {
+    display: block;
+  }
+}

package/styles/components/footer.css

@@ -4,7 +4,6 @@
   .ath-footer {
     background-color: var(--color-secondary-700);
     overflow-x: hidden;
-    width: 100%;
     padding: 16px 32px;
     display: flex;
     flex-wrap: wrap;