@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/Stack.tsx

@@ -1,347 +0,0 @@
-import clsx from "clsx";
-import {
-  BackgroundColorTokens,
-  BorderColorTokens,
-  Elevation,
-  ItemsAlign,
-  JustifyAlign,
-  Sizing,
-} from "../types";
-import { ComponentProps, CSSProperties } from "react";
-import { paddingYUsingLayoutGroupGap } from "../classNames";
-
-type StackProps = {
-  children: React.ReactNode;
-  horizontal?: boolean;
-  horizontalMobile?: boolean;
-  padding?: boolean;
-  paddingX?: boolean;
-  paddingY?: boolean;
-  paddingBottom?: boolean;
-  paddingTop?: boolean;
-  paddingLeft?: boolean;
-  paddingRight?: boolean;
-  margin?: boolean;
-  marginX?: boolean;
-  marginY?: boolean;
-  sizing?: Sizing;
-  flexShrink?: number;
-  flexGrow?: number;
-  elevation?: Elevation;
-  rounded?: boolean;
-  centered?: boolean;
-  width?: number | "full" | "fit" | "max";
-  maxWidth?: number | string;
-  minWidth?: number;
-  height?: string | number | "full";
-  minHeight?: number | string;
-  maxHeight?: number | string;
-  borderColor?: BorderColorTokens;
-  borderTopColor?: BorderColorTokens;
-  borderRightColor?: BorderColorTokens;
-  borderBottomColor?: BorderColorTokens;
-  borderLeftColor?: BorderColorTokens;
-  backgroundColor?: BackgroundColorTokens;
-  overflowY?: "hidden" | "scroll" | "auto" | "inherit";
-  overflowX?: "hidden" | "scroll" | "auto" | "inherit";
-  zIndex?: number;
-  position?: CSSProperties["position"];
-  top?: number;
-  bottom?: number;
-  left?: number;
-  id?: string;
-  testid?: string;
-  noGap?: boolean;
-  marginTop?: boolean;
-  marginBottom?: boolean;
-  className?: string;
-} & FlexProps &
-  Omit<ComponentProps<"div">, "className" | "id">;
-
-export interface FlexProps {
-  items?: ItemsAlign;
-  justify?: JustifyAlign;
-  grow?: boolean;
-  flexGrow?: string | number;
-  flexShrink?: string | number;
-  flexWrap?: "wrap" | "wrap-reverse";
-}
-
-const getFlexClassNames = ({ items, justify, grow }: FlexProps) =>
-  clsx(
-    "flex",
-    items === "start" && "items-start",
-    grow && "grow",
-    items === "start" && "items-start",
-    items === "center" && "items-center",
-    items === "end" && "items-end",
-    items === "start-center" && "items-start desktop:items-center",
-    justify === "start" && "justify-start",
-    justify === "center" && "justify-center",
-    justify === "end" && "justify-end",
-    justify === "end" && "justify-end",
-    justify === "between" && "justify-between",
-    justify === "around" && "justify-around",
-  );
-
-const useGapClassNames = (sizing: Sizing) => {
-  return clsx(
-    sizing === "layout-group" &&
-      "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-    sizing === "layout" &&
-      "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-    sizing === "container" &&
-      "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-    sizing === "component" &&
-      "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
-  );
-};
-
-export const Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  paddingY,
-  paddingBottom,
-  paddingTop,
-  paddingLeft,
-  paddingRight,
-  margin,
-  marginX,
-  marginY,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  minHeight,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  borderTopColor,
-  borderRightColor,
-  borderBottomColor,
-  borderLeftColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left,
-  id,
-  noGap,
-  marginTop,
-  marginBottom,
-  testid,
-  bottom,
-  zIndex,
-  flexWrap,
-  className,
-  ...props
-}: StackProps) => {
-  const flexClassNames = getFlexClassNames({ items, justify, grow });
-  const gapClassNames = useGapClassNames(sizing);
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      {...props}
-      style={{
-        height:
-          height === "full"
-            ? "100%"
-            : height !== undefined
-              ? `${height}px`
-              : undefined,
-        maxHeight:
-          maxHeight !== undefined
-            ? isNaN(+maxHeight)
-              ? maxHeight
-              : `${maxHeight}px`
-            : props.style?.maxHeight,
-        maxWidth:
-          maxWidth !== undefined
-            ? isNaN(+maxWidth)
-              ? maxWidth
-              : `${maxWidth}px`
-            : props.style?.maxWidth,
-        minHeight:
-          minHeight !== undefined
-            ? isNaN(+minHeight)
-              ? minHeight
-              : `${minHeight}px`
-            : props.style?.minHeight,
-
-        width:
-          width !== undefined && typeof width === "number"
-            ? `${width}px`
-            : undefined,
-        minWidth: minWidth !== undefined ? `${minWidth}px` : undefined,
-        border: borderColor
-          ? `1px solid var(--color-${borderColor})`
-          : undefined,
-        borderTop: borderTopColor
-          ? `1px solid var(--color-${borderTopColor})`
-          : undefined,
-        borderRight: borderRightColor
-          ? `1px solid var(--color-${borderRightColor})`
-          : undefined,
-        borderBottom: borderBottomColor
-          ? `1px solid var(--color-${borderBottomColor})`
-          : undefined,
-        borderLeft: borderLeftColor
-          ? `1px solid var(--color-${borderLeftColor})`
-          : undefined,
-        backgroundColor: backgroundColor
-          ? `var(--color-${backgroundColor})`
-          : undefined,
-        flexGrow: flexGrow !== undefined ? flexGrow : undefined,
-        flexShrink: flexShrink !== undefined ? flexShrink : undefined,
-        position: position !== undefined ? position : undefined,
-        top: top !== undefined ? `${top}px` : undefined,
-        bottom: bottom !== undefined ? `${bottom}px` : undefined,
-        left: left !== undefined ? `${left}px` : undefined,
-        borderBlock: props.style?.borderBlock,
-        marginInline: props.style?.marginInline,
-        zIndex: zIndex !== undefined ? zIndex : undefined,
-        flexWrap: flexWrap,
-        paddingInline: props.style?.paddingInline,
-        gap: props.style?.gap,
-        ...props.style,
-      }}
-      className={clsx(
-        "scrollbar-thin",
-        "max-w-screen",
-        width !== "fit" && "w-full",
-        width === "full" && "w-full",
-        width === "max" && "w-max",
-        centered && "mx-auto",
-        overflowY == "auto" && "overflow-y-auto",
-        overflowY == "hidden" && "overflow-y-hidden",
-        overflowY == "scroll" && "overflow-y-scroll",
-        overflowX == "auto" && "overflow-x-auto",
-        overflowX == "hidden" && "overflow-x-hidden",
-        overflowX == "scroll" && "overflow-x-scroll",
-        padding &&
-          sizing === "container" &&
-          "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-        padding &&
-          sizing === "layout" &&
-          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-        padding &&
-          sizing === "layout-group" &&
-          "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-        padding &&
-          sizing === "component" &&
-          "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-        paddingX &&
-          sizing === "container" &&
-          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
-        paddingX &&
-          sizing === "layout" &&
-          "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-        paddingX &&
-          sizing === "layout-group" &&
-          "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
-        paddingX &&
-          sizing === "component" &&
-          "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
-        paddingY &&
-          sizing === "container" &&
-          "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
-        paddingY &&
-          sizing === "layout" &&
-          "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
-        paddingY &&
-          sizing === "component" &&
-          "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
-        paddingBottom &&
-          sizing === "container" &&
-          "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
-        paddingBottom &&
-          sizing === "layout" &&
-          "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-        paddingBottom &&
-          sizing === "layout-group" &&
-          "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
-        paddingBottom &&
-          sizing === "component" &&
-          "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
-        paddingTop &&
-          sizing === "container" &&
-          "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
-        paddingTop &&
-          sizing === "layout" &&
-          "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-        paddingTop &&
-          sizing === "layout-group" &&
-          "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
-        paddingTop &&
-          sizing === "component" &&
-          "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
-        paddingLeft &&
-          sizing === "container" &&
-          "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
-        paddingLeft &&
-          sizing === "layout" &&
-          "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-        paddingLeft &&
-          sizing === "layout-group" &&
-          "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
-        paddingLeft &&
-          sizing === "component" &&
-          "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
-        paddingRight &&
-          sizing === "container" &&
-          "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
-        paddingRight &&
-          sizing === "layout" &&
-          "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
-        paddingRight &&
-          sizing === "layout-group" &&
-          "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
-        paddingRight &&
-          sizing === "component" &&
-          "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
-        margin &&
-          sizing === "container" &&
-          "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
-        marginX &&
-          sizing === "container" &&
-          "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
-        marginTop &&
-          sizing === "container" &&
-          "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
-        marginBottom &&
-          sizing === "container" &&
-          "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
-        marginY &&
-          sizing === "container" &&
-          "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
-        horizontal ? "desktop:flex-row" : "desktop:flex-col",
-        horizontalMobile ? "flex-row" : "flex-col",
-        flexClassNames,
-        !noGap && gapClassNames,
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rounded && "rounded",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/StatusPill.tsx

@@ -1,59 +0,0 @@
-import { PropsWithChildren } from "react";
-import { Label } from "./Label";
-import clsx from "clsx";
-import { componentPaddingYUsingComponentGap, paddingXUsingLayoutGroupGap } from "../classNames";
-
-type StatusPillProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  intent?: "neutral" | "warning" | "success" | "critical";
-  state?: "in-progress" | "completed";
-}>;
-
-export const StatusPill = ({
-  children,
-  state = "in-progress",
-  intent = "neutral",
-  id,
-  testid,
-  ...props
-}: StatusPillProps) => {
-  const textColor = clsx(
-    state === "completed" && ["neutral", "critical"].includes(intent)
-      ? "text-text-on-action-primary-normal"
-      : "text-neutral-500",
-  );
-
-  const backgroundColor = clsx({
-    "bg-neutral-200": intent === "neutral" && state === "in-progress",
-    "bg-text-primary-normal": intent === "neutral" && state === "completed",
-    "bg-warning-200": intent === "warning" && state === "in-progress",
-    "bg-background-warning-normal":
-      intent === "warning" && state === "completed",
-    "bg-success-200": intent === "success" && state === "in-progress",
-    "bg-background-success-normal":
-      intent === "success" && state === "completed",
-    "bg-critical-200": intent === "critical" && state === "in-progress",
-    "bg-background-critical-normal":
-      intent === "critical" && state === "completed",
-  });
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      {...props}
-      className={clsx(
-        "rounded flex items-center",
-        textColor,
-        backgroundColor,
-        paddingXUsingLayoutGroupGap,
-        componentPaddingYUsingComponentGap
-      )}
-    >
-      <Label id={id ? `${id}-label` : undefined} testid={testid ? `${testid}-label` : undefined}>{children}</Label>
-    </div>
-  );
-};
-
-StatusPill.displayName = "StatusPill";

package/src/components/Stepper.tsx

@@ -1,128 +0,0 @@
-"use client";
-import { Button } from "./Button";
-import { InputBase } from "./Input";
-import { Icon } from "./Icon";
-import clsx from "clsx";
-import { componentGap } from "../classNames";
-
-type StepperProps = {
-  error?: boolean;
-  disabled?: boolean;
-  id?: string;
-  testid?: string;
-  value: number;
-  setValue: React.Dispatch<React.SetStateAction<number>>;
-  onIncrease?: () => void;
-  onDecrease?: () => void;
-  min?: number;
-  max?: number;
-};
-
-export const Stepper = ({
-  error,
-  disabled,
-  value,
-  setValue,
-  onDecrease,
-  onIncrease,
-  id,
-  testid,
-  min,
-  max,
-  ...props
-}: StepperProps) => {
-  function handleIncrease() {
-    if (max != null && value >= max) {
-      return;
-    }
-
-    setValue((prevVal) => prevVal + 1);
-
-    onIncrease?.();
-  }
-
-  function handleDecrease() {
-    if (min != null && value <= min) {
-      return;
-    }
-    
-    setValue((prevVal) => prevVal - 1);
-    
-    onDecrease?.();
-  }
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx("flex items-center", componentGap)}
-    >
-      <Button
-        id={id ? `${id}-decrease-button` : undefined}
-        testid={testid ? `${testid}-decrease-button` : undefined}
-        iconOnly
-        variant="tertiary"
-        leftIcon={
-          <span
-            className={clsx(
-              !disabled || (value > 0 && "text-icon-action-primary-normal"),
-              disabled || (value === 0 && "text-icon-action-primary-disabled"),
-              "contents",
-            )}
-          >
-            <Icon name="remove" />
-          </span>
-        }
-        onClick={handleDecrease}
-        disabled={disabled || value <= 0 || (min != null && value <= min)}
-      />
-
-      <div className="flex-1">
-        <InputBase
-          {...props}
-          id={id ? `${id}-input` : undefined}
-          testid={testid ? `${testid}-input` : undefined}
-          type="number"
-          align="center"
-          value={value}
-          onChange={(e) => {
-            const nextValue = +e.target.value;
-            const lessThanMinimum = min != null && nextValue < min;
-            const greaterThanMaximum = max != null && nextValue > max;
-
-            if (lessThanMinimum || greaterThanMaximum) {
-              return;
-            }
-            
-            setValue(nextValue);
-          }}
-          error={error}
-          disabled={disabled}
-          className="!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
-        />
-      </div>
-
-      <Button
-        id={id ? `${id}-increase-button` : undefined}
-        testid={testid ? `${testid}-increase-button` : undefined}
-        iconOnly
-        variant="tertiary"
-        leftIcon={
-          <span
-            className={clsx(
-              !disabled && "text-icon-action-primary-normal",
-              disabled && "text-icon-action-primary-disabled",
-              "contents",
-            )}
-          >
-            <Icon name="add" />
-          </span>
-        }
-        onClick={handleIncrease}
-        disabled={disabled || (max != null && value >= max)}
-      />
-    </div>
-  );
-};
-
-Stepper.displayName = "Stepper";

package/src/components/Subheader.tsx

@@ -1,50 +0,0 @@
-import clsx from "clsx";
-import { AsProps, TextAttributes, TypographyProps } from "../types";
-import { typography } from "../classNames";
-
-type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
-
-type SubheaderProps = {
-  as?: Tags;
-  id?: string;
-  testid?: string;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Subheader = ({
-  className,
-  children,
-  as = "span",
-  align,
-  color,
-  tall,
-  id,
-  testid,
-  ...props
-}: SubheaderProps) => {
-  const Element = as;
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        typography.subheader,
-        className,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6",
-      )}
-      style={{
-        ...props.style,
-        color: color ? `var(--color-${color})` : undefined,
-      }}
-      {...props}
-    >
-      {children}
-    </Element>
-  );
-};
-
-Subheader.displayName = "Subheader";

package/src/components/Surface.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import { HTMLAttributes, PropsWithChildren } from "react";
-
-type SurfaceProps = HTMLAttributes<HTMLDivElement> &
-  PropsWithChildren<{
-    className?: string;
-    elevation?: 0 | 2 | 4 | 16;
-    id?: string;
-  }>;
-
-export const Surface = ({
-  children,
-  className,
-  elevation = 0,
-  id,
-  ...props
-}: SurfaceProps) => {
-  return (
-    <div
-      id={id}
-      className={clsx(
-        "rounded-base",
-        {
-          "shadow-2": elevation === 2,
-          "shadow-4": elevation === 4,
-          "shadow-16": elevation === 16,
-        },
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-Surface.displayName = "Surface";