@vite-mf-monorepo/ui 0.1.1 → 0.3.0

package/dist/next/index.js

@@ -0,0 +1,120 @@
+import { Skeleton_default } from '../chunk-JPJYJLAP.js';
+import { getMovieCardLinkClasses, MovieCardContent } from '../chunk-JDBRVX5O.js';
+import { getButtonClasses, iconSizeMap, getButtonDisabledClasses } from '../chunk-FDLKS7BI.js';
+import '../chunk-JI3OVXCK.js';
+import { Icon_default } from '../chunk-JHRISQQJ.js';
+import Link from 'next/link';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Image from 'next/image';
+import { useState } from 'react';
+
+function Button(props) {
+  const {
+    variant = "primary",
+    size = "md",
+    icon,
+    iconPosition = "left",
+    className,
+    children
+  } = props;
+  const classes = getButtonClasses({ variant, size, iconPosition, className });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(Icon_default, { name: icon, size: iconSizeMap[size] }),
+    children
+  ] });
+  if (props.as === "link") {
+    const {
+      as: _2,
+      variant: _v2,
+      size: _s2,
+      icon: _i2,
+      iconPosition: _ip2,
+      className: _c2,
+      children: _ch2,
+      ...linkProps
+    } = props;
+    return /* @__PURE__ */ jsx(Link, { className: classes, ...linkProps, children: content });
+  }
+  const {
+    as: _,
+    variant: _v,
+    size: _s,
+    icon: _i,
+    iconPosition: _ip,
+    className: _c,
+    children: _ch,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx("button", { className: getButtonDisabledClasses(classes), ...buttonProps, children: content });
+}
+var Button_default = Button;
+function HeroImage({ backdropPath, title }) {
+  const [loading, setLoading] = useState(true);
+  const src = backdropPath ? `https://image.tmdb.org/t/p/original${backdropPath}` : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx(
+      Skeleton_default,
+      {
+        "data-testid": "hero-image-skeleton",
+        variant: "rectangle",
+        width: "ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",
+        aspectRatio: "21/9",
+        rounded: false
+      }
+    ),
+    src && /* @__PURE__ */ jsx(
+      Image,
+      {
+        src,
+        alt: title ?? "Unknown",
+        fill: true,
+        priority: true,
+        sizes: "100vw",
+        className: "ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0",
+        onLoad: () => {
+          setLoading(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0" })
+  ] });
+}
+var HeroImage_default = HeroImage;
+function MovieCard({
+  id,
+  title,
+  posterUrl,
+  voteAverage,
+  year,
+  className,
+  imageLoading = "lazy",
+  as = "card",
+  ...rest
+}) {
+  const href = "href" in rest ? rest.href : 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" && href) {
+    return /* @__PURE__ */ jsx(Link, { href, className: getMovieCardLinkClasses(), children: cardContent });
+  }
+  return cardContent;
+}
+var MovieCard_default = MovieCard;
+
+export { Button_default as Button, HeroImage_default as HeroImage, MovieCard_default as MovieCard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/next/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/next/Button/Button.tsx","../../src/next/HeroImage/HeroImage.tsx","../../src/next/MovieCard/MovieCard.tsx"],"names":["_","_v","_s","_i","_ip","_c","_ch","jsxs","Fragment","jsx","Link"],"mappings":"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","file":"index.js","sourcesContent":["import Link from 'next/link'\n\nimport {\n  getButtonClasses,\n  getButtonDisabledClasses,\n  iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { NextButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<NextButtonProps>) {\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","import Image from 'next/image'\nimport { useState } from 'react'\n\nimport { Skeleton } from '../../Skeleton'\n\nexport interface NextHeroImageProps {\n  /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n  backdropPath?: string | null\n  /** Alt text for the image */\n  title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n  const [loading, setLoading] = useState(true)\n\n  const src = backdropPath\n    ? `https://image.tmdb.org/t/p/original${backdropPath}`\n    : undefined\n\n  return (\n    <>\n      {loading && (\n        <Skeleton\n          data-testid=\"hero-image-skeleton\"\n          variant=\"rectangle\"\n          width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n          aspectRatio=\"21/9\"\n          rounded={false}\n        />\n      )}\n      {src && (\n        <Image\n          src={src}\n          alt={title ?? 'Unknown'}\n          fill\n          priority\n          sizes=\"100vw\"\n          className=\"ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0\"\n          onLoad={() => {\n            setLoading(false)\n          }}\n        />\n      )}\n      {/* Gradient Overlay */}\n      <div className=\"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0\" />\n    </>\n  )\n}\n\nexport default HeroImage\n","import Link from 'next/link'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\nimport MovieCardContent from '../../MovieCard/MovieCardContent'\n\nimport type { NextMovieCardProps } 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<NextMovieCardProps>) {\n  const href = 'href' in rest ? rest.href : 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' && href) {\n    return (\n      <Link href={href} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}

package/dist/react-router/index.d.ts

@@ -0,0 +1,19 @@
+export { Button, ButtonAsButton, ButtonAsLink, ButtonProps } from '../Button/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { M as MovieCardAsCard, a as MovieCardBaseProps, b as MovieCardAsButton } from '../MovieCard.utils-CpNUUs8O.js';
+import '../Icon/index.js';
+import 'react';
+import 'react-router-dom';
+
+interface MovieCardAsLink extends MovieCardBaseProps {
+    /** Render as React Router Link */
+    as: 'link';
+    /** Navigation path (required when as="link") */
+    to: string;
+    onClick?: never;
+}
+type MovieCardProps = MovieCardAsCard | MovieCardAsLink | MovieCardAsButton;
+
+declare function MovieCard({ id, title, posterUrl, voteAverage, year, className, imageLoading, as, ...rest }: Readonly<MovieCardProps>): react_jsx_runtime.JSX.Element;
+
+export { MovieCard, MovieCardAsButton, MovieCardAsCard, type MovieCardAsLink, MovieCardBaseProps, type MovieCardProps };

package/dist/react-router/index.js

@@ -0,0 +1,8 @@
+export { MovieCard_default as MovieCard } from '../chunk-5NW3IDX2.js';
+export { Button_default as Button } from '../chunk-WYIIOTWJ.js';
+import '../chunk-JDBRVX5O.js';
+import '../chunk-FDLKS7BI.js';
+import '../chunk-JI3OVXCK.js';
+import '../chunk-JHRISQQJ.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react-router/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vite-mf-monorepo/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Design system components for vite-mf-monorepo",
   "type": "module",
   "publishConfig": {
@@ -16,6 +16,18 @@
         "default": "./dist/index.js"
       }
     },
+    "./react-router": {
+      "import": {
+        "types": "./dist/react-router/index.d.ts",
+        "default": "./dist/react-router/index.js"
+      }
+    },
+    "./next": {
+      "import": {
+        "types": "./dist/next/index.d.ts",
+        "default": "./dist/next/index.js"
+      }
+    },
     "./*": {
       "import": {
         "types": "./dist/*/index.d.ts",
@@ -31,10 +43,19 @@
     "dist"
   ],
   "peerDependencies": {
+    "next": ">=14",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-router-dom": "7.5.2"
   },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@tailwindcss/postcss": "4.1.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -47,6 +68,7 @@
     "autoprefixer": "10.4.21",
     "conventional-changelog": "7.2.0",
     "jsdom": "26.0.0",
+    "next": "^16.2.0",
     "postcss": "8.5.3",
     "react-router-dom": "7.5.2",
     "tailwindcss": "4.1.0",
@@ -57,7 +79,7 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "clsx": "2.1.1",
-    "@vite-mf-monorepo/shared": "0.0.3"
+    "@vite-mf-monorepo/shared": "0.0.5"
   },
   "scripts": {
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",

package/dist/chunk-GNBS5RLB.js

@@ -1,85 +0,0 @@
-import { Icon_default } from './chunk-JHRISQQJ.js';
-import clsx from 'clsx';
-import { Link } from 'react-router-dom';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var iconSizeMap = {
-  sm: 16,
-  md: 20,
-  lg: 24
-};
-function Button(props) {
-  const {
-    variant = "primary",
-    size = "md",
-    icon,
-    iconPosition = "left",
-    className,
-    children
-  } = props;
-  const classes = clsx(
-    "ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors",
-    "ui:rounded ui:border ui:border-transparent",
-    "ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",
-    {
-      "ui:flex-row": iconPosition === "left",
-      "ui:flex-row-reverse": iconPosition === "right"
-    },
-    {
-      "ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90": variant === "primary",
-      "ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80": variant === "secondary",
-      "ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90": variant === "destructive",
-      "ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "outline",
-      "ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "ghost"
-    },
-    {
-      "ui:h-8 ui:px-3 ui:text-sm": size === "sm",
-      "ui:h-10 ui:px-4 ui:text-base": size === "md",
-      "ui:h-12 ui:px-6 ui:text-lg": size === "lg"
-    },
-    className
-  );
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx(Icon_default, { name: icon, size: iconSizeMap[size] }),
-    children
-  ] });
-  if (props.as === "link") {
-    const {
-      as: _2,
-      variant: _v2,
-      size: _s2,
-      icon: _i2,
-      iconPosition: _ip2,
-      className: _c2,
-      children: _ch2,
-      ...linkProps
-    } = props;
-    return /* @__PURE__ */ jsx(Link, { className: classes, ...linkProps, children: content });
-  }
-  const {
-    as: _,
-    variant: _v,
-    size: _s,
-    icon: _i,
-    iconPosition: _ip,
-    className: _c,
-    children: _ch,
-    ...buttonProps
-  } = props;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: clsx(
-        classes,
-        "ui:disabled:pointer-events-none ui:disabled:opacity-50"
-      ),
-      ...buttonProps,
-      children: content
-    }
-  );
-}
-var Button_default = Button;
-
-export { Button_default };
-//# sourceMappingURL=chunk-GNBS5RLB.js.map
-//# sourceMappingURL=chunk-GNBS5RLB.js.map

package/dist/chunk-GNBS5RLB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Button/Button.tsx"],"names":["_","_v","_s","_i","_ip","_c","_ch"],"mappings":";;;;;AAOA,IAAM,WAAA,GAAc;AAAA,EAClB,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,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,OAAA,GAAU,IAAA;AAAA,IACd,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;AAEA,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;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,OAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,WAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAEA,IAAO,cAAA,GAAQ","file":"chunk-GNBS5RLB.js","sourcesContent":["import clsx from 'clsx'\nimport { Link } from 'react-router-dom'\n\nimport { Icon } from '../Icon'\n\nimport type { ButtonProps } from './Button.types'\n\nconst iconSizeMap = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const\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 = 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  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\n      className={clsx(\n        classes,\n        'ui:disabled:pointer-events-none ui:disabled:opacity-50'\n      )}\n      {...buttonProps}\n    >\n      {content}\n    </button>\n  )\n}\n\nexport default Button\n"]}