@latte-macchiat-io/latte-vanilla-components 0.0.131 → 0.0.133

package/dist/latte-vanilla-components.css

@@ -1 +1 @@
-._1v7zi9y5{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--_1v7zi9y0);align-items:var(--_1v7zi9y1);padding-top:var(--_1v7zi9y2);padding-bottom:var(--_1v7zi9y3);justify-content:var(--_1v7zi9y4)}._1wp326d2{display:flex;background-color:var(--_1wp326d1);flex:1 1 auto;min-height:45vh;text-align:center;align-items:center;flex-direction:column;justify-content:center}@media (min-width: 768px){._1wp326d2{min-height:var(--_1wp326d0)}}.jqc4y0a{width:100%;display:flex;align-items:center;position:relative;flex-direction:column;animation:background .5s ease-in-out;color:var(--jqc4y02);z-index:var(--jqc4y01);min-height:var(--jqc4y07);padding-top:var(--jqc4y03);padding-left:var(--jqc4y04);padding-right:var(--jqc4y05);padding-bottom:var(--jqc4y06);background:var(--jqc4y09);justify-content:var(--jqc4y08)}.jqc4y0b{gap:15px;width:100%;display:flex;flex-direction:column;max-width:var(--max-width);text-align:var(--jqc4y00);align-items:var(--jqc4y00)}
+._1h0tdm5e{position:relative;display:inline-block;color:var(--_1h0tdm50);border:var(--_1h0tdm52);cursor:var(--_1h0tdm51);min-width:var(--_1h0tdm53);font-weight:var(--_1h0tdm54);transition:var(--_1h0tdm55);padding-top:var(--_1h0tdm56);padding-left:var(--_1h0tdm57);padding-right:var(--_1h0tdm58);padding-bottom:var(--_1h0tdm59);pointer-event:var(--_1h0tdm5a);border-radius:var(--_1h0tdm5b);letter-spacing:var(--_1h0tdm5c);background-color:var(--_1h0tdm5d)}._1h0tdm5e:hover{opacity:.5}._1v7zi9y5{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--_1v7zi9y0);align-items:var(--_1v7zi9y1);padding-top:var(--_1v7zi9y2);padding-bottom:var(--_1v7zi9y3);justify-content:var(--_1v7zi9y4)}._18hbdtx1{position:relative;width:100%;height:100%;max-height:var(--_18hbdtx0)}._18hbdtx2{0: _;1: 1;2: 8;3: h;4: b;5: d;6: t;7: x;8: 1}._18hbdtx3{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0}._18hbdtx3 img{width:100%;height:100%;object-fit:cover}._18hbdtx4{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}._18hbdtx5{position:absolute;right:50px;bottom:10px;cursor:pointer}._18hbdtx6{position:absolute;top:15px;right:15px;cursor:pointer}._18hbdtx7{position:absolute;right:15px;bottom:15px;cursor:pointer}._29n9il2{height:0;width:100vw;overflow:hidden;position:relative;padding-bottom:56.25%;left:var(--_29n9il0);right:var(--_29n9il1)}._29n9il3{0: _;1: 2;2: 9;3: n;4: 9;5: i;6: l;7: 2}._1wp326d2{display:flex;background-color:var(--_1wp326d1);flex:1 1 auto;min-height:45vh;text-align:center;align-items:center;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){._1wp326d2{min-height:var(--_1wp326d0)}}.fl7h886{z-index:20;display:flex;font-size:.8em;align-items:center;flex-direction:column;justify-content:space-between;gap:var(--fl7h880);background-color:var(--fl7h881);padding-top:var(--fl7h882);padding-bottom:var(--fl7h883);padding-left:var(--fl7h884);padding-right:var(--fl7h885)}.fl7h886 a{transition:all .5s ease-in-out}.fl7h886 a:hover{opacity:.5}.fl7h887{0: f;1: l;2: 7;3: h;4: 8;5: 8;6: 6}.jqc4y0a{width:100%;display:flex;align-items:center;position:relative;flex-direction:column;animation:background .5s ease-in-out;color:var(--jqc4y02);z-index:var(--jqc4y01);min-height:var(--jqc4y07);padding-top:var(--jqc4y03);padding-left:var(--jqc4y04);padding-right:var(--jqc4y05);padding-bottom:var(--jqc4y06);background:var(--jqc4y09);justify-content:var(--jqc4y08)}.jqc4y0b{gap:15px;width:100%;display:flex;flex-direction:column;max-width:var(--max-width);text-align:var(--jqc4y00);align-items:var(--jqc4y00)}.g7q46n1{display:flex;flex-direction:row;margin-left:0;margin-right:0;gap:var(--g7q46n0)}.g7q46n2{display:flex;flex-direction:row}.g7q46n2 a{padding:10px}.g7q46n2 a svg path{transition:all .5s ease-in-out}.g7q46n2 a:hover svg path{opacity:.5}.g7q46n3{0: g;1: 7;2: q;3: 4;4: 6;5: n;6: 1}.vehv9e1{display:flex;flex-direction:row;gap:var(--vehv9e0)}.vehv9e2{0: v;1: e;2: h;3: v;4: 9;5: e;6: 1}

package/dist/types/components/Button/export.d.ts

@@ -1,3 +1,4 @@
 export { Button } from '.';
 export type { ButtonProps } from '.';
 export { Type as ButtonType, Size as ButtonSize, Style as ButtonStyle, Variant as ButtonVariant } from './types';
+export { styles as ButtonStyles } from './styles.css';

package/dist/types/components/Button/index.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
-import { Size, Style, Type, Variant } from './types';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
+import { Size, Style, Type, Variant } from './types';
 export type ButtonProps = {
     type?: Type;
     size?: Size;
@@ -11,7 +11,6 @@ export type ButtonProps = {
     isDisabled?: boolean;
     staticColor?: string;
     onClick?: () => void;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Button: ({ children, styles, staticColor, isPending, isDisabled, type, style, size, onClick, theme, variant, }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ children, className, staticColor, isPending, isDisabled, type, style, size, onClick, theme, variant, }: ButtonProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Button/styles.css.d.ts

@@ -0,0 +1,38 @@
+export declare const buttonColorVar: `var(--${string})`;
+export declare const buttonCursorVar: `var(--${string})`;
+export declare const buttonBorderVar: `var(--${string})`;
+export declare const buttonMinWithVar: `var(--${string})`;
+export declare const buttonFontWeightVar: `var(--${string})`;
+export declare const buttonTransitionVar: `var(--${string})`;
+export declare const buttonPaddingTopVar: `var(--${string})`;
+export declare const buttonPaddingLeftVar: `var(--${string})`;
+export declare const buttonPaddingRightVar: `var(--${string})`;
+export declare const buttonPaddingBottomVar: `var(--${string})`;
+export declare const buttonPointerEventVar: `var(--${string})`;
+export declare const buttonBorderRadiusVar: `var(--${string})`;
+export declare const buttonLetterSpacingVar: `var(--${string})`;
+export declare const buttonBackgroundColorVar: `var(--${string})`;
+export declare const styles: {
+    position: string;
+    display: string;
+    color: `var(--${string})`;
+    border: `var(--${string})`;
+    cursor: `var(--${string})`;
+    minWidth: `var(--${string})`;
+    fontWeight: `var(--${string})`;
+    transition: `var(--${string})`;
+    paddingTop: `var(--${string})`;
+    paddingLeft: `var(--${string})`;
+    paddingRight: `var(--${string})`;
+    paddingBottom: `var(--${string})`;
+    pointerEvent: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    letterSpacing: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    selectors: {
+        '&:hover': {
+            opacity: number;
+        };
+    };
+};
+export declare const buttonStyle: string;

package/dist/types/components/Carousel/styles.css.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties } from 'react';
+import { Theme } from '../../types/theme';
+interface IStyledCarousel {
+    styles: CSSProperties;
+    isFullWidth: boolean;
+    theme: Theme;
+}
+export declare const StyledCarousel: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & IStyledCarousel, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCarouselContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface IStyledCarouselContentList {
+    gap: number;
+    left: number;
+    width: number;
+}
+export declare const StyledCarouselContentList: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & IStyledCarouselContentList, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCarouselContentListItem: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCarouselNav: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface IStyledCarouselNavButton {
+    isDisabled: boolean;
+}
+export declare const StyledCarouselNavButton: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & IStyledCarouselNavButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const carousselBulletStyle: string;
+interface IStyledCarouselBulletItem {
+    theme: Theme;
+    isActive: boolean;
+}
+export declare const StyledCarouselBulletItem: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & IStyledCarouselBulletItem, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/types/components/Footer/export.d.ts

@@ -1,2 +1,3 @@
 export { Footer } from '.';
 export type { FooterProps } from '.';
+export { styles as FooterStyles } from './styles.css';

package/dist/types/components/Footer/index.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type FooterProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const Footer: ({ children, styles, theme }: FooterProps) => import("react").JSX.Element;
+export declare const Footer: ({ children, className, theme }: FooterProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Footer/styles.css.d.ts

@@ -0,0 +1,10 @@
+export declare const vars: {
+    footerGap: `var(--${string})`;
+    footerBackgroundColor: `var(--${string})`;
+    footerPaddingTop: `var(--${string})`;
+    footerPaddingBottom: `var(--${string})`;
+    footerPaddingLeft: `var(--${string})`;
+    footerPaddingRight: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const footerStyle: string;

package/dist/types/components/NavLegal/export.d.ts

@@ -1,2 +1,3 @@
 export { NavLegal } from '.';
 export type { NavLegalProps } from '.';
+export { styles as NavLegalStyles } from './styles.css';

package/dist/types/components/NavLegal/index.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type NavLegalProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     children: React.ReactNode;
 };
-export declare const NavLegal: ({ children, styles, theme }: NavLegalProps) => import("react").JSX.Element;
+export declare const NavLegal: ({ children, className, theme }: NavLegalProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/NavLegal/styles.css.d.ts

@@ -0,0 +1,5 @@
+export declare const vars: {
+    navLegalGap: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const navLegalStyle: string;

package/dist/types/components/NavSocial/export.d.ts

@@ -1,3 +1,4 @@
 export { NavSocial } from '.';
 export type { NavSocialProps } from '.';
 export type { Social as SocialType } from './types';
+export { styles as NavSocialStyles } from './styles.css';

package/dist/types/components/NavSocial/index.d.ts

@@ -1,12 +1,11 @@
-import { CSSProperties } from 'react';
-import { Social } from './types';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
+import { Social } from './types';
 export type NavSocialProps = {
     theme?: Theme;
-    styles?: CSSProperties;
     navSocial: {
         name: Social;
         link: string;
     }[];
 };
-export declare const NavSocial: ({ navSocial, styles, theme }: NavSocialProps) => import("react").JSX.Element;
+export declare const NavSocial: ({ navSocial, className, theme }: NavSocialProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/NavSocial/styles.css.d.ts

@@ -0,0 +1,6 @@
+export declare const vars: {
+    navSocialGap: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const navSocialLinkStyle: string;
+export declare const navSocialStyle: string;

package/dist/types/components/Video/index.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type VideoProps = {
     video: string;
     theme?: Theme;
@@ -10,9 +10,8 @@ export type VideoProps = {
     onEnded?: () => void;
     poster?: string | null;
     showControls?: boolean;
-    styles?: CSSProperties;
     hidePlayButton?: boolean;
     isVideoFullWidth?: boolean;
     isPlayingFullScreen?: boolean;
 };
-export declare const Video: ({ video, isAutoPlay, styles, poster, startMuted, onPlay, onClose, onEnded, showControls, theme, hidePlayButton, isVideoFullWidth, isPlayingFullScreen, }: VideoProps) => React.ReactElement;
+export declare const Video: ({ video, isAutoPlay, poster, startMuted, onPlay, onClose, onEnded, showControls, theme, hidePlayButton, isVideoFullWidth, isPlayingFullScreen, className, }: VideoProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/Video/styles.css.d.ts

@@ -0,0 +1,10 @@
+export declare const vars: {
+    videoMaxHeight: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const videoStyle: string;
+export declare const videoPosterStyle: string;
+export declare const playButtonStyle: string;
+export declare const pauseButtonStyle: string;
+export declare const closeButtonStyle: string;
+export declare const soundButtonStyle: string;

package/dist/types/components/VideoFullWidth/export.d.ts

@@ -1,2 +1,3 @@
 export { VideoFullWidth } from '.';
 export type { VideoFullWidthProps } from '.';
+export { styles as VideoFullWidthStyles } from './styles.css';

package/dist/types/components/VideoFullWidth/index.d.ts

@@ -1,12 +1,11 @@
-import { CSSProperties } from 'react';
 import { Theme } from '../../types/theme';
+import { WithClassName } from '../../types/withClassName';
 export type VideoFullWidthProps = {
-    video: string;
     theme?: Theme;
+    video: string;
     poster?: string;
     isAutoPlay?: boolean;
     startMuted?: boolean;
     showControls?: boolean;
-    styles?: CSSProperties;
 };
-export declare const VideoFullWidth: ({ video, poster, isAutoPlay, styles, showControls, startMuted, theme, }: VideoFullWidthProps) => React.ReactElement;
+export declare const VideoFullWidth: ({ video, poster, className, isAutoPlay, showControls, startMuted, theme, }: VideoFullWidthProps & WithClassName) => import("react").JSX.Element;

package/dist/types/components/VideoFullWidth/styles.css.d.ts

@@ -0,0 +1,6 @@
+export declare const vars: {
+    videoFullWidthLeft: `var(--${string})`;
+    videoFullWidthRight: `var(--${string})`;
+};
+export declare const styles: string;
+export declare const videoFullWidthStyles: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.131",
+  "version": "0.0.133",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/dist/types/components/Button/styles.d.ts

@@ -1,17 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledButton {
-    theme: Theme;
-    isSmall: boolean;
-    isLarge: boolean;
-    isDisabled: boolean;
-    isOutlined: boolean;
-    isSecondary: boolean;
-    staticColor: string;
-    styles: CSSProperties;
-}
-export declare const StyledButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export {};

package/dist/types/components/Footer/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledFooter {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledFooter: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledFooter, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export {};

package/dist/types/components/NavLegal/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledNavLegal {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledNavLegal: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledNavLegal, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/NavSocial/styles.d.ts

@@ -1,15 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledNavSocial {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledNavSocial: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledNavSocial, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledNavSocialLink: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/dist/types/components/Video/styles.d.ts

@@ -1,49 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledVideo {
-    styles: CSSProperties;
-    isVideoFullWidth: boolean;
-}
-export declare const StyledVideo: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideo, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledVideoPoster {
-    isPlaying: boolean;
-}
-export declare const StyledVideoPoster: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoPoster, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface IStyledVideoFullWidthPauseButton {
-    theme: Theme;
-}
-export declare const StyledVideoFullWidthCloseButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoFullWidthPauseButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-interface IStyledVideoFullWidthPlayButton {
-    theme: Theme;
-    isPlaying: boolean;
-}
-export declare const StyledVideoFullWidthPlayButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoFullWidthPlayButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-interface IStyledVideoFullWidthPauseButton {
-    theme: Theme;
-    isPlaying: boolean;
-}
-export declare const StyledVideoFullWidthPauseButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoFullWidthPauseButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-interface IStyledVideoFullWidthSoundButton {
-    theme: Theme;
-    isMuted: boolean;
-}
-export declare const StyledVideoFullWidthSoundButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoFullWidthSoundButton, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export {};

package/dist/types/components/VideoFullWidth/styles.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'react';
-import { Theme } from '../../types/theme';
-interface IStyledVideoFullWidth {
-    theme: Theme;
-    styles: CSSProperties;
-}
-export declare const StyledVideoFullWidth: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & IStyledVideoFullWidth, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};