athameui 0.0.8 → 0.0.10

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.8",
+  "version": "0.0.10",
   "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,15 +4,15 @@
   .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-heading {
+      white-space: normal;
       width: 100%;
-      padding: 12px 20px;
+      padding: 10px;
       background-color: transparent;
       border: none;
       display: flex;
@@ -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/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

@@ -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/carousel.css

@@ -0,0 +1,43 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-carousel-wrapper {
+    position: relative;
+  }
+  .ath-carousel {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    border: 5px solid var(--color-secondary-800);
+    border-radius: 10px;
+    padding: 10px;
+    overflow-x: auto;
+    gap: 10px;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .ath-carousel-arrow {
+    position: absolute;
+    border-radius: 50%;
+    background-color: var(--color-secondary-200);
+    opacity: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+  .ath-carousel-left-arrow {
+    left: 5px;
+  }
+  .ath-carousel-right-arrow {
+    right: 5px;
+  }
+  .ath-carousel-hover {
+    .ath-carousel-arrow {
+      opacity: 0.75;
+    }
+  }
+}

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/form-input.css

@@ -24,6 +24,12 @@
     outline-offset: -1px;
     transition: all 0.2s ease;
     min-width: 0;
+    &:read-only {
+      background-color: transparent;
+      outline: none;
+      color: var(--color-tertiary-600);
+    padding-left: 0;
+    }
   }
   .ath-form-text-input:focus {
     outline: 2px solid var(--color-primary-vibrant-500);
@@ -52,13 +58,16 @@
   /* Textarea specific */
   .ath-form-textarea {
     margin-top: 3px;
+    font-size: inherit;
+    line-height: 1.5;
+    padding: 0.75rem;
     border: 1px solid var(--color-tertiary-500);
     border-radius: var(--radius-md);
     transition:
       border-color 0.2s ease,
       box-shadow 0.2s ease;
     min-width: 0;
-    min-height: 3rem;
+    min-height: 6rem;
     resize: vertical;
     overflow: auto;
   }

package/styles/components/main.css

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

package/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/styles/index.ts

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

package/styles/theme.css

@@ -1,7 +1,10 @@
 @import "./components/accordion.css";
 @import "./components/avatar.css";
+@import "./components/block.css";
 @import "./components/button.css";
 @import "./components/button-group.css";
+@import "./components/carousel.css";
+@import "./components/dropdown.css";
 @import "./components/footer.css";
 @import "./components/form-input.css";
 @import "./components/form-label.css";
@@ -10,4 +13,5 @@
 @import "./components/main.css";
 @import "./components/modals.css";
 @import "./components/search.css";
+@import "./components/slide-out.css";
 @import "./tokens.css";

package/styles/tokens.css

@@ -126,36 +126,36 @@
   --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;
-
-  /* ----- Screen Sizes ----- */
-  --screen-xs: 360px;
-  --screen-sm: 480px;
-  --screen-md: 768px;
-  --screen-lg: 896px;
-  --screen-xl: 1024px;
-  --screen-2xl: 1280px;
-  --screen-3xl: 1536px;
+  --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-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);
@@ -165,6 +165,12 @@
 }
 
 @layer base {
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
   body {
     background-color: var(--color-primary-500);
     color: var(--color-text-light);
@@ -174,30 +180,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 +222,7 @@
       outline: none;
     }
   }
+
   a {
     text-decoration: none;
     color: inherit;

package/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/dist/styles/mediaQueries.d.ts

@@ -1,11 +0,0 @@
-export declare const breakpoints: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-};
-//# sourceMappingURL=mediaQueries.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../styles/mediaQueries.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC"}

package/dist/styles/mediaQueries.ts

@@ -1,10 +0,0 @@
-export const breakpoints = {
-  xs: "360px",
-  sm: "480px",
-  md: "640px",
-  lg: "768px",
-  xl: "896px",
-  "2xl": "1024px",
-  "3xl": "1280px",
-  "4xl": "1536px",
-};

package/styles/mediaQueries.ts

@@ -1,10 +0,0 @@
-export const breakpoints = {
-  xs: "360px",
-  sm: "480px",
-  md: "640px",
-  lg: "768px",
-  xl: "896px",
-  "2xl": "1024px",
-  "3xl": "1280px",
-  "4xl": "1536px",
-};