athameui 0.0.7 → 0.0.9-c

package/styles/components/{form-elements.css → form-input.css}

@@ -1,49 +1,6 @@
 @import "../tokens.css";
 
 @layer component {
-  /* ----- Form Input Label Styles ----- */
-  .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);
-  }
-
-  /* ----- Form Input Styles ----- */
-
-  /* Container styles */
   .ath-form-input-container {
     display: flex;
     flex-direction: column;
@@ -59,7 +16,7 @@
   }
 
   /* Base input styles */
-  .ath-form-input {
+  .ath-form-text-input {
     margin-top: 3px;
     border-radius: var(--radius-md);
     border: none;
@@ -68,26 +25,26 @@
     transition: all 0.2s ease;
     min-width: 0;
   }
-  .ath-form-input:focus {
+  .ath-form-text-input:focus {
     outline: 2px solid var(--color-primary-vibrant-500);
     outline-offset: 2px;
     border-color: var(--color-primary-vibrant-500);
   }
-  .ath-form-input::placeholder {
+  .ath-form-text-input::placeholder {
     color: var(--color-primary-300);
   }
 
   /* Size variants */
-  .ath-form-input-large {
+  .ath-form-text-input-large {
     padding: 0.75rem;
     font-size: var(--font-size-lg);
   }
-  .ath-form-input-medium {
+  .ath-form-text-input-medium {
     font-size: var(--font-size-md);
     line-height: var(--font-size-lg);
     padding: 8px 15px;
   }
-  .ath-form-input-small {
+  .ath-form-text-input-small {
     padding: 0.3rem;
     font-size: var(--font-size-xs);
   }
@@ -119,11 +76,11 @@
   }
 
   /* State variants */
-  .ath-form-input-error,
+  .ath-form-text-input-error,
   .ath-form-textarea-error {
     border-color: var(--color-error-vibrant-500);
   }
-  .ath-form-input-error:focus,
+  .ath-form-text-input-error:focus,
   .ath-form-textarea-error:focus {
     outline: 2px solid var(--color-error-vibrant-500);
     border-color: var(--color-error-vibrant-500);

package/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/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/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/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,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/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/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/components/FormElements/index.ts

@@ -1,2 +0,0 @@
-export * from "./FormInput";
-export * from "./FormInputLabel";

package/dist/components/FormElements/FormInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../components/FormElements/FormInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,MAAM,MAAM,cAAc,GAAG;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE;QACV,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC1C,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,EAAE,CAAC,EAAE;QACH,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,UAAU,CAAC,EAAE,SAAS,CAAC;QACvB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,KAAK,GACL,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,QAAQ,EAAE,CACR,CAAC,EACG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KACvC,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CACpC,gBAAgB,GAAG,mBAAmB,CACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6K9C,CAAC"}

package/dist/components/FormElements/FormInputLabel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInputLabel.d.ts","sourceRoot":"","sources":["../../../components/FormElements/FormInputLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,KAAK,UAAU,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC9D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,kEAQ5B,UAAU,qDA4BZ,CAAC"}

package/dist/components/FormElements/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./FormInput";
-export * from "./FormInputLabel";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/FormElements/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/FormElements/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

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",
-};