@tipp/ui 1.4.15 → 1.4.17

package/dist/molecules/tag-selector.js

@@ -1,14 +1,15 @@
 import {
   TagSelector
-} from "../chunk-IKUXA6XG.js";
+} from "../chunk-OKN5AK5Z.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-OHBL3CTQ.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-TTYPIX4R.js";
+import "../chunk-YY45YYJE.js";
 import "../chunk-CYYWMYE7.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
@@ -21,13 +22,16 @@ import "../chunk-5H3YPCZK.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-VKEZRJ2L.js";
+import "../chunk-G6ITJNH2.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-2DZ2Y3JI.js";
 import "../chunk-DJN2IEY6.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-HK224ADT.js";
 import "../chunk-O3T3TM3V.js";
 import "../chunk-O3DNDMV3.js";
 import "../chunk-OHMOP5PV.js";
@@ -39,27 +43,23 @@ import "../chunk-UC627KGO.js";
 import "../chunk-4WFMOFN2.js";
 import "../chunk-WKFZ5MMN.js";
 import "../chunk-ACVANQJ4.js";
+import "../chunk-52MVZ6AN.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-U7JPP7WJ.js";
+import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
 import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
 import "../chunk-LHCDPZ5E.js";
+import "../chunk-FWNTKFWE.js";
 import "../chunk-J242TTFH.js";
-import "../chunk-YJCCE5WP.js";
-import "../chunk-YGL6SWKN.js";
-import "../chunk-OHBL3CTQ.js";
-import "../chunk-EGEQY3KT.js";
-import "../chunk-4Y5BEXVN.js";
-import "../chunk-U7JPP7WJ.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-HK224ADT.js";
+import "../chunk-YJCCE5WP.js";
 import "../chunk-3SSSCLJ5.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-52MVZ6AN.js";
-import "../chunk-LQY4RKWI.js";
-import "../chunk-FWNTKFWE.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   TagSelector

package/package.json

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

package/src/atoms/text-area.tsx

@@ -1 +1,32 @@
-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 = error
+        ? {
+            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 };