@lets-events/react 10.1.1 → 11.0.0

package/src/components/TextareaField.tsx

@@ -1,101 +1,101 @@
-import { TextArea as TextAreaRadix } from '@radix-ui/themes'
-import { styled } from '../styles'
-import { ComponentProps, useRef } from 'react'
-import { typographyValues } from '../types/typographyValues'
-import { Text } from './Text'
-
-export const TextareaFieldStyle = styled(TextAreaRadix, {
-  display: 'flex',
-  width: 'fit-content',
-  flex: 1,
-  textarea: {
-    width: '100%',
-    minHeight: '3.75rem',
-    border: 'none',
-    padding: '$12 $14',
-    fontFamily: '$default',
-    fontSize: '$16',
-    outline: 'none',
-    resize: 'vertical',
-  },
-  variants: {
-    typography: typographyValues,
-  },
-  defaultVariants: {
-    typography: 'bodyM',
-  },
-})
-
-export type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
-  limit: number
-}
-
-const TextareaContainer = styled('div', {
-  position: 'relative',
-  display: 'flex',
-  overflow: 'hidden',
-  // width: '100%',
-  border: '1px solid',
-  borderColor: '$dark300',
-  borderRadius: '$2xs',
-
-  '&:has(textarea:focus)': {
-    border: '1px solid $brand300',
-  },
-  '&:has(textarea:disabled)': {
-    backgroundColor: '$dark100',
-    color: '$dark400',
-    border: '1px solid $dark200',
-    cursor: 'not-allowed',
-  },
-})
-
-const TextareaLimitIndicator = styled('div', {
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  padding: '$12 $16',
-  borderTop: '1px solid $neutral300',
-  width: '100%',
-  flex: 1,
-  display: 'flex',
-  span: {
-    backgroundColor: '$neutral200',
-    color: '$neutral700',
-    borderRadius: '$2xs',
-    padding: '$4',
-  },
-})
-
-export function TextareaField({ maxLength, ...props }: TextareaFieldProps) {
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  const badgeRef = useRef<HTMLSpanElement>(null)
-
-  if (!maxLength) {
-    return (
-      <TextareaContainer>
-        <TextareaFieldStyle {...props} ref={inputRef}></TextareaFieldStyle>
-      </TextareaContainer>
-    )
-  }
-  const handleInput = () => {
-    const remainingChars = maxLength - (inputRef?.current?.value.length || 0)
-    if (badgeRef.current) badgeRef.current.textContent = String(remainingChars)
-  }
-
-  return (
-    <TextareaContainer css={{ paddingBottom: '3.25rem' }}>
-      <TextareaFieldStyle
-        ref={inputRef}
-        onInput={handleInput}
-        maxLength={maxLength}
-        {...props}
-      ></TextareaFieldStyle>
-      <TextareaLimitIndicator>
-        <Text typography={'badgeMedium'} ref={badgeRef}>
-          {maxLength}
-        </Text>
-      </TextareaLimitIndicator>
-    </TextareaContainer>
-  )
-}
+import { TextArea as TextAreaRadix } from '@radix-ui/themes'
+import { styled } from '../styles'
+import { ComponentProps, useRef } from 'react'
+import { typographyValues } from '../types/typographyValues'
+import { Text } from './Text'
+
+export const TextareaFieldStyle = styled(TextAreaRadix, {
+  display: 'flex',
+  width: 'fit-content',
+  flex: 1,
+  textarea: {
+    width: '100%',
+    minHeight: '3.75rem',
+    border: 'none',
+    padding: '$12 $14',
+    fontFamily: '$default',
+    fontSize: '$16',
+    outline: 'none',
+    resize: 'vertical',
+  },
+  variants: {
+    typography: typographyValues,
+  },
+  defaultVariants: {
+    typography: 'bodyM',
+  },
+})
+
+export type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
+  limit: number
+}
+
+const TextareaContainer = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  overflow: 'hidden',
+  // width: '100%',
+  border: '1px solid',
+  borderColor: '$dark300',
+  borderRadius: '$2xs',
+
+  '&:has(textarea:focus)': {
+    border: '1px solid $brand300',
+  },
+  '&:has(textarea:disabled)': {
+    backgroundColor: '$dark100',
+    color: '$dark400',
+    border: '1px solid $dark200',
+    cursor: 'not-allowed',
+  },
+})
+
+const TextareaLimitIndicator = styled('div', {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  padding: '$12 $16',
+  borderTop: '1px solid $neutral300',
+  width: '100%',
+  flex: 1,
+  display: 'flex',
+  span: {
+    backgroundColor: '$neutral200',
+    color: '$neutral700',
+    borderRadius: '$2xs',
+    padding: '$4',
+  },
+})
+
+export function TextareaField({ maxLength, ...props }: TextareaFieldProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const badgeRef = useRef<HTMLSpanElement>(null)
+
+  if (!maxLength) {
+    return (
+      <TextareaContainer>
+        <TextareaFieldStyle {...props} ref={inputRef}></TextareaFieldStyle>
+      </TextareaContainer>
+    )
+  }
+  const handleInput = () => {
+    const remainingChars = maxLength - (inputRef?.current?.value.length || 0)
+    if (badgeRef.current) badgeRef.current.textContent = String(remainingChars)
+  }
+
+  return (
+    <TextareaContainer css={{ paddingBottom: '3.25rem' }}>
+      <TextareaFieldStyle
+        ref={inputRef}
+        onInput={handleInput}
+        maxLength={maxLength}
+        {...props}
+      ></TextareaFieldStyle>
+      <TextareaLimitIndicator>
+        <Text typography={'badgeMedium'} ref={badgeRef}>
+          {maxLength}
+        </Text>
+      </TextareaLimitIndicator>
+    </TextareaContainer>
+  )
+}