@peerbots/core 0.1.2 → 0.2.0

package/src/ui/Select.stories.tsx

@@ -31,20 +31,20 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-8 p-4 max-w-sm">
-      <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 pb:max-w-sm">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Option Types
         </Heading>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+        <div className="pb:space-y-4">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               String Options
             </Text>
             <Select options={simpleOptions} />
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               Object Options (Label/Value)
             </Text>
             <Select options={objectOptions} defaultValue="apple" />
@@ -52,13 +52,13 @@ export const Variations: Story = {
         </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">
           States
         </Heading>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+        <div className="pb:space-y-4">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               Disabled
             </Text>
             <Select

package/src/ui/Select.tsx

@@ -40,7 +40,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
     const selectId = propsId || generatedId;
 
     return (
-      <div className="w-full">
+      <div className="pb:w-full">
         <BaseSelect.Root
           value={value === undefined ? null : String(value)}
           defaultValue={
@@ -62,8 +62,8 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
             ref={ref}
             id={selectId}
             className={cn(
-              "flex w-full items-center justify-between rounded-md border-0 py-1.5 pl-3 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 min-h-[36px]",
-              disabled && "opacity-50 cursor-not-allowed",
+              "pb:flex pb:w-full pb:items-center pb:justify-between pb:rounded-md pb:border-0 pb:py-1.5 pb:pl-3 pb:pr-3 pb:text-gray-900 pb:ring-1 pb:ring-inset pb:ring-gray-300 pb:focus:ring-2 pb:focus:ring-primary pb:sm:text-sm pb:sm:leading-6 pb:bg-primary/10 pb:min-h-[36px]",
+              disabled && "pb:opacity-50 pb:cursor-not-allowed",
               className,
             )}
             onFocus={onFocus}
@@ -83,9 +83,9 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
           <BaseSelect.Portal>
             <BaseSelect.Positioner
               sideOffset={4}
-              className="z-50 w-[var(--anchor-width)]"
+              className="pb:z-50 pb:w-[var(--anchor-width)]"
             >
-              <BaseSelect.Popup className="max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              <BaseSelect.Popup className="pb:max-h-60 pb:overflow-auto pb:rounded-md pb:bg-white pb:py-1 pb:text-base pb:shadow-lg pb:ring-1 pb:ring-black pb:ring-opacity-5 focus:pb:outline-none pb:sm:text-sm">
                 {options.map((option, index) => {
                   const label =
                     typeof option === "object" ? option.label : option;
@@ -95,10 +95,10 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
                     <BaseSelect.Item
                       key={`${value}-${index}`}
                       value={value}
-                      className="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-gray-100 data-[highlighted]:bg-gray-100 data-[selected]:font-semibold"
+                      className="pb:relative pb:cursor-default pb:select-none pb:py-2 pb:pl-3 pb:pr-9 pb:text-gray-900 pb:hover:bg-gray-100 data-[highlighted]:pb:bg-gray-100 data-[selected]:pb:font-semibold"
                     >
                       <BaseSelect.ItemText>{label}</BaseSelect.ItemText>
-                      <BaseSelect.ItemIndicator className="absolute inset-y-0 right-0 flex items-center pr-4 text-primary">
+                      <BaseSelect.ItemIndicator className="pb:absolute pb:inset-y-0 pb:right-0 pb:flex pb:items-center pb:pr-4 pb:text-primary">
                         <Icon size="sm">
                           <path
                             strokeLinecap="round"

package/src/ui/Separator.stories.tsx

@@ -22,9 +22,9 @@ export const Default: Story = {
     orientation: "horizontal",
   },
   render: (args) => (
-    <div className="w-64">
+    <div className="pb:w-64">
       <Text>Above the separator</Text>
-      <Separator {...args} className="my-4" />
+      <Separator {...args} className="pb:my-4" />
       <Text>Below the separator</Text>
     </div>
   ),
@@ -32,23 +32,23 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 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-12 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Horizontal (Default)
         </Heading>
-        <div className="w-64">
+        <div className="pb:w-64">
           <Text variant="small">Item A</Text>
-          <Separator className="my-2" />
+          <Separator className="pb:my-2" />
           <Text variant="small">Item B</Text>
         </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">
           Vertical
         </Heading>
-        <div className="flex h-8 items-center gap-4 text-sm">
+        <div className="pb:flex pb:h-8 pb:items-center pb:gap-4 pb:text-sm">
           <Text variant="small">Option 1</Text>
           <Separator orientation="vertical" />
           <Text variant="small">Option 2</Text>

package/src/ui/Separator.tsx

@@ -17,8 +17,8 @@ export const Separator = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "shrink-0 bg-gray-200",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      "pb:shrink-0 pb:bg-gray-200",
+      orientation === "horizontal" ? "pb:h-[1px] pb:w-full" : "pb:h-full pb:w-[1px]",
       className,
     )}
     {...props}

package/src/ui/SettingsPanel.stories.tsx

@@ -19,9 +19,9 @@ export const Default: Story = {
   args: {
     title: "Account Settings",
     children: (
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Text>This is the content of the settings panel.</Text>
-        <div className="flex gap-2">
+        <div className="pb:flex pb:gap-2">
           <Button variant="primary">Save Changes</Button>
           <Button variant="secondary">Cancel</Button>
         </div>
@@ -32,17 +32,17 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4 max-w-2xl bg-gray-50">
-      <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-12 pb:p-4 pb:max-w-2xl pb:bg-gray-50">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Default
         </Heading>
         <SettingsPanel title="Notification Settings">
-          <div className="space-y-4">
+          <div className="pb:space-y-4">
             <Text>Manage how you receive notifications.</Text>
-            <div className="flex items-center gap-2 p-2 rounded bg-white">
+            <div className="pb:flex pb:items-center pb:gap-2 pb:p-2 pb:rounded pb:bg-white">
               <Checkbox id="email-notif" />
-              <Label htmlFor="email-notif" className="text-sm">
+              <Label htmlFor="email-notif" className="pb:text-sm">
                 Email Notifications
               </Label>
             </div>
@@ -50,22 +50,22 @@ export const Variations: Story = {
         </SettingsPanel>
       </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">
           No Title
         </Heading>
         <SettingsPanel>
-          <Text className="italic">
+          <Text className="pb:italic">
             Panel without a title rendered as a simple container.
           </Text>
         </SettingsPanel>
       </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">
           Collapsible States
         </Heading>
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <SettingsPanel title="Collapsible (Default Open)" collapsible={true}>
             <Text>This panel can be toggled and starts open.</Text>
           </SettingsPanel>

package/src/ui/SettingsPanel.tsx

@@ -34,13 +34,13 @@ export function SettingsPanel({
   headingLevel = 3,
 }: SettingsPanelProps) {
   const content = (
-    <div className={cn("flex flex-col", contentClassName)}>{children}</div>
+    <div className={cn("pb:flex pb:flex-col", contentClassName)}>{children}</div>
   );
 
   return (
     <div
       className={cn(
-        "m-2 p-4 bg-white shadow-xl rounded-lg flex flex-1 flex-col",
+        "pb:m-2 pb:p-4 pb:bg-white pb:shadow-xl pb:rounded-lg pb:flex pb:flex-1 pb:flex-col",
         className,
       )}
     >
@@ -48,7 +48,7 @@ export function SettingsPanel({
         <Collapsible
           title={
             typeof title === "string" ? (
-              <Heading level={headingLevel} className="text-gray-600">
+              <Heading level={headingLevel} className="pb:text-gray-600">
                 {title}
               </Heading>
             ) : (
@@ -63,9 +63,9 @@ export function SettingsPanel({
       ) : (
         <>
           {title && (
-            <div className="flex items-center justify-between mb-2 empty:hidden">
+            <div className="pb:flex pb:items-center pb:justify-between pb:mb-2 empty:hidden">
               {typeof title === "string" ? (
-                <Heading level={headingLevel} className="text-gray-600">
+                <Heading level={headingLevel} className="pb:text-gray-600">
                   {title}
                 </Heading>
               ) : (

package/src/ui/Skeleton.stories.tsx

@@ -21,21 +21,21 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col space-y-3">
+    <div className="pb:flex pb:flex-col pb:space-y-3">
       {/* Circle Skeleton */}
-      <Skeleton className="h-12 w-12 rounded-full" />
+      <Skeleton className="pb:h-12 pb:w-12 pb:rounded-full" />
 
       {/* Rectangular Skeletons */}
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
+      <div className="pb:space-y-2">
+        <Skeleton className="pb:h-4 pb:w-[250px]" />
+        <Skeleton className="pb:h-4 pb:w-[200px]" />
       </div>
 
-      <div className="flex items-center space-x-4 mt-6">
-        <Skeleton className="h-12 w-12 rounded-full" />
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-[250px]" />
-          <Skeleton className="h-4 w-[200px]" />
+      <div className="pb:flex pb:items-center pb:space-x-4 pb:mt-6">
+        <Skeleton className="pb:h-12 pb:w-12 pb:rounded-full" />
+        <div className="pb:space-y-2">
+          <Skeleton className="pb:h-4 pb:w-[250px]" />
+          <Skeleton className="pb:h-4 pb:w-[200px]" />
         </div>
       </div>
     </div>

package/src/ui/Skeleton.tsx

@@ -8,7 +8,7 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
 export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-gray-200/50", className)}
+      className={cn("pb:animate-pulse pb:rounded-md pb:bg-gray-200/50", className)}
       {...props}
     />
   );

package/src/ui/Slider.stories.tsx

@@ -21,8 +21,8 @@ const InteractiveSlider = (props: React.ComponentProps<typeof Slider>) => {
   );
 
   return (
-    <div className="space-y-2">
-      <div className="w-80">
+    <div className="pb:space-y-2">
+      <div className="pb:w-80">
         <Slider
           {...props}
           value={value}
@@ -33,7 +33,7 @@ const InteractiveSlider = (props: React.ComponentProps<typeof Slider>) => {
           }}
         />
       </div>
-      <Text variant="small" className="text-slate-500">
+      <Text variant="small" className="pb:text-slate-500">
         Value: {value}
       </Text>
     </div>
@@ -50,7 +50,7 @@ const RangeChangeableSlider = ({
   const [val, setVal] = useState(50);
 
   return (
-    <div className="space-y-4 border p-4 rounded-lg bg-white shadow-sm">
+    <div className="pb:space-y-4 pb:border pb:p-4 pb:rounded-lg pb:bg-white pb:shadow-sm">
       <Slider
         {...args}
         min={min}
@@ -58,11 +58,11 @@ const RangeChangeableSlider = ({
         value={val}
         onChange={(v: number | number[]) => setVal(Array.isArray(v) ? v[0] : v)}
       />
-      <div className="flex space-x-4">
-        <div className="flex flex-col gap-1">
+      <div className="pb:flex pb:space-x-4">
+        <div className="pb:flex pb:flex-col pb:gap-1">
           <Text
             variant="small"
-            className="uppercase text-slate-400 font-bold text-[10px]"
+            className="pb:uppercase pb:text-slate-400 pb:font-bold pb:text-[10px]"
           >
             Min
           </Text>
@@ -70,13 +70,13 @@ const RangeChangeableSlider = ({
             type="number"
             value={min}
             onChange={(e) => setMin(Number(e.target.value))}
-            className="w-20"
+            className="pb:w-20"
           />
         </div>
-        <div className="flex flex-col gap-1">
+        <div className="pb:flex pb:flex-col pb:gap-1">
           <Text
             variant="small"
-            className="uppercase text-slate-400 font-bold text-[10px]"
+            className="pb:uppercase pb:text-slate-400 pb:font-bold pb:text-[10px]"
           >
             Max
           </Text>
@@ -84,11 +84,11 @@ const RangeChangeableSlider = ({
             type="number"
             value={max}
             onChange={(e) => setMax(Number(e.target.value))}
-            className="w-20"
+            className="pb:w-20"
           />
         </div>
-        <div className="flex flex-col justify-end">
-          <Text variant="small" className="text-slate-600 font-medium">
+        <div className="pb:flex pb:flex-col pb:justify-end">
+          <Text variant="small" className="pb:text-slate-600 pb:font-medium">
             Current: {val}
           </Text>
         </div>
@@ -108,20 +108,20 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 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-12 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Width Responsiveness
         </Heading>
-        <div className="space-y-6">
-          <div className="space-y-1">
-            <Text variant="small" className="italic text-black">
+        <div className="pb:space-y-6">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:italic pb:text-black">
               Full Width (Container Default)
             </Text>
             <Slider defaultValue={30} />
           </div>
-          <div className="space-y-1 w-40">
-            <Text variant="small" className="italic text-black">
+          <div className="pb:space-y-1 pb:w-40">
+            <Text variant="small" className="pb:italic pb:text-black">
               Narrow (w-40)
             </Text>
             <Slider defaultValue={70} />
@@ -129,8 +129,8 @@ export const Variations: Story = {
         </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">
           Dynamic Range Test
         </Heading>
         <RangeChangeableSlider args={{}} />

package/src/ui/Slider.tsx

@@ -39,10 +39,10 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     };
 
     return (
-      <div className={cn("w-full flex items-center gap-4", className)}>
-        {icon && <div className="text-gray-500 shrink-0">{icon}</div>}
+      <div className={cn("pb:w-full pb:flex pb:items-center pb:gap-4", className)}>
+        {icon && <div className="pb:text-gray-500 pb:shrink-0">{icon}</div>}
 
-        <div className="flex-grow flex items-center h-8 min-w-[120px]">
+        <div className="pb:flex-grow pb:flex pb:items-center pb:h-8 pb:min-w-[120px]">
           <BaseSlider.Root
             ref={ref}
             min={min}
@@ -72,16 +72,16 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
               handleChange(val as number | number[], event);
             }}
             className={cn(
-              "relative flex items-center w-full h-full group touch-none select-none",
-              disabled && "opacity-50 cursor-not-allowed",
+              "pb:relative pb:flex pb:items-center pb:w-full pb:h-full pb:group pb:touch-none pb:select-none",
+              disabled && "pb:opacity-50 pb:cursor-not-allowed",
               className,
             )}
           >
-            <BaseSlider.Control className="flex items-center w-full h-full relative cursor-pointer">
-              <BaseSlider.Track className="relative bg-gray-200 rounded-full w-full h-1.5 overflow-hidden transition-colors group-hover:bg-gray-300">
-                <BaseSlider.Indicator className="absolute bg-primary rounded-full h-full" />
+            <BaseSlider.Control className="pb:flex pb:items-center pb:w-full pb:h-full pb:relative pb:cursor-pointer">
+              <BaseSlider.Track className="pb:relative pb:bg-gray-200 pb:rounded-full pb:w-full pb:h-1.5 pb:overflow-hidden pb:transition-colors group-pb:hover:bg-gray-300">
+                <BaseSlider.Indicator className="pb:absolute pb:bg-primary pb:rounded-full pb:h-full" />
               </BaseSlider.Track>
-              <BaseSlider.Thumb className="z-10 block w-4.5 h-4.5 bg-white shadow-md rounded-full border-2 border-primary focus:outline-none focus:ring-4 focus:ring-primary/20 cursor-grab active:cursor-grabbing hover:scale-110 active:scale-95 transition-transform" />
+              <BaseSlider.Thumb className="pb:z-10 pb:block pb:w-4.5 pb:h-4.5 pb:bg-white pb:shadow-md pb:rounded-full pb:border-2 pb:border-primary focus:pb:outline-none focus:pb:ring-4 focus:pb:ring-primary/20 pb:cursor-grab active:pb:cursor-grabbing pb:hover:scale-110 active:pb:scale-95 pb:transition-transform" />
             </BaseSlider.Control>
           </BaseSlider.Root>
         </div>

package/src/ui/SliderWithNumberField.stories.tsx

@@ -41,7 +41,7 @@ export const Default: Story = {
     defaultValue: 50,
   },
   render: (args) => (
-    <div className="w-80 p-4">
+    <div className="pb:w-80 pb:p-4">
       <InteractiveSliderWithNumberField
         {...(args as React.ComponentProps<typeof SliderWithNumberField>)}
       />
@@ -51,28 +51,28 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 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-12 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Responsive Layouts
         </Heading>
-        <div className="space-y-8 max-w-lg">
-          <div className="space-y-2">
-            <Text variant="small" className="font-bold underline">
+        <div className="pb:space-y-8 pb:max-w-lg">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:font-bold pb:underline">
               Flexible (Full width of container)
             </Text>
             <InteractiveSliderWithNumberField defaultValue={50} />
           </div>
 
-          <div className="space-y-2 w-64 border-l border-r border-dotted px-2 bg-gray-50 py-4">
-            <Text variant="small" className="font-bold underline">
+          <div className="pb:space-y-2 pb:w-64 pb:border-l pb:border-r pb:border-dotted pb:px-2 pb:bg-gray-50 pb:py-4">
+            <Text variant="small" className="pb:font-bold pb:underline">
               Narrow Container (w-64)
             </Text>
             <InteractiveSliderWithNumberField defaultValue={50} />
           </div>
 
-          <div className="space-y-2 w-48 border-l border-r border-dotted px-2 bg-gray-50 py-4">
-            <Text variant="small" className="font-bold underline">
+          <div className="pb:space-y-2 pb:w-48 pb:border-l pb:border-r pb:border-dotted pb:px-2 pb:bg-gray-50 pb:py-4">
+            <Text variant="small" className="pb:font-bold pb:underline">
               Very Narrow (w-48) - Wraps
             </Text>
             <InteractiveSliderWithNumberField defaultValue={50} />
@@ -80,12 +80,12 @@ export const Variations: Story = {
         </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">
           Configuration
         </Heading>
-        <div className="space-y-4 max-w-sm">
-          <div className="space-y-1">
+        <div className="pb:space-y-4 pb:max-w-sm">
+          <div className="pb:space-y-1">
             <Text variant="small">Custom Step (0.5)</Text>
             <InteractiveSliderWithNumberField
               step={0.5}

package/src/ui/SliderWithNumberField.tsx

@@ -45,12 +45,12 @@ export const SliderWithNumberField = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex flex-row items-center gap-4 w-full min-w-0 sm:flex-nowrap flex-wrap",
+          "pb:flex pb:flex-row pb:items-center pb:gap-4 pb:w-full pb:min-w-0 pb:sm:flex-nowrap pb:flex-wrap",
           className,
         )}
         {...props}
       >
-        <div className="flex-grow min-w-[120px]">
+        <div className="pb:flex-grow pb:min-w-[120px]">
           <Slider
             min={min}
             max={max}
@@ -59,10 +59,10 @@ export const SliderWithNumberField = React.forwardRef<
             defaultValue={defaultValue}
             disabled={disabled}
             onChange={handleChange}
-            className="w-full"
+            className="pb:w-full"
           />
         </div>
-        <div className={cn(inputWidth, "shrink-0")}>
+        <div className={cn(inputWidth, "pb:shrink-0")}>
           <NumberField
             value={value}
             defaultValue={defaultValue}

package/src/ui/Switch.stories.tsx

@@ -26,7 +26,7 @@ export const Default: Story = {
 const InteractiveSwitch = () => {
   const [checked, setChecked] = useState(false);
   return (
-    <div className="flex flex-col gap-2">
+    <div className="pb:flex pb:flex-col pb:gap-2">
       <Switch
         checked={checked}
         onChange={(val) => setChecked(val)}
@@ -41,25 +41,25 @@ const InteractiveSwitch = () => {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 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-12 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="flex items-center gap-2">
+        <div className="pb:flex pb:flex-col pb:gap-4">
+          <div className="pb:flex pb:items-center pb:gap-2">
             <Switch defaultChecked={false} aria-label="Unchecked switch" />
             <Text variant="small">Unchecked</Text>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="pb:flex pb:items-center pb:gap-2">
             <Switch defaultChecked={true} aria-label="Checked switch" />
             <Text variant="small">Checked</Text>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="pb:flex pb:items-center pb:gap-2">
             <Switch disabled aria-label="Disabled switch" />
             <Text variant="small">Disabled Unchecked</Text>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="pb:flex pb:items-center pb:gap-2">
             <Switch
               disabled
               defaultChecked={true}
@@ -70,8 +70,8 @@ export const Variations: Story = {
         </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">
           Interactive
         </Heading>
         <InteractiveSwitch />

package/src/ui/Switch.tsx

@@ -28,7 +28,7 @@ export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     const autoId = React.useId();
     const id = externalId ?? autoId;
     return (
-      <div className={cn("flex items-center gap-2", className)}>
+      <div className={cn("pb:flex pb:items-center pb:gap-2", className)}>
         <BaseSwitch.Root
           ref={ref}
           id={id}
@@ -39,16 +39,16 @@ export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
           }}
           disabled={disabled}
           className={cn(
-            "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-            "data-[checked]:bg-primary data-[unchecked]:bg-gray-200",
-            disabled && "opacity-50 cursor-not-allowed",
+            "pb:relative pb:inline-flex pb:h-6 pb:w-11 pb:flex-shrink-0 pb:cursor-pointer pb:rounded-full pb:border-2 pb:border-transparent pb:transition-colors pb:duration-200 pb:ease-in-out pb:focus:outline-none pb:focus:ring-2 pb:focus:ring-primary pb:focus:ring-offset-2",
+            "pb:data-[checked]:bg-primary pb:data-[unchecked]:bg-gray-200",
+            disabled && "pb:opacity-50 pb:cursor-not-allowed",
           )}
           {...props}
         >
           <BaseSwitch.Thumb
             className={cn(
-              "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-              "data-[checked]:translate-x-5 data-[unchecked]:translate-x-0",
+              "pb:pointer-events-none pb:inline-block pb:h-5 pb:w-5 pb:transform pb:rounded-full pb:bg-white pb:shadow pb:ring-0 pb:transition pb:duration-200 pb:ease-in-out",
+              "pb:data-[checked]:translate-x-5 pb:data-[unchecked]:translate-x-0",
             )}
           />
         </BaseSwitch.Root>