fix: ShadCN styles scoping & ref error (#896)

* Fixed ShadCN styles scoping & ref error

* Added comment

Author: matthewlipski

packages/shadcn/src/form/TextInput.tsx

@@ -4,58 +4,60 @@ import { forwardRef } from "react";
 
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
 
-export const TextInput = forwardRef(
-  (props: ComponentProps["Generic"]["Form"]["TextInput"]) => {
-    const {
-      className,
-      name,
-      label,
-      icon, // TODO: implement
-      value,
-      autoFocus,
-      placeholder,
-      onKeyDown,
-      onChange,
-      onSubmit,
-      ...rest
-    } = props;
+export const TextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["Generic"]["Form"]["TextInput"]
+>((props, ref) => {
+  const {
+    className,
+    name,
+    label,
+    icon, // TODO: implement
+    value,
+    autoFocus,
+    placeholder,
+    onKeyDown,
+    onChange,
+    onSubmit,
+    ...rest
+  } = props;
 
-    assertEmpty(rest);
+  assertEmpty(rest);
 
-    const ShadCNComponents = useShadCNComponentsContext()!;
-
-    if (!label) {
-      return (
-        <ShadCNComponents.Input.Input
-          aria-label={name}
-          name={name}
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          value={value}
-          onKeyDown={onKeyDown}
-          onChange={onChange}
-          onSubmit={onSubmit}
-        />
-      );
-    }
+  const ShadCNComponents = useShadCNComponentsContext()!;
 
+  if (!label) {
     return (
-      <div>
-        <ShadCNComponents.Label.Label htmlFor={label}>
-          {label}
-        </ShadCNComponents.Label.Label>
-        <ShadCNComponents.Input.Input
-          className={className}
-          id={label}
-          name={name}
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          value={value}
-          onKeyDown={onKeyDown}
-          onChange={onChange}
-          onSubmit={onSubmit}
-        />
-      </div>
+      <ShadCNComponents.Input.Input
+        aria-label={name}
+        name={name}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        value={value}
+        onKeyDown={onKeyDown}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        ref={ref}
+      />
     );
   }
-);
+
+  return (
+    <div>
+      <ShadCNComponents.Label.Label htmlFor={label}>
+        {label}
+      </ShadCNComponents.Label.Label>
+      <ShadCNComponents.Input.Input
+        className={className}
+        id={label}
+        name={name}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        value={value}
+        onKeyDown={onKeyDown}
+        onChange={onChange}
+        onSubmit={onSubmit}
+      />
+    </div>
+  );
+});

packages/shadcn/src/style.css

@@ -1,6 +1,6 @@
+@import "./tailwindStyles.css";
 @import url("@blocknote/react/style.css");
 
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -69,6 +69,7 @@
 .bn-shadcn * {
   @apply bn-border-border;
 }
+
 .bn-shadcn .bn-editor {
   @apply bn-bg-background bn-text-foreground;
 }