@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/dist/bricks/IconButton.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Button } from "./Button.js";
+interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>, "children" | "tone"> {
+    /**
+     * Accessible name for the button.
+     *
+     * This label gets used by assistive technology to identify the button,
+     * and also gets shown in a tooltip by default.
+     */
+    label: string;
+    /**
+     * Icon to be displayed inside the button.
+     *
+     * Can be a URL of an SVG from the `kiwi-icons` package,
+     * or a custom JSX icon.
+     */
+    icon: string | React.JSX.Element;
+    /**
+     * Behavior of the label.
+     *
+     * By default, the label is shown in a tooltip. Use `"visually-hidden"` to
+     * hide the label from sighted users.
+     *
+     * @default "tooltip"
+     */
+    labelVariant?: "tooltip" | "visually-hidden";
+}
+/**
+ * An icon-only button, with a required accessible name.
+ *
+ * The icon can be a URL from the `kiwi-icons` package:
+ * ```tsx
+ * <IconButton
+ *   label="Reveal full content"
+ *   icon={new URL("@itwin/itwinui-icons/icons/arrow.svg", import.meta.url).href}
+ * />
+ * ```
+ *
+ * Alternatively, pass a JSX node such as an `<Icon>`.
+ * ```tsx
+ * <IconButton
+ *   label={…}
+ *   icon={<Icon href={…} />}
+ *   variant="ghost"
+ * />
+ * ```
+ *
+ * The `isActive` prop can be used to turn this button into a toggle button.
+ * ```tsx
+ * const [isActive, setIsActive] = React.useState(false);
+ *
+ * <IconButton
+ *   label={…}
+ *   icon={…}
+ *   isActive={isActive}
+ *   onClick={() => setIsActive(!isActive)}
+ * />
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
+    variant: "ghost";
+    /**
+     * Whether the button is in a toggled state and currently "active" (toggled on).
+     *
+     * Setting this prop to `true` or `false` will turn this button into a toggle button.
+     * The button will have an `aria-pressed` attribute and extra styling for the "active" state.
+     * When this prop is `undefined`, the button will be a regular button (no `aria-pressed` attribute).
+     *
+     * **Note:** This prop is only available with `variant="ghost"`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed
+     *
+     * @default undefined
+     */
+    isActive?: boolean;
+}, "ref"> | Omit<IconButtonBaseProps & {
+    variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
+    isActive?: never;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/bricks/IconButton.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import { Button } from "./Button.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { Icon } from "./Icon.js";
+import { Tooltip } from "./Tooltip.js";
+const IconButton = React.forwardRef((props, forwardedRef) => {
+  const { label, icon, isActive, labelVariant, ...rest } = props;
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-pressed": isActive,
+      ...rest,
+      className: cx("\u{1F95D}-icon-button", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
+      ]
+    }
+  );
+  if (labelVariant === "visually-hidden") {
+    return button;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
+});
+export {
+  IconButton
+};

package/dist/bricks/Kbd.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { BaseProps } from "./~utils.js";
+interface KbdProps extends BaseProps<"kbd"> {
+    /** @default "solid" */
+    variant?: "solid" | "muted" | "ghost";
+}
+/**
+ * A styled wrapper over the HTML `<kbd>` element. This is typically
+ * used for displaying keyboard shortcuts.
+ *
+ * ```tsx
+ * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
+ * ```
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/bricks/Kbd.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+const Kbd = React.forwardRef(
+  (props, forwardedRef) => {
+    const { variant = "solid", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role,
+      {
+        "data-kiwi-variant": variant,
+        ...rest,
+        className: cx("\u{1F95D}-kbd", props.className),
+        render: props.render || /* @__PURE__ */ jsx("kbd", {}),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  Kbd
+};

package/dist/bricks/Label.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { BaseProps } from "./~utils.js";
+interface LabelProps extends BaseProps<"label"> {
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/bricks/Label.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { useFieldId } from "./Field.js";
+const Label = React.forwardRef((props, forwardedRef) => {
+  const fieldId = useFieldId();
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.label,
+    {
+      htmlFor: fieldId,
+      ...props,
+      className: cx("\u{1F95D}-label", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Label
+};

package/dist/bricks/ListItem.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+interface ListItemProps extends Ariakit.RoleProps<"div"> {
+}
+/** @internal */
+declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ListItemContentProps extends Ariakit.RoleProps<"span"> {
+}
+/** @internal */
+declare const ListItemContent: React.ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { ListItem as Root, ListItemContent as Content };

package/dist/bricks/ListItem.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+const ListItem = React.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.div,
+      {
+        role: "listitem",
+        ...props,
+        className: cx("\u{1F95D}-list-item", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const ListItemContent = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      ...props,
+      className: cx("\u{1F95D}-list-item-content", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  ListItemContent as Content,
+  ListItem as Root
+};

package/dist/bricks/Radio.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import type { FocusableProps } from "./~utils.js";
+type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
+type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+interface RadioProps extends InputBaseProps, RadioOwnProps {
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/bricks/Radio.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { useFieldId } from "./Field.js";
+const Radio = React.forwardRef((props, forwardedRef) => {
+  const fieldId = useFieldId();
+  return /* @__PURE__ */ jsx(
+    Ariakit.Radio,
+    {
+      accessibleWhenDisabled: true,
+      id: fieldId,
+      ...props,
+      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Radio
+};

package/dist/bricks/Root.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface RootProps extends BaseProps {
+    /**
+     * The color scheme to use for all components under the Root.
+     */
+    colorScheme: "light" | "dark";
+    /**
+     * Whether to synchronize the color scheme with the parent document (or shadow-root host).
+     *
+     * This is useful when you don't have explicit control over the color scheme of the host.
+     *
+     * @default false
+     */
+    synchronizeColorScheme?: boolean;
+    /**
+     * The density to use for all components under the Root.
+     */
+    density: "dense";
+}
+/**
+ * Component to be used at the root of your application. It ensures that kiwi styles are loaded
+ * and automatically applied to the current page or the encompassing shadow-root.
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/bricks/Root.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import cx from "classnames";
+import foundationsCss from "../foundations/styles.css.js";
+import bricksCss from "./styles.css.js";
+import { isBrowser } from "./~utils.js";
+import { useMergedRefs } from "./~hooks.js";
+const css = foundationsCss + bricksCss;
+const Root = React.forwardRef(
+  (props, forwardedRef) => {
+    const { children, synchronizeColorScheme = false, ...rest } = props;
+    return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
+      /* @__PURE__ */ jsx(Styles, {}),
+      /* @__PURE__ */ jsx(Fonts, {}),
+      synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
+      children
+    ] });
+  }
+);
+const RootNodeContext = React.createContext(null);
+function useRootNode() {
+  return React.useContext(RootNodeContext);
+}
+const RootInternal = React.forwardRef((props, forwardedRef) => {
+  const { children, colorScheme, density, ...rest } = props;
+  const [rootNode, setRootNode] = React.useState(
+    null
+  );
+  const findRootNodeFromRef = React.useCallback((element) => {
+    if (!element) return;
+    const rootNode2 = element.getRootNode();
+    if (!isDocument(rootNode2) && !isShadow(rootNode2)) return;
+    setRootNode(rootNode2);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-root", props.className),
+      "data-kiwi-theme": colorScheme,
+      "data-kiwi-density": density,
+      ref: useMergedRefs(forwardedRef, findRootNodeFromRef),
+      children: /* @__PURE__ */ jsx(RootNodeContext.Provider, { value: rootNode, children })
+    }
+  );
+});
+function SynchronizeColorScheme({
+  colorScheme
+}) {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    if (isDocument(rootNode)) {
+      rootNode.documentElement.dataset.colorScheme = colorScheme;
+      const meta = rootNode.querySelector("meta[name='color-scheme']");
+      if (meta) meta.content = colorScheme;
+    } else if (isShadow(rootNode)) {
+      rootNode.host.dataset.colorScheme = colorScheme;
+    }
+  }, [rootNode, colorScheme]);
+  return null;
+}
+function Styles() {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    loadStyles(rootNode, { css });
+  }, [rootNode]);
+  return null;
+}
+const styleSheets = /* @__PURE__ */ new WeakMap();
+function loadStyles(rootNode, { css: css2 }) {
+  const loaded = (() => {
+    if (!isBrowser) return false;
+    const ownerDocument = getOwnerDocument(rootNode);
+    const _window = getWindow(rootNode);
+    if (!ownerDocument || !_window) return false;
+    if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) {
+      const styleElement = ownerDocument.createElement("style");
+      styleElement.dataset.kiwi = "true";
+      styleElement.textContent = css2;
+      (rootNode.head || rootNode).appendChild(styleElement);
+      return true;
+    }
+    const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet();
+    if (!styleSheets.has(_window)) {
+      styleSheets.set(_window, styleSheet);
+    }
+    styleSheet.replaceSync(css2);
+    if (!rootNode.adoptedStyleSheets.includes(styleSheet)) {
+      rootNode.adoptedStyleSheets.push(styleSheet);
+    }
+    return true;
+  })();
+  return { loaded };
+}
+function Fonts() {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    loadFonts(rootNode);
+  }, [rootNode]);
+  return null;
+}
+function loadFonts(rootNode) {
+  const ownerDocument = getOwnerDocument(rootNode);
+  if (!ownerDocument || Array.from(ownerDocument.fonts).some(
+    (font) => font.family === "InterVariable"
+  )) {
+    return;
+  }
+  const interStyles = {
+    normal: "https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1",
+    italic: "https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.1"
+  };
+  for (const [style, url] of Object.entries(interStyles)) {
+    const font = new FontFace("InterVariable", `url(${url}) format("woff2")`, {
+      display: "swap",
+      weight: "100 900",
+      style
+    });
+    ownerDocument.fonts.add(font);
+  }
+}
+const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document.prototype;
+function isShadow(node) {
+  return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
+}
+function isDocument(node) {
+  return node?.nodeType === Node.DOCUMENT_NODE;
+}
+function getOwnerDocument(node) {
+  return (isDocument(node) ? node : node.ownerDocument) || null;
+}
+function getWindow(node) {
+  const ownerDocument = getOwnerDocument(node);
+  return ownerDocument?.defaultView || null;
+}
+const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+export {
+  Root
+};

package/dist/bricks/Switch.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import type { FocusableProps } from "./~utils.js";
+type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
+type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
+    /** The default checked state of the toggle switch. */
+    defaultChecked?: boolean;
+    /** The controlled checked state of the toggle switch. */
+    checked?: boolean;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/bricks/Switch.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { useFieldId } from "./Field.js";
+const Switch = React.forwardRef((props, forwardedRef) => {
+  const fieldId = useFieldId();
+  return /* @__PURE__ */ jsx(
+    Ariakit.Checkbox,
+    {
+      accessibleWhenDisabled: true,
+      id: fieldId,
+      ...props,
+      className: cx("\u{1F95D}-switch", props.className),
+      role: "switch",
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Switch
+};

package/dist/bricks/Tabs.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import type { FocusableProps, BaseProps } from "./~utils.js";
+interface TabsProps extends Pick<Ariakit.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+}
+declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Tabs {
+    var displayName: string;
+}
+interface TabListProps extends BaseProps {
+    /** @default "neutral" */
+    tone?: "neutral" | "accent";
+}
+declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"> {
+}
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+interface TabPanelProps extends BaseProps<"div">, Pick<Ariakit.TabPanelProps, "tabId" | "unmountOnHide"> {
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export { Tabs as Root, TabList, Tab, TabPanel };

package/dist/bricks/Tabs.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { useControlledState } from "./~hooks.js";
+function Tabs(props) {
+  const {
+    defaultSelectedId,
+    selectedId: selectedIdProp,
+    setSelectedId: setSelectedIdProp,
+    selectOnMove,
+    children
+  } = props;
+  const [selectedId, setSelectedId] = useControlledState(
+    defaultSelectedId,
+    selectedIdProp,
+    setSelectedIdProp
+  );
+  return /* @__PURE__ */ jsx(
+    Ariakit.TabProvider,
+    {
+      selectedId,
+      setSelectedId: React.useCallback(
+        (id) => {
+          if (document.startViewTransition) {
+            document.startViewTransition(() => {
+              ReactDOM.flushSync(() => {
+                setSelectedId(id);
+              });
+            });
+          } else {
+            setSelectedId(id);
+          }
+        },
+        [setSelectedId]
+      ),
+      selectOnMove,
+      children
+    }
+  );
+}
+const TabList = React.forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
+  return /* @__PURE__ */ jsx(
+    Ariakit.TabList,
+    {
+      "data-kiwi-tone": tone,
+      ...rest,
+      className: cx("\u{1F95D}-tab-list", props.className),
+      style: {
+        "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
+        ...props.style
+      },
+      ref: forwardedRef
+    }
+  );
+});
+const Tab = React.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Tab,
+      {
+        accessibleWhenDisabled: true,
+        ...props,
+        className: cx("\u{1F95D}-tab", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TabPanel = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.TabPanel,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tab-panel", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Tabs as Root,
+  Tab,
+  TabList,
+  TabPanel
+};

package/dist/bricks/TextBox.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { Textarea } from "./Textarea.js";
+import type { FocusableProps, BaseProps } from "./~utils.js";
+interface BaseInputProps extends FocusableProps<"input"> {
+}
+interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
+    /** Input is a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) and no content is permitted. */
+    children?: never;
+    /**
+     * Describes a text based [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+     * based on the value type the user will enter.
+     *
+     * @default "text"
+     */
+    type?: Extract<BaseInputProps["type"], "text" | "email" | "password" | "search" | "tel" | "url" | "number" | "date">;
+}
+/**
+ * Input component that allows users to enter text based values.
+ *
+ * Example usage:
+ * ```tsx
+ * <TextBox.Input defaultValue="Hello" />
+ * ```
+ *
+ * To add additional decorations, see `TextBox.Root` component.
+ */
+declare const TextBoxInput: React.ForwardRefExoticComponent<TextBoxInputProps & React.RefAttributes<HTMLInputElement>>;
+interface TextBoxRootProps extends BaseProps {
+}
+/**
+ * Root component allows adding additional decorations to text based inputs.
+ *
+ * Example usage to add an end icon:
+ * ```tsx
+ * <TextBox.Root>
+ * 	<TextBox.Input defaultValue="Hello" />
+ * 	<TextBox.Icon href={...} />
+ * </TextBox.Root>
+ * ```
+ */
+declare const TextBoxRoot: React.ForwardRefExoticComponent<TextBoxRootProps & React.RefAttributes<HTMLDivElement>>;
+interface TextBoxIconProps extends React.ComponentProps<typeof Icon> {
+}
+declare const TextBoxIcon: React.ForwardRefExoticComponent<Omit<TextBoxIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+interface TextBoxTextProps extends BaseProps<"span"> {
+}
+declare const TextBoxText: React.ForwardRefExoticComponent<TextBoxTextProps & React.RefAttributes<HTMLSpanElement>>;
+export { TextBoxRoot as Root, TextBoxInput as Input, Textarea, TextBoxIcon as Icon, TextBoxText as Text, };