@simplybusiness/mobius 3.0.0

package/src/components/Radio/RadioButton.tsx

@@ -0,0 +1,125 @@
+import {
+  forwardRef,
+  ReactNode,
+  useContext,
+  Ref,
+  RefAttributes,
+  Children,
+} from "react";
+import { useRadio } from "@react-aria/radio";
+import { AriaRadioProps } from "@react-types/radio";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover, HoverProps } from "@react-aria/interactions";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { RadioContext } from "./RadioContext";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type RadioButtonElementType = HTMLInputElement;
+
+export interface RadioButtonProps
+  extends DOMProps,
+    AriaRadioProps,
+    HoverProps,
+    RefAttributes<RadioButtonElementType> {
+  children?: ReactNode | any; // TSC any hack to allow Icon props
+  label?: string;
+  className?: string;
+}
+
+export type RadioButtonRef = Ref<RadioButtonElementType>;
+
+const RadioButton: ForwardedRefComponent<
+  RadioButtonProps,
+  RadioButtonElementType
+> = forwardRef((props: RadioButtonProps, ref: RadioButtonRef) => {
+  const radioContext = useContext(RadioContext);
+
+  if (radioContext === null) {
+    throw Error("Context has not been Provided!");
+  }
+
+  const { state, isDisabled: groupDisabled, circular } = radioContext;
+  const { children, value, label, className, isDisabled, ...otherProps } =
+    props;
+
+  const realDisabled = groupDisabled || isDisabled;
+
+  // Cast aria-label key if label prop is set
+  const { inputProps } = useRadio(
+    { ...props, isDisabled: realDisabled, "aria-label": props.label },
+    state,
+    ref as any,
+  );
+
+  const { isFocusVisible, focusProps } = useFocusRing({
+    within: true,
+  });
+  const { isHovered, hoverProps } = useHover({
+    ...otherProps,
+    isDisabled: realDisabled,
+  });
+  const isSelected = state.selectedValue === inputProps.value;
+  const radioClasses = {
+    "--is-disabled": realDisabled,
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+    "--is-selected": isSelected,
+    circular,
+  };
+  const containerClasses = clsx(
+    "mobius",
+    "mobius/RadioButtonLabel",
+    radioClasses,
+    className,
+  );
+  const nativeInput = (
+    <input
+      value={value}
+      {...otherProps}
+      {...inputProps}
+      {...focusProps}
+      ref={ref}
+      className="mobius/RadioInput"
+    />
+  );
+
+  // Simple scenario: only label set
+  let content = <div className="mobius/RadioButtonContent">{label}</div>;
+
+  if (children) {
+    // Determine type of children (label or icon) and map to relevant HTML span
+    const childMap = { label };
+
+    Children.map(children, child => {
+      const childType =
+        typeof child === "object" && child?.props?.name ? "icon" : "label";
+      childMap[childType] = child;
+    });
+
+    content = childMap["icon"] ? (
+      <div className="mobius/RadioButtonContent">
+        {childMap["icon"] && (
+          <span className="mobius/RadioButtonIcon">{childMap["icon"]}</span>
+        )}
+        <span className="mobius/RadioButtonText">{childMap["label"]}</span>
+      </div>
+    ) : (
+      <div className="mobius/RadioButtonContent">{childMap["label"]}</div>
+    );
+  }
+
+  return (
+    <label
+      css={{ display: "flex", alignItems: "center" }}
+      className={containerClasses}
+      {...hoverProps}
+    >
+      {nativeInput}
+      {content}
+    </label>
+  );
+});
+
+RadioButton.displayName = "RadioButton";
+export { RadioButton };

package/src/components/Radio/RadioContext.tsx

@@ -0,0 +1,12 @@
+import { RadioGroupState } from "@react-stately/radio";
+import { createContext, Context } from "react";
+
+export interface RadioGroupContext {
+  state: RadioGroupState;
+  isDisabled: boolean;
+  validationState?: "valid" | "invalid";
+  circular?: boolean;
+}
+
+export const RadioContext: Context<RadioGroupContext | null> =
+  createContext<RadioGroupContext | null>(null);

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,125 @@
+import {
+  Children,
+  Ref,
+  forwardRef,
+  ReactNode,
+  ReactElement,
+  cloneElement,
+  RefAttributes,
+  isValidElement,
+  useMemo,
+} from "react";
+import { useRadioGroup } from "@react-aria/radio";
+import { useRadioGroupState } from "@react-stately/radio";
+import type {
+  AriaRadioGroupProps,
+  RadioGroupProps as RadioGroupPropsType,
+} from "@react-types/radio";
+import clsx from "clsx";
+import { DOMProps } from "@react-types/shared";
+import { useSlotId } from "@react-aria/utils";
+import { RadioContext } from "./RadioContext";
+import { Flex } from "../Flex";
+import { ForwardedRefComponent } from "../../types/components";
+import { Label } from "../Label";
+import { ErrorMessage } from "../ErrorMessage";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+
+export type RadioGroupElementType = HTMLDivElement;
+
+export interface RadioGroupProps
+  extends DOMProps,
+    RadioGroupPropsType,
+    AriaRadioGroupProps,
+    RefAttributes<RadioGroupElementType> {
+  children: ReactNode;
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+  circular?: boolean;
+  errorMessage?: string;
+}
+
+export type RadioGroupRef = Ref<RadioGroupElementType>;
+
+const RadioGroup: ForwardedRefComponent<
+  RadioGroupProps,
+  RadioGroupElementType
+> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {
+  const state = useRadioGroupState(props);
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    validationState,
+    orientation = "vertical",
+    circular,
+    className,
+    errorMessage,
+    ...rest
+  } = props;
+  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+
+  const radioClasses = {
+    "--is-disabled": isDisabled,
+    "--is-valid": validationState === "valid",
+    "--is-invalid": validationState === "invalid",
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    [`--is-${orientation}`]: true,
+    [className || ""]: true,
+  };
+
+  const radioGroupClasses = clsx("mobius", "mobius/RadioGroup", radioClasses);
+  const labelClasses = clsx("mobius/Label", radioClasses);
+
+  const errorMessageId = useSlotId([Boolean(errorMessage), validationState]);
+  const describedBy = spaceDelimitedList([
+    errorMessageId,
+    props["aria-describedby"],
+  ]);
+
+  // Create stable state for context
+  const radioState = useMemo(
+    () => ({ state, isDisabled, validationState, circular }),
+    [state, isDisabled, validationState, circular],
+  );
+
+  return (
+    <Flex
+      {...rest}
+      {...radioGroupProps}
+      ref={ref}
+      flexDirection="column"
+      className={radioGroupClasses}
+    >
+      {label && (
+        <Label {...labelProps} className={labelClasses}>
+          {label}
+        </Label>
+      )}
+      <RadioContext.Provider value={radioState}>
+        <Flex
+          flexDirection={orientation === "horizontal" ? "row" : "column"}
+          className="mobius/RadioWrapper"
+        >
+          {Children.map(props.children, child => {
+            if (!isValidElement(child)) {
+              return null;
+            }
+
+            return cloneElement(child as ReactElement, {
+              orientation,
+              "aria-describedby": describedBy,
+            });
+          })}
+        </Flex>
+      </RadioContext.Provider>
+      {errorMessage && (
+        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
+      )}
+    </Flex>
+  );
+});
+
+RadioGroup.displayName = "RadioGroup";
+export { RadioGroup };

package/src/components/Radio/index.tsx

@@ -0,0 +1,4 @@
+export * from "./Radio";
+export * from "./RadioButton";
+export * from "./RadioGroup";
+export * from "./RadioContext";

package/src/components/SVG/SVG.story.mdx

@@ -0,0 +1,75 @@
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { SVG } from "./SVG";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/SVG"
+  component={SVG}
+  argTypes={excludeControls("className")}
+/>
+
+# SVG
+
+SVG is a wrapper for svg components. It can be used to wrap one or more other components while ensuring consistency with the current theme.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { SVG } from "@simplybusiness/mobius";
+```
+
+export const Star = (
+  <svg viewBox="0 0 51 48">
+    <path
+      fill="none"
+      stroke="#000"
+      d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"
+    />
+  </svg>
+);
+
+## Examples
+
+<Story name="Normal" args={{ width: 75, height: 75 }}>
+  {args => <SVG {...args}>{Star}</SVG>}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { SVG } from "@simplybusiness/mobius";
+
+// Star component is here only for demonstration purposes
+export const Star = (
+  <svg viewBox="0 0 51 48">
+    <path
+      fill="none"
+      stroke="#000"
+      d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"
+    />
+  </svg>
+);
+
+<SVG>{Star}</SVG>
+```
+
+## Props
+
+<ArgsTable of={SVG} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an SVG image:
+
+```html
+<svg class="mobius/SVG">{children}</svg>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/SVG) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/SVG/SVG.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { SVG } from ".";
+
+const CLASS_NAME = "mobius/SVG";
+
+const SvgImage = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.8 85">
+    <path d="M109.9 38.7c3.3-3.7 4.9-8.2 4.9-13.7 0-6.5-2.3-12.4-6.6-16.7-4.6-4.7-11.1-7.1-18.8-7.1H68.5c-5.3 0-9.1 3.8-9.1 9.1v64.8c0 5.2 3.9 9.1 9.1 9.1h24.8c8.8 0 16.1-2.6 21.2-7.6 4.7-4.6 7.3-11.1 7.3-18.3 0-4.7-1.2-8.9-3.5-12.4-2.1-3-4.9-5.4-8.4-7.2zM68.4 75.9c-.7 0-.9-.3-.9-.9V10.2c0-.8.2-.9.9-.9h20.9c3.8 0 9.2.8 13.1 4.7 2.7 2.8 4.2 6.6 4.2 10.9 0 9.1-11.8 16.2-11.8 16.2s13.2 3.4 16.5 9.2c1.4 2.1 2.1 4.8 2.1 7.9 0 5-1.7 9.4-4.8 12.5-3.5 3.4-8.9 5.3-15.5 5.3l-24.7-.1zM52.2 51.3c1.4 2.8 2.1 5.9 2.1 9.5 0 3.3-.6 6.5-1.8 9.4s-3 5.5-5.3 7.7-5.1 4-8.6 5.2c-3.5 1.3-7.3 1.9-11.5 1.9-5.2 0-10-.9-14.4-2.6-4.4-1.8-8-3.7-10.7-5.7-.7-.6-1.2-1.1-1.6-1.8-.3-.5-.4-1-.4-1.6v-.6c.1-.9.5-1.8 1.2-2.8l2.6-3.7c.9-1.2 1.9-1.9 2.9-2.1.2 0 .3-.1.5-.1.9 0 2 .4 3.2 1.1 5.7 4.1 11.3 6.1 16.7 6.1 3.8 0 6.8-.9 9-2.6s3.3-4 3.3-6.8c0-1.7-.4-3.2-1.3-4.6-.9-1.4-2.1-2.6-3.5-3.6-1.5-1-3.2-2-5.1-2.9-1.9-.9-4-1.9-6.1-2.8-2.1-.9-4.2-1.9-6.3-2.9-2.1-1-4.1-2.2-6-3.5S7.5 38.7 6 37.1c-1.5-1.6-2.7-3.6-3.5-5.8-.9-2.3-1.3-4.8-1.3-7.5 0-4.7 1.2-8.9 3.7-12.5s5.8-6.4 10-8.4C19.1 1 23.8 0 29 0c4.4 0 8.5.7 12.3 1.9 3.8 1.3 6.8 2.7 9 4.3 1.5 1.1 2.3 2.4 2.3 3.8 0 .9-.3 1.8-.9 2.8l-2.1 3.8c-.9 1.7-2.1 2.5-3.6 2.5-.9 0-1.9-.3-3-.9-1.5-.9-2.8-1.6-3.9-2.2-1.1-.6-2.6-1.1-4.6-1.6s-3.9-.8-5.9-.8c-3.8 0-6.9.9-9.2 2.6-2.3 1.7-3.4 4-3.4 6.8 0 2.1.7 3.9 2.1 5.5s3.3 3 5.5 4.1c2.3 1.1 4.7 2.3 7.5 3.4 2.7 1.1 5.4 2.4 8.2 3.7 2.7 1.4 5.2 2.9 7.4 4.7 2.2 1.9 4 4.1 5.5 6.9zm80.1-25.1l1-1.4c.7-1 1.4-1 2.5-.4 1 .7 3.2 2.2 6.2 2.2 2.9 0 4.6-1.4 4.6-3.5 0-5.8-14.3-4.6-14.3-14.2 0-5.4 4.5-8.9 10.3-8.9 3.6 0 6.6 1.4 7.9 2.3 1 .7 1.1 1.5.6 2.5l-.8 1.4c-.6 1.3-1.6 1.1-2.5.6-1.3-.7-2.9-1.7-5.3-1.7-2.9 0-4.7 1.4-4.7 3.5 0 5.7 14.3 4.3 14.3 14 0 5-3.7 9.1-10.2 9.1-4.4 0-7.9-1.9-9.4-3.1-.6-.5-1-1.3-.2-2.4zm24.1-22.5V2.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1.1-2.2 3.8-4.7 7.2-4.7 3.3 0 5.5 1.6 6.4 4.5h.1c1.2-2.3 4.1-4.5 7.5-4.5 4.6 0 7.2 2.6 7.2 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.5-.5-4.4-3-4.4-3.7 0-5.6 3.8-5.6 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.4-.3-4.4-2.9-4.4-3.9 0-5.7 4-5.7 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm38.9 0c0-1.2.6-1.8 1.8-1.8h1.4c1.2 0 1.8.6 1.8 1.5v1.9h.1s1.9-3.9 7.1-3.9c6 0 9.8 4.7 9.8 11.5 0 7-4.3 11.5-10.1 11.5-4.6 0-6.4-3.4-6.4-3.4h-.1s.1.8.1 1.9v7.8c0 1.2-.6 1.8-1.8 1.8H208c-1.2 0-1.8-.6-1.8-1.8v-27zM217 27.2c3 0 5.5-2.5 5.5-6.8 0-4.2-2.2-6.9-5.5-6.9-2.9 0-5.6 2.1-5.6 6.9.1 3.4 2 6.8 5.6 6.8zm15.2-24.8c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v21.5c0 2.2.9 2.5 1.7 2.6.8.1 1.3.6 1.3 1.6v1.5c0 1.1-.5 1.9-1.8 1.9-2.9 0-6.7-.8-6.7-7.1v-22zm12.3 33c.4.2.9.4 1.6.4 1.6 0 2.9-1.4 3.5-2.9l.8-1.9-8.4-19.6c-.6-1.3 0-2.1 1.4-2.1h2.3c1.1 0 1.7.5 2 1.5l4.2 11.2c.4 1.2.8 3 .8 3h.1s.4-1.7.7-2.9l3.9-11.3c.3-1 1-1.5 2-1.5h2.2c1.3 0 1.9.8 1.5 2.1L254 34.6c-1.5 4-4.7 5.8-8 5.8-1.2 0-2.3-.3-3.1-.6-1-.4-1.3-1.3-.8-2.3l.4-1c.5-1.1 1.2-1.3 2-1.1zM133.7 52.2c0-1.2.6-1.8 1.8-1.8h9.2c5.5 0 9.5 2.8 9.5 7.9 0 2.8-1.4 5.3-3.7 6.6v.1c3.3 1 4.9 4.1 4.9 7.2 0 6.1-4.9 8.9-10.6 8.9h-9.3c-1.2 0-1.8-.6-1.8-1.8V52.2zm11 10.7c2.4 0 3.8-1.7 3.8-3.9s-1.3-3.8-3.9-3.8h-5.3v7.7h5.4zm.5 13.3c2.9 0 4.5-1.9 4.5-4.4s-1.6-4.4-4.5-4.4h-6v8.8h6zm14.3-15.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8V72c0 2.7.7 4.5 3.4 4.5 4 0 6.2-3.5 6.2-7.4v-8.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.7c-1.2 0-1.8-.6-1.8-1.8v-1.3c0-.5.1-1 .1-1-1 2.2-3.9 4.6-7.7 4.6-4.7 0-7.7-2.4-7.7-8.4V60.8zm25.1 16l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm20.3-23.3v-1.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V60.8zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1-1.9 3.4-4.7 7.8-4.7 4.9 0 7.7 2.5 7.7 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V67.9c0-2.7-.7-4.5-3.5-4.5-3.9 0-6.4 3.2-6.4 7.2v8.5c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8l.1-18.3zm35.8-2.3c6.3 0 9.8 4.4 9.8 10.5 0 .9-.8 1.9-1.9 1.9H246c.3 4 3.3 6 6.6 6 2 0 3.7-.8 4.8-1.4 1.1-.5 1.9-.4 2.4.6l.5.9c.5 1 .3 1.9-.6 2.4-1.4.9-4 2.2-7.5 2.2-7.3 0-11.9-5.3-11.9-11.5.1-6.8 4.7-11.6 11.3-11.6zm4.3 9c-.1-3.1-1.9-4.9-4.5-4.9-2.8 0-4.8 1.9-5.3 4.9h9.8zm8.5 9.3l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm19.3 0l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.8-.7-.9-1.6-.3-2.6z" />
+  </svg>
+);
+
+describe("Test for SVG", () => {
+  it("should render without errors", () => {
+    render(<SVG css={{ fill: "primary", width: "size-100" }}>{SvgImage}</SVG>);
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(
+        <SVG css={{ fill: "primary", width: "size-100" }} data-testid="test">
+          {SvgImage}
+        </SVG>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(
+        <SVG css={{ fill: "primary", width: "size-100" }} data-testid="test">
+          {SvgImage}
+        </SVG>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <SVG
+          css={{ fill: "primary", width: "size-100" }}
+          data-testid="test"
+          className="my-class"
+        >
+          {SvgImage}
+        </SVG>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/SVG/SVG.tsx

@@ -0,0 +1,37 @@
+import { Ref, forwardRef, RefAttributes, Children } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
+  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+  className?: string;
+}
+
+export type SVGRef = Ref<SVGSVGElement>;
+
+const SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(
+  (props: SVGProps, ref: SVGRef) => {
+    const { children, className, ...otherProps } = props;
+
+    const classes = clsx("mobius", "mobius/SVG", className);
+    const svgNode = Children.only(children);
+    // Remove originalType and mdxType props
+    const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+
+    return (
+      <svg
+        viewBox={viewBox}
+        xmlns={xmlns}
+        ref={ref}
+        {...otherProps}
+        className={classes}
+      >
+        {svgChildren}
+      </svg>
+    );
+  },
+);
+
+SVG.displayName = "SVG";
+export { SVG };

package/src/components/SVG/index.tsx

@@ -0,0 +1 @@
+export * from "./SVG";