adaptui · anuraghazra · Feb 1, 2021 · Jan 21, 2021 · Jan 22, 2021 · Jan 22, 2021
diff --git a/forms.js b/forms.js
@@ -0,0 +1,68 @@
+const svgToDataUri = require("mini-svg-data-uri");
+const plugin = require("tailwindcss/plugin");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const { colors, spacing, borderWidth, outline } = defaultTheme;
+
+const forms = plugin(function ({ addComponents, theme }) {
+  addComponents({
+    ".custom-radio": {
+      appearance: "none",
+      padding: "0",
+      "color-adjust": "exact",
+      display: "inline-block",
+      "vertical-align": "middle",
+      "background-origin": "border-box",
+      "user-select": "none",
+      "flex-shrink": "0",
+      height: spacing[4],
+      width: spacing[4],
+      color: theme("colors.blue.600", colors.blue[600]),
+      "background-color": "#fff",
+      "border-color": theme("colors.gray.500", colors.gray[500]),
+      "border-width": borderWidth["DEFAULT"],
+      "border-radius": "100%",
+      "&:focus": {
+        outline: outline.none[0],
+        "outline-offset": outline.none[1],
+        "--tw-ring-inset": "var(--tw-empty,/*!*/ /*!*/)",
+        "--tw-ring-offset-width": "2px",
+        "--tw-ring-offset-color": "#fff",
+        "--tw-ring-color": theme("colors.blue.600", colors.blue[600]),
+        "--tw-ring-offset-shadow": `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+        "--tw-ring-shadow": `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+        "box-shadow": `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
+        "border-color": theme("colors.gray.500", colors.gray[500]),
+      },
+      "&:checked": {
+        "border-color": `transparent`,
+        "background-color": `currentColor`,
+        "background-size": `100% 100%`,
+        "background-position": `center`,
+        "background-repeat": `no-repeat`,
+        "background-image": `url("${svgToDataUri(
+          `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
+        )}")`,
+      },
+      "&:checked:hover": {
+        "border-color": "transparent",
+        "background-color": "currentColor",
+      },
+      "&:checked:focus": {
+        "border-color": "transparent",
+        "background-color": "currentColor",
+      },
+      "&:disabled": {
+        "border-width": "0px",
+        "background-color": theme("colors.gray.200", colors.gray[200]),
+        "background-image": `url("${svgToDataUri(
+          `<svg viewBox="0 0 16 16" fill="${theme(
+            "colors.gray.500",
+            colors.gray[500],
+          )}" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
+        )}")`,
+      },
+    },
+  });
+});
+
+module.exports = forms;
diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
     "@storybook/addon-essentials": "^6.1.14",
     "@storybook/addon-links": "^6.1.14",
     "@storybook/react": "^6.1.14",
+    "@tailwindcss/forms": "^0.2.1",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",

diff --git a/preset.js b/preset.js
@@ -530,6 +530,7 @@ const renderlesskitConfig = {
       generateDataClassVariant("is-selection-end", true);
       generateDataClassVariant("is-selection-end", true, "lib");
     }),
+    require("./forms"),
   ],
 };
 

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -1,47 +1,89 @@
-import { cx } from "@renderlesskit/react";
+import React from "react";
 import {
   Radio as ReakitRadio,
+  RadioProps as ReakitRadioProps,
   RadioGroup as ReakitRadioGroup,
-  RadioGroupProps,
-  RadioInitialState,
-  RadioProps,
-  useRadioState,
+  RadioGroupProps as ReakitRadioGroupProps,
 } from "reakit";
+import { cx } from "@renderlesskit/react";
+
+import { useTheme } from "../theme";
+import { BoxProps, Box } from "../box";
 import { createContext } from "../utils";
 import { forwardRefWithAs } from "../utils/types";
+import {
+  useRadioState,
+  RadioInitialState,
+  RadioStateReturn,
+} from "./useRadioState";
 
-const [RadioProvider, useRadioContext] = createContext({
+const [RadioProvider, useRadioContext] = createContext<{
+  radioState: RadioStateReturn;
+  radioSize?: RadioLabelProps["size"];
+}>({
   name: "RadioContext",
   strict: true,
   errorMessage: "Radio must be used within RadioContextProvider",
 });
 
+export interface RadioLabelProps extends BoxProps {
+  /**
+   * How large should the radio be?
+   */
+  size?: keyof Renderlesskit.GetThemeValue<"radio", "size">;
+}
+
+export const RadioLabel = forwardRefWithAs<
+  RadioLabelProps,
+  HTMLLabelElement,
+  "label"
+>(({ children, className, size, ...props }, ref) => {
+  const theme = useTheme();
+  const { radioSize } = useRadioContext();
+  const _size = size || radioSize || "sm";
+
+  return (
+    <Box
+      as="label"
+      ref={ref}
+      className={cx(theme.radio.base, theme.radio.size[_size], className)}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+});
+
 export const Radio = forwardRefWithAs<
-  Partial<RadioProps>,
+  Partial<ReakitRadioProps>,
   HTMLInputElement,
   "input"
 >(({ children, className, ...props }, ref) => {
-  const state = useRadioContext();
+  const { radioState } = useRadioContext();
+  const theme = useTheme();
+
   return (
-    <label className={cx("radio", className)}>
-      <span className="radio__input">
-        <ReakitRadio className="sr-only" {...state} {...props} ref={ref} />
-        <span className="radio__control" />
-      </span>
-      <span className="radio__label">{children}</span>
-    </label>
+    <ReakitRadio
+      className={theme.radio.input}
+      {...radioState}
+      {...props}
+      ref={ref}
+    />
   );
 });
 
+type RadioGroupProps = Partial<ReakitRadioGroupProps & RadioInitialState> &
+  Partial<Pick<RadioLabelProps, "size">>;
+
 export const RadioGroup = forwardRefWithAs<
-  Partial<RadioGroupProps & RadioInitialState>,
+  RadioGroupProps,
   HTMLDivElement,
   "div"
->(({ children, ...props }, ref) => {
+>(({ children, size, ...props }, ref) => {
   const radio = useRadioState(props);
 
   return (
-    <RadioProvider value={radio}>
+    <RadioProvider value={{ radioState: radio, radioSize: size }}>
       <ReakitRadioGroup {...radio} ref={ref}>
         {children}
       </ReakitRadioGroup>

diff --git a/src/radio/stories/Radio.stories.tsx b/src/radio/stories/Radio.stories.tsx
@@ -1,7 +1,7 @@
-import "./style.css";
 import React from "react";
 import { Meta } from "@storybook/react";
-import { Radio, RadioGroup } from "../Radio";
+import { Radio, RadioGroup, RadioLabel } from "../Radio";
+import { Button } from "../../";
 
 export default {
   title: "Radio",
@@ -10,32 +10,75 @@ export default {
 
 export const Default = () => {
   return (
-    <RadioGroup>
+    <RadioGroup size="sm">
       <div className="flex gap-5">
-        <Radio value="1">One</Radio>
-        <Radio value="2">Two</Radio>
-        <Radio value="3">Three</Radio>
-        <Radio value="4" disabled>
+        <RadioLabel>
+          <Radio value="1" /> One
+        </RadioLabel>
+        <RadioLabel>
+          <Radio value="2" /> Two
+        </RadioLabel>
+        <RadioLabel>
+          <Radio value="3" /> Three
+        </RadioLabel>
+        <RadioLabel>
+          <Radio value="4" disabled />
           Disabled
-        </Radio>
+        </RadioLabel>
       </div>
     </RadioGroup>
   );
 };
 
+export const Controlled = () => {
+  const [state, setState] = React.useState("3");
+
+  console.log(state);
+  return (
+    <>
+      <RadioGroup
+        state={state}
+        onStateChange={e => {
+          setState(e as string);
+        }}
+      >
+        <div className="flex gap-5">
+          <RadioLabel>
+            <Radio value="1" /> One
+          </RadioLabel>
+          <RadioLabel>
+            <Radio value="2" /> Two
+          </RadioLabel>
+          <RadioLabel>
+            <Radio value="3" /> Three
+          </RadioLabel>
+          <RadioLabel>
+            <Radio value="4" disabled />
+            Disabled
+          </RadioLabel>
+        </div>
+      </RadioGroup>
+      <Button onClick={() => setState("2")}>change</Button>
+    </>
+  );
+};
+
 export const States = () => {
   return (
-    <RadioGroup state={"2"}>
+    <RadioGroup defaultState={"2"}>
       <div className="flex flex-col gap-2">
-        <Radio value="1" className="hover:bg-gray-100 p-2 rounded-md">
+        <RadioLabel className="hover:bg-gray-100 p-2 rounded-md">
+          <Radio value="1" />
           Unchecked
-        </Radio>
-        <Radio value="2" className="hover:bg-gray-100 p-2 rounded-md">
+        </RadioLabel>
+        <RadioLabel className="hover:bg-gray-100 p-2 rounded-md">
+          <Radio value="2" />
           Checked
-        </Radio>
-        <Radio value="3" disabled className="hover:bg-gray-100 p-2 rounded-md">
+        </RadioLabel>
+        <RadioLabel className="hover:bg-gray-100 p-2 rounded-md">
+          <Radio value="3" disabled />
           Disabled
-        </Radio>
+        </RadioLabel>
       </div>
     </RadioGroup>
   );

diff --git a/src/radio/stories/style.css b/src/radio/stories/style.css
diff --git a/src/radio/useRadioState.tsx b/src/radio/useRadioState.tsx
@@ -0,0 +1,57 @@
+import { useControllableState } from "@renderlesskit/react";
+import * as React from "react";
+import {
+  CompositeState,
+  CompositeActions,
+  CompositeInitialState,
+  useCompositeState,
+} from "reakit";
+
+type StateType = string | number | undefined;
+
+export type RadioState = CompositeState & {
+  /**
+   * The `value` attribute of the current checked radio.
+   */
+  state: StateType;
+};
+
+export type RadioActions = CompositeActions & {
+  /**
+   * Sets `state`.
+   */
+  setState: React.Dispatch<React.SetStateAction<StateType>>;
+};
+
+export type RadioInitialState = CompositeInitialState &
+  Partial<Pick<RadioState, "state">> & {
+    defaultState?: StateType;
+    onStateChange?: (v: StateType) => void;
+  };
+
+export type RadioStateReturn = RadioState & RadioActions;
+
+export function useRadioState(
+  initialState: RadioInitialState = {},
+): RadioStateReturn {
+  const {
+    state: initialValue,
+    defaultState,
+    loop = true,
+    onStateChange,
+    ...props
+  } = initialState;
+
+  const [state, setState] = useControllableState<string | number | undefined>({
+    value: initialValue,
+    defaultValue: defaultState,
+    onChange: onStateChange,
+  });
+
+  const composite = useCompositeState({ ...props, loop });
+  return {
+    ...composite,
+    state,
+    setState,
+  };
+}