@dmsi/wedgekit-react 0.0.15 → 0.0.16

package/src/components/CalendarRange.tsx

@@ -3,10 +3,8 @@ import {
   typography,
   componentGap,
   componentPadding,
-  // baseTransition,
-  paddingUsingComponentGap,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
+  layoutPaddding,
+  layoutGap,
 } from "../classNames";
 import { Icon } from "./Icon";
 import React, { useState } from "react";
@@ -242,8 +240,8 @@ export function CalendarRange({
     <div
       className={clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap,
+        layoutPaddding,
+        layoutGap,
         cardStyle && "shadow-4",
         // baseTransition,
         "overflow-hidden",
@@ -252,8 +250,7 @@ export function CalendarRange({
       <div
         className={clsx(
           "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-          componentGap,
-          paddingUsingComponentGap,
+          layoutGap,
         )}
       >
         {(mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
@@ -267,17 +264,11 @@ export function CalendarRange({
                 // key={month.name + month.year}
                 className={clsx(
                   "flex flex-col",
-                  componentGap,
-                  componentPadding,
                 )}
               >
                 <div
                   className={clsx(
                     "flex flex-row items-center justify-between",
-                    componentGap,
-                    componentPaddingXUsingComponentGap,
-                    componentPaddingYUsingComponentGap,
-                    "mb-3",
                     typography.label,
                     "text-text-action-primary-normal",
                   )}
@@ -286,9 +277,8 @@ export function CalendarRange({
                     <button
                       type="button"
                       className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                         componentPadding,
-                        "mr-1",
                       )}
                       aria-label="Previous month"
                       onClick={() =>
@@ -312,9 +302,8 @@ export function CalendarRange({
                     <button
                       type="button"
                       className={clsx(
-                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                         componentPadding,
-                        "ml-1",
                       )}
                       aria-label="Next month"
                       onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
@@ -325,13 +314,14 @@ export function CalendarRange({
                     <span className={clsx(componentPadding, "ml-1")} />
                   )}
                 </div>
-                <div className={clsx("grid grid-cols-7 mb-1", componentGap)}>
+                <div className={clsx("grid grid-cols-7")}>
                   {weekDays.map((d) => (
                     <span
                       key={d}
                       className={clsx(
                         typography.caption,
                         "text-text-secondary-normal text-center",
+                        "w-10"
                       )}
                     >
                       {d}
@@ -402,7 +392,7 @@ export function CalendarRange({
                         isRangeEnd={!!isRangeEnd}
                         isRangeDisabled={mode === "single" && disableRange}
                         // Add cell padding for spacing
-                        cellPadding="p-1.5 md:p-2 lg:p-2.5"
+                        cellPadding={componentPadding}
                       />
                     );
                   })}
@@ -411,7 +401,7 @@ export function CalendarRange({
               {mode === "double" && idx === 0 && (
                 <div
                   className={clsx(
-                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
+                    "self-stretch bg-border-primary-normal rounded-base",
 
                     // 1px width, full height, matches Figma divider
                     "w-px",

package/src/components/DataGridCell.tsx

@@ -20,7 +20,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { paddingUsingComponentGap } from "../classNames";
+import { componentPadding, paddingUsingComponentGap } from "../classNames";
 import { AsProps } from "../types";
 import { Icon } from "./Icon";
 import { Search } from "./Search";
@@ -152,7 +152,7 @@ export const DataGridCell = memo(
         "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
       component === "input" && warning && "border-background-warning-normal",
-      !["button", "icon"].includes(component) && !noPadding && "p-2",
+      !["button", "icon"].includes(component) && !noPadding && componentPadding,
       paddedLeft && "pl-2",
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",

package/src/components/MainBar.tsx

@@ -5,6 +5,7 @@ import {
   containerPaddingY,
   containerPaddingX,
   layoutGroupGap,
+  layoutGap,
 } from "../classNames";
 
 type MainBarProps = {
@@ -52,7 +53,7 @@ export const MainBar = ({
         <div
           className={clsx(
             "hidden desktop:flex items-center ml-auto",
-            layoutGroupGap,
+            layoutGap,
           )}
         >
           {right}

package/src/components/ModalButtons.tsx

@@ -1,5 +1,7 @@
+import clsx from "clsx";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
+import { layoutGroupGap, layoutPaddding } from "../classNames";
 
 type ModalButtonsProps = {
   title?: string;
@@ -15,7 +17,7 @@ export const ModalButtons = ({
   customActions,
 }: ModalButtonsProps) => {
   return (
-    <div className="border-t border-neutral-300 p-4 flex justify-end space-x-2">
+    <div className={clsx("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap)}>
       {customActions ?? (
         <>
           <Button

package/src/components/ModalContent.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { layoutPaddding } from "../classNames";
 
 export interface ModalContentProps {
   fixedHeightScrolling?: boolean;
@@ -11,7 +12,8 @@ export function ModalContent({
   return (
     <div
       className={clsx(
-        "flex-grow desktop:flex-grow-0 p-4",
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
         fixedHeightScrolling && "overflow-auto",
       )}
     >

package/src/components/ModalHeader.tsx

@@ -2,6 +2,8 @@ import { Heading2 } from "./Heading";
 
 import { Button } from "./Button";
 import { Icon } from "./Icon";
+import { layoutGroupGap, layoutPaddding } from "../classNames";
+import clsx from "clsx";
 
 type ModalHeaderProps = {
   title?: string;
@@ -17,11 +19,16 @@ export const ModalHeader = ({
   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">
-      <div className="flex items-center gap-2">
+    <div className={clsx(
+      "flex justify-between items-center",
+      layoutPaddding,
+      layoutGroupGap
+    )}>
+      <div className={clsx("flex items-center", layoutGroupGap)}>
         {headerIcon}
         {title && <Heading2 as="p">{title}</Heading2>}
       </div>
+
       {!hideCloseIcon && (
         <Button
           iconOnly

package/src/components/Radio.tsx

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import { ComponentProps } from "react";
-import { baseTransition } from "../classNames";
+import { baseTransition, componentGap } from "../classNames";
 import { Paragraph } from "./Paragraph";
 import { TextColorTokens } from "../types";
 
@@ -59,7 +59,8 @@ export const Radio = ({
     <label
       htmlFor={radioId}
       className={clsx(
-        "flex items-center gap-desktop-component-gap",
+        "flex items-center",
+        componentGap,
         disabled ? "cursor-default" : "cursor-pointer",
         className,
       )}
@@ -103,7 +104,7 @@ export const Radio = ({
       </div>
 
       {label && (
-        <Paragraph className="px-mobile-component-gap" color={paragraphColor}>
+        <Paragraph padded color={paragraphColor}>
           {label}
         </Paragraph>
       )}

package/src/components/StatusPill.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "react";
 import { Label } from "./Label";
 import clsx from "clsx";
+import { componentPaddingYUsingComponentGap, paddingXUsingLayoutGroupGap } from "../classNames";
 
 type StatusPillProps = PropsWithChildren<{
   intent?: "neutral" | "warning" | "success" | "critical";
@@ -38,9 +39,11 @@ export const StatusPill = ({
     <div
       {...props}
       className={clsx(
-        "px-desktop-component-padding py-desktop-compact-component-padding rounded flex items-center",
+        "rounded flex items-center",
         textColor,
         backgroundColor,
+        paddingXUsingLayoutGroupGap,
+        componentPaddingYUsingComponentGap
       )}
     >
       <Label>{children}</Label>

package/src/components/Stepper.tsx

@@ -3,6 +3,7 @@ import { Button } from "./Button";
 import { InputBase } from "./Input";
 import { Icon } from "./Icon";
 import clsx from "clsx";
+import { componentGap } from "../classNames";
 
 type StepperProps = {
   error?: boolean;
@@ -34,7 +35,10 @@ export const Stepper = ({
   }
 
   return (
-    <div className="flex items-center gap-desktop-component-gap">
+    <div className={clsx(
+      "flex items-center",
+      componentGap
+    )}>
       <Button
         iconOnly
         variant="tertiary"

package/src/components/Textarea.tsx

@@ -1,7 +1,7 @@
 "use client";
 import clsx from "clsx";
 import { ComponentProps, ReactNode } from "react";
-import { baseTransition, typography } from "../classNames";
+import { baseTransition, componentGap, componentPaddingMinusBorder, typography } from "../classNames";
 
 interface TextareaProps
   extends Omit<
@@ -13,17 +13,11 @@ interface TextareaProps
   caption?: ReactNode;
 }
 
-const textareaComponentPaddingMinusBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_+_var(--spacing-mobile-component-gap)_-_1px)]",
-  "desktop:p-[calc(var(--spacing-desktop-component-padding)_+_var(--spacing-desktop-component-gap)_-_1px)]",
-  "compact:p-[calc(var(--spacing-desktop-compact-component-padding)_+_var(--spacing-desktop-compact-component-gap)_-_1px)]",
-);
-
 const textareaBaseClass = clsx(
   "w-full min-h-19",
   "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
   "outline-transparent outline-2",
-  textareaComponentPaddingMinusBorder,
+  componentPaddingMinusBorder,
   baseTransition,
 );
 
@@ -56,11 +50,12 @@ export const Textarea = ({
   return (
     <label
       className={clsx(
-        "block w-full space-y-desktop-component-gap",
+        "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
         !props.disabled &&
           !props.readOnly &&
           "has-[[data-error]]:text-text-primary-error",
+        componentGap
       )}
     >
       {label && (

package/src/components/Toast.tsx

@@ -7,6 +7,7 @@ import { Paragraph } from "./Paragraph";
 import { Icon } from "./Icon";
 import { Button } from "./Button";
 import { createRoot } from "react-dom/client";
+import { componentGap, componentPadding, layoutGroupGap } from "../classNames";
 
 export interface ToastProps {
   variant?: "success" | "warning" | "error" | "info";
@@ -194,18 +195,21 @@ export const Toast = ({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={clsx(
-        "flex items-start gap-desktop-component-gap p-desktop-component-padding border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        "flex items-start border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        componentPadding,
+        layoutGroupGap,
         className,
       )}
       {...props}
       style={props.style}
     >
       {iconElement}
-      <div className="flex gap-desktop-layout-group-gap items-center">
-        <div className="flex flex-col gap-desktop-component-gap w-68">
+      <div className={clsx("flex items-center", layoutGroupGap)}>
+        <div className={clsx("flex flex-col w-68", componentGap)}>
           {title && <Heading3>{title}</Heading3>}
           {message && <Paragraph>{message}</Paragraph>}
         </div>
+
         {showViewButton && (
           <Button variant="tertiary" href={viewButtonLink}>
             View

package/src/components/Tooltip.tsx

@@ -3,7 +3,7 @@
 import clsx from "clsx";
 import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { typography } from "../classNames";
+import { componentPadding, typography } from "../classNames";
 
 export type TooltipProps = PropsWithChildren<{
   message: string;
@@ -107,7 +107,8 @@ export const Tooltip = ({
           }}
           className={clsx(
             typography.caption,
-            "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+            "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+            componentPadding,
             !removeOpacity && "opacity-0"
           )}
         >