@peerbots/core 0.1.2 → 0.2.0

package/src/ui/AuthFormUI.tsx

@@ -44,28 +44,28 @@ export function AuthFormUI({
         : "Reset Password";
 
   return (
-    <div className="text-left overflow-hidden">
-      <Heading level={2} className="text-center mb-2">
+    <div className="pb:text-left pb:overflow-hidden">
+      <Heading level={2} className="pb:text-center pb:mb-2">
         {title || defaultTitle}
       </Heading>
 
-      <form className="md:m-10 sm:m-4 space-y-4" action={formAction}>
+      <form className="pb:md:m-10 pb:sm:m-4 pb:space-y-4" action={formAction}>
         {description && (
-          <Text className="text-center mb-6" variant="muted">
+          <Text className="pb:text-center pb:mb-6" variant="muted">
             {description}
           </Text>
         )}
 
         {mode === "resetting password" && (
-          <Text className="text-center font-bold text-dark-primary">
+          <Text className="pb:text-center pb:font-bold pb:text-dark-primary">
             {actionState.message}
           </Text>
         )}
-        <Text className="text-center" variant="error">
+        <Text className="pb:text-center" variant="error">
           {actionState.error}
         </Text>
 
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <Field
             id="email"
             label="Email"
@@ -105,14 +105,14 @@ export function AuthFormUI({
           )}
         </div>
 
-        <div className="text-center mt-6 space-y-4">
+        <div className="pb:text-center pb:mt-6 pb:space-y-4">
           {mode === "signing up" && <SubmitButton label="Sign Up" />}
           {mode === "signing in" && <SubmitButton label="Sign In" />}
           {mode === "resetting password" && (
             <SubmitButton label="Reset Password" />
           )}
 
-          <div className="text-center text-sm text-gray-500">
+          <div className="pb:text-center pb:text-sm pb:text-gray-500">
             {mode === "signing up" && (
               <Text>
                 Already have an account?{" "}
@@ -120,31 +120,31 @@ export function AuthFormUI({
                   variant="ghost"
                   size="sm"
                   onClick={() => onModeChange("signing in")}
-                  className="underline p-0 h-auto hover:bg-transparent"
+                  className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                 >
                   Sign in
                 </Button>
               </Text>
             )}
             {mode === "signing in" && (
-              <div className="flex flex-col gap-2">
+              <div className="pb:flex pb:flex-col pb:gap-2">
                 <Text>
                   Forgot your password?{" "}
                   <Button
                     variant="ghost"
                     size="sm"
                     onClick={() => onModeChange("resetting password")}
-                    className="underline p-0 h-auto hover:bg-transparent"
+                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Reset password.
                   </Button>
                 </Text>
-                <div className="relative">
-                  <div className="absolute inset-0 flex items-center">
-                    <div className="w-full border-t border-gray-300"></div>
+                <div className="pb:relative">
+                  <div className="pb:absolute pb:inset-0 pb:flex pb:items-center">
+                    <div className="pb:w-full pb:border-t pb:border-gray-300"></div>
                   </div>
-                  <div className="relative flex justify-center text-sm">
-                    <span className="px-2 bg-white text-gray-500">or</span>
+                  <div className="pb:relative pb:flex pb:justify-center pb:text-sm">
+                    <span className="pb:px-2 pb:bg-white pb:text-gray-500">or</span>
                   </div>
                 </div>
                 <Text>
@@ -153,7 +153,7 @@ export function AuthFormUI({
                     variant="ghost"
                     size="sm"
                     onClick={() => onModeChange("signing up")}
-                    className="underline p-0 h-auto hover:bg-transparent"
+                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign up
                   </Button>
@@ -161,24 +161,24 @@ export function AuthFormUI({
               </div>
             )}
             {mode === "resetting password" && (
-              <div className="flex flex-col gap-2">
+              <div className="pb:flex pb:flex-col pb:gap-2">
                 <Text>
                   Don&apos;t have an account?{" "}
                   <Button
                     variant="ghost"
                     size="sm"
                     onClick={() => onModeChange("signing up")}
-                    className="underline p-0 h-auto hover:bg-transparent"
+                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign up
                   </Button>
                 </Text>
-                <div className="relative">
-                  <div className="absolute inset-0 flex items-center">
-                    <div className="w-full border-t border-gray-300"></div>
+                <div className="pb:relative">
+                  <div className="pb:absolute pb:inset-0 pb:flex pb:items-center">
+                    <div className="pb:w-full pb:border-t pb:border-gray-300"></div>
                   </div>
-                  <div className="relative flex justify-center text-sm">
-                    <span className="px-2 bg-white text-gray-500">or</span>
+                  <div className="pb:relative pb:flex pb:justify-center pb:text-sm">
+                    <span className="pb:px-2 pb:bg-white pb:text-gray-500">or</span>
                   </div>
                 </div>
                 <Text>
@@ -187,7 +187,7 @@ export function AuthFormUI({
                     variant="ghost"
                     size="sm"
                     onClick={() => onModeChange("signing in")}
-                    className="underline p-0 h-auto hover:bg-transparent"
+                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign In
                   </Button>
@@ -198,12 +198,12 @@ export function AuthFormUI({
         </div>
 
         {mode !== "resetting password" && onGoogleSignIn && (
-          <div className="text-center mt-4">
+          <div className="pb:text-center pb:mt-4">
             <Button
               variant="secondary"
               onClick={onGoogleSignIn}
               type="button"
-              className="w-full flex items-center justify-center gap-2"
+              className="pb:w-full pb:flex pb:items-center pb:justify-center pb:gap-2"
             >
               <Icon name="google" stroke="none" />
               {mode === "signing up" && <span>Sign up with Google</span>}

package/src/ui/BasePanel.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="w-[450px] border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden p-4">
+      <div className="pb:w-[450px] pb:border pb:border-gray-200 pb:rounded-lg pb:shadow-sm pb:bg-white pb:overflow-hidden pb:p-4">
         <Story />
       </div>
     ),
@@ -27,7 +27,7 @@ export const Default: Story = {
     children: (
       <UIText
         variant="small"
-        className="p-4 bg-gray-50 rounded-md border border-gray-100 text-black text-center"
+        className="pb:p-4 pb:bg-gray-50 pb:rounded-md pb:border pb:border-gray-100 pb:text-black pb:text-center"
       >
         Panel content goes here.
       </UIText>

package/src/ui/BasePanel.tsx

@@ -30,21 +30,21 @@ export function BasePanel({
   };
 
   return (
-    <div className={`space-y-1 p-1 ${className}`}>
+    <div className={`pb:space-y-1 pb:p-1 ${className}`}>
       <div
-        className={`flex items-center justify-between px-1 mb-1 border-b border-solid border-gray-400 pb-1 ${headerClassName}`}
+        className={`pb:flex pb:items-center pb:justify-between pb:px-1 pb:mb-1 pb:border pb:border-solid pb:border-gray-400 pb:pb-1 ${headerClassName}`}
       >
-        <Heading level={headingLevel} className="text-lg">
+        <Heading level={headingLevel} className="pb:text-lg">
           {title}
         </Heading>
         <Button
           variant="ghost"
           size="sm"
           onClick={handleClose}
-          className="p-1 rounded hover:bg-gray-100 h-auto"
+          className="pb:p-1 pb:rounded pb:hover:bg-gray-100 pb:h-auto"
           aria-label={`Close ${title} Panel`}
         >
-          <Icon size="md" className="h-5 w-5">
+          <Icon size="md" className="pb:h-5 pb:w-5">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"

package/src/ui/Button.stories.tsx

@@ -37,12 +37,12 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-8">
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black italic">
+    <div className="pb:flex pb:flex-col pb:gap-8">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
           Variants
         </Heading>
-        <div className="flex flex-wrap gap-4 items-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
           <Button variant="primary">Primary</Button>
           <Button variant="secondary">Secondary</Button>
           <Button variant="danger">Danger</Button>
@@ -51,32 +51,32 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black italic">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
           Sizes
         </Heading>
-        <div className="flex flex-wrap gap-4 items-end">
+        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-end">
           <Button size="sm">Small</Button>
           <Button size="md">Medium</Button>
           <Button size="lg">Large</Button>
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black italic">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
           States
         </Heading>
-        <div className="flex flex-wrap gap-4 items-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
           <Button isLoading>Loading</Button>
           <Button disabled>Disabled</Button>
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black italic">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
           With Icons
         </Heading>
-        <div className="flex flex-wrap gap-4 items-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
           <Button leftIcon={<Icon name="cloudArrowUp" />}>Upload</Button>
           <Button variant="secondary" rightIcon={<Icon name="chevronRight" />}>
             Next
@@ -84,11 +84,11 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black italic">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
           Icon Only
         </Heading>
-        <div className="flex flex-wrap gap-4 items-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
           <Button size="sm">
             <Icon name="plus" />
           </Button>

package/src/ui/Button.tsx

@@ -36,21 +36,21 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const variants = {
       primary:
-        "bg-primary hover:bg-dark-primary text-gray-900 shadow-sm border border-transparent font-bold disabled:bg-gray-400 disabled:hover:bg-gray-300",
+        "pb:bg-primary pb:hover:bg-dark-primary pb:text-gray-900 pb:shadow-sm pb:border pb:border-transparent pb:font-bold pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
       secondary:
-        "bg-gray-100 hover:bg-gray-200 text-gray-800 border-gray-200 border font-normal disabled:bg-gray-400 disabled:hover:bg-gray-300",
+        "pb:bg-gray-100 pb:hover:bg-gray-200 pb:text-gray-800 pb:border pb:border-gray-200 pb:border pb:font-normal pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
       danger:
-        "bg-danger hover:opacity-80 text-gray-900 shadow-sm border border-transparent font-bold disabled:bg-gray-400 disabled:hover:bg-gray-300",
+        "pb:bg-danger pb:hover:opacity-80 pb:text-gray-900 pb:shadow-sm pb:border pb:border-transparent pb:font-bold pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
       ghost:
-        "bg-transparent hover:bg-gray-100 text-gray-700 hover:text-gray-900 font-medium",
+        "pb:bg-transparent pb:hover:bg-gray-100 pb:text-gray-700 pb:hover:text-gray-900 pb:font-medium",
       "ghostly-danger":
-        "bg-transparent hover:bg-danger/10 text-red-700 border border-red-700 font-medium disabled:border-gray-400 disabled:text-gray-400",
+        "pb:bg-transparent pb:hover:bg-danger/10 pb:text-red-700 pb:border pb:border-red-700 pb:font-medium pb:disabled:border-gray-400 pb:disabled:text-gray-400",
     };
 
     const sizes = {
-      sm: isActuallyIconOnly ? "p-1 text-xs" : "px-2 py-1 text-xs",
-      md: isActuallyIconOnly ? "p-2 text-sm" : "px-4 py-2 text-sm",
-      lg: isActuallyIconOnly ? "p-3 text-base" : "px-6 py-3 text-base",
+      sm: isActuallyIconOnly ? "pb:p-1 pb:text-xs" : "pb:px-2 pb:py-1 pb:text-xs",
+      md: isActuallyIconOnly ? "pb:p-2 pb:text-sm" : "pb:px-4 pb:py-2 pb:text-sm",
+      lg: isActuallyIconOnly ? "pb:p-3 pb:text-base" : "pb:px-6 pb:py-3 pb:text-base",
     };
 
     return (
@@ -59,7 +59,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         render={render}
         nativeButton={nativeButton}
         className={cn(
-          "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed cursor-pointer",
+          "pb:inline-flex pb:items-center pb:justify-center pb:rounded-md pb:transition-colors pb:focus:outline-none pb:focus:ring-2 pb:focus:ring-primary pb:focus:ring-offset-2 pb:disabled:cursor-not-allowed pb:cursor-pointer",
           variants[variant],
           sizes[size],
           className,
@@ -70,15 +70,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading && (
           <svg
             className={cn(
-              "animate-spin h-4 w-4",
-              !isActuallyIconOnly && "mr-2 -ml-1",
+              "pb:animate-spin pb:h-4 pb:w-4",
+              !isActuallyIconOnly && "pb:mr-2 pb:-ml-1",
             )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
           >
             <circle
-              className="opacity-25"
+              className="pb:opacity-25"
               cx="12"
               cy="12"
               r="10"
@@ -86,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               strokeWidth="4"
             ></circle>
             <path
-              className="opacity-75"
+              className="pb:opacity-75"
               fill="currentColor"
               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             ></path>
@@ -95,8 +95,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {!isLoading && leftIcon && (
           <span
             className={cn(
-              "inline-flex items-center justify-center",
-              !isActuallyIconOnly && "mr-2 -ml-1",
+              "pb:inline-flex pb:items-center pb:justify-center",
+              !isActuallyIconOnly && "pb:mr-2 pb:-ml-1",
             )}
           >
             {leftIcon}
@@ -106,8 +106,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {!isLoading && rightIcon && (
           <span
             className={cn(
-              "inline-flex items-center justify-center",
-              !isActuallyIconOnly && "ml-2 -mr-1",
+              "pb:inline-flex pb:items-center pb:justify-center",
+              !isActuallyIconOnly && "pb:ml-2 pb:-mr-1",
             )}
           >
             {rightIcon}

package/src/ui/Checkbox.stories.tsx

@@ -17,7 +17,7 @@ const StatefulCheckbox = (
 ) => {
   const [checked, setChecked] = React.useState(props.checked || false);
   return (
-    <div className="flex items-center space-x-2">
+    <div className="pb:flex pb:items-center pb:space-x-2">
       <Checkbox
         {...props}
         id="terms"
@@ -26,7 +26,7 @@ const StatefulCheckbox = (
       />
       <label
         htmlFor="terms"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        className="pb:text-sm pb:font-medium pb:leading-none peer-disabled:pb:cursor-not-allowed peer-disabled:pb:opacity-70"
       >
         {props.label || "Accept terms and conditions"}
       </label>
@@ -40,12 +40,12 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-8 p-4">
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           States
         </Heading>
-        <div className="flex flex-col gap-4">
+        <div className="pb:flex pb:flex-col pb:gap-4">
           <StatefulCheckbox label="Default Unchecked" />
           <StatefulCheckbox label="Default Checked" checked={true} />
           <StatefulCheckbox label="Disabled Unchecked" disabled={true} />

package/src/ui/Checkbox.tsx

@@ -21,15 +21,15 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           }
         }}
         className={cn(
-          "flex h-5 w-5 shrink-0 items-center justify-center rounded border border-gray-300 bg-white shadow-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          "hover:border-primary hover:bg-primary/5",
-          "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-white",
+          "pb:flex pb:h-5 pb:w-5 pb:shrink-0 pb:items-center pb:justify-center pb:rounded pb:border pb:border-gray-300 pb:bg-white pb:shadow-sm pb:transition-all pb:focus-visible:outline-none pb:focus-visible:ring-2 pb:focus-visible:ring-primary pb:focus-visible:ring-offset-2 pb:disabled:cursor-not-allowed pb:disabled:opacity-50",
+          "pb:hover:border-primary pb:hover:bg-primary/5",
+          "pb:data-[state=checked]:bg-primary pb:data-[state=checked]:border-primary pb:data-[state=checked]:text-white",
           className,
         )}
         {...(props as ComponentPropsWithoutRef<typeof BaseCheckbox.Root>)}
       >
         <BaseCheckbox.Indicator>
-          <Icon size="sm" strokeWidth={3} className="text-dark-primary">
+          <Icon size="sm" strokeWidth={3} className="pb:text-dark-primary">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"

package/src/ui/Collapsible.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = {
   args: {
     title: "Click to expand",
     children: (
-      <div className="p-4 bg-gray-50 rounded-md">
+      <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
         This is the collapsible content. It can contain any elements.
       </div>
     ),
@@ -25,64 +25,64 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-8 p-4">
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           States & Styling
         </Heading>
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <Collapsible title="Initially Open" defaultOpen={true}>
-            <div className="p-4 bg-gray-50 rounded-md">
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
               This content is visible by default.
             </div>
           </Collapsible>
           <Collapsible
-            title={<span className="font-bold text-primary">Styled Title</span>}
-            className="border border-gray-200 rounded-lg overflow-hidden"
+            title={<span className="pb:font-bold pb:text-primary">Styled Title</span>}
+            className="pb:border pb:border-gray-200 pb:rounded-lg pb:overflow-hidden"
           >
-            <div className="p-4">Custom styled wrapper and title.</div>
+            <div className="pb:p-4">Custom styled wrapper and title.</div>
           </Collapsible>
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Variants
         </Heading>
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <Collapsible title="Secondary (Default)" variant="secondary">
-            <div className="p-4 bg-gray-50 rounded-md">
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
               Secondary variant content.
             </div>
           </Collapsible>
           <Collapsible title="Ghost" variant="ghost">
-            <div className="p-4 bg-gray-50 rounded-md">
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
               Ghost variant content.
             </div>
           </Collapsible>
           <Collapsible title="Primary" variant="primary">
-            <div className="p-4 bg-gray-50 rounded-md">
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
               Primary variant content.
             </div>
           </Collapsible>
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Sizes
         </Heading>
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <Collapsible title="Small" size="sm">
-            <div className="p-4 bg-gray-50 rounded-md">Small size content.</div>
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">Small size content.</div>
           </Collapsible>
           <Collapsible title="Medium (Default)" size="md">
-            <div className="p-4 bg-gray-50 rounded-md">
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
               Medium size content.
             </div>
           </Collapsible>
           <Collapsible title="Large" size="lg">
-            <div className="p-4 bg-gray-50 rounded-md">Large size content.</div>
+            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">Large size content.</div>
           </Collapsible>
         </div>
       </div>

package/src/ui/Collapsible.tsx

@@ -29,11 +29,11 @@ export function Collapsible({
       <Button
         variant={variant}
         size={size}
-        className="w-full justify-between font-medium"
+        className="pb:w-full pb:justify-between pb:font-medium"
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
         rightIcon={
-          <Icon className="h-5 w-5 text-gray-600" strokeWidth="2.5">
+          <Icon className="pb:h-5 pb:w-5 pb:text-gray-600" strokeWidth="2.5">
             {isOpen ? (
               <path d="M4.5 15.75l7.5-7.5 7.5 7.5" />
             ) : (
@@ -45,7 +45,7 @@ export function Collapsible({
         <span>{title}</span>
       </Button>
       {isOpen && (
-        <div className="px-4 pt-4 pb-2 text-sm text-gray-500">{children}</div>
+        <div className="pb:px-4 pb:pt-4 pb:pb-2 pb:text-sm pb:text-gray-500">{children}</div>
       )}
     </div>
   );

package/src/ui/Colors.stories.tsx

@@ -9,42 +9,42 @@ export default meta;
 
 export const Variations: StoryObj = {
   render: () => (
-    <div className="flex flex-col gap-8 p-4 bg-white">
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4 pb:bg-white">
       <div>
-        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
           Theme Colors
         </h3>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-          <ColorItem name="Primary" variable="var(--color-primary)" />
-          <ColorItem name="Secondary" variable="var(--color-secondary)" />
-          <ColorItem name="Accent" variable="var(--color-accent)" />
-          <ColorItem name="Danger" variable="var(--color-danger)" />
-          <ColorItem name="Light BG" variable="var(--color-light-bg)" />
+        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-5 pb:gap-4">
+          <ColorItem name="Primary" variable="var(--pb-color-primary)" />
+          <ColorItem name="Secondary" variable="var(--pb-color-secondary)" />
+          <ColorItem name="Accent" variable="var(--pb-color-accent)" />
+          <ColorItem name="Danger" variable="var(--pb-color-danger)" />
+          <ColorItem name="Light BG" variable="var(--pb-color-light-bg)" />
         </div>
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
           Extended Accent Colors
         </h3>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          <ColorItem name="Accent HC" variable="var(--color-accent-hc)" />
-          <ColorItem name="Accent Two" variable="var(--color-accent-two)" />
+        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-4 pb:gap-4">
+          <ColorItem name="Accent HC" variable="var(--pb-color-accent-hc)" />
+          <ColorItem name="Accent Two" variable="var(--pb-color-accent-two)" />
           <ColorItem
             name="Accent Two HC"
-            variable="var(--color-accent-two-hc)"
+            variable="var(--pb-color-accent-two-hc)"
           />
-          <ColorItem name="Accent Three" variable="var(--color-accent-three)" />
+          <ColorItem name="Accent Three" variable="var(--pb-color-accent-three)" />
         </div>
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
           UI Elements
         </h3>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          <ColorItem name="Sidebar BG" variable="var(--sidebar-bg)" />
-          <ColorItem name="Dark Primary" variable="var(--color-dark-primary)" />
+        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-4 pb:gap-4">
+          <ColorItem name="Sidebar BG" variable="var(--pb-sidebar-bg)" />
+          <ColorItem name="Dark Primary" variable="var(--pb-color-dark-primary)" />
         </div>
       </div>
     </div>
@@ -53,14 +53,14 @@ export const Variations: StoryObj = {
 
 function ColorItem({ name, variable }: { name: string; variable: string }) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="pb:flex pb:flex-col pb:gap-2">
       <div
-        className="h-20 w-full rounded-md shadow-inner border border-gray-100"
+        className="pb:h-20 pb:w-full pb:rounded-md pb:shadow-inner pb:border pb:border-gray-100"
         style={{ backgroundColor: variable }}
       />
-      <div className="flex flex-col">
-        <span className="text-sm font-bold text-gray-900">{name}</span>
-        <code className="text-xs text-gray-500">{variable}</code>
+      <div className="pb:flex pb:flex-col">
+        <span className="pb:text-sm pb:font-bold pb:text-gray-900">{name}</span>
+        <code className="pb:text-xs pb:text-gray-500">{variable}</code>
       </div>
     </div>
   );