@charcoal-ui/react 3.6.0 → 3.8.0

package/dist/index.esm.js

@@ -50,7 +50,6 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled2, { css } from "styled-components";
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -74,6 +73,45 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
+// src/components/Button/lib/variantToFont.tsx
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/lib/variantToBackground.tsx
+function variantToBackground(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "surface4";
+    case "Default":
+      return "surface3";
+    case "Primary":
+      return "brand";
+    case "Navigation":
+      return "surface6";
+    case "Danger":
+      return "assertive";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/StyledButton.tsx
+import styled2, { css } from "styled-components";
+
 // src/components/Clickable/index.tsx
 import * as React2 from "react";
 import styled from "styled-components";
@@ -144,31 +182,8 @@ var StyledClickableDiv = styled.div`
   }
 `;
 
-// src/components/Button/index.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Button = forwardRef3(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx4(
-    StyledButton,
-    {
-      ...rest,
-      disabled,
-      $background: variantToBackground(variant),
-      $color: variantToFont(variant),
-      $size: size,
-      $fullWidth: fixed,
-      ref,
-      children
-    }
-  );
-});
-var Button_default = Button;
+// src/components/Button/StyledButton.tsx
+import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
 var horizontalPaddingSmall = css`
   padding-right: 16px;
   padding-left: 16px;
@@ -191,79 +206,89 @@ var StyledButton = styled2(Clickable_default)`
   font-weight: bold;
 
   ${(p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall}
-
   color: var(--charcoal-${(p) => p.$color});
   background-color: var(--charcoal-${(p) => p.$background});
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
-
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
+    ${focusVisibleFocusRingCss}
+
+    ${({ $isActive: $active, $color, $background }) => $active ? css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          ` : css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
   }
 
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
   }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
-}
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
+
+// src/components/Button/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Button = forwardRef3(function Button2({
+  children,
+  variant = "Default",
+  size = "M",
+  fullWidth: fixed = false,
+  disabled = false,
+  isActive = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx4(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
+      $size: size,
+      $fullWidth: fixed,
+      $isActive: isActive,
+      ref,
+      children
+    }
+  );
+});
+var Button_default = Button;
 
 // src/components/IconButton/index.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled3 from "styled-components";
+import styled3, { css as css2 } from "styled-components";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss2 } from "@charcoal-ui/styled";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef4(
-  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+  function IconButtonInner({
+    variant = "Default",
+    size = "M",
+    icon,
+    isActive = false,
+    ...rest
+  }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
+    return /* @__PURE__ */ jsx5(
+      StyledIconButton,
+      {
+        ...rest,
+        ref,
+        $size: size,
+        $variant: variant,
+        $isActive: isActive,
+        children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon })
+      }
+    );
   }
 );
 var IconButton_default = IconButton;
@@ -282,22 +307,17 @@ var StyledIconButton = styled3(Clickable_default).attrs(styledProps)`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:hover {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-hover`}
-      );
-    }
-    &:active {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-press`}
-      );
-    }
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${({ $isActive, $background }) => $isActive ? css2`
+            background-color: var(--charcoal-${$background}-press);
+          ` : css2`
+            &:hover {
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+    ${focusVisibleFocusRingCss2}
   }
 
   &:disabled,
@@ -364,8 +384,9 @@ function validateIconSize(size, icon) {
 // src/components/Radio/index.tsx
 import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2 } from "react";
 import * as React3 from "react";
-import styled4, { css as css2 } from "styled-components";
+import styled4 from "styled-components";
 import warning from "warning";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -396,7 +417,7 @@ var Radio = forwardRef5(function RadioInner({ value, disabled = false, children,
         name,
         value,
         checked: isSelected,
-        invalid,
+        "aria-invalid": invalid,
         onChange: handleChange,
         disabled: isDisabled || isReadonly,
         ref
@@ -437,21 +458,18 @@ var RadioInput = styled4.input.attrs({ type: "radio" })`
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      ${({ invalid = false }) => invalid && css2`
-          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        `}
-
       &:hover {
         background-color: var(--charcoal-surface1-hover);
       }
       &:active {
         background-color: var(--charcoal-surface1-press);
       }
-      &:focus,
-      &:active,
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      ${focusVisibleFocusRingCss3}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 
@@ -595,6 +613,7 @@ var MultiSelectGroupContext = createContext3({
 });
 
 // src/components/MultiSelect/index.tsx
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var MultiSelect = forwardRef6(
   function MultiSelectInner({
@@ -739,6 +758,8 @@ var MultiSelectInput = styled5.input.attrs({ type: "checkbox" })`
       }
     }
 
+    ${focusVisibleFocusRingCss4}
+
     ${({ invalid, overlay }) => invalid && !overlay && css3`
         &:not(:disabled):not([aria-disabled]),
         &[aria-disabled='false'] {
@@ -824,6 +845,7 @@ import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
 import { useToggleState } from "react-stately";
 import styled6 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SwitchCheckbox = forwardRef7(
   function SwitchCheckboxInner(props, external) {
@@ -861,10 +883,6 @@ var Label = styled6.label`
     opacity: 0.32;
     cursor: default;
   }
-
-  :active > input {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `;
 var LabelInner = styled6.div`
   font-size: 14px;
@@ -895,9 +913,7 @@ var SwitchInput = styled6.input.attrs({ type: "checkbox" })`
   :active {
     background-color: var(--charcoal-text4-press);
   }
-  :focus {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+  ${focusVisibleFocusRingCss5}
 
   &::after {
     content: '';
@@ -1208,13 +1224,6 @@ var StyledInputContainer = styled8.div`
     background-color: var(--charcoal-surface3-hover);
   }
 
-  :not(:disabled):not([aria-disabled]):active,
-  [aria-disabled='false']:active {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
-  }
-
   :focus-within {
     outline: none;
     box-shadow: 0 0 0 4px
@@ -2099,6 +2108,7 @@ var StyledUl = styled15.ul`
 `;
 
 // src/components/DropdownSelector/index.tsx
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
@@ -2127,6 +2137,7 @@ function DropdownSelector(props) {
         },
         ref: triggerRef,
         type: "button",
+        $active: isOpen,
         children: [
           /* @__PURE__ */ jsx20(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
           /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
@@ -2179,6 +2190,7 @@ var DropdownButton = styled16.button`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${disabledSelector2} {
     cursor: default;
@@ -2189,16 +2201,21 @@ var DropdownButton = styled16.button`
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow, 0.2s background-color;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${focusVisibleFocusRingCss6}
+    ${({ $active }) => $active === true ? css9`
+            background-color: var(--charcoal-surface3-press);
+          ` : css9`
+            &:hover {
+              background-color: var(--charcoal-surface3-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-surface3-press);
+            }
+          `}
   }
 
   ${({ invalid }) => invalid === true && css9`
@@ -2214,20 +2231,9 @@ var DropdownButtonText = styled16.span`
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 var DropdownButtonIcon = styled16(Icon_default)`
   color: var(--charcoal-text2);
@@ -2395,20 +2401,7 @@ var StyledSpan = styled18.span`
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;
@@ -2449,7 +2442,240 @@ var StyledLi2 = styled19.li`
 
 // src/components/SegmentedControl/index.tsx
 import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo2, useRef as useRef10 } from "react";
-import { useRadioGroupState } from "react-stately";
+
+// ../../node_modules/@react-stately/form/dist/import.mjs
+import { createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect } from "react";
+var $e5be200c675c3b3a$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
+  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+var $e5be200c675c3b3a$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
+  validationErrors: []
+};
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
+var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
+function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
+  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
+}
+function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState)
+    isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid ? {
+    isInvalid: true,
+    validationErrors: [],
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
+    validate,
+    value
+  ]);
+  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
+    builtinValidation = null;
+  let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (0, $jcIOw$useMemo)(() => {
+    if (name)
+      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued)
+      return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
+  (0, $jcIOw$useEffect)(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
+        setCurrentValidity(value2);
+      else
+        nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
+      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native")
+        setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native")
+        setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $e5be200c675c3b3a$var$asArray(v) {
+  if (!v)
+    return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $e5be200c675c3b3a$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean")
+      return $e5be200c675c3b3a$var$asArray(e);
+  }
+  return [];
+}
+function $e5be200c675c3b3a$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
+  if (a === b)
+    return true;
+  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+
+// ../../node_modules/@react-stately/utils/dist/import.mjs
+import { useState as $6imuh$useState, useRef as $6imuh$useRef, useEffect as $6imuh$useEffect, useCallback as $6imuh$useCallback } from "react";
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (0, $6imuh$useState)(value || defaultValue);
+  let isControlledRef = (0, $6imuh$useRef)(value !== void 0);
+  let isControlled = value !== void 0;
+  (0, $6imuh$useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
+  let setValue = (0, $6imuh$useCallback)((value2, ...args) => {
+    let onChangeCaller = (value3, ...onChangeArgs) => {
+      if (onChange) {
+        if (!Object.is(currentValue, value3))
+          onChange(value3, ...onChangeArgs);
+      }
+      if (!isControlled)
+        currentValue = value3;
+    };
+    if (typeof value2 === "function") {
+      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
+      let updateFunction = (oldValue, ...functionArgs) => {
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled)
+          return interceptedValue;
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled)
+        setStateValue(value2);
+      onChangeCaller(value2, ...args);
+    }
+  }, [
+    isControlled,
+    currentValue,
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
+}
+
+// ../../node_modules/@react-stately/radio/dist/import.mjs
+import { useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState } from "react";
+var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+var $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = (0, $fQ2SF$useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = (0, $fQ2SF$useState)(null);
+  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+
+// src/components/SegmentedControl/index.tsx
 import {
   useRadio,
   useRadioGroup
@@ -2487,7 +2713,7 @@ var SegmentedControl = forwardRef15(
       }),
       [props]
     );
-    const state = useRadioGroupState(ariaRadioGroupProps);
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
     const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state);
     const segmentedControlItems = useMemo2(() => {
       return props.data.map(
@@ -2619,6 +2845,7 @@ import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef16(
   function CheckboxInner({ invalid = false, ...props }, ref) {
@@ -2696,18 +2923,7 @@ var CheckboxInput = styled21.input`
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      &:focus,
-      &:active {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-        &:not(:focus-visible) {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-      }
+      ${focusVisibleFocusRingCss7}
       &[aria-invalid='true'] {
         box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
       }
@@ -2747,6 +2963,7 @@ import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import styled22, { css as css12 } from "styled-components";
 import { px as px2 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss8 } from "@charcoal-ui/styled";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap = {
   S: 32,
@@ -2830,12 +3047,7 @@ var TagItemRoot = styled22.a`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${focusVisibleFocusRingCss8}
   }
 
   &:disabled,