@dmsi/wedgekit-react 0.0.2

package/src/components/ProjectBar.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+import {
+  containerPaddingX,
+  layoutGap,
+  layoutGroupGap,
+  paddingYUsingLayoutGroupGap,
+} from "../classNames";
+import { useMatchesMobile } from "./useMatchesMedia";
+
+type ProjectBarProps = {
+  left: ReactNode;
+  right: ReactNode;
+  mobileLeft: ReactNode;
+  mobileRight: ReactNode;
+};
+
+export const ProjectBar = ({
+  left,
+  right,
+  mobileLeft,
+  mobileRight,
+}: ComponentProps<"div"> & ProjectBarProps) => {
+  const isMobile = useMatchesMobile();
+
+  const tokenOverrides = isMobile
+    ? {
+        "--color-background-primary-normal": "var(--color-brand-400)",
+        "--color-background-action-primary-normal": "var(--color-neutral-000)",
+        "--color-background-action-primary-hover": "var(--color-critical-100)",
+        "--color-background-action-primary-active": "var(--color-neutral-200)",
+        "--color-background-action-secondary-normal": "var(--color-brand-400)",
+        "--color-background-action-secondary-hover":
+          "var(--color-critical-100)",
+
+        "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+        "--color-text-primary-normal": "var(--color-neutral-000)",
+        "--color-text-action-primary-normal": "var(--color-neutral-000)",
+        "--color-text-action-primary-hover": "var(--color-critical-500)",
+        "--color-text-action-primary-active": "var(--color-critical-300)",
+
+        "--color-border-action-normal": "var(--color-neutral-000)",
+        "--color-border-action-hover": "var(--color-critical-500)",
+        "--color-border-action-active": "var(--color-critical-300)",
+      }
+    : {};
+
+  return (
+    <div
+      style={{ ...tokenOverrides } as React.CSSProperties}
+      className={clsx(
+        "flex items-center justify-between",
+        "bg-background-primary-normal",
+        paddingYUsingLayoutGroupGap,
+        containerPaddingX,
+        layoutGap,
+      )}
+    >
+      <div className={clsx("hidden desktop:block flex-1 leading-[1]")}>
+        {left}
+      </div>
+
+      <div className={clsx("hidden desktop:flex items-center", layoutGroupGap)}>
+        {right}
+      </div>
+
+      <div className={clsx("flex flex-col desktop:hidden")}>{mobileLeft}</div>
+
+      <div className={clsx("flex items-center desktop:hidden", layoutGroupGap)}>
+        {mobileRight}
+      </div>
+    </div>
+  );
+};
+
+ProjectBar.displayName = "ProjectBar";

package/src/components/Radio.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import { baseTransition } from "../classNames";
+import { Paragraph } from "./Paragraph";
+import { TextColorTokens } from "../types";
+
+interface RadioProps
+  extends Omit<
+    ComponentProps<"input">,
+    "type" | "children" | "dangerouslySetInnerHTML"
+  > {
+  label?: string;
+  error?: boolean;
+  readOnly?: boolean;
+}
+
+export const Radio = ({
+  className,
+  label,
+  error,
+  disabled,
+  checked,
+  readOnly,
+  ...props
+}: RadioProps) => {
+  const radioId = props.id;
+
+  const paragraphColor: TextColorTokens = disabled
+    ? "text-primary-disabled"
+    : error
+      ? "text-primary-error"
+      : "text-primary-normal";
+
+  const defaultClassName = clsx(
+    !error &&
+      !disabled &&
+      "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover",
+  );
+
+  const errorClassName = clsx(
+    error &&
+      !disabled &&
+      "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 ",
+  );
+
+  const disabledClassName = clsx(
+    disabled &&
+      "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0",
+  );
+
+  const readonlyClassName = clsx(
+    readOnly &&
+      "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0",
+  );
+
+  return (
+    <label
+      htmlFor={radioId}
+      className={clsx(
+        "flex items-center gap-desktop-component-gap",
+        disabled ? "cursor-default" : "cursor-pointer",
+        className,
+      )}
+    >
+      <div className="relative">
+        <input
+          id={radioId}
+          type="radio"
+          className="sr-only peer"
+          disabled={disabled}
+          checked={checked}
+          readOnly={readOnly}
+          {...props}
+        />
+        <div
+          className={clsx(
+            "size-6 rounded-full border flex items-center justify-center",
+            baseTransition,
+            defaultClassName,
+            errorClassName,
+            disabledClassName,
+            readonlyClassName,
+          )}
+        >
+          {checked && (
+            <RadioIcon
+              className={clsx(
+                "transition-colors",
+                !error &&
+                  !disabled &&
+                  "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
+                error &&
+                  !disabled &&
+                  "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
+                disabled && "text-icon-on-action-secondary-disabled",
+                readOnly && "text-icon-on-action-secondary-disabled",
+              )}
+            />
+          )}
+        </div>
+      </div>
+
+      {label && (
+        <Paragraph className="px-mobile-component-gap" color={paragraphColor}>
+          {label}
+        </Paragraph>
+      )}
+    </label>
+  );
+};
+
+Radio.displayName = "Radio";
+
+const RadioIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <rect
+        x="1"
+        y="1"
+        width="22"
+        height="22"
+        rx="11"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <rect x="4" y="4" width="16" height="16" rx="8" fill="currentColor" />
+    </svg>
+  );
+};
+
+RadioIcon.displayName = "RadioIcon";

package/src/components/Search.tsx

@@ -0,0 +1,129 @@
+"use client";
+import {
+  ReactNode,
+  RefObject,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import { Input, InputBaseProps } from "./Input";
+
+export interface SearchProps {
+  renderMenu?: (props: {
+    positionTo: RefObject<HTMLElement | null> | undefined;
+    show: boolean;
+    setShow: (value: boolean) => void;
+    topOffset?: number | null;
+    autoFocusOff?: boolean;
+    menuName?: string;
+  }) => ReactNode;
+  value?: string;
+}
+
+export const Search = ({
+  label,
+  error,
+  children,
+  readOnly,
+  renderMenu,
+  onClick,
+  className,
+  wrapperClassName,
+  removeRoundness,
+  ...props
+}: Omit<InputBaseProps, "after"> & SearchProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+  const [clearing, setClearing] = useState(false);
+  const uniqueId = useId();
+  const searchMenuName = `search-menu-${uniqueId}`;
+
+  useEffect(() => {
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+
+    inputRef.current?.focus();
+  }, [props.value]);
+
+  return (
+    <>
+      <Input
+        variant="search"
+        inputContainerRef={inputContainerRef}
+        ref={inputRef}
+        label={label}
+        wrapperClassName={wrapperClassName}
+        onClick={(e) => {
+            if (props.disabled || readOnly) {
+                return;
+            }
+
+            if (clearing) {
+                setClearing(false);
+                return;
+            }
+
+            onClick?.(e);
+            setShow(!show)
+        }}
+        onClear={() => {
+            setClearing(true);
+        }}
+        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            setShow(true);
+
+            if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+                e.preventDefault();
+
+                const menu = document.querySelector<HTMLElement>(`[data-menu="${searchMenuName}"]`);
+                const selectedMenuOption = menu?.querySelector<HTMLElement>('[data-selected]');
+
+                if (selectedMenuOption) {
+                    const allMenuOptions = Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') || []);
+                    const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
+
+                    let targetOption: HTMLElement | undefined;
+
+                    if (e.key === 'ArrowDown') {
+                        targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0]; // Wrap to first
+                    } else {
+                        targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1]; // Wrap to last
+                    }
+
+                    targetOption?.focus();
+                } else {
+                    const toFocusMenuOption = e.key === 'ArrowDown'
+                        ? menu?.querySelector<HTMLElement>('[role="menuitem"]')
+                        : menu?.querySelector<HTMLElement>('[role="menuitem"]:last-child');
+
+                    toFocusMenuOption?.focus();
+                }
+            }
+        }}
+        error={error}
+        readOnly={readOnly}
+        removeRoundness={removeRoundness}
+        focus={show}
+        {...props}
+      />
+
+      {renderMenu
+        ? renderMenu({
+            positionTo: inputContainerRef,
+            show,
+            setShow,
+            topOffset: props.caption ? -16 : null,
+            autoFocusOff: true,
+            menuName: searchMenuName
+          })
+        : children}
+    </>
+  );
+};
+
+Search.displayName = "Search";

package/src/components/Select.tsx

@@ -0,0 +1,104 @@
+"use client";
+import { ReactNode, RefObject, useEffect, useRef, useState } from "react";
+import { InputBase, InputBaseProps } from "./Input";
+import { Icon } from "./Icon";
+import clsx from "clsx";
+
+export interface SelectProps {
+  renderMenu?: (props: {
+    positionTo: RefObject<HTMLElement | null> | undefined;
+    show: boolean;
+    setShow: (value: boolean) => void;
+    topOffset?: number | null;
+  }) => ReactNode;
+  displayValue?: string;
+}
+
+export const Select = ({
+  label,
+  error,
+  children,
+  readOnly,
+  renderMenu,
+  onClick,
+  className,
+  wrapperClassName,
+  removeRoundness,
+  displayValue,
+  value,
+  ...props
+}: Omit<InputBaseProps, "after"> & SelectProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+
+    inputRef.current?.focus();
+  }, [value]);
+
+  return (
+    <>
+      <InputBase
+        inputContainerRef={inputContainerRef}
+        ref={inputRef}
+        label={label}
+        after={
+          !readOnly && (
+            <span
+              className={clsx(
+                props.disabled
+                  ? "text-icon-action-primary-disabled"
+                  : "text-icon-action-primary-normal",
+                "contents",
+              )}
+            >
+              <Icon name="keyboard_arrow_down" />
+            </span>
+          )
+        }
+        maxLength={0}
+        className={clsx("!caret-transparent !cursor-default", className)}
+        wrapperClassName={wrapperClassName}
+        onKeyDown={(e) => {
+          const openKeys = ["Enter", "Space", " "];
+
+          if (openKeys.includes(e.key)) {
+            e.preventDefault();
+            (e.target as HTMLElement).click();
+          }
+        }}
+        onClick={(e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+
+          setShow(!show);
+          onClick?.(e);
+        }}
+        error={error}
+        readOnly={readOnly}
+        removeRoundness={removeRoundness}
+        focus={show}
+        {...props}
+        value={displayValue ?? value}
+      />
+
+      {renderMenu
+        ? renderMenu({
+            positionTo: inputContainerRef,
+            show,
+            setShow,
+            topOffset: props.caption ? -16 : null,
+          })
+        : children}
+    </>
+  );
+};
+
+Select.displayName = "Select";

package/src/components/SideMenu.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from "react";
+import clsx from "clsx";
+
+type SideMenuProps = PropsWithChildren<{
+  cardStyle?: boolean;
+}>;
+
+export const SideMenu = ({ children, cardStyle = false }: SideMenuProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col",
+        cardStyle &&
+          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal",
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+SideMenu.displayName = "SideMenu";

package/src/components/SideMenuGroup.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, useEffect, useState } from "react";
+import { Label } from "./Label";
+import { baseTransition } from "../classNames";
+import { Stack } from "./Stack";
+import { Icon } from "./Icon";
+
+export type SideMenuGroupProps = PropsWithChildren<{
+  label?: string;
+  groupIndentLevel?: 1 | 2 | 3 | 4;
+  collapsed?: boolean;
+  disabled?: boolean;
+}>;
+
+export const SideMenuGroup = ({
+  label,
+  groupIndentLevel = 1,
+  collapsed = false,
+  disabled = false,
+  children,
+}: SideMenuGroupProps) => {
+  const [internalCollapsed, setInternalCollapsed] = useState(collapsed);
+
+  useEffect(() => {
+    setInternalCollapsed(collapsed);
+  }, [collapsed]);
+
+  const toggleCollapse = () => {
+    if (!disabled) setInternalCollapsed((prev) => !prev);
+  };
+
+  const enabledDisabledStyles = disabled
+    ? clsx("text-text-action-disabled pointer-events-none")
+    : clsx("text-text-primary-normal");
+
+  const additionalAttr = {
+    "data-disabled": disabled || null,
+  };
+
+  return (
+    <>
+      <div
+        className={clsx(
+          "group/sm-group flex rounded cursor-pointer",
+          "bg-transparent",
+          "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+          "active:bg-background-action-secondary-active active:text-text-action-active",
+          baseTransition,
+          enabledDisabledStyles,
+        )}
+        onClick={toggleCollapse}
+        {...additionalAttr}
+      >
+        <Stack horizontal items="center" sizing="component" padding>
+          {groupIndentLevel === 2 && <div className="pl-6" />}
+          {groupIndentLevel === 3 && <div className="pl-13" />}
+          {groupIndentLevel === 4 && <div className="pl-20" />}
+
+          <Icon
+            name="keyboard_arrow_down"
+            className={clsx(
+              "transition duration-100 ease-in-out",
+              "pointer-events-none",
+              {
+                "rotate-180": !internalCollapsed,
+              },
+            )}
+            size={24}
+          />
+
+          <Label padded>{label}</Label>
+        </Stack>
+      </div>
+      {!internalCollapsed && children}
+    </>
+  );
+};
+
+SideMenuGroup.displayName = "SideMenuGroup";

package/src/components/SideMenuItem.tsx

@@ -0,0 +1,90 @@
+import clsx from "clsx";
+import { baseTransition, componentPaddingMinus2pxBorder } from "../classNames";
+import { Stack } from "./Stack";
+import { Paragraph } from "./Paragraph";
+
+export type SideMenuItemProps = {
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  href?: string;
+  groupIndentLevel?: 1 | 2 | 3 | 4 | 5;
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export const SideMenuItem = ({
+  label,
+  leftIcon,
+  rightIcon,
+  href,
+  groupIndentLevel,
+  selected = false,
+  disabled = false,
+  onClick,
+}: SideMenuItemProps) => {
+  const unselectedStateStyles =
+    !selected && !disabled && clsx("border-transparent");
+
+  const unselectedDisabledStateStyles =
+    !selected && disabled && clsx("bg-transparent border-transparent");
+
+  const selectedStateStyles =
+    selected &&
+    !disabled &&
+    clsx(
+      "bg-background-action-secondary-hover border-border-action-normal",
+      "hover:border-border-action-hover",
+      "active:border-border-action-active",
+    );
+
+  const selectedDisabledStateStyles =
+    selected &&
+    disabled &&
+    clsx(
+      "bg-background-action-secondary-disabled border-border-action-disabled",
+    );
+
+  const enabledDisabledStyles = disabled
+    ? clsx("text-text-action-disabled pointer-events-none")
+    : clsx("text-text-primary-normal");
+
+  return (
+    <a
+      href={href}
+      className={clsx(
+        "group flex w-full rounded border-2 cursor-pointer",
+        "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+        "active:bg-background-action-secondary-active active:text-text-action-active",
+        baseTransition,
+        componentPaddingMinus2pxBorder,
+        unselectedStateStyles,
+        unselectedDisabledStateStyles,
+        selectedStateStyles,
+        selectedDisabledStateStyles,
+        enabledDisabledStyles,
+      )}
+      onClick={onClick}
+    >
+      <Stack horizontal items="center" sizing="component">
+        {groupIndentLevel === 2 && <div className="pl-6" />}
+        {groupIndentLevel === 3 && <div className="pl-13" />}
+        {groupIndentLevel === 4 && <div className="pl-20" />}
+        {groupIndentLevel === 5 && <div className="pl-27" />}
+
+        {leftIcon && leftIcon}
+
+        {!leftIcon && groupIndentLevel && <div className="w-6 h-6" />}
+
+        <Paragraph as="span" padded className="mr-auto !leading-6">
+          {label}
+        </Paragraph>
+
+        {rightIcon && rightIcon}
+      </Stack>
+    </a>
+  );
+};
+
+SideMenuItem.displayName = "SideMenuItem";