@dmsi/wedgekit-react 0.0.47 → 0.0.49

package/dist/index.css

@@ -692,6 +692,10 @@
     width: calc(var(--spacing) * 10) !important;
     height: calc(var(--spacing) * 10) !important;
   }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -978,6 +982,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1805,6 +1812,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-\[15px\] {
+    padding-block: 15px;
+  }
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
@@ -1868,6 +1878,9 @@
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1905,6 +1918,10 @@
     --tw-leading: calc(var(--spacing) * 6) !important;
     line-height: calc(var(--spacing) * 6) !important;
   }
+  .leading-\[1\.38462\] {
+    --tw-leading: 1.38462;
+    line-height: 1.38462;
+  }
   .leading-\[1\] {
     --tw-leading: 1;
     line-height: 1;
@@ -2855,6 +2872,13 @@
       }
     }
   }
+  .hover\:text-text-action-primary-normal {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-action-primary-normal);
+      }
+    }
+  }
   .hover\:text-text-link-hover {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.47",
+  "version": "0.0.49",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/AccessChangerTabItem.tsx

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import { Subheader } from "./Subheader";
+import { Icon } from "./Icon";
+
+export function AccessChangerTabItem(props: ComponentProps<"div"> & { selected?: boolean, loading?: boolean, disabled?: boolean, additionalText?: string, borderTop?: boolean, borderBottom?: boolean }) {
+    const {
+        additionalText,
+        borderTop,
+        borderBottom,
+        selected,
+        children,
+        loading,
+        disabled,
+        onClick,
+        ...rest
+    } = props;
+
+    return (
+        <div
+            className={clsx(
+                "flex items-center justify-between",
+                "py-[15px] px-4 gap-4",
+                "bg-background-grouped-primary-normal cursor-pointer",
+                borderTop && 'border-t',
+                borderBottom && 'border-b',
+                borderTop || borderBottom ? "border-border-primary-normal" : "border-transparent",
+                selected ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal",
+            )}
+            onClick={(e) => {
+                if (selected || loading || disabled) {
+                    return;
+                }
+
+                onClick?.(e);
+            }}
+            {...rest}
+        >
+            <div className="flex flex-col gap-0.5">
+                <Subheader>{children}</Subheader>
+                {additionalText && <p className="text-text-primary-normal text-[13px] leading-[1.38462] font-normal">{additionalText}</p>}
+            </div>
+
+            {loading && !selected && (
+                <Icon name="cached" size={16} />
+            )}
+
+            {selected && (
+                <div className="flex items-center gap-1">
+                    <div className="rounded-full size-2 bg-text-action-primary-normal"></div>
+                    <Subheader>Active</Subheader>
+                </div>
+            )}
+        </div>
+    )
+}

package/src/components/ContentTab.tsx

@@ -9,6 +9,7 @@ export type ContentTabProps = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   selected?: boolean;
   className?: string;
+  fullWidth?: boolean;
   id?: string;
 } & Omit<ComponentPropsWithRef<"button">, "id">;
 
@@ -19,6 +20,7 @@ export const ContentTab = ({
   disabled = false,
   onClick,
   ref,
+  fullWidth,
   id,
   ...props
 }: ContentTabProps) => {
@@ -45,9 +47,13 @@ export const ContentTab = ({
   );
 
   return (
-    <div id={id} className="relative">
+    <div id={id} className={clsx(
+      "relative",
+      fullWidth && "flex-1"
+    )}>
       <Button
         id={id ? `${id}-button` : undefined}
+        block={fullWidth}
         ref={ref}
         variant="tertiary"
         disabled={disabled}

package/src/components/ContentTabs.tsx

@@ -12,13 +12,14 @@ type Tab = {
 export type ContentTabsProps = {
   tabs: Tab[];
   onTabChange?: (tabId: string) => void;
+  fullWidthTabs?: boolean;
   id?: string;
 };
 
 const afterClasses =
   "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
 
-export const ContentTabs = ({ tabs, onTabChange, id }: ContentTabsProps) => {
+export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTabsProps) => {
   const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -66,6 +67,7 @@ export const ContentTabs = ({ tabs, onTabChange, id }: ContentTabsProps) => {
             const isSelected = selectedTab === tab.id;
             return (
               <ContentTab
+                fullWidth={fullWidthTabs}
                 key={tab.id}
                 id={id ? `${id}-tab-${tab.id}` : undefined}
                 label={tab.label}

package/src/components/Search.tsx

@@ -122,7 +122,7 @@ export const Search = ({
         error={error}
         readOnly={readOnly}
         removeRoundness={removeRoundness}
-        focus={show}
+        focus={renderMenu && show}
         {...props}
       />
 

package/src/components/Stack.tsx

@@ -15,6 +15,7 @@ type StackProps = {
   horizontalMobile?: boolean;
   padding?: boolean;
   paddingX?: boolean;
+  paddingY?: boolean;
   margin?: boolean;
   marginX?: boolean;
   marginY?: boolean;
@@ -28,6 +29,7 @@ type StackProps = {
   maxWidth?: number;
   minWidth?: number;
   height?: number | "full";
+  minHeight?: number;
   maxHeight?: number;
   borderColor?: BorderColorTokens;
   backgroundColor?: BackgroundColorTokens;
@@ -89,6 +91,7 @@ export const Stack = ({
   grow,
   padding,
   paddingX,
+  paddingY,
   margin,
   marginX,
   marginY,
@@ -98,6 +101,7 @@ export const Stack = ({
   rounded,
   centered,
   width,
+  minHeight,
   maxWidth,
   minWidth,
   height,
@@ -133,6 +137,7 @@ export const Stack = ({
               ? `${height}px`
               : undefined,
         maxHeight: maxHeight !== undefined ? `${maxHeight}px` : undefined,
+        minHeight: minHeight !== undefined ? `${minHeight}px` : undefined,
         maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
         width:
           width !== undefined && typeof width === "number"
@@ -188,6 +193,18 @@ export const Stack = ({
         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" &&
+          "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY &&
+          sizing === "component" &&
+          "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin &&
           sizing === "container" &&
           "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",

package/dist/{chunk-S46RZBT4.js → chunk-T22EH3MG.js}

@@ -1,12 +1,12 @@
 import {
   useMatchesMobile
 } from "./chunk-SEKKGFM6.js";
-import {
-  Label
-} from "./chunk-S5K22XTH.js";
 import {
   Paragraph
 } from "./chunk-VG4EPHJA.js";
+import {
+  Label
+} from "./chunk-S5K22XTH.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";