@atom-learning/components 12.0.0-beta.3 → 12.0.0-beta.4

package/dist/components/empty-state/EmptyState.d.ts

@@ -13,8 +13,12 @@ export declare const EmptyState: {
         as?: never;
     } & Omit<Omit<{
         fluid?: boolean | undefined;
-    } & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+    } & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children" | "src"> & {
         children?: React.ReactNode;
+        src?: string | {
+            light: string;
+            dark: string;
+        };
     }, "as" | "size">) => React.JSX.Element;
     Title: (props: Omit<{
         size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;

package/dist/components/empty-state/EmptyStateImage.d.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
-declare const StyledEmptyStateImage: import("../..").PolymorphicComponent<(({ children, ref, ...props }: Omit<{
+declare const StyledEmptyStateImage: import("../..").PolymorphicComponent<(({ children, ref, src, className, ...props }: Omit<{
     fluid?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+} & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children" | "src"> & {
     children?: React.ReactNode;
+    src?: string | {
+        light: string;
+        dark: string;
+    };
 }) => React.JSX.Element) & {
     Credit: {
         ({ author, sourceUrl, licenseName, licenseUrl }: import("..").ImageCreditProps): React.JSX.Element;

package/dist/components/image/Image.d.ts

@@ -5,8 +5,13 @@ export declare const StyledImage: import("../..").StyledComponent<"img", {
 }>;
 type ImageProps = Override<React.ComponentProps<typeof StyledImage>, {
     children?: React.ReactNode;
+    /** A path, or one per colour scheme: `{ light, dark }` */
+    src?: string | {
+        light: string;
+        dark: string;
+    };
 }>;
-export declare const Image: (({ children, ref, ...props }: ImageProps) => React.JSX.Element) & {
+export declare const Image: (({ children, ref, src, className, ...props }: ImageProps) => React.JSX.Element) & {
     Credit: {
         ({ author, sourceUrl, licenseName, licenseUrl }: import("./ImageCredit").ImageCreditProps): React.JSX.Element;
         displayName: string;

package/dist/components/image/Image.js

@@ -1,7 +1,8 @@
+import { cn } from "../../utilities/tw-merge/index.js";
 import { styled } from "../../styled.js";
 import { ImageCredit } from "./ImageCredit.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/image/Image.tsx
 var StyledImage = styled("img", {
 	base: ["align-middle", "max-w-full"],
@@ -13,17 +14,39 @@ var StyledImage = styled("img", {
 		"[[width]]:w-auto"
 	] } }
 }, { enablePolymorphism: false });
-var ImageComponent = ({ children, ref, ...props }) => {
-	if (!children) return /* @__PURE__ */ jsx(StyledImage, {
+var darkDisplay = {
+	block: "dark:block",
+	"inline-block": "dark:inline-block",
+	flex: "dark:flex",
+	grid: "dark:grid"
+};
+var whitespace = /\s+/;
+var darkDisplayFor = (className) => {
+	const classes = new Set(className?.split(whitespace));
+	return Object.entries(darkDisplay).find(([display]) => classes.has(display))?.[1] ?? "dark:inline";
+};
+var ImageComponent = ({ children, ref, src, className, ...props }) => {
+	const image = typeof src === "object" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StyledImage, {
+		loading: "lazy",
+		...props,
+		src: src.light,
+		ref,
+		className: cn(className, "dark:hidden")
+	}), /* @__PURE__ */ jsx(StyledImage, {
+		loading: "lazy",
+		...props,
+		src: src.dark,
+		className: cn(className, "hidden", darkDisplayFor(className))
+	})] }) : /* @__PURE__ */ jsx(StyledImage, {
 		...props,
-		ref
+		src,
+		ref,
+		className
 	});
+	if (!children) return image;
 	return /* @__PURE__ */ jsxs("figure", {
 		className: "relative overflow-hidden",
-		children: [/* @__PURE__ */ jsx(StyledImage, {
-			...props,
-			ref
-		}), children]
+		children: [image, children]
 	});
 };
 var Image = /* @__PURE__ */ Object.assign(ImageComponent, {

package/dist/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { ImageCredit } from './ImageCredit'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled(\n  'img',\n  {\n    base: ['align-middle', 'max-w-full'],\n    variants: {\n      fluid: {\n        true: [\n          \"[[src$='.svg']]:h-auto\",\n          \"[[src$='.svg']]:max-w-none\",\n          \"[[src$='.svg']]:w-full\",\n          '[[width]]:[[height]]:h-auto',\n          '[[width]]:w-auto'\n        ]\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { children?: React.ReactNode }\n>\n\nconst ImageComponent = ({ children, ref, ...props }: ImageProps) => {\n  if (!children) {\n    return <StyledImage {...props} ref={ref} />\n  }\n\n  return (\n    <figure className=\"relative overflow-hidden\">\n      <StyledImage {...props} ref={ref} />\n      {children}\n    </figure>\n  )\n}\n\nexport const Image = /* @__PURE__ */ Object.assign(ImageComponent, {\n  Credit: ImageCredit,\n  displayName: 'Image'\n})\n"],"mappings":";;;;;AAQA,IAAa,cAAc,OACzB,OACA;CACE,MAAM,CAAC,gBAAgB,YAAY;CACnC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAOA,IAAM,kBAAkB,EAAE,UAAU,KAAK,GAAG,YAAwB;CAClE,IAAI,CAAC,UACH,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAY;CAAM,CAAA;CAG5C,OACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,oBAAC,aAAD;GAAa,GAAI;GAAY;EAAM,CAAA,GAClC,QACK;;AAEZ;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { ImageCredit } from './ImageCredit'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled(\n  'img',\n  {\n    base: ['align-middle', 'max-w-full'],\n    variants: {\n      fluid: {\n        true: [\n          \"[[src$='.svg']]:h-auto\",\n          \"[[src$='.svg']]:max-w-none\",\n          \"[[src$='.svg']]:w-full\",\n          '[[width]]:[[height]]:h-auto',\n          '[[width]]:w-auto'\n        ]\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  {\n    children?: React.ReactNode\n    /** A path, or one per colour scheme: `{ light, dark }` */\n    src?: string | { light: string; dark: string }\n  }\n>\n\n// The dark image's display in dark: the caller's display class, else an img's\n// inline. Literal classes, so the apps' Tailwind builds can find them.\nconst darkDisplay = {\n  block: 'dark:block',\n  'inline-block': 'dark:inline-block',\n  flex: 'dark:flex',\n  grid: 'dark:grid'\n}\nconst whitespace = /\\s+/\nconst darkDisplayFor = (className?: string) => {\n  const classes = new Set(className?.split(whitespace))\n  return (\n    Object.entries(darkDisplay).find(([display]) =>\n      classes.has(display)\n    )?.[1] ?? 'dark:inline'\n  )\n}\n\nconst ImageComponent = ({\n  children,\n  ref,\n  src,\n  className,\n  ...props\n}: ImageProps) => {\n  // Both render and CSS shows one, so the right image is there on first\n  // paint and inside nested dark areas. Lazy loading stops the browser\n  // fetching the hidden one.\n  const image =\n    typeof src === 'object' ? (\n      <>\n        <StyledImage\n          loading=\"lazy\"\n          {...props}\n          src={src.light}\n          ref={ref}\n          className={cn(className, 'dark:hidden')}\n        />\n        <StyledImage\n          loading=\"lazy\"\n          {...props}\n          src={src.dark}\n          className={cn(className, 'hidden', darkDisplayFor(className))}\n        />\n      </>\n    ) : (\n      <StyledImage {...props} src={src} ref={ref} className={className} />\n    )\n\n  if (!children) return image\n\n  return (\n    <figure className=\"relative overflow-hidden\">\n      {image}\n      {children}\n    </figure>\n  )\n}\n\nexport const Image = /* @__PURE__ */ Object.assign(ImageComponent, {\n  Credit: ImageCredit,\n  displayName: 'Image'\n})\n"],"mappings":";;;;;;AAQA,IAAa,cAAc,OACzB,OACA;CACE,MAAM,CAAC,gBAAgB,YAAY;CACnC,UAAU,EACR,OAAO,EACL,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAaA,IAAM,cAAc;CAClB,OAAO;CACP,gBAAgB;CAChB,MAAM;CACN,MAAM;AACR;AACA,IAAM,aAAa;AACnB,IAAM,kBAAkB,cAAuB;CAC7C,MAAM,UAAU,IAAI,IAAI,WAAW,MAAM,UAAU,CAAC;CACpD,OACE,OAAO,QAAQ,WAAW,CAAC,CAAC,MAAM,CAAC,aACjC,QAAQ,IAAI,OAAO,CACrB,CAAC,GAAG,MAAM;AAEd;AAEA,IAAM,kBAAkB,EACtB,UACA,KACA,KACA,WACA,GAAG,YACa;CAIhB,MAAM,QACJ,OAAO,QAAQ,WACb,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,aAAD;EACE,SAAQ;EACR,GAAI;EACJ,KAAK,IAAI;EACJ;EACL,WAAW,GAAG,WAAW,aAAa;CACvC,CAAA,GACD,oBAAC,aAAD;EACE,SAAQ;EACR,GAAI;EACJ,KAAK,IAAI;EACT,WAAW,GAAG,WAAW,UAAU,eAAe,SAAS,CAAC;CAC7D,CAAA,CACD,EAAA,CAAA,IAEF,oBAAC,aAAD;EAAa,GAAI;EAAY;EAAU;EAAgB;CAAY,CAAA;CAGvE,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACG,OACA,QACK;;AAEZ;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/side-bar/SideBar.d.ts

@@ -10,10 +10,14 @@ export declare const SideBar: (({ className, children, type, offset, style, ...r
     Brand: React.FC<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         as?: React.ElementType;
     }>;
-    BrandLogo: (({ children, ref, ...props }: Omit<{
+    BrandLogo: (({ children, ref, src, className, ...props }: Omit<{
         fluid?: boolean | undefined;
-    } & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+    } & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children" | "src"> & {
         children?: React.ReactNode;
+        src?: string | {
+            light: string;
+            dark: string;
+        };
     }) => React.JSX.Element) & {
         Credit: {
             ({ author, sourceUrl, licenseName, licenseUrl }: import("..").ImageCreditProps): React.JSX.Element;

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -5,10 +5,14 @@ export declare const SideBarFooter: import("../..").PolymorphicComponent<"div",
 export declare const SideBarBrand: React.FC<React.ComponentPropsWithRef<'a'> & {
     as?: React.ElementType;
 }>;
-export declare const SideBarBrandLogo: (({ children, ref, ...props }: Omit<{
+export declare const SideBarBrandLogo: (({ children, ref, src, className, ...props }: Omit<{
     fluid?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children"> & {
+} & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "as" | "fluid">, "children" | "src"> & {
     children?: React.ReactNode;
+    src?: string | {
+        light: string;
+        dark: string;
+    };
 }) => React.JSX.Element) & {
     Credit: {
         ({ author, sourceUrl, licenseName, licenseUrl }: import("..").ImageCreditProps): React.JSX.Element;