@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/src/components/ModalButtons.tsx

@@ -6,28 +6,37 @@ type ModalButtonsProps = {
   onClose?: () => void;
   onContinue?: () => void;
   sampleWidth?: boolean;
+  customActions?: React.ReactNode;
 };
 
-export const ModalButtons = ({ onClose, onContinue }: ModalButtonsProps) => {
+export const ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+}: ModalButtonsProps) => {
   return (
     <div className="border-t border-neutral-300 p-4 flex justify-end space-x-2">
-      <Button
-        variant="secondary"
-        leftIcon={<Icon name="close" size={24} />}
-        onClick={onClose}
-        className="max-sm:w-full"
-      >
-        Close
-      </Button>
+      {customActions ?? (
+        <>
+          <Button
+            variant="secondary"
+            leftIcon={<Icon name="close" size={24} />}
+            onClick={onClose}
+            className="max-sm:w-full"
+          >
+            Close
+          </Button>
 
-      <Button
-        variant="primary"
-        leftIcon={<Icon name="check" size={24} />}
-        className="max-sm:w-full"
-        onClick={onContinue} // Assuming you want to close the modal on continue
-      >
-        Continue
-      </Button>
+          <Button
+            variant="primary"
+            leftIcon={<Icon name="check" size={24} />}
+            className="max-sm:w-full"
+            onClick={onContinue} // Assuming you want to close the modal on continue
+          >
+            Continue
+          </Button>
+        </>
+      )}
     </div>
   );
 };

package/src/components/ModalContent.tsx

@@ -1,5 +1,23 @@
-export function ModalContent({ children }: { children: React.ReactNode }) {
-  return <div className="p-4">{children}</div>;
+import clsx from "clsx";
+
+export interface ModalContentProps {
+  fixedHeightScrolling?: boolean;
+}
+
+export function ModalContent({
+  fixedHeightScrolling,
+  children,
+}: React.PropsWithChildren<ModalContentProps>) {
+  return (
+    <div
+      className={clsx(
+        "flex-grow desktop:flex-grow-0 p-4",
+        fixedHeightScrolling && "overflow-auto",
+      )}
+    >
+      {children}
+    </div>
+  );
 }
 
 ModalContent.displayName = "ModalContent";

package/src/components/ModalHeader.tsx

@@ -5,24 +5,35 @@ import { Icon } from "./Icon";
 
 type ModalHeaderProps = {
   title?: string;
+  hideCloseIcon?: boolean;
+  headerIcon?: React.ReactNode;
   onClose?: () => void;
 };
 
-export const ModalHeader = ({ title, onClose }: ModalHeaderProps) => {
+export const ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose,
+}: ModalHeaderProps) => {
   return (
     <div className="flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap">
-      {title && <Heading2 as="p">{title}</Heading2>}
-
-      <Button
-        iconOnly
-        variant="tertiary"
-        onClick={onClose}
-        leftIcon={
-          <span className="text-icon-primary-normal contents">
-            <Icon name="close" size={24} />
-          </span>
-        }
-      />
+      <div className="flex items-center gap-2">
+        {headerIcon}
+        {title && <Heading2 as="p">{title}</Heading2>}
+      </div>
+      {!hideCloseIcon && (
+        <Button
+          iconOnly
+          variant="tertiary"
+          onClick={onClose}
+          leftIcon={
+            <span className="text-icon-primary-normal contents">
+              <Icon name="close" size={24} />
+            </span>
+          }
+        />
+      )}
     </div>
   );
 };

package/src/components/ModalScrim.tsx

@@ -4,12 +4,14 @@ import { PropsWithChildren } from "react";
 type ModalScrimProps = PropsWithChildren<{
   sampleWidth?: boolean;
   show?: boolean;
+  size?: "small" | "medium" | "large" | "x-large";
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   ref?: React.Ref<HTMLDivElement>;
 }>;
 
 export const ModalScrim = ({
   show = false,
+  size = "small",
   children,
   onClick,
   ref,
@@ -17,15 +19,14 @@ export const ModalScrim = ({
   return (
     <div
       className={clsx(
-        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed opacity-0",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
-
+        size === "small" && "p-4",
         "inset-0 z-50",
       )}
       onMouseDown={onClick}
       ref={ref}
     >
-      <h1>{show}</h1>
       {children}
     </div>
   );

package/src/components/Notification.tsx

@@ -8,16 +8,17 @@ import { Button } from "./Button";
 import { Paragraph } from "./Paragraph";
 import { Heading3 } from "./Heading";
 import { Icon } from "./Icon";
+import { Stack } from "./Stack";
 
 export interface NotificationProps {
   variant?: "success" | "warning" | "error" | "info";
   title?: string;
   message?: string;
-  removeMessage?: boolean;
+  enableMessage?: boolean;
   description?: string;
-  removeDescription?: boolean;
+  enableDescription?: boolean;
   disclaimer?: string;
-  removeDisclaimer?: boolean;
+  enableDisclaimer?: boolean;
   card?: boolean;
   icon?: ReactNode;
 }
@@ -61,11 +62,11 @@ export const Notification = ({
   variant = "success",
   title,
   message,
-  removeMessage = false,
+  enableMessage = true,
   description,
-  removeDescription = false,
+  enableDescription = false,
   disclaimer,
-  removeDisclaimer = false,
+  enableDisclaimer = false,
   card = false,
   ...props
 }: NotificationProps) => {
@@ -79,26 +80,32 @@ export const Notification = ({
   return (
     <div
       className={clsx(
-        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white",
+        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
         card && "shadow-4",
       )}
       {...props}
     >
-      <div className="flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap">
+      <Stack
+        horizontal
+        horizontalMobile
+        items="start"
+        justify="start"
+        sizing="layout"
+      >
         {iconElement}
 
-        <div className="flex flex-col gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap">
+        <Stack elevation={0} items="start" justify="start" sizing="component">
           {title && <Heading3 as="h3">{title}</Heading3>}
-          {message && !removeMessage && <Paragraph as="p">{message}</Paragraph>}
-          {description && !removeDescription && (
+          {message && enableMessage && <Paragraph as="p">{message}</Paragraph>}
+          {description && enableDescription && (
             <Paragraph as="p">{description}</Paragraph>
           )}
-          {disclaimer && !removeDisclaimer && (
+          {disclaimer && enableDisclaimer && (
             <Paragraph as="p">{disclaimer}</Paragraph>
           )}
-        </div>
-      </div>
+        </Stack>
+      </Stack>
 
       <Button
         iconOnly

package/src/components/Select.tsx

@@ -1,11 +1,5 @@
 "use client";
-import {
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ReactNode, RefObject, useEffect, useRef, useState } from "react";
 import { InputBase, InputBaseProps } from "./Input";
 import { Icon } from "./Icon";
 import clsx from "clsx";
@@ -17,6 +11,7 @@ export interface SelectProps {
     setShow: (value: boolean) => void;
     topOffset?: number | null;
   }) => ReactNode;
+  displayValue?: string;
 }
 
 export const Select = ({
@@ -29,6 +24,8 @@ export const Select = ({
   className,
   wrapperClassName,
   removeRoundness,
+  displayValue,
+  value,
   ...props
 }: Omit<InputBaseProps, "after"> & SelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -43,7 +40,7 @@ export const Select = ({
     }
 
     inputRef.current?.focus();
-  }, [props.value]);
+  }, [value]);
 
   return (
     <>
@@ -89,6 +86,7 @@ export const Select = ({
         removeRoundness={removeRoundness}
         focus={show}
         {...props}
+        value={displayValue ?? value}
       />
 
       {renderMenu
@@ -96,7 +94,7 @@ export const Select = ({
             positionTo: inputContainerRef,
             show,
             setShow,
-            topOffset: props.caption ? -16 : null
+            topOffset: props.caption ? -16 : null,
           })
         : children}
     </>

package/src/components/Stack.tsx

@@ -7,32 +7,68 @@ import {
   JustifyAlign,
   Sizing,
 } from "../types";
-import { ComponentProps } from "react";
+import { ComponentProps, CSSProperties } from "react";
+
 type StackProps = {
   children: React.ReactNode;
   horizontal?: boolean;
   horizontalMobile?: boolean;
   padding?: boolean;
+  paddingX?: boolean;
   sizing?: Sizing;
-  items?: ItemsAlign;
-  justify?: JustifyAlign;
+  flexShrink?: number;
+  flexGrow?: number;
   elevation?: Elevation;
   rounded?: boolean;
   centered?: boolean;
-  width?: number;
+  width?: number | "full" | "fit";
   maxWidth?: number;
-  height?: number;
+  minWidth?: number;
+  height?: number | "full";
   maxHeight?: number;
   borderColor?: BorderColorTokens;
   backgroundColor?: BackgroundColorTokens;
   overflowY?: "hidden" | "scroll" | "auto" | "inherit";
-} & Omit<ComponentProps<"div">, "className">;
+  overflowX?: "hidden" | "scroll" | "auto" | "inherit";
+  zIndex?: number;
+  position?: CSSProperties['position'];
+  top?: number;
+  left?: number;
+} & FlexProps &
+  Omit<ComponentProps<"div">, "className">;
+
+export interface FlexProps {
+  items?: ItemsAlign;
+  justify?: JustifyAlign;
+  grow?: boolean;
+  flexGrow?: string | number;
+  flexShrink?: string | number;
+}
+
+const useFlexClassNames = ({ 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",
+  );
 
 export const Stack = ({
   children,
   items,
   justify,
+  grow,
   padding,
+  paddingX,
   horizontal,
   horizontalMobile,
   elevation = 0,
@@ -40,35 +76,61 @@ export const Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
   overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
 }: StackProps) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+
   return (
     <div
       style={{
-        height: height !== undefined ? `${height}px` : undefined,
+        height:
+          height === "full"
+            ? "100%"
+            : height !== undefined
+              ? `${height}px`
+              : undefined,
         maxHeight: maxHeight !== undefined ? `${maxHeight}px` : undefined,
         maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
-        width: width !== undefined ? `${width}px` : undefined,
+        width:
+          width !== undefined && typeof width === "number"
+            ? `${width}px`
+            : undefined,
+        minWidth: minWidth !== undefined ? `${minWidth}px` : undefined,
         border: borderColor
           ? `1px solid var(--color-${borderColor})`
           : 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,
+        left: left !== undefined ? `${left}px` : undefined,
       }}
       className={clsx(
         "scrollbar-thin",
-        "w-full",
-        "flex",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
         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",
@@ -81,18 +143,21 @@ export const Stack = ({
         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",
         horizontal ? "desktop:flex-row" : "desktop:flex-col",
         horizontalMobile ? "flex-row" : "flex-col",
-        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",
+        flexClassNames,
         sizing === "layout-group" &&
           "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
         sizing === "layout" &&

package/src/components/Surface.tsx

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