athameui 0.0.12 → 0.0.13

package/dist/components/Carousel/Carousel.d.ts

@@ -6,9 +6,10 @@ export type CarouselProps = {
         carousel?: string | false | null | undefined;
     };
     emptyMessage?: string;
+    label?: string;
     sx?: {
         carousel?: CSSObject;
     };
 };
-export declare const Carousel: ({ children, className, emptyMessage, sx, }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Carousel: ({ children, className, emptyMessage, label, sx, }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,4CAKtB,aAAa,qDAgEf,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO3C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,mDAMtB,aAAa,qDAqFf,CAAC"}

package/dist/components/Layout/Main.d.ts

@@ -5,11 +5,12 @@ type MainProps = {
         main?: string | false | null | undefined;
         mainContent?: string | false | null | undefined;
     };
+    width?: "full" | "wide" | "medium" | "narrow";
     sx?: {
         main?: CSSObject;
         mainContent?: CSSObject;
     };
 };
-export declare const Main: ({ children, className, sx }: MainProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Main: ({ children, className, sx, width, }: MainProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Main.d.ts.map

package/dist/components/Layout/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../components/Layout/Main.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QACzC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KACjD,CAAC;IAEF,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,WAAW,CAAC,EAAE,SAAS,CAAC;KACzB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,6BAA6B,SAAS,qDAoB1D,CAAC"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../components/Layout/Main.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QACzC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KACjD,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC9C,EAAE,CAAC,EAAE;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,WAAW,CAAC,EAAE,SAAS,CAAC;KACzB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,qCAKlB,SAAS,qDAwBX,CAAC"}

package/dist/styles/components/carousel.css

@@ -3,16 +3,20 @@
 @layer components {
   .ath-carousel-wrapper {
     position: relative;
+    overflow: hidden;
+  }
+  .ath-carousel-label {
+    margin-top: 1rem;
   }
   .ath-carousel {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
+    display: grid;
     border: 5px solid var(--color-secondary-800);
     border-radius: 10px;
     padding: 10px;
     overflow-x: auto;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-auto-flow: column;
+    grid-auto-columns: 200px;
     gap: 10px;
     scrollbar-width: none;
     &::-webkit-scrollbar {

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

@@ -58,6 +58,7 @@
   .ath-form-textarea {
     margin-top: 3px;
     font-size: inherit;
+    font-family: inherit;
     line-height: 1.5;
     padding: 0.75rem;
     border: 1px solid var(--color-tertiary-500);
@@ -76,7 +77,7 @@
     border-color: var(--color-primary-vibrant-500);
   }
   .ath-form-textarea::placeholder {
-    color: var(--color-tertiary-400);
+    color: var(--color-primary-300);
   }
   .ath-form-textarea-auto-resize {
     resize: none;

package/dist/styles/components/main.css

@@ -17,9 +17,24 @@
     display: flex;
     flex-direction: column;
     gap: 15px;
-    width: 100%;
     margin-inline: auto;
-    max-width: 1200px;
     padding: 0 15px;
+    width: 100%;
+    /* Default to `medium` if no width is provided */
+    &.full {
+      margin-inline: auto;
+    }
+    &.wide {
+      max-width: 1200px;
+      margin-inline: auto;
+    }
+    &.medium {
+      max-width: 768px;
+      margin-inline: auto;
+    }
+    &.narrow {
+      max-width: 480px;
+      margin-inline: auto;
+    }
   }
 }

package/dist/styles/index.d.ts

@@ -1,3 +1,2 @@
-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,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/styles/index.ts

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

package/dist/styles/tokens.css

@@ -1,4 +1,4 @@
-/* CSS Custom Properties for Styling-Agnostic Design Tokens */
+/* Generated from styles/tokens.ts. Edit that file, then run pnpm generate-tokens. */
 :root {
   --font-family-sans: "Montserrat", sans-serif;
   --font-family-serif: "Libre Baskerville", serif;
@@ -12,8 +12,8 @@
   --color-text-dark: #040a0c;
   --color-text-light: #fcfbf7;
 
-  --color-background-light: var(--color-text-light);
-  --color-background-dark: var(--color-text-dark);
+  --color-background-light: #fcfbf7;
+  --color-background-dark: #040a0c;
 
   /* ----- Primary ----- */
   --color-primary-50: #f0f2f5;
@@ -21,7 +21,7 @@
   --color-primary-200: #b8c3d1;
   --color-primary-300: #8a9bae;
   --color-primary-400: #4a5f7a;
-  --color-primary-500: #0b1828; /* Base Primary */
+  --color-primary-500: #0b1828;
   --color-primary-600: #081320;
   --color-primary-700: #060e18;
   --color-primary-800: #04090f;
@@ -32,13 +32,12 @@
   --color-primary-vibrant-700: #1e3a8a;
 
   /* ----- Secondary ----- */
-
   --color-secondary-50: #e6f7f6;
   --color-secondary-100: #b3e8e5;
   --color-secondary-200: #80d9d4;
   --color-secondary-300: #4dcac3;
   --color-secondary-400: #2aa39b;
-  --color-secondary-500: #146b68; /* Base Secondary */
+  --color-secondary-500: #146b68;
   --color-secondary-600: #125a57;
   --color-secondary-700: #0f4a47;
   --color-secondary-800: #0c3835;
@@ -54,7 +53,7 @@
   --color-tertiary-200: #e5c8a8;
   --color-tertiary-300: #dcb184;
   --color-tertiary-400: #d19b60;
-  --color-tertiary-500: #bfa081; /* Base Tertiary */
+  --color-tertiary-500: #bfa081;
   --color-tertiary-600: #a68965;
   --color-tertiary-700: #7d6748;
   --color-tertiary-800: #54442c;
@@ -70,7 +69,7 @@
   --color-error-200: #f88080;
   --color-error-300: #f54d4d;
   --color-error-400: #f21a1a;
-  --color-error-500: #9f0001; /* original color */
+  --color-error-500: #9f0001;
   --color-error-600: #800001;
   --color-error-700: #600001;
   --color-error-800: #400000;
@@ -86,7 +85,7 @@
   --color-warning-200: #fad8b3;
   --color-warning-300: #f8c48c;
   --color-warning-400: #f5b065;
-  --color-warning-500: #f39c12; /* original color */
+  --color-warning-500: #f39c12;
   --color-warning-600: #c27d0e;
   --color-warning-700: #925e0b;
   --color-warning-800: #613e07;
@@ -102,7 +101,7 @@
   --color-success-200: #a3d8ca;
   --color-success-300: #76c5af;
   --color-success-400: #48b195;
-  --color-success-500: #1a9e7a; /* original color */
+  --color-success-500: #1a9e7a;
   --color-success-600: #157e62;
   --color-success-700: #105f49;
   --color-success-800: #0a3f31;
@@ -120,7 +119,6 @@
   --padding-xl: 16px;
 
   /* ----- Radius ----- */
-
   --radius-sm: 3px;
   --radius-md: 5px;
   --radius-lg: 8px;
@@ -146,7 +144,6 @@
   --screen-4xl: 1536;
 
   /* ----- Media Queries ----- */
-  /* Only useful for CSS-in-JS media query handling */
   --media-min-xs: @media (min-width: 320px);
   --media-min-sm: @media (min-width: 480px);
   --media-min-md: @media (min-width: 620px);
@@ -154,14 +151,16 @@
   --media-min-xl: @media (min-width: 896px);
   --media-min-2xl: @media (min-width: 1024px);
   --media-min-3xl: @media (min-width: 1280px);
+  --media-min-4xl: @media (min-width: 1536px);
 
   --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);
-  --media-max-xl: @media (max-width: 1023px);
-  --media-max-2xl: @media (max-width: 1279px);
-  --media-max-3xl: @media (max-width: 1535px);
+  --media-max-md: @media (max-width: 619px);
+  --media-max-lg: @media (max-width: 767px);
+  --media-max-xl: @media (max-width: 895px);
+  --media-max-2xl: @media (max-width: 1023px);
+  --media-max-3xl: @media (max-width: 1279px);
+  --media-max-4xl: @media (max-width: 1535px);
 }
 
 @layer base {

package/dist/styles/tokens.d.ts

@@ -1,3 +1,190 @@
+export declare const breakpoints: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 620;
+    readonly lg: 768;
+    readonly xl: 896;
+    readonly "2xl": 1024;
+    readonly "3xl": 1280;
+    readonly "4xl": 1536;
+};
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;
+export declare const media: {
+    readonly min: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+    };
+    readonly max: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+    };
+};
+export declare const font: {
+    family: {
+        sans: string;
+        serif: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+    };
+};
+export declare const color: {
+    primary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    secondary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    tertiary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    error: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    warning: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    success: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    text: {
+        dark: string;
+        light: string;
+    };
+    background: {
+        light: string;
+        dark: string;
+    };
+};
+export declare const padding: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const radius: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type FontTokens = typeof font;
+export type ColorTokens = typeof color;
+export type PaddingTokens = typeof padding;
+export type RadiusTokens = typeof radius;
+export type MediaTokens = typeof media;
+export type ScreenTokens = typeof breakpoints;
 export declare const tokens: {
     font: {
         family: {
@@ -134,6 +321,28 @@ export declare const tokens: {
             dark: string;
         };
     };
+    media: {
+        readonly min: {
+            readonly xs: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
+            readonly "2xl": string;
+            readonly "3xl": string;
+            readonly "4xl": string;
+        };
+        readonly max: {
+            readonly xs: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
+            readonly "2xl": string;
+            readonly "3xl": string;
+            readonly "4xl": string;
+        };
+    };
     padding: {
         xs: string;
         sm: string;
@@ -146,31 +355,5 @@ export declare const tokens: {
         md: string;
         lg: string;
     };
-    media: {
-        min: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-        max: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-    };
 };
-export type Tokens = typeof tokens;
-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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;CASd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAKlD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;CAqBR,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHjB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AACF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC;AACrC,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC;AACvC,MAAM,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,OAAO,WAAW,CAAC;AAE9C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMlB,CAAC"}