athameui 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/components/Button/Button.tsx +0 -1
  2. package/components/Carousel/Carousel.tsx +68 -34
  3. package/components/FormField/FormField.tsx +1 -0
  4. package/components/Layout/Main.tsx +11 -2
  5. package/components/Modal/Modal.tsx +2 -2
  6. package/dist/athameui.cjs +248 -245
  7. package/dist/athameui.cjs.map +1 -1
  8. package/dist/athameui.mjs +244 -230
  9. package/dist/athameui.mjs.map +1 -1
  10. package/dist/components/Button/Button.d.ts.map +1 -1
  11. package/dist/components/Carousel/Carousel.d.ts +2 -1
  12. package/dist/components/Carousel/Carousel.d.ts.map +1 -1
  13. package/dist/components/FormField/FormField.d.ts.map +1 -1
  14. package/dist/components/Layout/Main.d.ts +2 -1
  15. package/dist/components/Layout/Main.d.ts.map +1 -1
  16. package/dist/styles/components/carousel.css +17 -6
  17. package/dist/styles/components/form-input.css +29 -8
  18. package/dist/styles/components/main.css +17 -2
  19. package/dist/styles/index.d.ts +0 -1
  20. package/dist/styles/index.d.ts.map +1 -1
  21. package/dist/styles/index.ts +0 -1
  22. package/dist/styles/tokens.css +16 -20
  23. package/dist/styles/tokens.d.ts +209 -26
  24. package/dist/styles/tokens.d.ts.map +1 -1
  25. package/dist/styles/tokens.ts +190 -165
  26. package/package.json +1 -1
  27. package/styles/components/carousel.css +17 -6
  28. package/styles/components/form-input.css +29 -8
  29. package/styles/components/main.css +17 -2
  30. package/styles/index.ts +0 -1
  31. package/styles/tokens.css +16 -20
  32. package/styles/tokens.ts +190 -165
  33. package/dist/styles/breakpoints.d.ts +0 -29
  34. package/dist/styles/breakpoints.d.ts.map +0 -1
  35. package/dist/styles/breakpoints.ts +0 -34
  36. package/styles/breakpoints.ts +0 -34
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC1C,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,SAAS,GAAG;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,MAAM,2GAiGlB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE;QACV,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;QAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;KAC1C,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,SAAS,GAAG;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,MAAM,2GAgGlB,CAAC"}
@@ -6,9 +6,10 @@ export type CarouselProps = {
6
6
  carousel?: string | false | null | undefined;
7
7
  };
8
8
  emptyMessage?: string;
9
+ label?: string;
9
10
  sx?: {
10
11
  carousel?: CSSObject;
11
12
  };
12
13
  };
13
- export declare const Carousel: ({ children, className, emptyMessage, sx, }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
+ export declare const Carousel: ({ children, className, emptyMessage, label, sx, }: CarouselProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
15
  //# sourceMappingURL=Carousel.d.ts.map
@@ -1 +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,qDA4Df,CAAC"}
1
+ {"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,kBAAkB,CAAC;AAE1B,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,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,CAgL9C,CAAC"}
1
+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,kBAAkB,CAAC;AAE1B,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,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,CAiL9C,CAAC"}
@@ -5,11 +5,12 @@ type MainProps = {
5
5
  main?: string | false | null | undefined;
6
6
  mainContent?: string | false | null | undefined;
7
7
  };
8
+ width?: "full" | "wide" | "medium" | "narrow";
8
9
  sx?: {
9
10
  main?: CSSObject;
10
11
  mainContent?: CSSObject;
11
12
  };
12
13
  };
13
- export declare const Main: ({ children, className, sx }: MainProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
+ export declare const Main: ({ children, className, sx, width, }: MainProps) => import("@emotion/react/jsx-runtime").JSX.Element;
14
15
  export {};
15
16
  //# sourceMappingURL=Main.d.ts.map
@@ -1 +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"}
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;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"}
@@ -3,16 +3,20 @@
3
3
  @layer components {
4
4
  .ath-carousel-wrapper {
5
5
  position: relative;
6
+ overflow: hidden;
7
+ }
8
+ .ath-carousel-label {
9
+ margin-top: 1rem;
6
10
  }
7
11
  .ath-carousel {
8
- display: flex;
9
- width: 100%;
10
- min-width: 0;
11
- max-width: 100%;
12
+ display: grid;
12
13
  border: 5px solid var(--color-secondary-800);
13
14
  border-radius: 10px;
14
15
  padding: 10px;
15
16
  overflow-x: auto;
17
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
18
+ grid-auto-flow: column;
19
+ grid-auto-columns: 200px;
16
20
  gap: 10px;
17
21
  scrollbar-width: none;
18
22
  &::-webkit-scrollbar {
@@ -30,14 +34,21 @@
30
34
  transition: opacity 0.2s ease-in-out;
31
35
  }
32
36
  .ath-carousel-left-arrow {
33
- left: 5px;
37
+ left: 10px;
34
38
  }
35
39
  .ath-carousel-right-arrow {
36
- right: 5px;
40
+ right: 10px;
37
41
  }
38
42
  .ath-carousel-hover {
39
43
  .ath-carousel-arrow {
40
44
  opacity: 0.75;
41
45
  }
42
46
  }
47
+ .ath-carousel-empty {
48
+ display: flex;
49
+ align-items: center;
50
+ min-height: 4rem;
51
+ padding: 1rem;
52
+ color: var(--color-tertiary-300);
53
+ }
43
54
  }
@@ -14,6 +14,11 @@
14
14
  gap: 0.75rem;
15
15
  align-items: center;
16
16
  }
17
+ .ath-form-input-container-readonly {
18
+ width: 100%;
19
+ margin-top: 1rem;
20
+ line-height: 1.25;
21
+ }
17
22
 
18
23
  /* Base input styles */
19
24
  .ath-form-text-input {
@@ -24,12 +29,6 @@
24
29
  outline-offset: -1px;
25
30
  transition: all 0.2s ease;
26
31
  min-width: 0;
27
- &:read-only {
28
- background-color: transparent;
29
- outline: none;
30
- color: var(--color-tertiary-600);
31
- padding-left: 0;
32
- }
33
32
  }
34
33
  .ath-form-text-input:focus {
35
34
  outline: 2px solid var(--color-primary-vibrant-500);
@@ -59,6 +58,7 @@
59
58
  .ath-form-textarea {
60
59
  margin-top: 3px;
61
60
  font-size: inherit;
61
+ font-family: inherit;
62
62
  line-height: 1.5;
63
63
  padding: 0.75rem;
64
64
  border: 1px solid var(--color-tertiary-500);
@@ -77,7 +77,7 @@
77
77
  border-color: var(--color-primary-vibrant-500);
78
78
  }
79
79
  .ath-form-textarea::placeholder {
80
- color: var(--color-tertiary-400);
80
+ color: var(--color-primary-300);
81
81
  }
82
82
  .ath-form-textarea-auto-resize {
83
83
  resize: none;
@@ -102,13 +102,34 @@
102
102
  cursor: not-allowed;
103
103
  }
104
104
 
105
+ .ath-form-text-input:read-only,
106
+ .ath-form-text-input-readonly,
107
+ .ath-form-textarea:read-only,
108
+ .ath-form-textarea-readonly,
105
109
  .ath-form-input-readonly,
106
- .ath-form-textarea-readonly {
110
+ .ath-form-input-shared-readonly {
111
+ margin-top: 0.2rem;
112
+ padding: 0;
113
+ color: var(--color-tertiary-600);
107
114
  background-color: transparent;
108
115
  outline: none;
109
116
  border: none;
117
+ box-shadow: none;
110
118
  cursor: default;
111
119
  }
120
+ .ath-form-text-input:read-only:focus,
121
+ .ath-form-text-input-readonly:focus,
122
+ .ath-form-textarea:read-only:focus,
123
+ .ath-form-textarea-readonly:focus {
124
+ outline: none;
125
+ border: none;
126
+ }
127
+ .ath-form-textarea:read-only,
128
+ .ath-form-textarea-readonly {
129
+ min-height: 0;
130
+ resize: none;
131
+ overflow: hidden;
132
+ }
112
133
 
113
134
  /* Error message */
114
135
  .ath-form-input-error-message {
@@ -17,9 +17,24 @@
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  gap: 15px;
20
- width: 100%;
21
20
  margin-inline: auto;
22
- max-width: 1200px;
23
21
  padding: 0 15px;
22
+ width: 100%;
23
+ /* Default to `medium` if no width is provided */
24
+ &.full {
25
+ margin-inline: auto;
26
+ }
27
+ &.wide {
28
+ max-width: 1200px;
29
+ margin-inline: auto;
30
+ }
31
+ &.medium {
32
+ max-width: 768px;
33
+ margin-inline: auto;
34
+ }
35
+ &.narrow {
36
+ max-width: 480px;
37
+ margin-inline: auto;
38
+ }
24
39
  }
25
40
  }
@@ -1,3 +1,2 @@
1
- export * from "./breakpoints";
2
1
  export * from "./tokens";
3
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -1,2 +1 @@
1
- export * from "./breakpoints";
2
1
  export * from "./tokens";
@@ -1,4 +1,4 @@
1
- /* CSS Custom Properties for Styling-Agnostic Design Tokens */
1
+ /* Generated from styles/tokens.ts. Edit that file, then run pnpm generate-tokens. */
2
2
  :root {
3
3
  --font-family-sans: "Montserrat", sans-serif;
4
4
  --font-family-serif: "Libre Baskerville", serif;
@@ -12,8 +12,8 @@
12
12
  --color-text-dark: #040a0c;
13
13
  --color-text-light: #fcfbf7;
14
14
 
15
- --color-background-light: var(--color-text-light);
16
- --color-background-dark: var(--color-text-dark);
15
+ --color-background-light: #fcfbf7;
16
+ --color-background-dark: #040a0c;
17
17
 
18
18
  /* ----- Primary ----- */
19
19
  --color-primary-50: #f0f2f5;
@@ -21,7 +21,7 @@
21
21
  --color-primary-200: #b8c3d1;
22
22
  --color-primary-300: #8a9bae;
23
23
  --color-primary-400: #4a5f7a;
24
- --color-primary-500: #0b1828; /* Base Primary */
24
+ --color-primary-500: #0b1828;
25
25
  --color-primary-600: #081320;
26
26
  --color-primary-700: #060e18;
27
27
  --color-primary-800: #04090f;
@@ -32,13 +32,12 @@
32
32
  --color-primary-vibrant-700: #1e3a8a;
33
33
 
34
34
  /* ----- Secondary ----- */
35
-
36
35
  --color-secondary-50: #e6f7f6;
37
36
  --color-secondary-100: #b3e8e5;
38
37
  --color-secondary-200: #80d9d4;
39
38
  --color-secondary-300: #4dcac3;
40
39
  --color-secondary-400: #2aa39b;
41
- --color-secondary-500: #146b68; /* Base Secondary */
40
+ --color-secondary-500: #146b68;
42
41
  --color-secondary-600: #125a57;
43
42
  --color-secondary-700: #0f4a47;
44
43
  --color-secondary-800: #0c3835;
@@ -54,7 +53,7 @@
54
53
  --color-tertiary-200: #e5c8a8;
55
54
  --color-tertiary-300: #dcb184;
56
55
  --color-tertiary-400: #d19b60;
57
- --color-tertiary-500: #bfa081; /* Base Tertiary */
56
+ --color-tertiary-500: #bfa081;
58
57
  --color-tertiary-600: #a68965;
59
58
  --color-tertiary-700: #7d6748;
60
59
  --color-tertiary-800: #54442c;
@@ -70,7 +69,7 @@
70
69
  --color-error-200: #f88080;
71
70
  --color-error-300: #f54d4d;
72
71
  --color-error-400: #f21a1a;
73
- --color-error-500: #9f0001; /* original color */
72
+ --color-error-500: #9f0001;
74
73
  --color-error-600: #800001;
75
74
  --color-error-700: #600001;
76
75
  --color-error-800: #400000;
@@ -86,7 +85,7 @@
86
85
  --color-warning-200: #fad8b3;
87
86
  --color-warning-300: #f8c48c;
88
87
  --color-warning-400: #f5b065;
89
- --color-warning-500: #f39c12; /* original color */
88
+ --color-warning-500: #f39c12;
90
89
  --color-warning-600: #c27d0e;
91
90
  --color-warning-700: #925e0b;
92
91
  --color-warning-800: #613e07;
@@ -102,7 +101,7 @@
102
101
  --color-success-200: #a3d8ca;
103
102
  --color-success-300: #76c5af;
104
103
  --color-success-400: #48b195;
105
- --color-success-500: #1a9e7a; /* original color */
104
+ --color-success-500: #1a9e7a;
106
105
  --color-success-600: #157e62;
107
106
  --color-success-700: #105f49;
108
107
  --color-success-800: #0a3f31;
@@ -120,7 +119,6 @@
120
119
  --padding-xl: 16px;
121
120
 
122
121
  /* ----- Radius ----- */
123
-
124
122
  --radius-sm: 3px;
125
123
  --radius-md: 5px;
126
124
  --radius-lg: 8px;
@@ -146,7 +144,6 @@
146
144
  --screen-4xl: 1536;
147
145
 
148
146
  /* ----- Media Queries ----- */
149
- /* Only useful for CSS-in-JS media query handling */
150
147
  --media-min-xs: @media (min-width: 320px);
151
148
  --media-min-sm: @media (min-width: 480px);
152
149
  --media-min-md: @media (min-width: 620px);
@@ -154,18 +151,19 @@
154
151
  --media-min-xl: @media (min-width: 896px);
155
152
  --media-min-2xl: @media (min-width: 1024px);
156
153
  --media-min-3xl: @media (min-width: 1280px);
154
+ --media-min-4xl: @media (min-width: 1536px);
157
155
 
158
156
  --media-max-xs: @media (max-width: 319px);
159
157
  --media-max-sm: @media (max-width: 479px);
160
- --media-max-md: @media (max-width: 767px);
161
- --media-max-lg: @media (max-width: 895px);
162
- --media-max-xl: @media (max-width: 1023px);
163
- --media-max-2xl: @media (max-width: 1279px);
164
- --media-max-3xl: @media (max-width: 1535px);
158
+ --media-max-md: @media (max-width: 619px);
159
+ --media-max-lg: @media (max-width: 767px);
160
+ --media-max-xl: @media (max-width: 895px);
161
+ --media-max-2xl: @media (max-width: 1023px);
162
+ --media-max-3xl: @media (max-width: 1279px);
163
+ --media-max-4xl: @media (max-width: 1535px);
165
164
  }
166
165
 
167
166
  @layer base {
168
-
169
167
  *,
170
168
  ::before,
171
169
  ::after {
@@ -175,7 +173,6 @@
175
173
  background-color: var(--color-primary-500);
176
174
  color: var(--color-text-light);
177
175
  font-family: var(--font-family-sans);
178
- font-size: var(--font-size-md);
179
176
  -webkit-font-smoothing: antialiased;
180
177
  -moz-osx-font-smoothing: grayscale;
181
178
  margin: 0;
@@ -184,7 +181,6 @@
184
181
  h1 {
185
182
  color: var(--color-text-light);
186
183
  font-size: var(--font-size-2xl);
187
- /* font-size: var(--font-size-3xl); */
188
184
  font-weight: 300;
189
185
  margin: 0 0 1rem;
190
186
  line-height: normal;
@@ -1,3 +1,190 @@
1
+ export declare const breakpoints: {
2
+ readonly xs: 320;
3
+ readonly sm: 480;
4
+ readonly md: 620;
5
+ readonly lg: 768;
6
+ readonly xl: 896;
7
+ readonly "2xl": 1024;
8
+ readonly "3xl": 1280;
9
+ readonly "4xl": 1536;
10
+ };
11
+ export type Breakpoints = typeof breakpoints;
12
+ export type Breakpoint = keyof typeof breakpoints;
13
+ export declare const media: {
14
+ readonly min: {
15
+ readonly xs: string;
16
+ readonly sm: string;
17
+ readonly md: string;
18
+ readonly lg: string;
19
+ readonly xl: string;
20
+ readonly "2xl": string;
21
+ readonly "3xl": string;
22
+ readonly "4xl": string;
23
+ };
24
+ readonly max: {
25
+ readonly xs: string;
26
+ readonly sm: string;
27
+ readonly md: string;
28
+ readonly lg: string;
29
+ readonly xl: string;
30
+ readonly "2xl": string;
31
+ readonly "3xl": string;
32
+ readonly "4xl": string;
33
+ };
34
+ };
35
+ export declare const font: {
36
+ family: {
37
+ sans: string;
38
+ serif: string;
39
+ };
40
+ size: {
41
+ xs: string;
42
+ sm: string;
43
+ md: string;
44
+ lg: string;
45
+ xl: string;
46
+ "2xl": string;
47
+ "3xl": string;
48
+ "4xl": string;
49
+ "5xl": string;
50
+ };
51
+ };
52
+ export declare const color: {
53
+ primary: {
54
+ "50": string;
55
+ "100": string;
56
+ "200": string;
57
+ "300": string;
58
+ "400": string;
59
+ "500": string;
60
+ "600": string;
61
+ "700": string;
62
+ "800": string;
63
+ "900": string;
64
+ default: string;
65
+ vibrant: {
66
+ "300": string;
67
+ "500": string;
68
+ "700": string;
69
+ };
70
+ };
71
+ secondary: {
72
+ "50": string;
73
+ "100": string;
74
+ "200": string;
75
+ "300": string;
76
+ "400": string;
77
+ "500": string;
78
+ "600": string;
79
+ "700": string;
80
+ "800": string;
81
+ "900": string;
82
+ default: string;
83
+ vibrant: {
84
+ "300": string;
85
+ "500": string;
86
+ "700": string;
87
+ };
88
+ };
89
+ tertiary: {
90
+ "50": string;
91
+ "100": string;
92
+ "200": string;
93
+ "300": string;
94
+ "400": string;
95
+ "500": string;
96
+ "600": string;
97
+ "700": string;
98
+ "800": string;
99
+ "900": string;
100
+ default: string;
101
+ vibrant: {
102
+ "300": string;
103
+ "500": string;
104
+ "700": string;
105
+ };
106
+ };
107
+ error: {
108
+ "50": string;
109
+ "100": string;
110
+ "200": string;
111
+ "300": string;
112
+ "400": string;
113
+ "500": string;
114
+ "600": string;
115
+ "700": string;
116
+ "800": string;
117
+ "900": string;
118
+ default: string;
119
+ vibrant: {
120
+ "300": string;
121
+ "500": string;
122
+ "700": string;
123
+ };
124
+ };
125
+ warning: {
126
+ "50": string;
127
+ "100": string;
128
+ "200": string;
129
+ "300": string;
130
+ "400": string;
131
+ "500": string;
132
+ "600": string;
133
+ "700": string;
134
+ "800": string;
135
+ "900": string;
136
+ default: string;
137
+ vibrant: {
138
+ "300": string;
139
+ "500": string;
140
+ "700": string;
141
+ };
142
+ };
143
+ success: {
144
+ "50": string;
145
+ "100": string;
146
+ "200": string;
147
+ "300": string;
148
+ "400": string;
149
+ "500": string;
150
+ "600": string;
151
+ "700": string;
152
+ "800": string;
153
+ "900": string;
154
+ default: string;
155
+ vibrant: {
156
+ "300": string;
157
+ "500": string;
158
+ "700": string;
159
+ };
160
+ };
161
+ text: {
162
+ dark: string;
163
+ light: string;
164
+ };
165
+ background: {
166
+ light: string;
167
+ dark: string;
168
+ };
169
+ };
170
+ export declare const padding: {
171
+ xs: string;
172
+ sm: string;
173
+ md: string;
174
+ lg: string;
175
+ xl: string;
176
+ };
177
+ export declare const radius: {
178
+ sm: string;
179
+ md: string;
180
+ lg: string;
181
+ };
182
+ export type FontTokens = typeof font;
183
+ export type ColorTokens = typeof color;
184
+ export type PaddingTokens = typeof padding;
185
+ export type RadiusTokens = typeof radius;
186
+ export type MediaTokens = typeof media;
187
+ export type ScreenTokens = typeof breakpoints;
1
188
  export declare const tokens: {
2
189
  font: {
3
190
  family: {
@@ -134,6 +321,28 @@ export declare const tokens: {
134
321
  dark: string;
135
322
  };
136
323
  };
324
+ media: {
325
+ readonly min: {
326
+ readonly xs: string;
327
+ readonly sm: string;
328
+ readonly md: string;
329
+ readonly lg: string;
330
+ readonly xl: string;
331
+ readonly "2xl": string;
332
+ readonly "3xl": string;
333
+ readonly "4xl": string;
334
+ };
335
+ readonly max: {
336
+ readonly xs: string;
337
+ readonly sm: string;
338
+ readonly md: string;
339
+ readonly lg: string;
340
+ readonly xl: string;
341
+ readonly "2xl": string;
342
+ readonly "3xl": string;
343
+ readonly "4xl": string;
344
+ };
345
+ };
137
346
  padding: {
138
347
  xs: string;
139
348
  sm: string;
@@ -146,31 +355,5 @@ export declare const tokens: {
146
355
  md: string;
147
356
  lg: string;
148
357
  };
149
- media: {
150
- min: {
151
- xs: string;
152
- sm: string;
153
- md: string;
154
- lg: string;
155
- xl: string;
156
- "2xl": string;
157
- "3xl": string;
158
- };
159
- max: {
160
- xs: string;
161
- sm: string;
162
- md: string;
163
- lg: string;
164
- xl: string;
165
- "2xl": string;
166
- "3xl": string;
167
- };
168
- };
169
358
  };
170
- export type Tokens = typeof tokens;
171
- export type FontTokens = typeof tokens.font;
172
- export type ColorTokens = typeof tokens.color;
173
- export type PaddingTokens = typeof tokens.padding;
174
- export type RadiusTokens = typeof tokens.radius;
175
- export type MediaTokens = typeof tokens.media;
176
359
  //# sourceMappingURL=tokens.d.ts.map
@@ -1 +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"}
1
+ {"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"}