chore: Swithの型を調整

kufu · Sep 5, 2024 · 355363a · 355363a
1 parent b506232
commit 355363a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/smarthr-ui/src/components/Switch/Switch.tsx b/packages/smarthr-ui/src/components/Switch/Switch.tsx
@@ -55,14 +55,19 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ children, dangerouslyLabelHidden, className, id, ...props }, ref) => {
     const { wrapper, input, icon, iconWrapper } = useMemo(() => switchStyle(), [])
-    const ActualLabel = dangerouslyLabelHidden ? VisuallyHiddenText : Text
     const inputId = useId(id)
 
     return (
       <Cluster align="center">
-        <ActualLabel as="label" htmlFor={inputId}>
-          {children}
-        </ActualLabel>
+        {dangerouslyLabelHidden ? (
+          <VisuallyHiddenText as="label" htmlFor={inputId}>
+            {children}
+          </VisuallyHiddenText>
+        ) : (
+          <label htmlFor={inputId}>
+            <Text>{children}</Text>
+          </label>
+        )}
         <span className={wrapper({ className })}>
           {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input

diff --git a/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx b/packages/smarthr-ui/src/components/VisuallyHiddenText/VisuallyHiddenText.tsx
@@ -5,13 +5,16 @@ export const visuallyHiddenText = tv({
   base: 'shr-absolute -shr-top-px shr-left-0 shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap shr-border-0 shr-p-0 [clip-path:inset(100%)] [clip:rect(0_0_0_0)]',
 })
 
-export const VisuallyHiddenText: React.FC<
-  PropsWithChildren<
-    {
-      as?: string | React.ComponentType<any>
-    } & ComponentProps<'span'>
-  >
-> = ({ as: Component = 'span', className, ...props }) => {
+type Props<T extends React.ElementType> = PropsWithChildren<{
+  as?: T
+}> &
+  ComponentProps<T>
+
+export const VisuallyHiddenText = <T extends React.ElementType = 'span'>({
+  as: Component = 'span',
+  className,
+  ...props
+}: Props<T>) => {
   const styles = useMemo(() => visuallyHiddenText({ className }), [className])
 
   return <Component {...props} className={styles} />