@latte-macchiat-io/latte-vanilla-components 0.0.177 → 0.0.178

package/src/components/KeyNumber/KeyNumber.tsx

@@ -0,0 +1,166 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import CountUp from 'react-countup';
+import { useInView } from 'react-intersection-observer';
+import { keyNumberLabel, keyNumberRecipe, keyNumberValue, type KeyNumberVariants } from './KeyNumber.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface KeyNumberProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<KeyNumberVariants> {
+  css?: string;
+  value: number;
+  label: string;
+  suffix?: string;
+  prefix?: string;
+  duration?: number;
+  threshold?: number;
+  separator?: string;
+  decimals?: number;
+  as?: 'div' | 'section' | 'article';
+}
+
+export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
+  (
+    {
+      value,
+      label,
+      suffix = '',
+      prefix = '',
+      duration = 2,
+      threshold = 0.3,
+      separator = ',',
+      decimals = 0,
+      size,
+      variant,
+      align,
+      color,
+      as: Component = 'div',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const [inViewRef, inView] = useInView({
+      threshold,
+      triggerOnce: true,
+    });
+
+    return (
+      <Component
+        ref={(node) => {
+          inViewRef(node);
+          if (ref) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else {
+              (ref as any).current = node;
+            }
+          }
+        }}
+        className={clsx(
+          keyNumberRecipe({ size, variant, align }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        <div className={keyNumberValue}>
+          {prefix}
+          <span>
+            <CountUp end={inView ? value : 0} duration={duration} separator={separator} decimals={decimals} />
+          </span>
+          {suffix}
+        </div>
+        <p className={keyNumberLabel}>{label}</p>
+      </Component>
+    );
+  }
+);
+
+KeyNumber.displayName = 'KeyNumber';

package/src/components/KeyNumber/export.tsx

@@ -0,0 +1,4 @@
+// export { KeyNumber } from '.';
+// export type { KeyNumberProps } from '.';
+
+// export { styles as KeyNumberStyles } from './styles.css';

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,168 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { languageSwitcherIcon, languageSwitcherRecipe, languageSwitcherSelect, type LanguageSwitcherVariants } from './LanguageSwitcher.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon/Icon';
+
+export interface Locale {
+  code: string;
+  name: string;
+  label?: string;
+}
+
+export interface LanguageSwitcherProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>,
+    Sprinkles,
+    NonNullable<LanguageSwitcherVariants> {
+  css?: string;
+  locales: Locale[];
+  currentLocale: string;
+  onChange: (locale: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps>(
+  (
+    {
+      locales,
+      currentLocale,
+      onChange,
+      disabled = false,
+      placeholder,
+      variant,
+      size,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(event.target.value);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          languageSwitcherRecipe({ variant, size }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        <select
+          className={languageSwitcherSelect}
+          value={currentLocale}
+          onChange={handleSelectChange}
+          disabled={disabled}
+          aria-label="Switch language">
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {locales.map((locale) => (
+            <option key={locale.code} value={locale.code} disabled={locale.code === currentLocale}>
+              {locale.label || locale.name}
+            </option>
+          ))}
+        </select>
+        <div className={languageSwitcherIcon}>
+          <Icon icon="caret" size="sm" />
+        </div>
+      </div>
+    );
+  }
+);
+
+LanguageSwitcher.displayName = 'LanguageSwitcher';

package/src/components/LanguageSwitcher/export.tsx

@@ -0,0 +1,4 @@
+// export { LanguageSwitcher } from '.';
+// export type { LanguageSwitcherProps } from '.';
+
+// export { styles as LanguageSwitcherStyles } from './styles.css';

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,137 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { logoRecipe, type LogoVariants } from './Logo.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<LogoVariants> {
+  css?: string;
+  as?: 'div' | 'a' | 'span';
+  href?: string;
+}
+
+export const Logo = forwardRef<HTMLDivElement, LogoProps>(
+  (
+    {
+      children,
+      size,
+      variant,
+      responsive,
+      as: Component = 'div',
+      href,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    // If href is provided, use 'a' tag and set variant to 'link'
+    // TODO const FinalComponent = href ? 'a' : Component;
+    const finalVariant = href ? 'link' : variant;
+
+    return (
+      <div
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        // TODO href={href}
+        className={clsx(
+          logoRecipe({ size, variant: finalVariant, responsive }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Logo.displayName = 'Logo';

package/src/components/Logo/export.tsx

@@ -0,0 +1,4 @@
+// export { Logo } from '.';
+// export type { LogoProps } from '.';
+
+// export { styles as LogoStyles } from './styles.css';

package/src/components/Logo/stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Logo } from '../../index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Logo> = {
+  title: 'Latte Components / 1. Global / Logo',
+  component: Logo,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: <img src="" alt="" />,
+  },
+};

package/src/components/Main/Main.tsx

@@ -0,0 +1,130 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import { mainRecipe, type MainVariants } from './Main.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface MainProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<MainVariants> {
+  css?: string;
+  as?: 'main' | 'div';
+}
+
+export const Main = forwardRef<HTMLElement, MainProps>(
+  (
+    {
+      children,
+      centered,
+      fullWidth,
+      noPadding,
+      as: Component = 'main',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref as any}
+        className={clsx(
+          mainRecipe({ centered, fullWidth, noPadding }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {children}
+      </Component>
+    );
+  }
+);
+
+Main.displayName = 'Main';

package/src/components/Main/export.tsx

@@ -0,0 +1,4 @@
+// export { Main } from '.';
+// export type { MainProps } from '.';
+
+// export { styles as MainStyles } from './styles.css';