@tipp/ui 1.4.14 → 1.4.16

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
+export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
 export { Avatar, AvatarProps } from './atoms/avatar.cjs';
 export { Badge, BadgeProps } from './atoms/badge.cjs';
 export { Button } from './atoms/button.cjs';
@@ -11,7 +11,9 @@ export { DropdownMenu } from './atoms/dropdown-menu.cjs';
 export { Heading, HeadingProps } from './atoms/heading.cjs';
 export { Link, LinkProps } from './atoms/link.cjs';
 export { ContentProps, Select } from './atoms/select.cjs';
+export { TextArea, TextAreaProps } from './atoms/text-area.cjs';
 export { Typo, TypoProps } from './atoms/typo.cjs';
+export { RootProps, SlotProps, TextField } from './atoms/text-field.cjs';
 export { Collapse, CollapseProps } from './atoms/collapse.cjs';
 export { Pagination, PaginationProps } from './atoms/pagination.cjs';
 export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-wrapper.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, TextArea, TextAreaProps, TextField, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
+export { AlertDialog, AspectRatio, Blockquote, BlockquoteProps, Box, BoxProps, Callout, CheckboxCards, Code, CodeProps, Container, ContainerProps, DataList, Em, EmProps, Flex, FlexProps, Grid, GridProps, HoverCard, IconButton, IconButtonProps, Inset, InsetProps, Kbd, KbdProps, Popover, Progress, ProgressProps, Quote, QuoteProps, Radio, RadioCards, RadioGroup, RadioProps, Button as RadixButton, ButtonProps as RadixButtonProps, Heading as RadixHeading, ScrollArea, ScrollAreaProps, Section, SectionProps, SegmentedControl, Separator, SeparatorProps, Skeleton, SkeletonProps, Spinner, SpinnerProps, Strong, StrongProps, Switch, SwitchProps, TabNav, Tabs, Tooltip, TooltipProps, useThemeContext } from '@radix-ui/themes';
 export { Avatar, AvatarProps } from './atoms/avatar.js';
 export { Badge, BadgeProps } from './atoms/badge.js';
 export { Button } from './atoms/button.js';
@@ -11,7 +11,9 @@ export { DropdownMenu } from './atoms/dropdown-menu.js';
 export { Heading, HeadingProps } from './atoms/heading.js';
 export { Link, LinkProps } from './atoms/link.js';
 export { ContentProps, Select } from './atoms/select.js';
+export { TextArea, TextAreaProps } from './atoms/text-area.js';
 export { Typo, TypoProps } from './atoms/typo.js';
+export { RootProps, SlotProps, TextField } from './atoms/text-field.js';
 export { Collapse, CollapseProps } from './atoms/collapse.js';
 export { Pagination, PaginationProps } from './atoms/pagination.js';
 export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-wrapper.js';

package/dist/index.js

@@ -49,10 +49,10 @@ import {
 } from "./chunk-DWCPI2UN.js";
 import {
   TextArea
-} from "./chunk-ILRUXI2E.js";
+} from "./chunk-R4JVUEWZ.js";
 import {
   TextField
-} from "./chunk-JPIZP2PZ.js";
+} from "./chunk-YY45YYJE.js";
 import {
   ToastContainer,
   toast
@@ -182,7 +182,7 @@ import {
 } from "./chunk-VTJZMOSP.js";
 import {
   Dialog
-} from "./chunk-BDVTRPXG.js";
+} from "./chunk-2VD5Y72N.js";
 import {
   Avatar
 } from "./chunk-3SSSCLJ5.js";

package/dist/molecules/expand-table/index.js

@@ -7,8 +7,8 @@ import "../../chunk-BSTJBBEX.js";
 import "../../chunk-NDUKDKGB.js";
 import "../../chunk-KTVZ4KLX.js";
 import "../../chunk-DWCPI2UN.js";
-import "../../chunk-ILRUXI2E.js";
-import "../../chunk-JPIZP2PZ.js";
+import "../../chunk-R4JVUEWZ.js";
+import "../../chunk-YY45YYJE.js";
 import "../../chunk-CYYWMYE7.js";
 import "../../chunk-3JRNKBMN.js";
 import "../../chunk-HYITAA4J.js";
@@ -50,7 +50,7 @@ import "../../chunk-OHMOP5PV.js";
 import "../../chunk-LZJR77Q2.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
-import "../../chunk-BDVTRPXG.js";
+import "../../chunk-2VD5Y72N.js";
 import "../../chunk-3SSSCLJ5.js";
 import "../../chunk-EWD4AO5N.js";
 import "../../chunk-YGL6SWKN.js";

package/dist/molecules/expand-table/row.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunk-PCWEW2UL.js";
 import "../../chunk-KTVZ4KLX.js";
 import "../../chunk-DWCPI2UN.js";
-import "../../chunk-ILRUXI2E.js";
-import "../../chunk-JPIZP2PZ.js";
+import "../../chunk-R4JVUEWZ.js";
+import "../../chunk-YY45YYJE.js";
 import "../../chunk-CYYWMYE7.js";
 import "../../chunk-3JRNKBMN.js";
 import "../../chunk-HYITAA4J.js";
@@ -46,7 +46,7 @@ import "../../chunk-OHMOP5PV.js";
 import "../../chunk-LZJR77Q2.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
-import "../../chunk-BDVTRPXG.js";
+import "../../chunk-2VD5Y72N.js";
 import "../../chunk-3SSSCLJ5.js";
 import "../../chunk-EWD4AO5N.js";
 import "../../chunk-YGL6SWKN.js";

package/dist/molecules/index.js

@@ -27,8 +27,8 @@ import "../chunk-BSTJBBEX.js";
 import "../chunk-NDUKDKGB.js";
 import "../chunk-KTVZ4KLX.js";
 import "../chunk-DWCPI2UN.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-R4JVUEWZ.js";
+import "../chunk-YY45YYJE.js";
 import "../chunk-CYYWMYE7.js";
 import "../chunk-3JRNKBMN.js";
 import "../chunk-HYITAA4J.js";
@@ -70,7 +70,7 @@ import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
-import "../chunk-BDVTRPXG.js";
+import "../chunk-2VD5Y72N.js";
 import "../chunk-3SSSCLJ5.js";
 import "../chunk-EWD4AO5N.js";
 import "../chunk-YGL6SWKN.js";

package/dist/molecules/navigation.js

@@ -3,8 +3,8 @@ import {
 } from "../chunk-OCINOC2X.js";
 import "../chunk-KTVZ4KLX.js";
 import "../chunk-DWCPI2UN.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-R4JVUEWZ.js";
+import "../chunk-YY45YYJE.js";
 import "../chunk-CYYWMYE7.js";
 import "../chunk-3JRNKBMN.js";
 import "../chunk-HYITAA4J.js";
@@ -46,7 +46,7 @@ import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
-import "../chunk-BDVTRPXG.js";
+import "../chunk-2VD5Y72N.js";
 import "../chunk-3SSSCLJ5.js";
 import "../chunk-EWD4AO5N.js";
 import "../chunk-YGL6SWKN.js";

package/dist/molecules/tag-selector.js

@@ -3,8 +3,8 @@ import {
 } from "../chunk-66QBRZEL.js";
 import "../chunk-KTVZ4KLX.js";
 import "../chunk-DWCPI2UN.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-R4JVUEWZ.js";
+import "../chunk-YY45YYJE.js";
 import "../chunk-CYYWMYE7.js";
 import "../chunk-3JRNKBMN.js";
 import "../chunk-HYITAA4J.js";
@@ -46,7 +46,7 @@ import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
-import "../chunk-BDVTRPXG.js";
+import "../chunk-2VD5Y72N.js";
 import "../chunk-3SSSCLJ5.js";
 import "../chunk-EWD4AO5N.js";
 import "../chunk-YGL6SWKN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -58,8 +58,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "1.0.0",
-    "@tipp/typescript-config": "1.0.0"
+    "@tipp/typescript-config": "1.0.0",
+    "@tipp/eslint-config": "1.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/atoms/dialog.tsx

@@ -1,7 +1,7 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { Flex } from '@radix-ui/themes';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Button } from './button';
 
 type ContentProps = RadixDialog.DialogContentProps & {
@@ -27,9 +27,10 @@ function Content(props: ContentProps): React.ReactElement {
   } = props;
   const containerRef = useRef<Element | null>(null);
 
-  useEffect(() => {
-    containerRef.current = document.getElementsByClassName('radix-themes')[0];
-  }, []);
+  if (typeof document !== 'undefined') {
+    const container = document.getElementsByClassName('radix-themes')[0];
+    containerRef.current = container;
+  }
 
   return (
     <RadixDialog.Portal container={containerRef.current}>

package/src/atoms/text-area.tsx

@@ -1 +1,29 @@
-export { TextArea, type TextAreaProps } from '@radix-ui/themes';
+import {
+  TextArea as RTextArea,
+  type TextAreaProps as RTextAreaProps,
+} from '@radix-ui/themes';
+import { forwardRef, useMemo } from 'react';
+
+type TextAreaProps = RTextAreaProps & {
+  error?: boolean;
+};
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const { error, style, ...rest } = props;
+    const fieldStyle = useMemo(() => {
+      if (!style && !error) return undefined;
+      const errorStyle = {
+        boxShadow: 'inset 0 0 0 var(--text-area-border-width) var(--error-11)',
+      };
+
+      return { ...(style || {}), ...errorStyle };
+    }, [error, style]);
+
+    return <RTextArea {...rest} ref={ref} style={fieldStyle} />;
+  }
+);
+
+TextArea.displayName = 'TextArea';
+
+export { TextArea, type TextAreaProps };

package/src/atoms/text-field.tsx

@@ -1 +1,29 @@
-export { TextField } from '@radix-ui/themes';
+import { TextField as RTextField } from '@radix-ui/themes';
+import { forwardRef, useMemo } from 'react';
+
+type RSlotProps = RTextField.SlotProps;
+
+type RootProps = RTextField.RootProps & { error?: boolean };
+
+const Root = forwardRef<
+  HTMLInputElement,
+  RTextField.RootProps & { error?: boolean }
+>((props, ref) => {
+  const { error, style, ...rest } = props;
+  const fieldStyle = useMemo(() => {
+    if (!style && !error) return undefined;
+    const errorStyle = {
+      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',
+    };
+
+    return { ...(style || {}), ...errorStyle };
+  }, [error, style]);
+  return <RTextField.Root ref={ref} style={fieldStyle} {...rest} />;
+});
+
+Root.displayName = 'TextField.Root';
+
+const TextField = { Root, Slot: RTextField.Slot };
+
+export { TextField };
+export type { RootProps, RSlotProps as SlotProps };