@dmsi/wedgekit-react 0.0.4

package/src/components/Checkbox.tsx

@@ -0,0 +1,195 @@
+"use client";
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import { baseTransition, componentGap } from "../classNames";
+import { Icon } from "./Icon";
+import { Paragraph } from "./Paragraph";
+
+interface CheckboxProps
+  extends Omit<
+    ComponentProps<"input">,
+    "type" | "className" | "children" | "dangerouslySetInnerHTML"
+  > {
+  label?: string;
+  error?: boolean;
+  indeterminate?: boolean;
+  paragraphClassName?: string;
+}
+
+export const Checkbox = ({
+  label,
+  error,
+  disabled,
+  readOnly,
+  checked,
+  onChange,
+  indeterminate,
+  paragraphClassName,
+  ...props
+}: CheckboxProps) => {
+  const selected = indeterminate || checked;
+
+  const normalClassName = clsx(
+    !selected &&
+      !error &&
+      !disabled &&
+      !readOnly &&
+      "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active",
+  );
+
+  const normalSelectedClassName = clsx(
+    selected &&
+      !error &&
+      !disabled &&
+      !readOnly &&
+      "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active",
+  );
+
+  const errorClassName = clsx(
+    error &&
+      !selected &&
+      "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active",
+  );
+
+  const errorSelectedClassName = clsx(
+    error &&
+      selected &&
+      "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active",
+  );
+
+  const disabledClassName = clsx(
+    disabled &&
+      !readOnly &&
+      "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled",
+  );
+
+  const readOnlyClassName = clsx(
+    readOnly &&
+      "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent",
+  );
+
+  const checkColor = clsx(
+    selected &&
+      !disabled &&
+      !readOnly &&
+      "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled",
+  );
+
+  return (
+    <label
+      className={clsx(
+        "flex items-center",
+        componentGap,
+        (disabled || (readOnly && error) || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer",
+      )}
+    >
+      <div className="relative">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          disabled={disabled}
+          checked={selected}
+          onChange={handleOnChange}
+          id={props.id}
+          data-indeterminate={indeterminate}
+          {...props}
+        />
+
+        {error && (readOnly || disabled) ? (
+          <div className={clsx("size-6", "flex items-center justify-center")}>
+            {selected ? (
+              indeterminate ? (
+                <span className="text-icon-primary-normal contents">
+                  <Icon name="question_mark" />
+                </span>
+              ) : readOnly ? (
+                <span className="text-success-400 contents">
+                  <Icon name="check" />
+                </span>
+              ) : (
+                <span className="text-icon-on-action-primary-normal contents">
+                  <Icon name="check" className="pointer-events-none" />
+                </span>
+              )
+            ) : (
+              readOnly && (
+                <span className="text-icon-primary-normal contents">
+                  <Icon name="close" />
+                </span>
+              )
+            )}
+          </div>
+        ) : (
+          <div
+            className={clsx(
+              "size-6 border rounded-base",
+              "flex items-center justify-center",
+              baseTransition,
+              normalClassName,
+              normalSelectedClassName,
+              errorClassName,
+              errorSelectedClassName,
+              disabledClassName,
+              readOnlyClassName,
+              checkColor,
+            )}
+          >
+            {selected ? (
+              indeterminate ? (
+                readOnly ? (
+                  <span className="text-icon-primary-normal  contents">
+                    <Icon name="question_mark" />
+                  </span>
+                ) : (
+                  <span className="text-icon-on-action-primary-normal contents">
+                    <Icon name="remove" className="pointer-events-none" />
+                  </span>
+                )
+              ) : readOnly ? (
+                <span className="text-success-400 contents">
+                  <Icon name="check" />
+                </span>
+              ) : (
+                <span className="text-icon-on-action-primary-normal contents">
+                  <Icon name="check" className="pointer-events-none" />
+                </span>
+              )
+            ) : (
+              readOnly && (
+                <span className="text-icon-primary-normal contents">
+                  <Icon name="close" />
+                </span>
+              )
+            )}
+          </div>
+        )}
+      </div>
+
+      {label && (
+        <Paragraph
+          padded
+          className={clsx(
+            "text-nowrap",
+            disabled && !error && "!text-text-primary-disabled",
+            error && !disabled && !readOnly && "!text-text-primary-error",
+            paragraphClassName,
+          )}
+        >
+          {label}
+        </Paragraph>
+      )}
+    </label>
+  );
+
+  function handleOnChange(e: React.ChangeEvent<HTMLInputElement>): void {
+    if (disabled || readOnly || (readOnly && error) || !onChange) {
+      return;
+    }
+
+    onChange(e);
+  }
+};
+
+Checkbox.displayName = "Checkbox";

package/src/components/ContentTab.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import clsx from "clsx";
+import React, { ComponentPropsWithRef, useCallback, useState } from "react";
+import { Button } from "./Button";
+
+export type ContentTabProps = {
+  label?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  selected?: boolean;
+  className?: string;
+} & ComponentPropsWithRef<"button">;
+
+export const ContentTab = ({
+  label,
+  selected = false,
+  className,
+  disabled = false,
+  onClick,
+  ref,
+  ...props
+}: ContentTabProps) => {
+  const [active, setActive] = useState(false);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (!disabled) {
+        onClick?.(e);
+      }
+    },
+    [onClick, disabled],
+  );
+
+  const computedClassName = clsx(
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out hover:bg-border-action-hover z-10",
+    "rounded-px",
+    "h-0.5",
+    active && "bg-text-action-primary-active",
+    !active && !disabled && "bg-text-action-primary-normal",
+    !active && disabled && "bg-text-action-primary-disabled",
+
+    className,
+  );
+
+  return (
+    <div className="relative">
+      <Button
+        ref={ref}
+        variant="tertiary"
+        disabled={disabled}
+        onMouseDown={() => setActive(true)}
+        onMouseLeave={() => setActive(false)}
+        onMouseUp={() => setActive(false)}
+        onClick={handleClick}
+        role="tab"
+        aria-selected={selected}
+        {...props}
+      >
+        {label}
+      </Button>
+      {selected && <div className={computedClassName}> </div>}
+    </div>
+  );
+};
+
+ContentTab.displayName = "ContentTab";

package/src/components/ContentTabs.tsx

@@ -0,0 +1,103 @@
+"use client";
+import clsx from "clsx";
+import { ReactNode, useState, useRef, useCallback } from "react";
+import { ContentTab } from "./ContentTab";
+
+type Tab = {
+  id: string;
+  label: string;
+  content: ReactNode;
+};
+
+export type ContentTabsProps = {
+  tabs: Tab[];
+  onTabChange?: (tabId: string) => void;
+};
+
+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 }: ContentTabsProps) => {
+  const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id || "");
+  const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const handleTabClick = useCallback(
+    (id: string, index: number) => {
+      setSelectedTab(id);
+      setFocusedTabIndex(index);
+      onTabChange?.(id);
+    },
+    [onTabChange],
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    let newIndex = focusedTabIndex;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
+    } else {
+      return;
+    }
+    const id = tabs[newIndex].id;
+    setSelectedTab(id);
+    onTabChange?.(id);
+    tabRefs.current[newIndex]?.focus();
+    setFocusedTabIndex(newIndex);
+  };
+
+  const selectedContent = tabs.find((tab) => tab.id === selectedTab)?.content;
+
+  return (
+    <div>
+      <div className="overflow-x-auto pb-2">
+        <div
+          role="tablist"
+          aria-orientation="horizontal"
+          className={clsx("flex relative", afterClasses)}
+          onKeyDown={handleKeyDown}
+        >
+          {tabs.map((tab, index) => {
+            const isSelected = selectedTab === tab.id;
+            return (
+              <ContentTab
+                key={tab.id}
+                id={`tab-${tab.id}`}
+                label={tab.label}
+                selected={isSelected}
+                onClick={() => handleTabClick(tab.id, index)}
+                onFocus={() => {
+                  setSelectedTab(tab.id);
+                  setFocusedTabIndex(index);
+                  onTabChange?.(tab.id);
+                }}
+                className={clsx(!isSelected && afterClasses)}
+                role="tab"
+                aria-selected={isSelected}
+                aria-controls={`panel-${tab.id}`}
+                tabIndex={isSelected ? 0 : -1}
+                ref={(el) => {
+                  tabRefs.current[index] = el;
+                }}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div
+        id={`panel-${selectedTab}`}
+        className="mt-2"
+        role="tabpanel"
+        aria-labelledby={`tab-${selectedTab}`}
+        tabIndex={0}
+      >
+        {selectedContent}
+      </div>
+    </div>
+  );
+};
+
+ContentTabs.displayName = "ContentTabs";

package/src/components/DMSiLogo.tsx

@@ -0,0 +1,32 @@
+export function DMSiLogo() {
+  return (
+    <svg
+      width="107"
+      height="24"
+      viewBox="0 0 107 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.1472 5.86855H22.261C24.0328 5.86855 25.2192 5.79792 26.2514 7.25517C27.1489 8.60833 27.4185 9.79792 27.2105 11.4336C27.0025 13.0693 26.5596 14.2291 25.4926 15.6529C24.9996 16.3295 24.3795 16.8648 23.6284 17.2552C22.6077 17.7533 21.9529 17.6827 20.9206 17.6827H8.69893V17.6381L8.00562 23.2589H20.7704C24.2755 23.2589 27.6496 22.5228 30.4807 19.9949C33.0999 17.6827 34.6444 14.8128 35.0489 11.612C35.4918 8.12506 34.6406 5.72357 32.2948 3.3035C29.8875 0.775615 26.8793 0.362976 23.2278 0.362976H10.8328L10.1472 5.92803V5.86855Z"
+        fill="#1D1E1E"
+      />
+      <path
+        d="M45.7143 0.960477L45.3484 3.9233L45.437 3.64077C46.9276 1.46605 49.2772 0.618469 51.8771 0.618469C54.6042 0.618469 56.3567 1.62219 57.4082 3.91958C59.2263 1.53668 61.5527 0.618469 64.4531 0.618469C66.3135 0.618469 67.9544 1.16122 69.0868 2.45862C70.485 4.04598 70.2192 6.1352 69.9342 8.3917L68.0083 23.2356H60.5705L62.3462 9.28018C62.5234 7.901 62.5041 6.35453 60.5128 6.35453C58.0862 6.35453 57.6085 8.52925 57.389 10.2393L55.7366 23.2319H48.2025L49.9782 9.27646C50.1477 7.93817 49.9897 6.22442 48.1255 6.22442C46.0918 6.22442 45.4408 7.6891 45.2367 9.27646L43.461 23.2319H35.3453L38.2072 0.960477H45.7143Z"
+        fill="#1D1E1E"
+      />
+      <path
+        d="M97.4234 0.336578L96.6954 6.39234H103.474L96.2755 9.54104L94.5076 23.2734H103.255L106.175 0.336578H97.4234Z"
+        fill="#1D1E1E"
+      />
+      <path
+        d="M91.03 10.4126C89.3545 9.34573 86.6082 9.04833 84.6092 8.79182C83.9158 8.70632 83.1339 8.49814 82.4059 8.29368C82.1286 8.23792 81.8705 8.16729 81.6317 8.07807C81.5431 8.05204 81.443 8.02231 81.3583 8C81.1618 7.95539 80.9461 7.81041 80.7535 7.61338C80.353 7.30855 80.1141 6.94424 80.1141 6.54647C80.1141 6.35688 80.1835 6.17844 80.2836 6.00372C80.2952 5.98513 80.3029 5.97026 80.3144 5.95167C80.7921 5.20446 82.1248 4.66543 83.7117 4.66543C85.626 4.66543 87.1821 5.44981 87.29 6.43866H94.7393C93.7571 2.34572 89.0772 0 84.8326 0C82.3135 0 79.1204 0.342007 76.7439 1.66171C74.4598 2.94052 72.8228 4.66914 72.5069 7.14126C71.7674 12.9405 77.1945 14.026 81.8436 14.6654C82.1017 14.6952 82.6062 14.8141 83.157 15.0037C84.5976 15.2974 85.6183 16.026 85.6183 16.8848C85.6183 17.8773 84.2509 18.6989 82.4522 18.8699C82.2442 18.9145 82.0593 18.9368 81.9168 18.9368C80.7689 18.9368 79.987 18.8625 79.4131 18.487C78.689 18.197 78.1613 17.777 77.9726 17.29H70.165C71.205 22.3234 75.8387 24 80.534 24C85.6145 24 92.6747 22.2491 93.4412 16.2342C93.6801 14.3494 93.0099 11.7286 91.0378 10.4089L91.03 10.4126Z"
+        fill="#1D1E1E"
+      />
+      <path
+        d="M1.85771 9.54941H16.9027L0.825439 16.9174L1.85771 9.54941Z"
+        fill="#0077C8"
+      />
+    </svg>
+  );
+}