@yatoday/astro-ui 0.0.9 → 0.0.14

package/astro.d.ts

@@ -19,6 +19,7 @@ import type { ItemGrid0Props as YtItemGrid0Props } from './components/ItemGrid0/
 import type { LayoutProps as YtLayoutProps } from './components/Layout/types'
 import type { MetadataProps as YtMetadataProps } from './components/Metadata/types'
 import type { NavbarProps as YtNavbarProps } from './components/Navbar/types'
+import type { QuantitySwitchProps as YtQuantitySwitchProps } from './components/QuantitySwitch/types'
 import type { SiteVerificationProps as YtSiteVerificationProps } from './components/SiteVerification/types'
 import type { Stats0Props as YtStats0Props } from './components/Stats0/types'
 import type { SwiperSliderProps as YtSwiperSliderProps } from './components/SwiperSlider/types'
@@ -26,8 +27,11 @@ import type { WidgetCardSliderProps as YtWidgetCardSliderProps } from './compone
 import type { WidgetFeatures0Props as YtWidgetFeatures0Props } from './components/WidgetFeatures0/types'
 import type { WidgetFeaturesCardProps as YtWidgetFeaturesCardProps } from './components/WidgetFeaturesCard/types'
 import type { WidgetHero0Props as YtWidgetHero0Props } from './components/WidgetHero0/types'
+import type { WidgetHero1Props as YtWidgetHero1Props } from './components/WidgetHero1/types'
 import type { WidgetHeroSliderProps as YtWidgetHeroSliderProps } from './components/WidgetHeroSlider/types'
+import type { WidgetSteps1Props as YtWidgetSteps1Props } from './components/WidgetSteps1/types'
 import type { WidgetWrapperProps as YtWidgetWrapperProps } from './components/WidgetWrapper/types'
+import type { ZoomedImageProps as YtZoomedImageProps } from './components/ZoomedImage/types'
 
 declare module '@yatoday/astro-ui/astro' {
   export function Analytics(_props: YtAnalyticsProps): any
@@ -51,6 +55,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Layout(_props: YtLayoutProps): any
 	export function Metadata(_props: YtMetadataProps): any
 	export function Navbar(_props: YtNavbarProps): any
+	export function QuantitySwitch(_props: YtQuantitySwitchProps): any
 	export function SiteVerification(_props: YtSiteVerificationProps): any
 	export function Stats0(_props: YtStats0Props): any
 	export function SwiperSlider(_props: YtSwiperSliderProps): any
@@ -58,8 +63,11 @@ declare module '@yatoday/astro-ui/astro' {
 	export function WidgetFeatures0(_props: YtWidgetFeatures0Props): any
 	export function WidgetFeaturesCard(_props: YtWidgetFeaturesCardProps): any
 	export function WidgetHero0(_props: YtWidgetHero0Props): any
+	export function WidgetHero1(_props: YtWidgetHero1Props): any
 	export function WidgetHeroSlider(_props: YtWidgetHeroSliderProps): any
+	export function WidgetSteps1(_props: YtWidgetSteps1Props): any
 	export function WidgetWrapper(_props: YtWidgetWrapperProps): any
+	export function ZoomedImage(_props: YtZoomedImageProps): any
 
   export type AnalyticsProps = YtAnalyticsProps
 	export type BackToTopButtonProps = YtBackToTopButtonProps
@@ -82,6 +90,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type LayoutProps = YtLayoutProps
 	export type MetadataProps = YtMetadataProps
 	export type NavbarProps = YtNavbarProps
+	export type QuantitySwitchProps = YtQuantitySwitchProps
 	export type SiteVerificationProps = YtSiteVerificationProps
 	export type Stats0Props = YtStats0Props
 	export type SwiperSliderProps = YtSwiperSliderProps
@@ -89,6 +98,9 @@ declare module '@yatoday/astro-ui/astro' {
 	export type WidgetFeatures0Props = YtWidgetFeatures0Props
 	export type WidgetFeaturesCardProps = YtWidgetFeaturesCardProps
 	export type WidgetHero0Props = YtWidgetHero0Props
+	export type WidgetHero1Props = YtWidgetHero1Props
 	export type WidgetHeroSliderProps = YtWidgetHeroSliderProps
+	export type WidgetSteps1Props = YtWidgetSteps1Props
 	export type WidgetWrapperProps = YtWidgetWrapperProps
+	export type ZoomedImageProps = YtZoomedImageProps
 }

package/astro.js

@@ -19,6 +19,7 @@ import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.astro'
 import LayoutComponent from './components/Layout/Layout.astro'
 import MetadataComponent from './components/Metadata/Metadata.astro'
 import NavbarComponent from './components/Navbar/Navbar.astro'
+import QuantitySwitchComponent from './components/QuantitySwitch/QuantitySwitch.astro'
 import SiteVerificationComponent from './components/SiteVerification/SiteVerification.astro'
 import Stats0Component from './components/Stats0/Stats0.astro'
 import SwiperSliderComponent from './components/SwiperSlider/SwiperSlider.astro'
@@ -26,8 +27,11 @@ import WidgetCardSliderComponent from './components/WidgetCardSlider/WidgetCardS
 import WidgetFeatures0Component from './components/WidgetFeatures0/WidgetFeatures0.astro'
 import WidgetFeaturesCardComponent from './components/WidgetFeaturesCard/WidgetFeaturesCard.astro'
 import WidgetHero0Component from './components/WidgetHero0/WidgetHero0.astro'
+import WidgetHero1Component from './components/WidgetHero1/WidgetHero1.astro'
 import WidgetHeroSliderComponent from './components/WidgetHeroSlider/WidgetHeroSlider.astro'
+import WidgetSteps1Component from './components/WidgetSteps1/WidgetSteps1.astro'
 import WidgetWrapperComponent from './components/WidgetWrapper/WidgetWrapper.astro'
+import ZoomedImageComponent from './components/ZoomedImage/ZoomedImage.astro'
 
 export const Analytics = AnalyticsComponent
 export const BackToTopButton = BackToTopButtonComponent
@@ -50,6 +54,7 @@ export const ItemGrid0 = ItemGrid0Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
 export const Navbar = NavbarComponent
+export const QuantitySwitch = QuantitySwitchComponent
 export const SiteVerification = SiteVerificationComponent
 export const Stats0 = Stats0Component
 export const SwiperSlider = SwiperSliderComponent
@@ -57,5 +62,8 @@ export const WidgetCardSlider = WidgetCardSliderComponent
 export const WidgetFeatures0 = WidgetFeatures0Component
 export const WidgetFeaturesCard = WidgetFeaturesCardComponent
 export const WidgetHero0 = WidgetHero0Component
+export const WidgetHero1 = WidgetHero1Component
 export const WidgetHeroSlider = WidgetHeroSliderComponent
-export const WidgetWrapper = WidgetWrapperComponent
+export const WidgetSteps1 = WidgetSteps1Component
+export const WidgetWrapper = WidgetWrapperComponent
+export const ZoomedImage = ZoomedImageComponent

package/components/BackToTopButton/BackToTopButton.astro

@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon/components';
 import type { BackToTopButtonProps as Props } from './types';
 
-const { selector = '#header' } = Astro.props;
+const { selector = '#header', scrollOffset = 450 } = Astro.props;
 ---
 
 <style>
@@ -56,7 +56,13 @@ const { selector = '#header' } = Astro.props;
 </style>
 
 <!-- Back to top button-->
-<a class="btn-scroll-top text-card-foreground" href={selector} data-scroll>
+<a 
+  class="btn-scroll-top text-card-foreground" 
+  href="javascript:void(0);" 
+  data-yt-scroll 
+  data-yt-scroll-offset={scrollOffset}
+  data-yt-scroll-selector={selector}
+>
   <svg viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></circle>
   </svg>
@@ -66,18 +72,19 @@ const { selector = '#header' } = Astro.props;
 </a>
 
 <script>
+  import {get, attachEvent} from "../../utils";
+  
   /**
    * Animate scroll to top button in/off view
    */
   const scrollTopButton = function () {
-    const button = document.querySelector('.btn-scroll-top');
-    const scrollOffset = '450';
-
+    const button = get('[data-yt-scroll]') as HTMLElement;
     if (button == null) {
       return;
     }
-
-    const offsetFromTop = parseInt(scrollOffset, 10);
+    
+    const targetEl = get(button.dataset?.ytScrollSelector || '#header') as HTMLElement;
+    const offsetFromTop = Number(button.dataset.ytScrollOffset) || 450;
     const progress = button.querySelector('svg circle') as SVGCircleElement;
 
     if (progress == null) {
@@ -100,6 +107,10 @@ const { selector = '#header' } = Astro.props;
       progress.style.strokeDashoffset = String(length - draw);
     };
 
+    attachEvent([button], 'click', (_: Event, elem: HTMLElement) => {
+      targetEl?.scrollIntoView({ behavior: "smooth", block: "end" });
+    });
+    
     window.addEventListener('scroll', function () {
       // if (event?.currentTarget?.pageYOffset > offsetFromTop) {
       if (window.scrollY > offsetFromTop) {

package/components/BackToTopButton/types.ts

@@ -1,3 +1,4 @@
 export type BackToTopButtonProps = {
   selector?: string;
+  scrollOffset?: number;
 };

package/components/BreadcrumbsItem/types.ts

@@ -1,6 +1,6 @@
 export type BreadcrumbsItemProps = {
   href?: string;
-  label: string;
+  label: string | number;
   currentPage?: boolean;
   hasIcon?: boolean;
   class?: string;

package/components/Button/Button.astro

@@ -2,7 +2,7 @@
 import type { ButtonProps as Props } from './types';
 
 import { Icon } from 'astro-icon/components';
-import { buttonVariants } from './button-variants';
+import { themeVariants } from './theme-variants';
 import { cn } from '../../utils';
 
 const {
@@ -20,7 +20,7 @@ const {
 {
   rest?.href ? (
     <a
-      class={cn(buttonVariants({ size, variant }), className)}
+      class={cn(themeVariants({ size, variant }), className)}
       {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
       {...rest}
     >
@@ -28,7 +28,7 @@ const {
       {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
     </a>
   ) : (
-    <button type={type} class={cn(buttonVariants({ size, variant }), className)} {...rest}>
+    <button type={type} class={cn(themeVariants({ size, variant }), className)} {...rest}>
       <Fragment set:html={text} />
       {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
     </button>

package/components/Button/Button.svelte

@@ -1,21 +1,8 @@
-<script lang="ts" module>
-  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
-
-  import type { WithElementRef } from 'bits-ui';
-  import type {ButtonSize, ButtonVariant} from "./button-variants.ts";
-
-  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-    WithElementRef<HTMLAnchorAttributes> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    text?: string;
-  };
-</script>
-
 <script lang="ts">
   import { cn } from '../../utils';
-  import {buttonVariants} from "./button-variants.ts";
-
+  import {themeVariants} from "./theme-variants.ts";
+  import type {SvelteButtonProps} from "~/components/Button/types.ts";
+  
   let {
     class: className = '',
     variant = 'default',
@@ -26,13 +13,13 @@
     type = 'button',
     children,
     ...restProps
-  }: ButtonProps = $props()
+  }: SvelteButtonProps = $props()
 </script>
 
 {#if href}
   <a
     bind:this={ref}
-    class={cn(buttonVariants({ size, variant }), className)}
+    class={cn(themeVariants({ size, variant }), className)}
     {href}
     {...restProps}
   >
@@ -42,7 +29,7 @@
 {:else}
   <button
     bind:this={ref}
-    class={cn(buttonVariants({ size, variant }), className)}
+    class={cn(themeVariants({ size, variant }), className)}
     {type}
     {...restProps}
   >

package/components/Button/{button-variants.ts → theme-variants.ts}

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from 'tailwind-variants';
 
-export const buttonVariants = tv({
+export const themeVariants = tv({
   base: 'btn ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   variants: {
     variant: {
@@ -17,7 +17,7 @@ export const buttonVariants = tv({
       default: 'px-6 sm:px-8 h-10 sm:h-12 rounded-(--radius-btn)',
       sm: 'h-8 px-4 text-xs sm:h-10 sm:px-6 sm:text-sm rounded-[calc(var(--radius-btn)-2px)]',
       lg: 'h-14 px-8 text-base sm:text-lg md:text-xl rounded-[calc(var(--radius-btn)+2px)]',
-      icon: 'size-10',
+      icon: 'size-10 aspect-square',
     },
   },
   defaultVariants: {
@@ -26,5 +26,5 @@ export const buttonVariants = tv({
   },
 });
 
-export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonVariant = VariantProps<typeof themeVariants>['variant'];
+export type ButtonSize = VariantProps<typeof themeVariants>['size'];

package/components/Button/types.ts

@@ -1,11 +1,19 @@
-import type { WithElementRef } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
+import type {ButtonSize, ButtonVariant} from "~/components/Button/theme-variants.ts";
+import type {WithElementRef} from "bits-ui";
+import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
+
 
 export type ButtonProps = {
-  variant?: 'default' | 'primary' | 'accent' | 'destructive' | 'outline' | 'ghost' | 'link';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
+  variant?: ButtonVariant;
+  size?: ButtonSize;
   text?: string;
   class?: string;
   [key: string]: any;
 };
+
+export type SvelteButtonProps = WithElementRef<HTMLButtonAttributes> &
+  WithElementRef<HTMLAnchorAttributes> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  text?: string;
+};

package/components/Card3/types.ts

@@ -1,11 +1,11 @@
 import type { HTMLTag } from 'astro/types';
 import type { Card0Props } from '../Card0/types';
-import type { ICallToAction } from '../CallToAction/types';
+import type { ToAction } from '../../types';
 
 export type Card3Props = {
   title?: string;
   description?: string;
   asHeader?: HTMLTag;
   badge?: string;
-  callToAction?: ICallToAction;
+  callToAction?: ToAction;
 } & Card0Props;

package/components/DarkMode/DarkMode.astro

@@ -20,7 +20,7 @@ const {
       type="button"
       class={twMerge('cursor-pointer inline-flex items-center', className)}
       aria-label={label}
-      data-aw-toggle-color-scheme
+      data-yt-toggle-color-scheme
     >
       <slot>
         <Icon name={iconName} class={iconClass} />
@@ -59,7 +59,7 @@ const {
 
     // Add click handlers to all toggles
     document.addEventListener('click', (e) => {
-      if (e.target.closest('[data-aw-toggle-color-scheme]')) {
+      if (e.target.closest('[data-yt-toggle-color-scheme]')) {
         if (mode.endsWith(':only')) {
           return;
         }

package/components/Headline/Headline.astro

@@ -7,6 +7,7 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
   classes = {},
+  as = 'h2'
 } = Astro.props;
 
 const {
@@ -15,6 +16,8 @@ const {
   subtitle: subtitleClass = '',
   tagline: taglineClass = '',
 } = classes;
+
+const WrapperTag = as;
 ---
 
 {
@@ -27,7 +30,7 @@ const {
         />
       )}
       {title && (
-        <h2
+        <WrapperTag
           class={cn(
             'font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl md:text-4xl',
             titleClass

package/components/Headline/types.ts

@@ -1,6 +1,9 @@
+import type {HTMLTag} from "astro/types";
+
 export type HeadlineProps = {
   title?: string;
   subtitle?: string;
   tagline?: string;
   classes?: Record<string, string>;
+  ['as']?: HTMLTag;
 };

package/components/HeroSection/types.ts

@@ -1,12 +1,12 @@
 import type { HTMLTag } from 'astro/types';
 import type { ImageProps } from '../Image/types';
-import type { ICallToAction } from '../CallToAction/types';
+import type { ToAction } from '../../types';
 
 export type HeroSectionProps = {
   asHeader?: HTMLTag;
   title?: string;
   description?: string;
   image: ImageProps | string;
-  callToAction?: ICallToAction;
+  callToAction?: ToAction;
   classes?: Record<string, string>;
 };

package/components/Navbar/Navbar.astro

@@ -6,7 +6,9 @@ import { Icon } from 'astro-icon/components';
 import DarkMode from '../DarkMode/DarkMode.astro';
 import ToggleMenu from './ToggleMenu.astro';
 import Button from '../Button/Button.astro';
+import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import { cn, trimSlash } from '../../utils';
+import {twMerge} from "tailwind-merge";
 
 const {
   links = [],
@@ -17,13 +19,15 @@ const {
   position = 'center',
   classes = {},
   scrollOffset = 60,
+  as = 'header',
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 
 const {
   header: headerClass = '',
-  container: containerClass = 'max-w-7xl md:mx-auto',
+  container: containerClass = 'max-w-7xl 2xl:max-w-[96rem] md:mx-auto',
   links: linksClass = 'hover:text-link dark:hover:text-white',
-  dropdown: dropdownClass = 'bg-background text-foreground shadow-lg',
+  dropdown: dropdownClass = 'bg-background text-foreground md:shadow-lg',
   dropdownLinks: dropdownLinksClass = 'hover:bg-black/10 hover:text-link dark:hover:text-white dark:hover:bg-white/10',
   darkModeIcon: darkModeIconClass = '',
   pinned: pinnedClasses = 'bg-background md:bg-background/90 md:backdrop-blur-md',
@@ -33,26 +37,28 @@ const {
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
 ---
 
-<header
+<WidgetWrapper
   id="header"
+  isDark={isDark}
+  bg={bg}
+  as={as}
   class={cn(
     { sticky: isSticky, relative: !isSticky, dark: isDark },
     '-top-[1px] z-40 flex-none w-full transition-[opacity] ease-in-out',
     headerClass,
     unpinnedClasses
   )}
-  {...isSticky ? { 'data-ya-sticky-header': true } : {}}
+  containerClass={twMerge("py-0 md:py-0 lg:py-0", containerClass)}
+  {...isSticky ? { 'data-yt-sticky-header': true } : {}}
   data-scroll-offset={scrollOffset}
   data-pinned-classes={pinnedClasses}
   data-unpinned-classes={unpinnedClasses}
 >
-  <!--<div class="absolute inset-0 w-full"></div>-->
   <div
     class={cn(
-      'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
+      'relative text-default py-3 mx-auto w-full',
       { 'md:flex md:justify-between': position !== 'center' },
       { 'md:grid md:grid-cols-3 md:items-center': position === 'center' },
-      containerClass
     )}
   >
     <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between items-center']}>
@@ -127,6 +133,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
         { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
         'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
       ]}
+      data-yt-actions
     >
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex">
@@ -150,7 +157,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
       </div>
     </div>
   </div>
-</header>
+</WidgetWrapper>
 
 <style>
   #header.expanded nav {
@@ -173,7 +180,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
   import { attachEvent, toggleClasses, addClasses, removeClasses } from '../../utils/DOMUtils';
 
   const addEventListeners = () => {
-    const header = document.querySelector('#header[data-ya-sticky-header]') as HTMLElement;
+    const header = document.querySelector('[data-yt-sticky-header]') as HTMLElement;
     if (!header) return;
 
     const scrollOffset = Number(header.dataset.scrollOffset) || 0;
@@ -183,15 +190,15 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     let lastKnownScrollPosition = window.scrollY;
     let ticking = true;
 
-    attachEvent('[data-aw-toggle-menu]', 'click', (_: Event, elem: HTMLElement) => {
+    attachEvent('[data-yt-toggle-menu]', 'click', (_: Event, elem: HTMLElement) => {
       toggleClasses(elem, 'expanded');
       toggleClasses(document.body, 'overflow-hidden');
       toggleClasses(document.getElementById('header'), 'h-screen', 'expanded');
-      toggleClasses('#header nav', 'hidden');
-      toggleClasses('#header > div > div:last-child', 'hidden');
+      toggleClasses('[data-yt-sticky-header] nav', 'hidden');
+      toggleClasses('[data-yt-actions]', 'hidden');
     });
 
-    attachEvent('#header nav', 'click', () => {
+    attachEvent('[data-yt-sticky-header] nav', 'click', () => {
       hiddenNav();
     });
 
@@ -200,11 +207,11 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     });
 
     function hiddenNav() {
-      removeClasses('[data-aw-toggle-menu]', 'expanded');
+      removeClasses('[data-yt-toggle-menu]', 'expanded');
       removeClasses(document.body, 'overflow-hidden');
       removeClasses(document.getElementById('header'), 'h-screen', 'expanded');
-      addClasses('#header nav', 'hidden');
-      addClasses('#header > div > div:last-child', 'hidden');
+      addClasses('[data-yt-sticky-header] nav', 'hidden');
+      addClasses('[data-yt-actions]', 'hidden');
     }
 
     function applyHeaderStylesOnScroll() {

package/components/Navbar/ToggleMenu.astro

@@ -10,7 +10,7 @@ const {
 } = Astro.props;
 ---
 
-<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
+<button type="button" class={className} aria-label={label} data-yt-toggle-menu>
   <span class="sr-only">{label}</span>
   <slot>
     <span

package/components/Navbar/types.ts

@@ -1,4 +1,5 @@
 import type { ToAction } from '../../types';
+import type {WidgetWrapperProps} from "../WidgetWrapper/types.ts";
 
 export type NavbarProps = {
   links?: IMenuLink[];
@@ -10,7 +11,7 @@ export type NavbarProps = {
   classes?: Record<string, string>;
   scrollOffset?: number;
   pinnedClasses?: string;
-};
+} & WidgetWrapperProps;
 
 export interface ILink {
   text?: string;

package/components/QuantitySwitch/QuantitySwitch.astro

@@ -0,0 +1,7 @@
+---
+import type { QuantitySwitchProps as Props } from './types';
+---
+
+<div>
+  
+</div>

package/components/QuantitySwitch/QuantitySwitch.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { cn, id } from '../../utils';
+  import type {SvelteQuantitySwitchProps} from "./types.ts";
+  import {themeVariants, buttonVariants} from "./theme-variants.ts";
+
+  type $$Props = SvelteQuantitySwitchProps;
+
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export let size: $$Props['size'] = 'default';
+  export { className as class };
+
+  export let value = 1;
+  export let max = 100;
+  export let min = 0;
+  export let step = 1;
+  export let label = '';
+  export let readonly = undefined;
+
+  const dispatch = createEventDispatcher();
+  const quantityInputId = `quantity_input_${id()}`;
+
+  function decrease() {
+    const previousValue = value;
+    value - step >= min ? value -= step : value = min;
+    dispatch('value', { currentValue: value, previousValue });
+  }
+
+  function increase() {
+    const previousValue = value;
+    value + step <= max ? value += step : value = max;
+    dispatch('value', { currentValue: value, previousValue });
+  }
+
+  function checkValue() {
+    if (value > max) value = max;
+    if (value < min) value = min;
+  }
+
+  $: value && checkValue();
+</script>
+
+<style>
+
+</style>
+
+<div class={cn(themeVariants({ variant, size, className }))}>
+  <label class="screen-reader-text" for={quantityInputId}>
+    {label}
+  </label>
+  <input
+    type={readonly ? "text" : "number"}
+    id={quantityInputId}
+    class="text-center h-full p-0 m-0 border-none w-full focus:outline-none font-bold bg-transparent text-inherit"
+    name="quantity"
+    bind:value={value} aria-label="Product quantity"
+    size="4"
+    min={min}
+    max={max}
+    step={step}
+    placeholder=""
+    inputmode="numeric"
+    autocomplete="off"
+    {readonly}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:focusin
+    on:focusout
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+    on:paste
+    on:input
+    on:wheel|passive
+    {...$$restProps}
+  >
+  <div class="quantity-nav absolute w-full left-0 top-0 h-0 flex justify-between">
+    <button
+      type="button"
+      on:click={decrease}
+      tabindex="0"
+      class={cn('group select-none rounded-l-full', buttonVariants({ variant, size }))}
+    >
+      <slot name="plus">
+        <svg xmlns="http://www.w3.org/2000/svg" class="transition-transform scale-50 group-active:scale-75" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg>
+      </slot>
+    </button>
+    <button
+      type="button"
+      on:click={increase}
+      tabindex="0"
+      class={cn('group select-none rounded-r-full', buttonVariants({ variant, size }))}
+    >
+      <slot name="plus">
+        <svg xmlns="http://www.w3.org/2000/svg" class="transition-transform scale-50 group-active:scale-75" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
+      </slot>
+    </button>
+  </div>
+</div>