@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/Caption.tsx

@@ -1,144 +0,0 @@
-import clsx from "clsx";
-import { AsProps, IconSize, TextAttributes, TypographyProps } from "../types";
-import { typography } from "../classNames";
-import { Icon } from "./Icon";
-
-type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p" | "li";
-type Style = {
-  style?: "default" | "success" | "warning" | "error" | "info";
-};
-
-type CaptionProps = {
-  as?: Tags;
-  style?: Style["style"];
-  id?: string;
-  testid?: string;
-  marginTopDesktop?: boolean;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Caption = ({
-  className,
-  children,
-  as = "span",
-  style = "default",
-  color,
-  align,
-  id,
-  testid,
-  marginTopDesktop,
-  ...props
-}: CaptionProps) => {
-  const Element = as;
-
-  return (
-    <div id={id} data-testid={testid} className="flex gap-1">
-      <WhichIcon
-        id={id}
-        testid={testid}
-        style={style}
-        size={16}
-        className="mt-[3px] desktop:mt-0"
-      />
-
-      <Element
-        id={id ? `${id}-text` : undefined}
-        data-testid={testid ? `${testid}-text` : undefined}
-        className={clsx(
-          typography.caption.replace("text-text-primary-normal", ""),
-          (style === "default" || style === "info") &&
-            "text-text-secondary-normal",
-          style === "success" && "text-text-success-normal",
-          style === "warning" && "text-text-warning-normal",
-          style === "error" && "text-text-critical-normal",
-          align === "left" && "text-left",
-          align === "center" && "text-center",
-          align === "right" && "text-right",
-          className,
-          marginTopDesktop && `desktop:mt-px`,
-        )}
-        {...props}
-        style={{
-          color: color ? `var(--color-${color})` : undefined,
-        }}
-      >
-        {children}
-      </Element>
-    </div>
-  );
-};
-
-const WhichIcon = ({
-  style,
-  size,
-  className,
-  id,
-  testid,
-}: {
-  style: Style["style"];
-  size: IconSize;
-  className?: string;
-  id?: string;
-  testid?: string;
-}) => {
-  if (style === "success") {
-    return (
-      <span className="text-icon-success-normal contents">
-        <Icon
-          id={id ? `${id}-icon` : undefined}
-          testid={testid ? `${testid}-icon` : undefined}
-          className={className}
-          name="check_circle"
-          size={size}
-        />
-      </span>
-    );
-  }
-
-  if (style === "warning") {
-    return (
-      <span className="text-icon-warning-normal contents">
-        <Icon
-          id={id ? `${id}-icon` : undefined}
-          testid={testid ? `${testid}-icon` : undefined}
-          className={className}
-          name="warning"
-          size={size}
-        />
-      </span>
-    );
-  }
-
-  if (style === "error") {
-    return (
-      <span className="text-icon-critical-normal contents">
-        <Icon
-          id={id ? `${id}-icon` : undefined}
-          testid={testid ? `${testid}-icon` : undefined}
-          className={className}
-          name="info"
-          size={size}
-        />
-      </span>
-    );
-  }
-
-  if (style === "info") {
-    return (
-      <span className="text-icon-primary-normal contents">
-        <Icon
-          id={id ? `${id}-icon` : undefined}
-          testid={testid ? `${testid}-icon` : undefined}
-          className={className}
-          name="info"
-          size={size}
-        />
-      </span>
-    );
-  }
-
-  return null;
-};
-
-Caption.displayName = "Caption";

package/src/components/Card.tsx

@@ -1,88 +0,0 @@
-import clsx from "clsx";
-import { HTMLProps } from "react";
-
-type Tags = "a" | "div" | React.ElementType;
-export function Card(
-  props: HTMLProps<HTMLDivElement | HTMLAnchorElement> & {
-    selected?: boolean;
-    testid?: string;
-    as?: Tags;
-    /**
-     * When true applies both horizontal and vertical padding using layout spacing tokens.
-     * If none of padding / paddingX / paddingY are provided the original desktop-only padding class is applied for backward compatibility.
-     */
-    padding?: boolean;
-    /** Horizontal only padding (overrides padding for X axis if both supplied). */
-    paddingX?: boolean;
-    /** Vertical only padding (overrides padding for Y axis if both supplied). */
-    paddingY?: boolean;
-    /** Bottom only padding */
-    paddingBottom?: boolean;
-    /** Top only padding */
-    paddingTop?: boolean;
-    /** Left only padding */
-    paddingLeft?: boolean;
-    /** Right only padding */
-    paddingRight?: boolean;
-  },
-) {
-  const {
-    children,
-    selected,
-    testid,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    ...rest
-  } = props;
-
-  const CardComponent = props.as || "div";
-  const anyPaddingPropSpecified =
-    padding !== undefined ||
-    paddingX !== undefined ||
-    paddingY !== undefined ||
-    paddingBottom !== undefined ||
-    paddingTop !== undefined ||
-    paddingLeft !== undefined ||
-    paddingRight !== undefined;
-
-  const paddingClasses = clsx(
-    // Backward compatibility: if no new padding props provided keep existing class.
-    !anyPaddingPropSpecified && "p-desktop-layout-padding",
-    // New responsive spacing tokens (mirrors Stack for layout sizing)
-    padding &&
-      "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-    paddingX &&
-      "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-    paddingY &&
-      "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-    paddingBottom &&
-      "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-    paddingTop &&
-      "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-    paddingLeft &&
-      "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-    paddingRight &&
-      "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
-  );
-  return (
-    <CardComponent
-      {...rest}
-      data-testid={testid}
-      className={clsx(
-        "rounded-sm",
-        paddingClasses,
-        selected
-          ? "border-2 border-border-primary-focus"
-          : "border border-border-primary-normal",
-        rest.className,
-      )}
-    >
-      {children}
-    </CardComponent>
-  );
-}

package/src/components/Checkbox.tsx

@@ -1,206 +0,0 @@
-"use client";
-import clsx from "clsx";
-import { ComponentProps } from "react";
-import { baseTransition, componentGap } from "../classNames";
-import { Icon } from "./Icon";
-import { Paragraph } from "./Paragraph";
-
-interface CheckboxProps
-  extends Omit<
-    ComponentProps<"input">,
-    "type" | "className" | "children" | "dangerouslySetInnerHTML" | "id"
-  > {
-  label?: string;
-  error?: boolean;
-  indeterminate?: boolean;
-  paragraphClassName?: string;
-  id?: string;
-  testid?: string;
-}
-
-export const Checkbox = ({
-  label,
-  error,
-  disabled,
-  readOnly,
-  checked,
-  onChange,
-  indeterminate,
-  paragraphClassName,
-  id,
-  testid,
-  ...props
-}: CheckboxProps) => {
-  const selected = indeterminate || checked;
-
-  const normalClassName = clsx(
-    !selected &&
-      !error &&
-      !disabled &&
-      !readOnly &&
-      "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active",
-  );
-
-  const normalSelectedClassName = clsx(
-    selected &&
-      !error &&
-      !disabled &&
-      !readOnly &&
-      "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active",
-  );
-
-  const errorClassName = clsx(
-    error &&
-      !selected &&
-      "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active",
-  );
-
-  const errorSelectedClassName = clsx(
-    error &&
-      selected &&
-      "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active",
-  );
-
-  const disabledClassName = clsx(
-    disabled &&
-      !readOnly &&
-      "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled",
-  );
-
-  const readOnlyClassName = clsx(
-    readOnly &&
-      "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent",
-  );
-
-  const checkColor = clsx(
-    selected &&
-      !disabled &&
-      !readOnly &&
-      "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
-    selected && disabled && "color-background-action-primary-disabled",
-  );
-
-  return (
-    <label
-      id={id}
-      data-testid={testid}
-      htmlFor={id ? `${id}-input` : undefined}
-      className={clsx(
-        "flex items-center",
-        componentGap,
-        (disabled || (readOnly && error) || readOnly) && "cursor-default",
-        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer",
-      )}
-    >
-      <div className="relative">
-        <input
-          id={id ? `${id}-input` : undefined}
-          data-testid={testid ? `${testid}-input` : undefined}
-          type="checkbox"
-          className="sr-only peer"
-          disabled={disabled}
-          checked={selected}
-          onChange={handleOnChange}
-          data-indeterminate={indeterminate}
-          {...props}
-        />
-
-        {error && (readOnly || disabled) ? (
-          <div className={clsx("size-6", "flex items-center justify-center")}>
-            {selected ? (
-              indeterminate ? (
-                <span className="text-icon-primary-normal contents">
-                  <Icon name="question_mark" />
-                </span>
-              ) : readOnly ? (
-                <span className="text-success-400 contents">
-                  <Icon name="check" />
-                </span>
-              ) : (
-                <span className="text-icon-on-action-primary-normal contents">
-                  <Icon name="check" className="pointer-events-none" />
-                </span>
-              )
-            ) : (
-              readOnly && (
-                <span className="text-icon-primary-normal contents">
-                  <Icon name="close" />
-                </span>
-              )
-            )}
-          </div>
-        ) : (
-          <div
-            className={clsx(
-              "size-6 border rounded-base",
-              "flex items-center justify-center",
-              baseTransition,
-              normalClassName,
-              normalSelectedClassName,
-              errorClassName,
-              errorSelectedClassName,
-              disabledClassName,
-              readOnlyClassName,
-              checkColor,
-            )}
-          >
-            {selected ? (
-              indeterminate ? (
-                readOnly ? (
-                  <span className="text-icon-primary-normal  contents">
-                    <Icon name="question_mark" />
-                  </span>
-                ) : (
-                  <span className="text-icon-on-action-primary-normal contents">
-                    <Icon name="remove" className="pointer-events-none" />
-                  </span>
-                )
-              ) : readOnly ? (
-                <span className="text-success-400 contents">
-                  <Icon name="check" />
-                </span>
-              ) : (
-                <span className="text-icon-on-action-primary-normal contents">
-                  <Icon name="check" className="pointer-events-none" />
-                </span>
-              )
-            ) : (
-              readOnly && (
-                <span className="text-icon-primary-normal contents">
-                  <Icon name="close" />
-                </span>
-              )
-            )}
-          </div>
-        )}
-      </div>
-
-      {label && (
-        <Paragraph
-          id={id ? `${id}-label` : undefined}
-          testid={testid ? `${testid}-label` : undefined}
-          as="span"
-          padded
-          className={clsx(
-            "text-nowrap",
-            disabled && !error && "!text-text-primary-disabled",
-            error && !disabled && !readOnly && "!text-text-primary-error",
-            paragraphClassName,
-          )}
-        >
-          {label}
-        </Paragraph>
-      )}
-    </label>
-  );
-
-  function handleOnChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    if (disabled || readOnly || (readOnly && error) || !onChange) {
-      return;
-    }
-
-    onChange(e);
-  }
-};
-
-Checkbox.displayName = "Checkbox";

package/src/components/CompactImagesPreview.tsx

@@ -1,135 +0,0 @@
-import { useCallback } from "react";
-import { Stack } from "./Stack";
-import clsx from "clsx";
-import { useMatchesMobile } from "../hooks";
-
-type ImageSource = { uri: string; name: string };
-
-type CompactImagesPreviewProps = {
-  sources: ImageSource[];
-  currentSourceIndex: number;
-  placeholderImageUri?: string;
-  /**
-   * Optional alt text to use when falling back to the placeholder image due to an image load error
-   * or when there are no valid sources. Defaults to "placeholder image".
-   */
-  placeholderAlt?: string;
-  activeImageWidth?: number | string;
-  activeImageHeight?: number | string;
-  thumbnailWidth?: number;
-  thumbnailHeight?: number;
-  enableThumbnailBorder?: boolean;
-  onChangeSource: (newIndex: number) => void;
-  onMainImageClick?: () => void;
-  testid?: string;
-};
-export function CompactImagesPreview(props: CompactImagesPreviewProps) {
-  const {
-    sources,
-    currentSourceIndex = 0,
-    activeImageHeight = 243,
-    activeImageWidth = 242,
-    thumbnailWidth = 30.5,
-    thumbnailHeight = 30,
-    enableThumbnailBorder = false,
-    placeholderImageUri,
-    placeholderAlt = "placeholder image",
-    onChangeSource,
-    onMainImageClick,
-    testid,
-  } = props;
-  const isMobile = useMatchesMobile();
-  const imagesCount = sources.length;
-
-  const handleImgError = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement>) => {
-      if (!placeholderImageUri) return;
-      const img = e.currentTarget;
-      // Prevent infinite loop if placeholder also 404s
-      if (img.src === placeholderImageUri) return;
-      img.src = placeholderImageUri;
-      if (!img.alt) img.alt = placeholderAlt;
-    },
-    [placeholderImageUri, placeholderAlt],
-  );
-
-  const handleThumbnailClick = useCallback(
-    (newIndex: number) => {
-      if (newIndex === currentSourceIndex) return;
-      if (newIndex < 0 || newIndex >= imagesCount) return;
-      onChangeSource(newIndex);
-    },
-    [currentSourceIndex, onChangeSource, imagesCount],
-  );
-
-  if (
-    !sources.length ||
-    currentSourceIndex >= sources.length ||
-    typeof isMobile === "undefined"
-  )
-    return (
-      <img
-        data-testid={testid ? `${testid}-placeholder` : undefined}
-        className="object-center"
-        style={{
-          width: activeImageWidth,
-          height: activeImageHeight,
-          objectPosition: "center",
-          objectFit: "cover",
-        }}
-        src={placeholderImageUri}
-        alt={placeholderAlt}
-        onError={handleImgError}
-        onClick={onMainImageClick}
-      />
-    );
-  const currentSource = sources[currentSourceIndex];
-  return (
-    <Stack data-testid={testid} sizing="layout">
-      <img
-        data-testid={testid ? `${testid}-main-image` : undefined}
-        className={clsx("object-center", onMainImageClick && "cursor-pointer")}
-        style={{
-          width: isMobile ? "100%" : activeImageWidth,
-          height: activeImageHeight,
-          objectPosition: "center",
-          objectFit: "cover",
-        }}
-        src={currentSource.uri}
-        alt={currentSource.name}
-        onError={handleImgError}
-        onClick={onMainImageClick}
-      />
-      <div className="flex flex-row flex-wrap items-center gap-3">
-        {sources.slice(0, 4).map((source, index) => (
-          <button
-            key={`compact-image-${source.uri}-${index}`}
-            data-testid={testid ? `${testid}-thumbnail-${index}` : undefined}
-            onClick={(e) => {
-              e.preventDefault();
-              handleThumbnailClick(index);
-            }}
-            className={clsx(
-              "cursor-pointer",
-              currentSourceIndex === index && enableThumbnailBorder
-                ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300"
-                : "ring-brand-400/0",
-            )}
-          >
-            <img
-              src={source.uri}
-              alt={source.name}
-              style={{
-                width: thumbnailWidth,
-                height: thumbnailHeight,
-                objectPosition: "center",
-                objectFit: "cover",
-              }}
-              onError={handleImgError}
-            />
-          </button>
-        ))}
-      </div>
-    </Stack>
-  );
-}

package/src/components/ContentTab.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import React, { ComponentPropsWithRef, useCallback } from "react";
-import { Button } from "./Button";
-
-export type ContentTabProps = {
-  label?: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  selected?: boolean;
-  className?: string;
-  fullWidth?: boolean;
-  id?: string;
-  testid?: string;
-} & Omit<ComponentPropsWithRef<"button">, "id">;
-
-export const ContentTab = ({
-  label,
-  selected = false,
-  className,
-  disabled = false,
-  onClick,
-  ref,
-  fullWidth,
-  id,
-  testid,
-  ...props
-}: ContentTabProps) => {
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (!disabled) {
-        onClick?.(e);
-      }
-    },
-    [onClick, disabled],
-  );
-
-  const computedClassName = clsx(
-    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out z-10",
-    "rounded-px ",
-    "h-0.5",
-    !disabled && "bg-text-action-primary-normal peer-hover:bg-border-action-hover peer-active:bg-border-action-active",
-    disabled && "bg-text-action-primary-disabled",
-
-    className,
-  );
-
-  return (
-    <div id={id} data-testid={testid} className={clsx(
-      "relative",
-      fullWidth && "flex-1"
-    )}>
-      <Button
-        id={id ? `${id}-button` : undefined}
-        testid={testid ? `${testid}-button` : undefined}
-        block={fullWidth}
-        ref={ref}
-        variant="tertiary"
-        disabled={disabled}
-        onClick={handleClick}
-        role="tab"
-        aria-selected={selected}
-        className={clsx(
-          "peer",
-          !selected && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
-        )}
-        {...props}
-      >
-        {label}
-      </Button>
-      {selected && (
-        <div
-          id={id ? `${id}-indicator` : undefined}
-          data-testid={testid ? `${testid}-indicator` : undefined}
-          className={computedClassName}
-        >
-          {" "}
-        </div>
-      )}
-    </div>
-  );
-};
-
-ContentTab.displayName = "ContentTab";