Remove default exports from components

src/components/Card.tsx

@@ -7,7 +7,7 @@ export const cardClass = tv({
 
 type Props = JSX.IntrinsicElements["div"] & { children?: ReactNode };
 
-export default function Card({ className, children, ...props }: Props) {
+export function Card({ className, children, ...props }: Props) {
   return (
     <div className={cardClass({ className })} {...props}>
       {children}

src/components/FixedBanner.tsx

@@ -22,7 +22,7 @@ type Props = JSX.IntrinsicElements["div"] & {
   children?: ReactNode;
 };
 
-export default function FixedBanner({
+export function FixedBanner({
   resolvePosition = true,
   className,
   children,

src/components/FormButton.tsx

@@ -7,7 +7,7 @@ export const formButtonClass = tv({
 
 type Props = JSX.IntrinsicElements["button"] & { children?: ReactNode };
 
-export default function FormButton({ className, children, ...props }: Props) {
+export function FormButton({ className, children, ...props }: Props) {
   return (
     <button className={formButtonClass({ className })} {...props}>
       {children}

src/components/FormCheckboxRow.tsx

@@ -10,7 +10,7 @@ type Props = Omit<
   label?: string;
 };
 
-export default function FormCheckboxRow({
+export function FormCheckboxRow({
   label,
   checked,
   defaultChecked,

src/components/FormContent.tsx

@@ -7,7 +7,7 @@ export const formContentClass = tv({
 
 type Props = JSX.IntrinsicElements["div"] & { children?: ReactNode };
 
-export default function FormContent({ className, children, ...props }: Props) {
+export function FormContent({ className, children, ...props }: Props) {
   return (
     <div className={formContentClass({ className })} {...props}>
       {children}

src/components/FormGroup.tsx

@@ -5,7 +5,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function FormGroup({ title, children }: Props) {
+export function FormGroup({ title, children }: Props) {
   return (
     <div className="grid gap-3">
       {title && (

src/components/FormLabelRow.tsx

@@ -7,12 +7,7 @@ type Props = {
   suffix?: ReactNode;
 };
 
-export default function FormLabelRow({
-  label,
-  children,
-  prefix,
-  suffix,
-}: Props) {
+export function FormLabelRow({ label, children, prefix, suffix }: Props) {
   return (
     <label className="grid gap-2">
       {label && <span className="text-sm">{label}</span>}

src/components/FormPasswordFieldRow.tsx

@@ -3,8 +3,8 @@
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/16/solid";
 import { ChangeEvent, useEffect, useState } from "react";
 import { tv } from "tailwind-variants";
-import FormLabelRow from "./FormLabelRow";
-import FormTextField from "./FormTextField";
+import { FormLabelRow } from "./FormLabelRow";
+import { FormTextField } from "./FormTextField";
 
 const fieldClass = tv({
   base: "pr-8",
@@ -16,7 +16,7 @@ type Props = Omit<JSX.IntrinsicElements["input"], "type"> & {
   onStrengthChange?: (strength: StrengthState) => unknown;
 };
 
-export default function FormPasswordFieldRow({
+export function FormPasswordFieldRow({
   label,
   checkStrength = false,
   onStrengthChange,

src/components/FormTextField.tsx

@@ -7,7 +7,7 @@ export const formTextFieldClass = tv({
 
 type Props = Omit<JSX.IntrinsicElements["input"], "ref">;
 
-export default forwardRef<HTMLInputElement, Props>(function FormTextField(
+export const FormTextField = forwardRef<HTMLInputElement, Props>(function (
   { className, ...props }: Props,
   ref,
 ) {

src/components/FormTextFieldRow.tsx

@@ -1,19 +1,14 @@
 import { ReactNode } from "react";
-import FormLabelRow from "./FormLabelRow";
-import FormTextField from "./FormTextField";
+import { FormLabelRow } from "./FormLabelRow";
+import { FormTextField } from "./FormTextField";
 
 type Props = JSX.IntrinsicElements["input"] & {
   label?: string;
   prefix?: ReactNode;
   suffix?: ReactNode;
 };
 
-export default function FormTextFieldRow({
-  label,
-  prefix,
-  suffix,
-  ...props
-}: Props) {
+export function FormTextFieldRow({ label, prefix, suffix, ...props }: Props) {
   return (
     <FormLabelRow label={label} prefix={prefix} suffix={suffix}>
       <FormTextField {...props} />

src/components/InfoBanner.tsx

@@ -19,7 +19,7 @@ type Props = JSX.IntrinsicElements["p"] & {
   icon?: ReactNode;
 };
 
-export default function InfoBanner({
+export function InfoBanner({
   className,
   children,
   variant,

src/components/LinkButton.tsx

@@ -3,7 +3,7 @@ import { formButtonClass } from "./FormButton";
 
 type Props = JSX.IntrinsicElements["a"] & { children?: ReactNode };
 
-export default function LinkButton({ className, children, ...props }: Props) {
+export function LinkButton({ className, children, ...props }: Props) {
   return (
     <a className={formButtonClass({ className })} {...props}>
       {children}

src/components/VerticalNavbar.tsx

@@ -5,7 +5,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function VerticalNavbar({ title, children }: Props) {
+export function VerticalNavbar({ title, children }: Props) {
   return (
     <div className="grid min-w-32 gap-6">
       {title && <p className="text-lg">{title}</p>}

src/components/VerticalNavbarButton.tsx

@@ -30,7 +30,7 @@ type Props = {
   getPathname?: () => string;
 };
 
-export default function VerticalNavbarButton({
+export function VerticalNavbarButton({
   href,
   onClick,
   children,

src/components/VerticalNavbarGroup.tsx

@@ -5,7 +5,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function VerticalNavbarGroup({ title, children }: Props) {
+export function VerticalNavbarGroup({ title, children }: Props) {
   if (!children) return <></>;
 
   return (

src/components/VerticalNavbarSeparator.tsx

@@ -1,4 +1,4 @@
-export default function VerticalNavbarSeparator() {
+export function VerticalNavbarSeparator() {
   return (
     <hr className="h-[1px] border-0 bg-current opacity-10 dark:opacity-25" />
   );

src/components/brand/LogoLuminar.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 import LogoPreview from "../../stories/components/LogoPreview";
-import LogoLuminar from "./LogoLuminar";
+import { LogoLuminar } from "./LogoLuminar";
 import StoryPreview from "../../stories/components/StoryPreview";
 import { Logo } from "./LogoLuminar.stories";
 

src/components/brand/LogoLuminar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import LogoLuminar from "./LogoLuminar";
+import { LogoLuminar } from "./LogoLuminar";
 
 const meta = {
   title: "Brand/Luminar",

src/components/brand/LogoLuminar.tsx

@@ -15,7 +15,7 @@ export const logoLuminarClass = tv({
   },
 });
 
-export default function LogoLuminar({
+export function LogoLuminar({
   variant,
   color,
   height,

src/components/brand/LogoMoductor.mdx

@@ -1,8 +1,8 @@
 import { Meta } from "@storybook/blocks";
 import LogoPreview from "../../stories/components/LogoPreview";
-import LogoMoductorFull from "./LogoMoductorFull";
-import LogoMoductorSymbol from "./LogoMoductorSymbol";
-import LogoMoductorType from "./LogoMoductorType";
+import { LogoMoductorFull } from "./LogoMoductorFull";
+import { LogoMoductorSymbol } from "./LogoMoductorSymbol";
+import { LogoMoductorType } from "./LogoMoductorType";
 
 <Meta title="Brand/Moductor" />
 

src/components/brand/LogoMoductor.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import LogoMoductorFull from "./LogoMoductorFull";
-import LogoMoductorSymbol from "./LogoMoductorSymbol";
-import LogoMoductorType from "./LogoMoductorType";
+import { LogoMoductorFull } from "./LogoMoductorFull";
+import { LogoMoductorSymbol } from "./LogoMoductorSymbol";
+import { LogoMoductorType } from "./LogoMoductorType";
 
 const meta = {
   title: "Brand/Moductor",

src/components/brand/LogoMoductorFull.tsx

@@ -16,7 +16,7 @@ export const logoMoductorClass = tv({
   },
 });
 
-export default function LogoMoductorFull({
+export function LogoMoductorFull({
   variant,
   color,
   height,

src/components/brand/LogoMoductorSymbol.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 import { logoMoductorClass } from "./LogoMoductorFull";
 
-export default function LogoMoductorSymbol({
+export function LogoMoductorSymbol({
   variant,
   color,
   height,

src/components/brand/LogoMoductorType.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 import { logoMoductorClass } from "./LogoMoductorFull";
 
-export default function LogoMoductorType({
+export function LogoMoductorType({
   variant,
   color,
   height,

src/components/brand/index.ts

@@ -1,4 +1,4 @@
-export * as LogoLuminar from "./LogoLuminar";
-export * as LogoMoductorFull from "./LogoMoductorFull";
-export * as LogoMoductorSymbol from "./LogoMoductorSymbol";
-export * as LogoMoductorType from "./LogoMoductorType";
+export * from "./LogoLuminar";
+export * from "./LogoMoductorFull";
+export * from "./LogoMoductorSymbol";
+export * from "./LogoMoductorType";

src/components/index.ts

@@ -1,17 +1,17 @@
-export * as Card from "./Card";
-export * as FixedBanner from "./FixedBanner";
-export * as FormButton from "./FormButton";
-export * as FormCheckboxRow from "./FormCheckboxRow";
-export * as FormContent from "./FormContent";
-export * as FormGroup from "./FormGroup";
-export * as FormLabelRow from "./FormLabelRow";
-export * as FormPasswordFieldRow from "./FormPasswordFieldRow";
-export * as FormTextField from "./FormTextField";
-export * as FormTextFieldRow from "./FormTextFieldRow";
-export * as InfoBanner from "./InfoBanner";
-export * as LinkButton from "./LinkButton";
-export * as VerticalNavbar from "./VerticalNavbar";
-export * as VerticalNavbarButton from "./VerticalNavbarButton";
-export * as VerticalNavbarGroup from "./VerticalNavbarGroup";
-export * as VerticalNavbarSeparator from "./VerticalNavbarSeparator";
+export * from "./Card";
+export * from "./FixedBanner";
+export * from "./FormButton";
+export * from "./FormCheckboxRow";
+export * from "./FormContent";
+export * from "./FormGroup";
+export * from "./FormLabelRow";
+export * from "./FormPasswordFieldRow";
+export * from "./FormTextField";
+export * from "./FormTextFieldRow";
+export * from "./InfoBanner";
+export * from "./LinkButton";
+export * from "./VerticalNavbar";
+export * from "./VerticalNavbarButton";
+export * from "./VerticalNavbarGroup";
+export * from "./VerticalNavbarSeparator";
 export * from "./brand";