Merge pull request #38 from babylonlabs-io/tong/revert-prefix

Revert "feat: add tailwind prefixes"

.changeset/mean-panthers-tap.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+Revert prefix change

src/components/Avatar/Avatar.css

@@ -1,31 +1,31 @@
 .bbn-avatar {
-  @apply b-inline-flex b-items-center b-justify-center b-overflow-hidden;
+  @apply inline-flex items-center justify-center overflow-hidden;
 
   &-img {
-    @apply b-size-full b-object-cover b-object-center;
+    @apply size-full object-cover object-center;
   }
 
   &-tiny {
-    @apply b-size-[1.125rem];
+    @apply size-[1.125rem];
   }
 
   &-small {
-    @apply b-size-6;
+    @apply size-6;
   }
 
   &-medium {
-    @apply b-size-8;
+    @apply size-8;
   }
 
   &-large {
-    @apply b-size-10;
+    @apply size-10;
   }
 
   &-circular {
-    @apply b-rounded-full;
+    @apply rounded-full;
   }
 
   &-rounded {
-    @apply b-rounded;
+    @apply rounded;
   }
 }

src/components/Avatar/Avatar.stories.tsx

@@ -20,7 +20,7 @@ export const Image: Story = {
 
 export const Text: Story = {
   args: {
-    className: "b-bg-primary b-text-primary-contrast",
+    className: "bg-primary text-primary-contrast",
     children: "DT",
   },
 };

src/components/Avatar/AvatarGroup.css

@@ -1,3 +1,3 @@
 .bbn-avatar-group {
-  @apply b-flex -b-space-x-2.5;
+  @apply flex -space-x-2.5;
 }

src/components/Avatar/AvatarGroup.stories.tsx

@@ -14,17 +14,17 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     max: 3,
-    avatarClassName: "b-bg-primary/50 b-text-primary-contrast",
+    avatarClassName: "bg-primary/50 text-primary-contrast",
     variant: "circular",
     children: [
       <Avatar alt="Binance" url="/images/wallets/binance.webp" />,
       <Avatar
-        className="b-border b-border-primary b-bg-primary-contrast"
+        className="border border-primary bg-primary-contrast"
         alt="Keystone"
         url="/images/wallets/keystone.svg"
       />,
-      <Avatar className="b-bg-primary-main b-text-primary-contrast">DT</Avatar>,
-      <Avatar className="b-bg-primary-main b-text-primary-contrast">JK</Avatar>,
+      <Avatar className="bg-primary-main text-primary-contrast">DT</Avatar>,
+      <Avatar className="bg-primary-main text-primary-contrast">JK</Avatar>,
     ],
   },
 };

src/components/Avatar/AvatarGroup.tsx

@@ -1,9 +1,8 @@
 import { type PropsWithChildren, Children, cloneElement, isValidElement } from "react";
-import { twJoin, extendTailwindMerge } from "tailwind-merge";
+import { twJoin, twMerge } from "tailwind-merge";
 import "./AvatarGroup.css";
 
 import { type AvatarProps, Avatar } from "./Avatar";
-const twMerge = extendTailwindMerge({ prefix: "b-" });
 
 export interface AvatarGroupProps extends PropsWithChildren, AvatarProps {
   max?: number;

src/components/Button/Button.css

@@ -1,39 +1,39 @@
 .bbn-btn {
-  @apply b-rounded b-tracking-0.4 b-transition-colors b-duration-200;
+  @apply rounded tracking-0.4 transition-colors duration-200;
 
   &-fluid {
-    @apply b-w-full;
+    @apply w-full;
   }
 
   &-contained {
     &.bbn-btn-primary {
-      @apply b-bg-primary-light b-text-secondary-contrast hover:b-bg-primary-main disabled:b-bg-primary/12;
+      @apply bg-primary-light text-secondary-contrast hover:bg-primary-main disabled:bg-primary/12;
     }
 
     &.bbn-btn-secondary {
-      @apply b-bg-secondary-main b-text-secondary-contrast hover:b-bg-secondary-dark disabled:b-bg-primary/12;
+      @apply bg-secondary-main text-secondary-contrast hover:bg-secondary-dark disabled:bg-primary/12;
     }
   }
 
   &-outlined {
     &.bbn-btn-primary {
-      @apply b-border b-border-primary-light b-text-primary-main hover:b-border-primary hover:b-bg-primary/10;
+      @apply border border-primary-light text-primary-main hover:border-primary hover:bg-primary/10;
     }
 
     &.bbn-btn-secondary {
-      @apply b-border b-border-secondary-main b-text-secondary-main hover:b-border-secondary-light hover:b-bg-secondary-light/10;
+      @apply border border-secondary-main text-secondary-main hover:border-secondary-light hover:bg-secondary-light/10;
     }
   }
 
   &-large {
-    @apply b-h-10 b-px-6 b-text-base b-tracking-0.5;
+    @apply h-10 px-6 text-base tracking-0.5;
   }
 
   &-medium {
-    @apply b-h-9 b-px-4 b-text-sm b-tracking-0.5;
+    @apply h-9 px-4 text-sm tracking-0.5;
   }
 
   &-small {
-    @apply b-h-8 b-px-2.5 b-text-xs b-tracking-0.5;
+    @apply h-8 px-2.5 text-xs tracking-0.5;
   }
 }

src/components/Button/IconButton.css

@@ -1,3 +1,3 @@
 .bbn-btn-icon {
-  @apply b-inline-flex b-size-10 b-items-center b-justify-center b-rounded b-border b-border-current b-text-primary-light;
+  @apply inline-flex size-10 items-center justify-center rounded border border-current text-primary-light;
 }

src/components/Chip/Chip.css

@@ -1,3 +1,3 @@
 .bbn-chip {
-  @apply b-inline-flex b-items-center b-justify-center b-rounded-full b-bg-primary-contrast b-px-2.5 b-py-1 b-text-[0.5rem] b-leading-4 b-tracking-0.4 b-text-primary-light;
+  @apply inline-flex items-center justify-center rounded-full bg-primary-contrast px-2.5 py-1 text-[0.5rem] leading-4 tracking-0.4 text-primary-light;
 }

src/components/Dialog/Dialog.stories.tsx

@@ -42,16 +42,16 @@ export const Default: Story = {
         >
           <DialogHeader
             title="Bitcoin Inscriptions"
-            className="b-text-primary-main"
+            className="text-primary-main"
             onClose={() => {
               setVisibility(false);
             }}
           >
             <Text>Subtitle</Text>
           </DialogHeader>
 
-          <DialogBody className="b-pb-8 b-pt-4 b-text-primary-dark">
-            <Text className="b-mb-6" variant="body1">
+          <DialogBody className="pb-8 pt-4 text-primary-dark">
+            <Text className="mb-6" variant="body1">
               This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions
               (“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin
               with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause
@@ -60,7 +60,7 @@ export const Default: Story = {
 
             <Text variant="body1">Chose one: (you can change this later)</Text>
 
-            <Checkbox checked labelClassName="b-mt-6" label="Don't show again" />
+            <Checkbox checked labelClassName="mt-6" label="Don't show again" />
           </DialogBody>
 
           <DialogFooter>

src/components/Dialog/Dialog.tsx

@@ -1,5 +1,6 @@
 import { type DetailedHTMLProps, type HTMLAttributes } from "react";
 import { twJoin } from "tailwind-merge";
+import "./Dialog.css";
 
 import { Portal } from "@/components/Portal";
 import { useModalManager } from "@/hooks/useModalManager";
@@ -25,7 +26,7 @@ export const Dialog = ({
     <Portal mounted={mounted}>
       <div {...restProps} className="bbn-dialog-wrapper">
         <div
-          className={twJoin("bbn-dialog", open ? "b-animate-modal-in" : "b-animate-modal-out", className)}
+          className={twJoin("bbn-dialog", open ? "animate-modal-in" : "animate-modal-out", className)}
           onAnimationEnd={unmount}
         >
           {children}

src/components/Dialog/MobileDialog.stories.tsx

@@ -41,16 +41,16 @@ export const Default: Story = {
         >
           <DialogHeader
             title="Bitcoin Inscriptions"
-            className="b-text-primary-main"
+            className="text-primary-main"
             onClose={() => {
               setVisibility(false);
             }}
           >
             <Text>Subtitle</Text>
           </DialogHeader>
 
-          <DialogBody className="b-pb-8 b-pt-4 b-text-primary-dark">
-            <Text className="b-mb-6" variant="body1">
+          <DialogBody className="pb-8 pt-4 text-primary-dark">
+            <Text className="mb-6" variant="body1">
               This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions
               (“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin
               with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause
@@ -59,7 +59,7 @@ export const Default: Story = {
 
             <Text variant="body1">Chose one: (you can change this later)</Text>
 
-            <Checkbox checked labelClassName="b-mt-6" label="Don't show again" />
+            <Checkbox checked labelClassName="mt-6" label="Don't show again" />
           </DialogBody>
 
           <DialogFooter>

src/components/Dialog/MobileDialog.tsx

@@ -19,7 +19,7 @@ export const MobileDialog = ({ children, open = false, className, onClose, ...re
         {...restProps}
         className={twJoin(
           "bbn-dialog-mobile",
-          open ? "b-animate-mobile-modal-in" : "b-animate-mobile-modal-out",
+          open ? "animate-mobile-modal-in" : "animate-mobile-modal-out",
           className,
         )}
         onAnimationEnd={unmount}

src/components/Dialog/components/Backdrop.css

@@ -1,3 +1,3 @@
 .bbn-backdrop {
-  @apply b-fixed b-inset-0 b-z-40 b-flex b-items-center b-justify-center b-bg-primary/50 b-transition-opacity b-duration-500;
+  @apply fixed inset-0 z-40 flex items-center justify-center bg-primary/50 transition-opacity duration-500;
 }

src/components/Dialog/components/Backdrop.tsx

@@ -10,8 +10,8 @@ export const Backdrop = ({ open = false, ...props }: BackdropProps) => (
   <div
     {...props}
     className={twJoin(
-      "b-fixed b-inset-0 b-z-40 b-flex b-items-center b-justify-center b-bg-primary/50 b-transition-opacity b-duration-500",
-      open ? "b-animate-backdrop-in" : "b-animate-backdrop-out",
+      "fixed inset-0 z-40 flex items-center justify-center bg-primary/50 transition-opacity duration-500",
+      open ? "animate-backdrop-in" : "animate-backdrop-out",
       props.className,
     )}
   />

src/components/Dialog/index.css

@@ -1,27 +1,27 @@
 .bbn-dialog {
-  @apply b-rounded b-border b-border-primary-light/20 b-bg-[#ffffff] b-p-6;
+  @apply rounded border border-primary-light/20 bg-[#ffffff] p-6;
 
   &-wrapper {
-    @apply b-fixed b-left-1/2 b-top-1/2 b-z-50 b-max-w-full -b-translate-x-1/2 -b-translate-y-1/2;
+    @apply fixed left-1/2 top-1/2 z-50 max-w-full -translate-x-1/2 -translate-y-1/2;
   }
 
   &-body {
-    @apply custom-scrollbar b-min-h-0 b-flex-1 b-overflow-y-auto;
+    @apply custom-scrollbar min-h-0 flex-1 overflow-y-auto;
   }
 
   &-header {
-    @apply b-block;
+    @apply block;
   }
 
   &-title {
-    @apply b-flex b-items-center b-justify-between b-gap-2;
+    @apply flex items-center justify-between gap-2;
   }
 
   &-footer {
-    @apply b-shrink-0;
+    @apply shrink-0;
   }
 
   &-mobile {
-    @apply b-fixed b-inset-x-0 b-bottom-0 b-z-50 b-flex b-flex-col b-rounded-t-3xl b-bg-[#ffffff] b-px-4 b-pb-4 b-pt-6;
+    @apply fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-3xl bg-[#ffffff] px-4 pb-4 pt-6;
   }
-}
+}

src/components/Heading/Heading.css

@@ -1,20 +1,20 @@
 .bbn {
   &-h1 {
-    @apply b-text-8xl b-leading-[7rem];
+    @apply text-8xl leading-[7rem];
   }
   &-h2 {
-    @apply b-text-6xl b-leading-[4.5rem];
+    @apply text-6xl leading-[4.5rem];
   }
   &-h3 {
-    @apply b-text-5xl b-leading-[3.5rem];
+    @apply text-5xl leading-[3.5rem];
   }
   &-h4 {
-    @apply b-text-[2.125rem] b-leading-[2.625rem] b-tracking-0.25;
+    @apply text-[2.125rem] leading-[2.625rem] tracking-0.25;
   }
   &-h5 {
-    @apply b-text-2xl;
+    @apply text-2xl;
   }
   &-h6 {
-    @apply b-text-xl b-leading-8 b-tracking-0.15;
+    @apply text-xl leading-8 tracking-0.15;
   }
 }

src/components/Input/components/Toggle.css

@@ -1,39 +1,39 @@
 .bbn-toggle {
-  @apply b-relative b-inline-block b-transition-colors b-duration-200;
+  @apply relative inline-block transition-colors duration-200;
 
   &:not(&-disabled) {
-    @apply b-text-primary-light hover:b-text-primary-main;
+    @apply text-primary-light hover:text-primary-main;
   }
 
   &-disabled {
-    @apply b-text-primary/12;
+    @apply text-primary/12;
   }
 }
 
 .bbn-toggle-input {
-  @apply b-absolute b-inset-0 b-z-[1] b-opacity-0;
+  @apply absolute inset-0 z-[1] opacity-0;
 
   &:not(:disabled) {
-    @apply b-cursor-pointer;
+    @apply cursor-pointer;
   }
 
   &:disabled {
-    @apply b-cursor-default;
+    @apply cursor-default;
   }
 }
 
 .bbn-toggle-label {
-  @apply b-inline-flex b-h-5 b-items-center b-gap-4;
+  @apply inline-flex h-5 items-center gap-4;
 }
 
 .bbn-toggle-left {
   &.bbn-toggle-label {
-    @apply b-flex-row;
+    @apply flex-row;
   }
 }
 
 .bbn-toggle-right {
   &.bbn-toggle-label {
-    @apply b-flex-row-reverse;
+    @apply flex-row-reverse;
   }
 }

src/components/Text/Text.css

@@ -1,25 +1,25 @@
 .bbn-text {
   &-body1 {
-    @apply b-text-base b-tracking-0.15;
+    @apply text-base tracking-0.15;
   }
 
   &-body2 {
-    @apply b-text-sm b-tracking-0.15;
+    @apply text-sm tracking-0.15;
   }
 
   &-subtitle1 {
-    @apply b-text-base b-leading-7 b-tracking-0.15;
+    @apply text-base leading-7 tracking-0.15;
   }
 
   &-subtitle2 {
-    @apply b-text-sm b-font-bold b-leading-normal b-tracking-0.15;
+    @apply text-sm font-bold leading-normal tracking-0.15;
   }
 
   &-overline {
-    @apply b-text-xs b-uppercase b-leading-8 b-tracking-1;
+    @apply text-xs uppercase leading-8 tracking-1;
   }
 
   &-caption {
-    @apply b-text-xs b-tracking-0.4;
+    @apply text-xs tracking-0.4;
   }
 }