@vite-mf-monorepo/ui 0.4.5 → 0.4.6

package/dist/chunk-7IAJQE27.js

@@ -1,228 +0,0 @@
-import { getMovieCardLinkClasses, Rating_default, Typography_default, getMovieCardClasses } from './chunk-6DP3KZQG.js';
-import { Card_default } from './chunk-RZU2FFBW.js';
-import { Icon_default } from './chunk-6FBMTGXQ.js';
-import { getBlurDataUrl } from '@vite-mf-monorepo/shared';
-import clsx from 'clsx';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Link } from 'react-router-dom';
-
-function Image({
-  src,
-  alt,
-  blurDataUrl,
-  autoBlur = false,
-  blurSize = 16,
-  blurQuality = 0.3,
-  aspectRatio = "2/3",
-  fallback,
-  className,
-  onLoad,
-  onError,
-  loading = "eager",
-  ...rest
-}) {
-  const imgRef = useRef(null);
-  const containerRef = useRef(null);
-  const [state, setState] = useState("loading");
-  const [generatedBlur, setGeneratedBlur] = useState(
-    void 0
-  );
-  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl);
-  const [isVisible, setIsVisible] = useState(loading === "eager");
-  const effectiveBlur = blurDataUrl ?? generatedBlur;
-  useEffect(() => {
-    if (loading === "eager" || !containerRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(entry.target);
-        }
-      },
-      { rootMargin: "50px" }
-    );
-    observer.observe(containerRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [loading]);
-  useEffect(() => {
-    if (!autoBlur || blurDataUrl) {
-      setBlurReady(true);
-      return;
-    }
-    setBlurReady(false);
-    getBlurDataUrl(src, blurSize, blurQuality).then((base64) => {
-      setGeneratedBlur(base64);
-      setBlurReady(true);
-    }).catch(() => {
-      setBlurReady(true);
-    });
-  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality]);
-  useEffect(() => {
-    setState("loading");
-    setGeneratedBlur(void 0);
-    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {
-      setState("loaded");
-    }
-  }, [src]);
-  const handleLoad = useCallback(() => {
-    setState("loaded");
-    onLoad?.();
-  }, [onLoad]);
-  const handleError = useCallback(() => {
-    setState("error");
-    onError?.();
-  }, [onError]);
-  const defaultFallback = /* @__PURE__ */ jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted", children: /* @__PURE__ */ jsx(
-    Icon_default,
-    {
-      name: "Photo",
-      size: 48,
-      className: "ui:text-muted-foreground",
-      "aria-hidden": "true"
-    }
-  ) });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: clsx("ui:relative ui:overflow-hidden ui:bg-muted", className),
-      style: aspectRatio ? { aspectRatio } : void 0,
-      "data-state": state,
-      children: state === "error" ? fallback ?? defaultFallback : /* @__PURE__ */ jsxs(Fragment, { children: [
-        effectiveBlur && state === "loading" && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: effectiveBlur,
-            alt: "",
-            "aria-hidden": "true",
-            className: "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover"
-          }
-        ),
-        blurReady && isVisible && /* @__PURE__ */ jsx(
-          "img",
-          {
-            ref: imgRef,
-            src,
-            alt,
-            onLoad: handleLoad,
-            onError: handleError,
-            className: clsx(
-              "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300",
-              state === "loaded" ? "ui:opacity-100" : "ui:opacity-0"
-            ),
-            ...rest
-          }
-        )
-      ] })
-    }
-  );
-}
-var Image_default = Image;
-function MovieCardContent({
-  id,
-  title,
-  posterUrl,
-  voteAverage,
-  year,
-  className,
-  imageLoading = "lazy",
-  isInteractive,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs(
-    Card_default,
-    {
-      variant: "ghost",
-      className: getMovieCardClasses(isInteractive, className),
-      onClick,
-      "data-testid": `movie-card-${String(id)}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200", children: [
-          /* @__PURE__ */ jsx(
-            Image_default,
-            {
-              src: posterUrl,
-              alt: title,
-              loading: imageLoading,
-              aspectRatio: void 0,
-              className: "ui:h-full ui:w-full ui:object-cover"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1", children: /* @__PURE__ */ jsx(
-            Rating_default,
-            {
-              value: voteAverage,
-              size: "sm",
-              variant: "circle",
-              trackClassName: "ui:text-gray-200",
-              className: "ui:drop-shadow"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1", children: [
-          /* @__PURE__ */ jsx(
-            Typography_default,
-            {
-              variant: "label",
-              as: "h3",
-              className: "ui:line-clamp-2",
-              title,
-              children: title
-            }
-          ),
-          year && /* @__PURE__ */ jsx(
-            Typography_default,
-            {
-              variant: "caption-xs",
-              className: "ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
-              children: year
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function MovieCard({
-  id,
-  title,
-  posterUrl,
-  voteAverage,
-  year,
-  className,
-  imageLoading = "lazy",
-  as = "card",
-  ...rest
-}) {
-  const to = "to" in rest ? rest.to : void 0;
-  const onClick = "onClick" in rest ? rest.onClick : void 0;
-  const isInteractive = as === "link" || as === "button";
-  const cardContent = /* @__PURE__ */ jsx(
-    MovieCardContent,
-    {
-      id,
-      title,
-      posterUrl,
-      voteAverage,
-      year,
-      className,
-      imageLoading,
-      isInteractive,
-      onClick: as === "button" ? onClick : void 0
-    }
-  );
-  if (as === "link" && to) {
-    return /* @__PURE__ */ jsx(Link, { to, className: getMovieCardLinkClasses(), children: cardContent });
-  }
-  return cardContent;
-}
-var MovieCard_default = MovieCard;
-
-export { Image_default, MovieCard_default };
-//# sourceMappingURL=chunk-7IAJQE27.js.map
-//# sourceMappingURL=chunk-7IAJQE27.js.map

package/dist/chunk-7IAJQE27.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Image/Image.tsx","../src/MovieCard/MovieCardContent.tsx","../src/react-router/MovieCard/MovieCard.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-7IAJQE27.js","sourcesContent":["import { getBlurDataUrl } from '@vite-mf-monorepo/shared'\nimport clsx from 'clsx'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../Icon'\n\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\n\nexport type ImageState = 'loading' | 'loaded' | 'error'\n\nexport type AspectRatio = '2/3' | '16/9' | '1/1' | '4/3' | '3/2'\n\nexport type ImageLoading = 'lazy' | 'eager'\n\nexport interface ImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  /** Image source URL */\n  src: string\n  /** Alt text for accessibility */\n  alt: string\n  /** Pre-generated blur data URL (base64) */\n  blurDataUrl?: string\n  /** Auto-generate blur placeholder from src using Canvas API */\n  autoBlur?: boolean\n  /** Size of blur canvas (smaller = more blur). Default: 16 */\n  blurSize?: number\n  /** JPEG quality for blur (0-1). Default: 0.3 */\n  blurQuality?: number\n  /** Aspect ratio of the image container */\n  aspectRatio?: AspectRatio | (string & {})\n  /** Fallback content when image fails to load */\n  fallback?: ReactNode\n  /** Callback when image loads successfully */\n  onLoad?: () => void\n  /** Callback when image fails to load */\n  onError?: () => void\n  /** Load strategy: 'lazy' waits for viewport visibility, 'eager' loads immediately. Default: 'eager' */\n  loading?: ImageLoading\n}\n\nfunction Image({\n  src,\n  alt,\n  blurDataUrl,\n  autoBlur = false,\n  blurSize = 16,\n  blurQuality = 0.3,\n  aspectRatio = '2/3',\n  fallback,\n  className,\n  onLoad,\n  onError,\n  loading = 'eager',\n  ...rest\n}: Readonly<ImageProps>) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [state, setState] = useState<ImageState>('loading')\n  const [generatedBlur, setGeneratedBlur] = useState<string | undefined>(\n    undefined\n  )\n  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl)\n  const [isVisible, setIsVisible] = useState(loading === 'eager')\n\n  const effectiveBlur = blurDataUrl ?? generatedBlur\n\n  // Lazy load with IntersectionObserver\n  useEffect(() => {\n    if (loading === 'eager' || !containerRef.current) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true)\n          observer.unobserve(entry.target)\n        }\n      },\n      { rootMargin: '50px' }\n    )\n\n    observer.observe(containerRef.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [loading])\n\n  useEffect(() => {\n    if (!autoBlur || blurDataUrl) {\n      setBlurReady(true)\n      return\n    }\n\n    setBlurReady(false)\n\n    getBlurDataUrl(src, blurSize, blurQuality)\n      .then((base64) => {\n        setGeneratedBlur(base64)\n        setBlurReady(true)\n      })\n      .catch(() => {\n        setBlurReady(true)\n      })\n  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality])\n\n  useEffect(() => {\n    setState('loading')\n    setGeneratedBlur(undefined)\n\n    // Check if image is already loaded from cache\n    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {\n      setState('loaded')\n    }\n  }, [src])\n\n  const handleLoad = useCallback(() => {\n    setState('loaded')\n    onLoad?.()\n  }, [onLoad])\n\n  const handleError = useCallback(() => {\n    setState('error')\n    onError?.()\n  }, [onError])\n\n  const defaultFallback = (\n    <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n      <Icon\n        name=\"Photo\"\n        size={48}\n        className=\"ui:text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      data-state={state}\n    >\n      {state === 'error' ? (\n        (fallback ?? defaultFallback)\n      ) : (\n        <>\n          {effectiveBlur && state === 'loading' && (\n            <img\n              src={effectiveBlur}\n              alt=\"\"\n              aria-hidden=\"true\"\n              className=\"ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover\"\n            />\n          )}\n\n          {blurReady && isVisible && (\n            <img\n              ref={imgRef}\n              src={src}\n              alt={alt}\n              onLoad={handleLoad}\n              onError={handleError}\n              className={clsx(\n                'ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300',\n                state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n              )}\n              {...rest}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default Image\n","import { Card } from '../Card'\nimport { Image } from '../Image'\nimport { Rating } from '../Rating'\nimport { Typography } from '../Typography'\n\nimport { getMovieCardClasses } from './MovieCard.utils'\n\nimport type { ImageLoading } from '../Image'\nimport type { ReactNode } from 'react'\n\ninterface MovieCardContentProps {\n  id: number\n  title: string\n  posterUrl: string\n  voteAverage: number\n  year?: number | null\n  className?: string\n  imageLoading?: ImageLoading\n  isInteractive: boolean\n  onClick?: (() => void) | undefined\n}\n\nexport default function MovieCardContent({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  isInteractive,\n  onClick,\n}: Readonly<MovieCardContentProps>): ReactNode {\n  return (\n    <Card\n      variant=\"ghost\"\n      className={getMovieCardClasses(isInteractive, className)}\n      onClick={onClick}\n      data-testid={`movie-card-${String(id)}`}\n    >\n      <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n        <Image\n          src={posterUrl}\n          alt={title}\n          loading={imageLoading}\n          aspectRatio={undefined}\n          className=\"ui:h-full ui:w-full ui:object-cover\"\n        />\n        <div className=\"ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1\">\n          <Rating\n            value={voteAverage}\n            size=\"sm\"\n            variant=\"circle\"\n            trackClassName=\"ui:text-gray-200\"\n            className=\"ui:drop-shadow\"\n          />\n        </div>\n      </div>\n\n      <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n        <Typography\n          variant=\"label\"\n          as=\"h3\"\n          className=\"ui:line-clamp-2\"\n          title={title}\n        >\n          {title}\n        </Typography>\n        {year && (\n          <Typography\n            variant=\"caption-xs\"\n            className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n          >\n            {year}\n          </Typography>\n        )}\n      </div>\n    </Card>\n  )\n}\n","import { Link } from 'react-router-dom'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\nimport MovieCardContent from '../../MovieCard/MovieCardContent'\n\nimport type { MovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  as = 'card',\n  ...rest\n}: Readonly<MovieCardProps>) {\n  const to = 'to' in rest ? rest.to : undefined\n  const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n  const isInteractive = as === 'link' || as === 'button'\n\n  const cardContent = (\n    <MovieCardContent\n      id={id}\n      title={title}\n      posterUrl={posterUrl}\n      voteAverage={voteAverage}\n      year={year}\n      className={className}\n      imageLoading={imageLoading}\n      isInteractive={isInteractive}\n      onClick={as === 'button' ? onClick : undefined}\n    />\n  )\n\n  if (as === 'link' && to) {\n    return (\n      <Link to={to} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}

package/dist/chunk-DGJI4VNO.js

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=chunk-DGJI4VNO.js.map
-//# sourceMappingURL=chunk-DGJI4VNO.js.map

package/dist/chunk-DGJI4VNO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-DGJI4VNO.js"}

package/dist/chunk-FJZK3PY6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;AAsBA,SAAS,QAAA,CAAS;AAAA,EAChB,OAAA,GAAU,WAAA;AAAA,EACV,KAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,4CAAA;AAAA,QACA,qBAAA;AAAA,QACA;AAAA,UACE,eAAA,EAAiB,YAAY,WAAA,IAAe,OAAA;AAAA,UAC5C,mBAAmB,OAAA,KAAY,QAAA;AAAA,UAC/B,YAAA,EAAc,YAAY,MAAA,IAAU;AAAA,SACtC;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA,GAAc,EAAE,WAAA,EAAY,GAAI,MAAA;AAAA,MACtC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,gBAAA,GAAQ","file":"chunk-FJZK3PY6.js","sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n  /** Shape variant */\n  variant?: 'rectangle' | 'circle' | 'line'\n  /** Width (Tailwind class or custom value) */\n  width?: string\n  /** Height (Tailwind class or custom value) */\n  height?: string\n  /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n  aspectRatio?: string\n  /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n  rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n  variant = 'rectangle',\n  width,\n  height,\n  aspectRatio,\n  rounded = true,\n  className,\n  ...rest\n}: Readonly<SkeletonProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:relative ui:overflow-hidden ui:bg-muted',\n        'ui-skeleton-shimmer',\n        {\n          'ui:rounded-lg': variant === 'rectangle' && rounded,\n          'ui:rounded-full': variant === 'circle',\n          'ui:rounded': variant === 'line' && rounded,\n        },\n        width,\n        height,\n        className\n      )}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      {...rest}\n    />\n  )\n}\n\nexport default Skeleton\n"]}

package/dist/chunk-IUGKH376.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Button/Button.utils.ts"],"names":[],"mappings":";;AAaO,IAAM,WAAA,GAAc;AAAA,EACzB,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAWO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,YAAA,GAAe,MAAA;AAAA,EACf;AACF,CAAA,EAAsB;AACpB,EAAA,OAAO,IAAA;AAAA,IACL,gIAAA;AAAA,IACA,4CAAA;AAAA,IACA,iFAAA;AAAA,IACA;AAAA,MACE,eAAe,YAAA,KAAiB,MAAA;AAAA,MAChC,uBAAuB,YAAA,KAAiB;AAAA,KAC1C;AAAA,IACA;AAAA,MACE,mEACE,OAAA,KAAY,SAAA;AAAA,MACd,yEACE,OAAA,KAAY,WAAA;AAAA,MACd,+EACE,OAAA,KAAY,aAAA;AAAA,MACd,uFACE,OAAA,KAAY,SAAA;AAAA,MACd,sDAAsD,OAAA,KAAY;AAAA,KACpE;AAAA,IACA;AAAA,MACE,6BAA6B,IAAA,KAAS,IAAA;AAAA,MACtC,gCAAgC,IAAA,KAAS,IAAA;AAAA,MACzC,8BAA8B,IAAA,KAAS;AAAA,KACzC;AAAA,IACA;AAAA,GACF;AACF;AAEO,SAAS,yBAAyB,OAAA,EAAiB;AACxD,EAAA,OAAO,IAAA,CAAK,SAAS,wDAAwD,CAAA;AAC/E","file":"chunk-IUGKH376.js","sourcesContent":["import clsx from 'clsx'\n\nimport type { IconName } from '../Icon'\nimport type { ReactNode } from 'react'\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'destructive'\n  | 'outline'\n  | 'ghost'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport const iconSizeMap = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const\n\nexport interface ButtonVisualInput {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  icon?: IconName\n  iconPosition?: 'left' | 'right'\n  className?: string\n  children?: ReactNode\n}\n\nexport function getButtonClasses({\n  variant = 'primary',\n  size = 'md',\n  iconPosition = 'left',\n  className,\n}: ButtonVisualInput) {\n  return clsx(\n    'ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors',\n    'ui:rounded ui:border ui:border-transparent',\n    'ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2',\n    {\n      'ui:flex-row': iconPosition === 'left',\n      'ui:flex-row-reverse': iconPosition === 'right',\n    },\n    {\n      'ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90':\n        variant === 'primary',\n      'ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80':\n        variant === 'secondary',\n      'ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90':\n        variant === 'destructive',\n      'ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground':\n        variant === 'outline',\n      'ui:hover:bg-accent ui:hover:text-accent-foreground': variant === 'ghost',\n    },\n    {\n      'ui:h-8 ui:px-3 ui:text-sm': size === 'sm',\n      'ui:h-10 ui:px-4 ui:text-base': size === 'md',\n      'ui:h-12 ui:px-6 ui:text-lg': size === 'lg',\n    },\n    className\n  )\n}\n\nexport function getButtonDisabledClasses(classes: string) {\n  return clsx(classes, 'ui:disabled:pointer-events-none ui:disabled:opacity-50')\n}\n"]}

package/dist/chunk-RZU2FFBW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Card/Card.tsx"],"names":[],"mappings":";;;AAWA,IAAM,aAAA,GAA6C;AAAA,EACjD,OAAA,EACE,sEAAA;AAAA,EACF,OAAA,EAAS,mEAAA;AAAA,EACT,QAAA,EACE,sEAAA;AAAA,EACF,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,aAAA,CAAc,OAAO,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC1D,QAAA,EACH,CAAA;AAEJ;AAEA,IAAO,YAAA,GAAQ","file":"chunk-RZU2FFBW.js","sourcesContent":["import clsx from 'clsx'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type CardVariant = 'default' | 'outline' | 'elevated' | 'ghost'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visual variant of the card */\n  variant?: CardVariant\n}\n\nconst variantStyles: Record<CardVariant, string> = {\n  default:\n    'ui:rounded-md ui:p-4 ui:bg-card ui:text-card-foreground ui:shadow-md',\n  outline: 'ui:rounded-md ui:p-4 ui:border ui:border-border ui:bg-transparent',\n  elevated:\n    'ui:rounded-lg ui:p-6 ui:bg-card ui:text-card-foreground ui:shadow-lg',\n  ghost: 'ui:rounded-md',\n}\n\nfunction Card({\n  className,\n  variant = 'default',\n  children,\n  ...rest\n}: Readonly<CardProps>) {\n  return (\n    <div className={clsx(variantStyles[variant], className)} {...rest}>\n      {children}\n    </div>\n  )\n}\n\nexport default Card\n"]}

package/dist/chunk-ZTQU4GMY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react-router/Button/Button.tsx"],"names":["_","_v","_s","_i","_ip","_c","_ch"],"mappings":";;;;;AAWA,SAAS,OAAO,KAAA,EAA8B;AAC5C,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,IAAA;AAAA,IACA,YAAA,GAAe,MAAA;AAAA,IACf,SAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,UAAU,gBAAA,CAAiB,EAAE,SAAS,IAAA,EAAM,YAAA,EAAc,WAAW,CAAA;AAE3E,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,wBAAS,YAAA,EAAA,EAAK,IAAA,EAAM,MAAM,IAAA,EAAM,WAAA,CAAY,IAAI,CAAA,EAAG,CAAA;AAAA,IACnD;AAAA,GAAA,EACH,CAAA;AAGF,EAAA,IAAI,KAAA,CAAM,OAAO,MAAA,EAAQ;AACvB,IAAA,MAAM;AAAA,MACJ,EAAA,EAAIA,EAAAA;AAAA,MACJ,OAAA,EAASC,GAAAA;AAAA,MACT,IAAA,EAAMC,GAAAA;AAAA,MACN,IAAA,EAAMC,GAAAA;AAAA,MACN,YAAA,EAAcC,IAAAA;AAAA,MACd,SAAA,EAAWC,GAAAA;AAAA,MACX,QAAA,EAAUC,IAAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,2BACG,IAAA,EAAA,EAAK,SAAA,EAAW,OAAA,EAAU,GAAG,WAC3B,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM;AAAA,IACJ,EAAA,EAAI,CAAA;AAAA,IACJ,OAAA,EAAS,EAAA;AAAA,IACT,IAAA,EAAM,EAAA;AAAA,IACN,IAAA,EAAM,EAAA;AAAA,IACN,YAAA,EAAc,GAAA;AAAA,IACd,SAAA,EAAW,EAAA;AAAA,IACX,QAAA,EAAU,GAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA,CAAC,YAAO,SAAA,EAAW,wBAAA,CAAyB,OAAO,CAAA,EAAI,GAAG,aACvD,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ;AAEA,IAAO,cAAA,GAAQ","file":"chunk-ZTQU4GMY.js","sourcesContent":["import { Link } from 'react-router-dom'\n\nimport {\n  getButtonClasses,\n  getButtonDisabledClasses,\n  iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { ButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<ButtonProps>) {\n  const {\n    variant = 'primary',\n    size = 'md',\n    icon,\n    iconPosition = 'left',\n    className,\n    children,\n  } = props\n\n  const classes = getButtonClasses({ variant, size, iconPosition, className })\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} size={iconSizeMap[size]} />}\n      {children}\n    </>\n  )\n\n  if (props.as === 'link') {\n    const {\n      as: _,\n      variant: _v,\n      size: _s,\n      icon: _i,\n      iconPosition: _ip,\n      className: _c,\n      children: _ch,\n      ...linkProps\n    } = props\n\n    return (\n      <Link className={classes} {...linkProps}>\n        {content}\n      </Link>\n    )\n  }\n\n  const {\n    as: _,\n    variant: _v,\n    size: _s,\n    icon: _i,\n    iconPosition: _ip,\n    className: _c,\n    children: _ch,\n    ...buttonProps\n  } = props\n\n  return (\n    <button className={getButtonDisabledClasses(classes)} {...buttonProps}>\n      {content}\n    </button>\n  )\n}\n\nexport default Button\n"]}