@peerbots/core 0.1.2 → 0.2.0

package/src/ui/TabRadio.stories.tsx

@@ -63,14 +63,14 @@ export const Variations: Story = {
     onChange: () => {},
   },
   render: () => (
-    <div className="flex flex-col gap-12 p-4 min-w-[400px]">
-      <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:min-w-[400px]">
+      <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-6">
-          <div className="space-y-2">
-            <Text variant="small" className="italic">
+        <div className="pb:space-y-6">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:italic">
               Default
             </Text>
             <TabRadioWithState
@@ -80,8 +80,8 @@ export const Variations: Story = {
               onChange={() => {}}
             />
           </div>
-          <div className="space-y-2">
-            <Text variant="small" className="italic">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:italic">
               Primary
             </Text>
             <TabRadioWithState
@@ -91,8 +91,8 @@ export const Variations: Story = {
               onChange={() => {}}
             />
           </div>
-          <div className="space-y-2">
-            <Text variant="small" className="italic">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:italic">
               Danger
             </Text>
             <TabRadioWithState
@@ -105,8 +105,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">
           With Icons
         </Heading>
         <TabRadioWithState
@@ -117,8 +117,8 @@ export const Variations: Story = {
               {
                 value: "Message",
                 label: (
-                  <div className="flex items-center gap-1">
-                    <Icon size="sm" className="w-4 h-4">
+                  <div className="pb:flex pb:items-center pb:gap-1">
+                    <Icon size="sm" className="pb:w-4 pb:h-4">
                       <path
                         strokeLinecap="round"
                         strokeLinejoin="round"
@@ -132,8 +132,8 @@ export const Variations: Story = {
               {
                 value: "Log",
                 label: (
-                  <div className="flex items-center gap-1">
-                    <Icon size="sm" className="w-4 h-4">
+                  <div className="pb:flex pb:items-center pb:gap-1">
+                    <Icon size="sm" className="pb:w-4 pb:h-4">
                       <path
                         strokeLinecap="round"
                         strokeLinejoin="round"

package/src/ui/TabRadio.tsx

@@ -19,11 +19,11 @@ export interface TabRadioProps<T extends string> {
 
 const variantStyles = {
   default:
-    "data-[pressed]:bg-white data-[pressed]:text-gray-900 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-gray-200",
+    "pb:data-[pressed]:bg-white pb:data-[pressed]:text-gray-900 pb:data-[pressed]:shadow-sm pb:data-[pressed]:ring-1 pb:data-[pressed]:ring-gray-200",
   primary:
-    "data-[pressed]:bg-primary/20 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-primary",
+    "pb:data-[pressed]:bg-primary/20 pb:data-[pressed]:shadow-sm pb:data-[pressed]:ring-1 pb:data-[pressed]:ring-primary",
   danger:
-    "data-[pressed]:bg-danger/20 data-[pressed]:shadow-sm data-[pressed]:ring-1 data-[pressed]:ring-danger",
+    "pb:data-[pressed]:bg-danger/20 pb:data-[pressed]:shadow-sm pb:data-[pressed]:ring-1 pb:data-[pressed]:ring-danger",
 };
 
 export function TabRadio<T extends string>({
@@ -42,7 +42,7 @@ export function TabRadio<T extends string>({
       }}
       aria-label={ariaLabel}
       className={cn(
-        "inline-flex p-1 space-x-1 bg-gray-100 rounded-lg border border-gray-200",
+        "pb:inline-flex pb:p-1 pb:space-x-1 pb:bg-gray-100 pb:rounded-lg pb:border pb:border-gray-200",
         className,
       )}
     >
@@ -53,9 +53,9 @@ export function TabRadio<T extends string>({
             value={option.value}
             disabled={option.disabled}
             className={cn(
-              "relative cursor-pointer px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center justify-center outline-none",
-              "text-gray-600 hover:text-gray-900 hover:bg-gray-200",
-              "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-gray-600",
+              "pb:relative pb:cursor-pointer pb:px-3 pb:py-1.5 pb:text-sm pb:font-medium pb:rounded-md pb:transition-all pb:flex pb:items-center pb:justify-center pb:outline-none",
+              "pb:text-gray-600 pb:hover:text-gray-900 pb:hover:bg-gray-200",
+              "pb:disabled:opacity-50 pb:disabled:cursor-not-allowed pb:disabled:hover:bg-transparent pb:disabled:hover:text-gray-600",
               variantStyles[variant],
             )}
           >

package/src/ui/TabSelection.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {
     }));
 
     return (
-      <div className="w-[600px] border p-4 bg-gray-50">
+      <div className="pb:w-[600px] pb:border pb:p-4 pb:bg-gray-50">
         <TabSelection
           tabs={tabsWithActions}
           activeTabId={activeTab}

package/src/ui/TabSelection.tsx

@@ -25,7 +25,7 @@ export function TabSelection({
 }: TabSelectionProps) {
   return (
     <div
-      className={`overflow-x-auto max-h-20 text-sm whitespace-nowrap ${className}`}
+      className={`pb:overflow-x-auto pb:max-h-20 pb:text-sm pb:whitespace-nowrap ${className}`}
     >
       {tabs.map((tab) => {
         const isActive = tab.id === activeTabId;
@@ -33,17 +33,17 @@ export function TabSelection({
           <div
             key={tab.id}
             className={
-              "inline-block align-middle m-1 px-2 py-2 cursor-pointer rounded-sm " +
+              "pb:inline-block pb:align-middle pb:m-1 pb:px-2 pb:py-2 pb:cursor-pointer pb:rounded-sm " +
               (isActive
-                ? "font-bold bg-primary/30"
-                : "font-gray-300 bg-gray-200")
+                ? "pb:font-bold pb:bg-primary/30"
+                : "pb:font-gray-300 pb:bg-gray-200")
             }
             onClick={() => onTabClick(tab.id)}
           >
-            <span className="inline-block align-middle">{tab.label}</span>
+            <span className="pb:inline-block pb:align-middle">{tab.label}</span>
 
             {isActive && (tab.onEdit || tab.onClose) && (
-              <span className="inline-flex items-center ml-2 align-middle">
+              <span className="pb:inline-flex pb:items-center pb:ml-2 pb:align-middle">
                 {tab.onEdit && (
                   <Button
                     variant="ghost"
@@ -57,7 +57,7 @@ export function TabSelection({
                   />
                 )}
                 {tab.onEdit && tab.onClose && (
-                  <span className="opacity-10 align-middle mx-1">{" | "}</span>
+                  <span className="pb:opacity-10 pb:align-middle pb:mx-1">{" | "}</span>
                 )}
                 {tab.onClose && (
                   <Button
@@ -83,7 +83,7 @@ export function TabSelection({
           aria-label="Create New Tab"
           onClick={onAddClick}
           leftIcon={<Icon name="plus" size="sm" />}
-          className="m-1 align-middle inline-flex"
+          className="pb:m-1 pb:align-middle pb:inline-flex"
         />
       )}
     </div>

package/src/ui/TextArea.stories.tsx

@@ -20,20 +20,20 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4 max-w-lg">
-      <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-lg">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Styles & Sizes
         </Heading>
-        <div className="space-y-6">
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+        <div className="pb:space-y-6">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               With Predefined Value
             </Text>
             <TextArea defaultValue="This is some predefined text in the textarea." />
           </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">
               Large (10 rows)
             </Text>
             <TextArea
@@ -44,12 +44,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">
           States
         </Heading>
-        <div className="space-y-1">
-          <Text variant="small" className="font-bold">
+        <div className="pb:space-y-1">
+          <Text variant="small" className="pb:font-bold">
             Disabled
           </Text>
           <TextArea

package/src/ui/TextArea.tsx

@@ -12,7 +12,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         ref={ref as React.Ref<HTMLTextAreaElement>}
         id={id}
         className={cn(
-          "block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 appearance-none",
+          "pb:block pb:w-full pb:rounded-md pb:border-0 pb:px-1.5 pb:py-1.5 pb:text-gray-900 pb:ring-1 pb:ring-inset pb:ring-gray-300 pb:placeholder:text-gray-400 pb:focus:ring-2 pb:focus:ring-inset pb:focus:ring-primary pb:sm:text-sm pb:sm:leading-6 pb:bg-primary/10 pb:appearance-none",
           className,
         )}
         {...(props as ComponentPropsWithoutRef<typeof BaseInput>)}

package/src/ui/Tooltip.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Tooltip> = {
   },
   decorators: [
     (Story) => (
-      <div className="flex h-32 items-center justify-center">
+      <div className="pb:flex pb:h-32 pb:items-center pb:justify-center">
         <Story />
       </div>
     ),
@@ -33,34 +33,34 @@ export const Default: Story = {
 export const Variations: Story = {
   decorators: [
     (Story) => (
-      <div className="p-12">
+      <div className="pb:p-12">
         <Story />
       </div>
     ),
   ],
   render: () => (
-    <div className="flex flex-col gap-16">
-      <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-16">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Placements & Triggers
         </Heading>
-        <div className="flex flex-wrap gap-8 items-center justify-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-8 pb:items-center pb:justify-center">
           <Tooltip content="Tooltip on button">
             <Button>On Button</Button>
           </Tooltip>
           <Tooltip content="Simple span trigger">
-            <span className="cursor-help underline decoration-dotted">
+            <span className="pb:cursor-help pb:underline pb:decoration-dotted">
               On Text
             </span>
           </Tooltip>
         </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">
           Configurations
         </Heading>
-        <div className="flex flex-wrap gap-8 items-center justify-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-8 pb:items-center pb:justify-center">
           <Tooltip content="I appear slowly" delay="slow">
             <Button variant="secondary">Slow Delay (1s)</Button>
           </Tooltip>
@@ -70,11 +70,11 @@ 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">
           Helper Tooltip
         </Heading>
-        <div className="flex flex-wrap gap-8 items-center justify-center">
+        <div className="pb:flex pb:flex-wrap pb:gap-8 pb:items-center pb:justify-center">
           <HelperTooltip content="I'm a helper" />
           <HelperTooltip content="This is a much longer message that is trying to illustrate what happens when we have a long message for the helper tooltip." />
         </div>

package/src/ui/Tooltip.tsx

@@ -28,12 +28,12 @@ export function Tooltip({
           <BaseTooltip.Positioner sideOffset={8}>
             <BaseTooltip.Popup
               className={cn(
-                "z-50 rounded shadow-lg bg-white p-2 text-xs text-center whitespace-normal max-w-xs text-gray-900 border border-gray-200",
+                "pb:z-50 pb:rounded pb:shadow-lg pb:bg-white pb:p-2 pb:text-xs pb:text-center pb:whitespace-normal pb:max-w-xs pb:text-gray-900 pb:border pb:border-gray-200",
                 className,
               )}
             >
               {content}
-              <BaseTooltip.Arrow className="fill-white stroke-gray-200" />
+              <BaseTooltip.Arrow className="pb:fill-white pb:stroke-gray-200" />
             </BaseTooltip.Popup>
           </BaseTooltip.Positioner>
         </BaseTooltip.Portal>
@@ -49,7 +49,7 @@ export interface HelperTooltipProps {
 export function HelperTooltip({ content, className }: HelperTooltipProps) {
   return (
     <Tooltip content={content} className={className}>
-      <Icon size="md" className="text-gray-500 hover:text-gray-700 cursor-help">
+      <Icon size="md" className="pb:text-gray-500 pb:hover:text-gray-700 pb:cursor-help">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"

package/src/ui/Typography.stories.tsx

@@ -10,7 +10,7 @@ export default meta;
 
 export const Default: StoryObj = {
   render: () => (
-    <div className="space-y-4 max-w-lg">
+    <div className="pb:space-y-4 pb:max-w-lg">
       <Heading level={2}>Core Typography</Heading>
       <Text>
         The quick brown fox jumps over the lazy dog. This is our standard body
@@ -22,15 +22,15 @@ export const Default: StoryObj = {
 
 export const Variations: StoryObj = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4">
-      <div className="space-y-4">
+    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1"
         >
           Headings
         </Heading>
-        <div className="space-y-4">
+        <div className="pb:space-y-4">
           <Heading level={1}>Heading 1</Heading>
           <Heading level={2}>Heading 2</Heading>
           <Heading level={3}>Heading 3</Heading>
@@ -40,40 +40,40 @@ export const Variations: StoryObj = {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1"
         >
           Text Variants
         </Heading>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <Text variant="small" className="italic font-bold">
+        <div className="pb:space-y-4">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:italic pb:font-bold">
               Default
             </Text>
             <Text variant="default">
               The quick brown fox jumps over the lazy dog.
             </Text>
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="italic font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:italic pb:font-bold">
               Small
             </Text>
             <Text variant="small">
               The quick brown fox jumps over the lazy dog.
             </Text>
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="italic font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:italic pb:font-bold">
               Muted
             </Text>
             <Text variant="muted">
               The quick brown fox jumps over the lazy dog.
             </Text>
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="italic font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:italic pb:font-bold">
               Error
             </Text>
             <Text variant="error">

package/src/ui/Typography.tsx

@@ -7,19 +7,19 @@ function cn(...inputs: ClassValue[]) {
 }
 
 const headingSizes = {
-  1: "text-4xl font-bold",
-  2: "text-3xl font-bold",
-  3: "text-2xl font-bold",
-  4: "text-xl font-bold",
-  5: "text-lg font-bold",
-  6: "text-base font-bold",
+  1: "pb:text-4xl pb:font-bold",
+  2: "pb:text-3xl pb:font-bold",
+  3: "pb:text-2xl pb:font-bold",
+  4: "pb:text-xl pb:font-bold",
+  5: "pb:text-lg pb:font-bold",
+  6: "pb:text-base pb:font-bold",
 };
 
 const textVariants = {
-  default: "text-base text-slate-950",
-  muted: "text-sm text-slate-600",
-  error: "text-sm text-red-600 font-medium",
-  small: "text-xs text-slate-600",
+  default: "pb:text-base pb:text-slate-950",
+  muted: "pb:text-sm pb:text-slate-600",
+  error: "pb:text-sm pb:text-red-600 pb:font-medium",
+  small: "pb:text-xs pb:text-slate-600",
 };
 
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -63,7 +63,7 @@ export const Text = ({
 export const TypographyList = ({ args }: { args: Record<string, unknown> }) => {
   return (
     <div
-      className="space-y-4"
+      className="pb:space-y-4"
       {...(args as React.HTMLAttributes<HTMLDivElement>)}
     >
       <Heading level={1}>Heading 1</Heading>

package/.changeset/big-loops-drum.md

@@ -1,5 +0,0 @@
----
-"@peerbots/core": patch
----
-
-Add access to iconpaths

package/.changeset/deep-brooms-taste.md

@@ -1,5 +0,0 @@
----
-"@peerbots/core": patch
----
-
-Fix iconpaths export