@ftdata/ui 0.0.1

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,284 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { BadgesContainer, HelpText, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput } from "./styles.js";
+import Badge from "./Badge/index.js";
+import MultiSelectList from "./MultiSelectList/index.js";
+import calcTextSize from "./calcTextSize.js";
+import { Icon } from "@ftdata/f-icons";
+function MultiSelect({ helpText, label, isLoading, name, onChangeItems, optional, options, required, maxItems, placeholder, selectAll, isError, value = [], isSuccess, translation, ...rest }) {
+    const [unselected, setUnselected] = useState([]);
+    const [selected, setSelected] = useState([]);
+    const [filtered, setFiltered] = useState([]);
+    const [showList, setShowList] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [inputSize, setInputSize] = useState(0);
+    const [isFocused, setIsFocused] = useState(false);
+    const prevOptionsRef = useRef([]);
+    const valueRef = useRef([]);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const notFound = {
+        value: "",
+        label: translation("no_data_was_found")
+    };
+    const allSelected = {
+        value: "",
+        label: translation("all_were_selected")
+    };
+    const maxLimit = {
+        value: "",
+        label: translation("the_selection_limit_has_been_reached")
+    };
+    const empty = {
+        value: "",
+        label: translation("no_data_is_available")
+    };
+    const computedOptions = ()=>{
+        if (0 === options.length) return [
+            empty
+        ];
+        if (maxItems && maxItems > 0 && maxItems === selected.length) return [
+            maxLimit
+        ];
+        if ("" !== inputValue) return filtered;
+        if (unselected.length > 0) return unselected;
+        return [
+            allSelected
+        ];
+    };
+    const removeSelected = (value)=>{
+        const newSelected = selected.filter((option)=>option.value !== value);
+        setSelected(newSelected);
+        inputRef.current?.focus();
+        setIsFocused(true);
+    };
+    const addSelected = (event, option)=>{
+        event.stopPropagation();
+        if (maxItems && selected.length === maxItems) return void setUnselected([]);
+        if (0 === unselected.length) return;
+        setFiltered([]);
+        setInputValue("");
+        setSelected((prev)=>[
+                ...prev,
+                option
+            ]);
+        inputRef.current?.focus();
+        setIsFocused(true);
+    };
+    const addSelectedByEnter = (option)=>{
+        if (maxItems && selected.length === maxItems) return void setUnselected([]);
+        if (0 === unselected.length) return;
+        setFiltered([]);
+        setInputValue("");
+        setInputSize(1);
+        setSelected((prev)=>[
+                ...prev,
+                option
+            ]);
+        inputRef.current?.focus();
+        setIsFocused(true);
+    };
+    const toggleList = ()=>{
+        if (!inputRef.current) {
+            setShowList(false);
+            setIsFocused(false);
+            return;
+        }
+        if (showList) {
+            setShowList(false);
+            inputRef.current.blur();
+            setIsFocused(false);
+            return;
+        }
+        setShowList(true);
+        inputRef.current.focus();
+        setIsFocused(true);
+    };
+    const handleClickOutside = (event)=>{
+        if (containerRef.current && containerRef.current.contains(event.target)) return;
+        setShowList(false);
+        setIsFocused(false);
+    };
+    const filter = (event)=>{
+        if (!event.target.value) return void setFiltered([]);
+        const valueNormalized = event.target.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        const newFiltered = unselected.filter((option)=>{
+            const labelNormalized = option.label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+            return labelNormalized.includes(valueNormalized);
+        });
+        if (newFiltered.length > 0) return void setFiltered(newFiltered);
+        setFiltered([
+            notFound
+        ]);
+    };
+    const handleChange = (event)=>{
+        filter(event);
+        const textStyle = "500 14px Inter";
+        const newInputSize = calcTextSize(event.target.value, textStyle, "rem");
+        if (newInputSize) setInputSize(newInputSize);
+        setInputValue(event.target.value);
+    };
+    const removeLast = ()=>{
+        if (0 === selected.length) return;
+        if ("" !== inputValue) return;
+        const idx = selected.length - 1;
+        const newSelected = selected.slice(0, idx);
+        setSelected(newSelected);
+    };
+    const handleKeyDown = (event)=>{
+        if ("Backspace" === event.key) removeLast();
+        if ("Enter" === event.key) {
+            if (filtered.length > 0) return void addSelectedByEnter(filtered[0]);
+            if (unselected.length > 0) return void addSelectedByEnter(unselected[0]);
+        }
+    };
+    const handleClearAll = (event)=>{
+        event.preventDefault();
+        setSelected([]);
+    };
+    const handleAddAll = (event)=>{
+        event.preventDefault();
+        if (maxItems && maxItems > 0) return setSelected(options.slice(0, maxItems));
+        setSelected(options);
+    };
+    const canShowSelectAll = ()=>{
+        if (!selectAll) return;
+        if (selected.length === options.length) return;
+        if (0 !== filtered.length) return;
+        if (maxItems && 0 === maxItems || maxItems === selected.length) return;
+        return handleAddAll;
+    };
+    useEffect(()=>{
+        if (showList) document.addEventListener("click", handleClickOutside, true);
+        return ()=>{
+            document.removeEventListener("click", handleClickOutside, true);
+        };
+    }, [
+        showList
+    ]);
+    useEffect(()=>{
+        if (0 === selected.length) return void setUnselected(options);
+        const newUnselected = options.filter((option)=>!selected.some((opt)=>opt.value === option.value));
+        setUnselected(newUnselected);
+    }, [
+        selected
+    ]);
+    useEffect(()=>{
+        if (onChangeItems) onChangeItems(selected);
+    }, [
+        selected
+    ]);
+    useEffect(()=>{
+        if (value.length) return;
+        if (JSON.stringify(prevOptionsRef.current) !== JSON.stringify(options)) {
+            setUnselected(options);
+            prevOptionsRef.current = options;
+        }
+    }, [
+        options
+    ]);
+    useEffect(()=>{
+        if (JSON.stringify(valueRef.current) !== JSON.stringify(value)) {
+            valueRef.current = value;
+            if (value.length > 0) {
+                const newUnselected = [
+                    ...options.filter((opt)=>!value.includes(opt)),
+                    ...value.filter((opt)=>!options.includes(opt))
+                ];
+                setSelected(value);
+                setUnselected(newUnselected);
+            }
+        }
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsxs(LabelContainer, {
+                required: required,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                htmlFor: name,
+                                children: label
+                            }),
+                            optional && /*#__PURE__*/ jsx("span", {
+                                children: optional
+                            }),
+                            required && /*#__PURE__*/ jsx("span", {
+                                children: "*"
+                            })
+                        ]
+                    }),
+                    selected.length > 3 && /*#__PURE__*/ jsx("button", {
+                        onClick: handleClearAll,
+                        children: translation("remove_all")
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(MultiSelectContainer, {
+                onClick: toggleList,
+                isFocused: isFocused,
+                isSuccess: isSuccess,
+                isError: isError,
+                children: [
+                    /*#__PURE__*/ jsxs(BadgesContainer, {
+                        children: [
+                            selected && /*#__PURE__*/ jsx(Fragment, {
+                                children: selected.map((option)=>/*#__PURE__*/ jsx(Badge, {
+                                        text: option.label,
+                                        remove: ()=>removeSelected(option.value)
+                                    }, option.value))
+                            }),
+                            /*#__PURE__*/ jsx(ResizableInput, {
+                                type: "text",
+                                name: name,
+                                placeholder: selected.length ? "" : placeholder,
+                                ref: inputRef,
+                                value: inputValue,
+                                onKeyDown: handleKeyDown,
+                                onChange: handleChange,
+                                size: inputSize,
+                                wide: 0 === selected.length,
+                                ...rest
+                            })
+                        ]
+                    }),
+                    maxItems && maxItems > 0 ? /*#__PURE__*/ jsx(MaxItemsIndicator, {
+                        children: /*#__PURE__*/ jsxs("span", {
+                            children: [
+                                selected.length,
+                                "/",
+                                maxItems
+                            ]
+                        })
+                    }) : "",
+                    showList && /*#__PURE__*/ jsx(MultiSelectList, {
+                        options: computedOptions(),
+                        onClickOption: options.length ? addSelected : ()=>null,
+                        isLoading: isLoading,
+                        addAll: canShowSelectAll(),
+                        translation: translation
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(HelpText, {
+                isError: isError,
+                isSuccess: isSuccess,
+                children: [
+                    isError && /*#__PURE__*/ jsx(Icon, {
+                        name: "ui warning-circle",
+                        size: "1rem",
+                        color: "currentColor"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: helpText
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { MultiSelect as default };

package/dist/components/MultiSelect/styles.d.ts

@@ -0,0 +1,24 @@
+export declare const MultiSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface labelProps {
+    required?: boolean;
+}
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, labelProps>> & string;
+interface MultiSelectContainerProps {
+    isFocused?: boolean;
+    isError?: boolean;
+    isSuccess?: boolean;
+}
+export declare const MultiSelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MultiSelectContainerProps>> & string;
+export declare const BadgesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface ResizableInputProps {
+    size: number;
+    wide: boolean;
+}
+export declare const ResizableInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ResizableInputProps>> & string;
+export declare const MaxItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface HelpTextProps {
+    isError?: boolean;
+    isSuccess?: boolean;
+}
+export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpTextProps>> & string;
+export {};

package/dist/components/MultiSelect/styles.js

@@ -0,0 +1,165 @@
+import styled_components, { keyframes } from "styled-components";
+import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const MultiSelectWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+`;
+const showButton = keyframes`
+    from {
+        opacity: 0.8;
+        transform: translateY(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+`;
+const LabelContainer = styled_components.div`
+  display: flex;
+  gap: ${({ required })=>required ? "0" : "0.5rem"};
+  position: relative;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  div {
+    max-width: 70%;
+  }
+
+  label {
+    color: ${COLOR_NEUTRAL_DUSK};
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    line-height: 1rem;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  span {
+    margin-left: ${({ required })=>required ? "0" : "0.5rem"};
+    color: ${({ required })=>required ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_DARK};
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    line-height: 1rem;
+  }
+
+  button {
+    color: ${COLOR_ACCENT_MEDIUM};
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    line-height: 1rem;
+    animation: ${showButton} 0.15s ease-in forwards;
+    height: 1rem;
+
+    &:hover {
+      color: ${COLOR_ACCENT_DARK};
+    }
+  }
+`;
+const boxShadows = {
+    focused: {
+        default: `inset 0 0 0 2px ${COLOR_NEUTRAL_MEDIUM}`,
+        error: `inset 0 0 0 2px ${COLOR_DANGER_MEDIUM}`,
+        success: `inset 0 0 0 2px ${COLOR_SUCCESS_MEDIUM}`
+    },
+    blurred: {
+        default: `inset 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM}`,
+        error: `inset 0 0 0 1px ${COLOR_DANGER_MEDIUM}`,
+        success: `inset 0 0 0 1px ${COLOR_SUCCESS_MEDIUM}`
+    }
+};
+const verifyBoxShadow = (isFocused, isError, isSuccess)=>{
+    if (isFocused) {
+        if (isError) return boxShadows.focused.error;
+        if (isSuccess) return boxShadows.focused.success;
+        return boxShadows.focused.default;
+    }
+    if (!isFocused) {
+        if (isError) return boxShadows.blurred.error;
+        if (isSuccess) return boxShadows.blurred.success;
+        return boxShadows.blurred.default;
+    }
+    return `inset 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM}`;
+};
+const MultiSelectContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  box-shadow: ${({ isFocused, isError, isSuccess })=>verifyBoxShadow(isFocused, isError, isSuccess)};
+  border-radius: 0.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  width: 100%;
+  position: relative;
+`;
+const BadgesContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  width: 100%;
+  max-height: 160px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    background-color: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    background: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d5d8da;
+  }
+`;
+const ResizableInput = styled_components.input`
+  outline: none;
+  border: none;
+  color: ${COLOR_NEUTRAL_DUSK};
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  padding: 0.25rem 0;
+  width: ${({ size, wide })=>wide ? "100%" : size ? `${size}rem` : "1rem"};
+
+  &::placeholder {
+    color: ${COLOR_NEUTRAL_DARK};
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+    line-height: 1.5rem;
+  }
+`;
+const MaxItemsIndicator = styled_components.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+
+  span {
+    color: ${COLOR_NEUTRAL_MEDIUM};
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+  }
+`;
+const HelpText = styled_components.div`
+  color: ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+  }
+`;
+export { BadgesContainer, HelpText, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput };

package/dist/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Radio from ".";
+/**
+ * Radios são usados em formulários. Os usuários podem marcar apenas um dos botões de opção.
+ * Somente um botão de opção pode ser marcado por vez.
+ * Este componente também funciona com os atributos nativos de um HTML  input element.
+ */
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação do Radio quando não está marcado.
+ */
+export declare const Unchecked: Story;
+/**
+ * Variação do Radio quando está marcado.
+ */
+export declare const Checked: Story;

package/dist/components/Radio/Radio.stories.js

@@ -0,0 +1,30 @@
+import index from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Radio",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        checked: {
+            description: "Define se o componente est\xe1 marcado."
+        }
+    }
+};
+const Radio_stories = meta;
+const Unchecked = {
+    args: {
+        label: "Uncheked",
+        checked: false
+    }
+};
+const Checked = {
+    args: {
+        label: "Cheked",
+        checked: true
+    }
+};
+export { Checked, Unchecked, Radio_stories as default };

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,7 @@
+import React, { InputHTMLAttributes } from "react";
+interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
+    checked: boolean;
+    label: string;
+}
+declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/components/Radio/index.js

@@ -0,0 +1,27 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Input, Label } from "./styles.js";
+import { Paragraph } from "../Text/index.js";
+const Radio = ({ checked, disabled, label, name, ...rest })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                checked: checked,
+                disabled: disabled,
+                id: name,
+                name: name,
+                type: "radio",
+                ...rest
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                checked: checked,
+                disabled: disabled,
+                htmlFor: name,
+                children: /*#__PURE__*/ jsx(Paragraph, {
+                    size: "md",
+                    children: label
+                })
+            })
+        ]
+    });
+const components_Radio = Radio;
+export { components_Radio as default };

package/dist/components/Radio/story.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const RadioButton: React.FC<{
+    disabled: boolean;
+}>;
+export default RadioButton;

package/dist/components/Radio/story.js

@@ -0,0 +1,47 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import index from "./index.js";
+const RadioButton = ({ disabled })=>{
+    const [selectedValue, setSelectedValue] = useState("a");
+    const handleChange = (event)=>{
+        setSelectedValue(event.currentTarget.value);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(index, {
+                checked: "a" === selectedValue,
+                disabled: disabled,
+                onChange: handleChange,
+                value: "a",
+                name: "radio-button-demo1",
+                label: "Teste 1"
+            }),
+            /*#__PURE__*/ jsx(index, {
+                checked: "b" === selectedValue,
+                disabled: disabled,
+                onChange: handleChange,
+                value: "b",
+                name: "radio-button-demo2",
+                label: "Teste 2"
+            }),
+            /*#__PURE__*/ jsx(index, {
+                checked: "c" === selectedValue,
+                disabled: disabled,
+                onChange: handleChange,
+                value: "c",
+                name: "radio-button-demo3",
+                label: "Teste 3"
+            }),
+            /*#__PURE__*/ jsx(index, {
+                checked: "d" === selectedValue,
+                disabled: disabled,
+                onChange: handleChange,
+                value: "d",
+                name: "radio-button-demo4",
+                label: "Teste 4"
+            })
+        ]
+    });
+};
+const story = RadioButton;
+export { story as default };

package/dist/components/Radio/styles.d.ts

@@ -0,0 +1,8 @@
+import { LabelHTMLAttributes } from "react";
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    checked: boolean;
+    disabled?: boolean;
+}
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>, LabelProps>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, never>> & string;
+export {};

package/dist/components/Radio/styles.js

@@ -0,0 +1,43 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_CIRCLE, BORDER_WIDTH_HAIRLINE, BORDER_WIDTH_THICK, COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, SPACING_INLINE_03, SPACING_INLINE_04, SPACING_STACK_03 } from "@ftdata/f-tokens";
+const Label = styled_components("label")`
+  box-sizing: border-box;
+  color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_DARKER : COLOR_NEUTRAL_DUSK};
+  cursor: ${({ disabled })=>disabled ? "not-allowed" : "pointer"};
+  display: inline-block;
+  position: relative;
+  padding-left: ${SPACING_INLINE_04};
+
+  &:before,
+  &:after {
+    background: ${({ checked, disabled })=>disabled ? checked ? COLOR_NEUTRAL_DAY : COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
+    border: ${({ disabled })=>disabled ? 0 : `${BORDER_WIDTH_HAIRLINE} solid
+            ${COLOR_NEUTRAL_LIGHT}`};
+    border-radius: ${BORDER_RADIUS_CIRCLE};
+    box-sizing: border-box;
+    content: "";
+    height: ${SPACING_STACK_03};
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: 0.2s ease all;
+    width: ${SPACING_INLINE_03};
+  }
+
+  &:after {
+    border: ${BORDER_WIDTH_THICK} solid
+      ${({ disabled })=>disabled ? COLOR_NEUTRAL_MEDIUM : COLOR_ACCENT_MEDIUM};
+    height: ${SPACING_STACK_03};
+    opacity: ${({ checked })=>checked ? 1 : 0};
+    width: ${SPACING_INLINE_03};
+  }
+`;
+const Input = styled_components("input")`
+  box-sizing: border-box;
+  left: -9999px;
+  opacity: ${({ checked })=>checked ? 1 : 0};
+  position: absolute;
+  transform: scale(${({ checked })=>checked ? 1 : 0});
+`;
+export { Input, Label };