@botpress/webchat 0.5.0 → 1.0.0

package/src/themes/eggplant.ts

@@ -0,0 +1,353 @@
+import { Theme } from '../schemas'
+
+import { clsx } from 'clsx'
+
+export const eggplantTheme: Theme = {
+  container: {
+    className:
+      'w-full h-full border  border-gray-200 rounded-lg flex flex-col @container relative overflow-hidden font-plex',
+  },
+  modal: {
+    container: {
+      className: 'absolute inset-0 z-30 flex p-2 pointer-events-none',
+    },
+    overlay: {
+      className: 'absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]',
+    },
+    dialog: {
+      container: {
+        className:
+          'mx-auto mt-auto rounded-md bg-white p-6 text-gray-900 shadow w-full @md:w-auto @md:mb-auto pointer-events-auto',
+      },
+      title: {
+        container: {
+          className: 'flex items-center justify-between mb-2',
+        },
+        text: {
+          className: 'text-base text-gray-900',
+        },
+        closeIcon: {
+          className: ' h-5 cursor-pointer text-gray-500 hover:text-gray-700',
+        },
+      },
+      content: {
+        className: 'text-sm text-gray-600 flex flex-col',
+      },
+    },
+  },
+  notification: {
+    container: {
+      className:
+        'group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-gray-200 bg-white p-4 shadow-md',
+    },
+    title: {
+      className: 'col-start-2 text-sm font-medium text-gray-900',
+    },
+    description: {
+      className: 'col-start-2 mt-1 text-sm text-gray-500',
+    },
+    icon: {
+      className:
+        'aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500',
+    },
+    closeIcon: {
+      className: 'col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer',
+    },
+  },
+  header: {
+    container: {
+      className: 'rounded-t-md p-1 mb-auto group/header flex flex-col shadow bg-gray-50',
+    },
+    content: {
+      container: {
+        className: clsx(
+          'grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 px-3 text-left transition-colors hover:bg-gray-200 ',
+          'group-data-[state=open]/header:grid-cols-1',
+          'group-data-[state=open]/header:justify-items-center'
+        ),
+      },
+      title: { className: 'text-base text-gray-700 py-0.5 font-medium' },
+      description: {
+        className: clsx(
+          'text-sm text-gray-500 py-0.5',
+          'group-data-[state=closed]/header:truncate',
+          'group-data-[state=closed]/header:col-start-2',
+          'group-data-[state=open]/header:text-center'
+        ),
+      },
+      avatar: {
+        container: {
+          className: clsx(
+            'mr-2 p-px rounded-full overflow-hidden',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:mt-6',
+            'group-data-[state=open]/header:mb-2'
+          ),
+        },
+        image: {
+          className: 'aspect-square h-8 rounded-full group-data-[state=open]/header:h-16',
+        },
+        fallback: {
+          className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
+        },
+      },
+      actions: {
+        container: {
+          className: clsx(
+            'flex',
+            'group-data-[state=closed]/header:col-start-3',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:hidden',
+            'group-data-[state=closed]/header:!row-start-1'
+          ),
+        },
+        icons: {
+          className: 'h-9 w-9 cursor-pointer rounded-md p-2 text-gray-400  transition-colors hover:bg-gray-200 ',
+        },
+      },
+    },
+    expandedContent: {
+      container: {
+        className:
+          'grid grid-cols-[auto_auto] gap-y-2 text-sm items-center group-data-[state=open]/header:py-2 mx-auto ',
+      },
+      descriptionItems: {
+        container: {
+          className: clsx(
+            'flex items-center gap-2 group/description-item peer text-sm text-indigo-900 col-span-2 hover:cursor-pointer relative',
+            'data-[terms]:col-span-1',
+            'data-[terms]:justify-self-end',
+            'data-[terms]:pr-2',
+            'data-[terms]:mt-4',
+            'data-[terms]:text-xs',
+            'data-[terms]:text-indigo-800',
+            'data-[terms]:last-of-type:col-span-full',
+            'data-[terms]:last-of-type:justify-self-center',
+            'data-[privacy]:justify-self-center',
+            'data-[privacy]:col-span-full',
+            'data-[privacy]:mt-4',
+            'data-[privacy]:text-xs',
+            'data-[privacy]:text-indigo-800',
+            'data-[privacy]:peer-data-[terms]:justify-self-start',
+            'data-[privacy]:peer-data-[terms]:col-span-1',
+            'data-[privacy]:peer-data-[terms]:pl-2',
+            'data-[privacy]:peer-data-[terms]:before:absolute',
+            'data-[privacy]:peer-data-[terms]:before:w-px',
+            'data-[privacy]:peer-data-[terms]:before:h-2/3',
+            'data-[privacy]:peer-data-[terms]:before:bg-gray-300',
+            'data-[privacy]:peer-data-[terms]:before:left-0',
+            'data-[privacy]:peer-data-[terms]:before:bg-indigo-800',
+            'data-[privacy]:peer-data-[terms]:before:inset-auto'
+          ),
+        },
+        icon: {
+          className: clsx(
+            'h-5 text-indigo-700 rounded-full',
+            'group-data-[terms]/description-item:hidden',
+            'group-data-[privacy]/description-item:hidden'
+          ),
+        },
+        text: {
+          className: clsx(
+            'truncate pt-1',
+            'group-data-[terms]/description-item:pt-0',
+            'group-data-[privacy]/description-item:pt-0'
+          ),
+        },
+        link: {
+          className: clsx(
+            'truncate group-hover/description-item:underline pt-1',
+            'group-data-[terms]/description-item:pt-0',
+            'group-data-[privacy]/description-item:pt-0'
+          ),
+        },
+      },
+    },
+    newConversationIcon: {
+      className:
+        'h-9 w-9 text-zinc-500 p-2 cursor-pointer ml-auto hover:text-zinc-700 transition-colors row-span-2 row-start-1 col-start-6',
+    },
+  },
+  composer: {
+    container: {
+      className:
+        'group/composer-container shadow border bg-gray-50 m-2 text-gray-800 rounded transition-colors flex gap-2 items-center focus-within:border-zinc-300',
+    },
+    input: {
+      className:
+        'flex-grow outline-none bg-inherit px-2 m-3 rounded-md placeholder-gray-400 text-sm resize-none h-[1.5em]',
+    },
+    button: {
+      container: {
+        className: clsx(
+          'relative transition-colors bg-indigo-600 flex items-center justify-center px-2 py-1 rounded text-sm font-medium text-white m-2',
+          'hover:bg-indigo-700 hover:cursor-pointer',
+          'group-data-[disabled=true]/composer-container:hidden',
+          "after:content-['Send']",
+          'disabled:hidden '
+        ),
+      },
+      icon: {
+        className: 'hidden',
+      },
+    },
+  },
+  messageList: {
+    className: 'flex flex-col gap-2 p-2 overflow-y-auto overflow-x-hidden scroll-smooth ',
+  },
+  message: {
+    container: {
+      className: clsx(
+        'flex group gap-2 text-sm text-gray-700',
+        'data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden'
+      ),
+    },
+    avatar: {
+      container: {
+        className: 'relative h-7 w-7 shrink-0 overflow-hidden rounded-full hidden group-data-[direction=incoming]:flex',
+      },
+      image: {
+        className: 'aspect-square h-full w-full',
+      },
+      fallback: {
+        className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
+      },
+    },
+    blocks: {
+      text: {
+        text: {
+          className: '',
+        },
+        heading1: {
+          className: 'text-xl font-medium text-gray-900 group-data-[direction=outgoing]:text-blue-800',
+        },
+        heading2: {
+          className: 'text-lg text-gray-900 group-data-[direction=outgoing]:text-blue-800',
+        },
+        heading3: {
+          className: 'text-base',
+        },
+        unorderedList: {
+          className: 'list-disc list-inside marker:text-gray-500 group-data-[direction=outgoing]:marker:text-blue-800',
+        },
+        orderedList: {
+          className:
+            'list-decimal list-inside marker:text-gray-600 group-data-[direction=outgoing]:marker:text-blue-800',
+        },
+      },
+      button: {
+        className: clsx(
+          'bg-indigo-600 hover:bg-indigo-700 rounded-md p-1 text-sm font-medium px-2 text-white',
+          'data-[activated]:border-indigo-700',
+          'data-[activated]:text-indigo-700',
+          'data-[activated]:bg-gray-100',
+          'data-[activated]:font-normal',
+          'data-[activated]:border',
+          'data-[group-activated]:text-gray-500',
+          'data-[group-activated]:bg-gray-100',
+          'data-[group-activated]:font-normal'
+        ),
+      },
+      image: {
+        image: {
+          className: clsx(
+            'border border-gray-200 rounded-2xl object-cover w-[95%]',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56',
+            'data-[loaded=false]:hidden'
+          ),
+        },
+        placeholder: {
+          className: clsx(
+            'border border-gray-200 rounded-2xl bg-red-300 animate-pulse',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56'
+          ),
+        },
+      },
+      video: {
+        className: 'border border-gray-200 rounded-2xl',
+      },
+      location: {
+        container: {
+          className: 'flex gap-2 group items-center p-1 bg-gray-100 py-2 px-4 rounded',
+        },
+        title: {
+          className: 'text-indigo-900 group-hover:underline mt-1',
+        },
+        icon: {
+          className: 'h-5 w-5 text-indigo-600',
+        },
+      },
+      row: {
+        className: clsx(
+          'flex gap-2 flex-wrap',
+          'data-[horizontal=center]:justify-center',
+          'data-[horizontal=right]:justify-end',
+          'data-[horizontal=stretch]:justify-between',
+          'data-[vertical=center]:items-center',
+          'data-[vertical=bottom]:items-end'
+        ),
+      },
+      column: {
+        className: clsx(
+          'flex flex-col gap-2 w-fit group/container',
+          'data-[horizontal=center]:items-center',
+          'data-[horizontal=right]:items-end',
+          'data-[vertical=center]:justify-center',
+          'data-[vertical=bottom]:justify-end',
+          'data-[vertical=stretch]:justify-between'
+        ),
+      },
+      bubble: {
+        className: clsx(
+          'rounded p-2 px-4 max-w-[85%]',
+          'group-data-[direction=outgoing]:bg-indigo-100',
+          'group-data-[direction=outgoing]:text-indigo-800',
+          'group-data-[direction=outgoing]:rounded-br-md',
+          'group-data-[direction=incoming]:rounded-bl-md',
+          'group-data-[direction=incoming]:bg-gray-100',
+          'group-data-[direction=incoming]:border-gray-200',
+          'group-data-[direction=incoming]:text-gray-800'
+        ),
+      },
+      carousel: {
+        container: {
+          className: 'group relative overflow-hidden',
+        },
+        slidesContainer: {
+          className:
+            'grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]',
+        },
+        backButton: {
+          className: clsx(
+            'absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-gray-100 data-[disabled]:hidden'
+          ),
+        },
+        nextButton: {
+          className: clsx(
+            'absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-gray-100 data-[disabled]:hidden'
+          ),
+        },
+      },
+    },
+  },
+  loadingIndicator: {
+    container: {
+      className: clsx(
+        'flex items-end gap-1.5 border border-gray-200 bg-gray-100 rounded p-2',
+        'before:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600)',
+        'after:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.2s])'
+      ),
+    },
+    loader: {
+      className: clsx('animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.1s]'),
+    },
+  },
+}

package/src/themes/galaxy.ts

@@ -0,0 +1,323 @@
+import { Theme } from '../schemas'
+import { clsx } from 'clsx'
+export const galaxyTheme: Theme = {
+  container: {
+    className:
+      'w-full h-full border bg-neutral-800 border-neutral-700 rounded-lg flex flex-col @container relative overflow-hidden font-rubik [color-scheme:dark]',
+  },
+  modal: {
+    container: {
+      className: 'absolute inset-0 z-30 flex p-2 pointer-events-none',
+    },
+    overlay: {
+      className: 'absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]',
+    },
+    dialog: {
+      container: {
+        className:
+          'mx-auto mt-auto rounded-md bg-white p-6 text-neutral-900 shadow w-full @md:w-auto @md:mb-auto pointer-events-auto',
+      },
+      title: {
+        container: {
+          className: 'flex items-center justify-between mb-2',
+        },
+        text: {
+          className: 'text-base text-neutral-900',
+        },
+        closeIcon: {
+          className: ' h-5 cursor-pointer text-neutral-500 hover:text-neutral-700',
+        },
+      },
+      content: {
+        className: 'text-sm text-neutral-600 flex flex-col',
+      },
+    },
+  },
+  notification: {
+    container: {
+      className:
+        'group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-neutral-200 bg-white p-4 shadow-md',
+    },
+    title: {
+      className: 'col-start-2 text-sm font-medium text-neutral-900',
+    },
+    description: {
+      className: 'col-start-2 mt-1 text-sm text-neutral-500',
+    },
+    icon: {
+      className:
+        'aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500',
+    },
+    closeIcon: {
+      className: 'col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer',
+    },
+  },
+  header: {
+    container: {
+      className: 'rounded-t-md p-1 mb-auto group/header flex flex-col shadow',
+    },
+    content: {
+      container: {
+        className: clsx(
+          'grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 px-3 text-left transition-colors hover:bg-neutral-700 ',
+          'group-data-[state=open]/header:(grid-cols-1 justify-items-center)'
+        ),
+      },
+      title: { className: 'text-base text-neutral-100 py-0.5 font-medium' },
+      description: {
+        className: clsx(
+          'text-sm text-neutral-300 py-0.5',
+          'group-data-[state=closed]/header:(truncate col-start-2)',
+          'group-data-[state=open]/header:text-center'
+        ),
+      },
+      avatar: {
+        container: {
+          className: clsx(
+            'mr-2 p-px rounded-full overflow-hidden',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:(mt-6 mb-2)'
+          ),
+        },
+        image: {
+          className: 'aspect-square h-8 rounded-full group-data-[state=open]/header:h-16',
+        },
+        fallback: {
+          className: 'bg-neutral-600 flex h-full w-full items-center justify-center rounded-full',
+        },
+      },
+      actions: {
+        container: {
+          className: clsx(
+            'flex',
+            'group-data-[state=closed]/header:col-start-3',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:hidden',
+            'group-data-[state=closed]/header:!row-start-1'
+          ),
+        },
+        icons: {
+          className: 'h-9 w-9 cursor-pointer rounded-md p-2 text-neutral-300 transition-colors hover:bg-neutral-600 ',
+        },
+      },
+    },
+    expandedContent: {
+      container: {
+        className:
+          'grid grid-cols-[auto_auto_auto_auto_auto_auto] justify-items-center text-sm items-center gap-4 gap-y-6 px-2 group-data-[state=open]/header:py-2 mx-auto',
+      },
+      descriptionItems: {
+        container: {
+          className: clsx(
+            'flex items-center gap-1 group/description-item text-xs text-neutral-300 col-span-2 hover:cursor-pointer',
+            'data-[terms]:col-span-3',
+            'data-[privacy]:col-span-3'
+          ),
+        },
+        icon: {
+          className: clsx(
+            'h-12 p-3 text-white rounded-full',
+            'group-data-[phone]/description-item:bg-green-300/80',
+            'group-data-[email]/description-item:bg-red-300/80',
+            'group-data-[website]/description-item:bg-blue-300/80',
+            'group-data-[phone]/description-item:text-green-900',
+            'group-data-[email]/description-item:text-red-900',
+            'group-data-[website]/description-item:text-blue-900',
+            'group-data-[terms]/description-item:h-5',
+            'group-data-[terms]/description-item:text-neutral-300',
+            'group-data-[terms]/description-item:p-0',
+            'group-data-[privacy]/description-item:h-5',
+            'group-data-[privacy]/description-item:p-0',
+            'group-data-[privacy]/description-item:text-neutral-300'
+          ),
+        },
+        text: {
+          className: clsx(
+            'truncate pt-1',
+            'group-data-[email]/description-item:hidden',
+            'group-data-[phone]/description-item:hidden',
+            'group-data-[website]/description-item:hidden'
+          ),
+        },
+        link: {
+          className: clsx(
+            'truncate group-hover/description-item:underline pt-1',
+            'group-data-[email]/description-item:hidden',
+            'group-data-[phone]/description-item:hidden',
+            'group-data-[website]/description-item:hidden'
+          ),
+        },
+      },
+    },
+    newConversationIcon: {
+      className:
+        'h-9 w-9 text-zinc-500 p-2 cursor-pointer ml-auto hover:text-zinc-700 transition-colors row-span-2 row-start-1 col-start-6',
+    },
+  },
+  composer: {
+    container: {
+      className:
+        'group/composer-container data-[disabled=true]:bg-neutral-800 shadow border border-transparent bg-neutral-900 m-2 rounded-full transition-colors flex gap-2 items-center focus-within:border-neutral-700',
+    },
+    input: {
+      className:
+        'flex-grow outline-none bg-inherit px-2 m-3 rounded-md placeholder-neutral-400 text-neutral-50 text-sm resize-none h-[1.5em]',
+    },
+    button: {
+      container: {
+        className:
+          'group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-blue-300 hover:text-blue-200 disabled:hidden flex items-center justify-center',
+      },
+      icon: {
+        className: 'h-full w-full',
+      },
+    },
+  },
+  messageList: {
+    className: 'flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth',
+  },
+  message: {
+    container: {
+      className: clsx(
+        'flex group gap-2 text-sm text-neutral-100',
+        'data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden'
+      ),
+    },
+    avatar: {
+      container: {
+        className:
+          'relative h-7 w-7 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex',
+      },
+      image: {
+        className: 'aspect-square h-full w-full',
+      },
+      fallback: {
+        className: 'bg-neutral-600 flex h-full w-full items-center justify-center rounded-full',
+      },
+    },
+    blocks: {
+      text: {
+        heading1: {
+          className: 'text-xl font-medium text-neutral-50 group-data-[direction=outgoing]:text-blue-100',
+        },
+        heading2: {
+          className: 'text-lg text-neutral-50 group-data-[direction=outgoing]:text-blue-100',
+        },
+        heading3: {
+          className: 'text-base',
+        },
+        unorderedList: {
+          className:
+            'list-disc list-inside marker:text-neutral-100 group-data-[direction=outgoing]:marker:text-blue-100',
+        },
+        orderedList: {
+          className:
+            'list-decimal list-inside marker:text-neutral-200 group-data-[direction=outgoing]:marker:text-blue-100',
+        },
+      },
+      button: {
+        className:
+          'bg-blue-500 rounded-md p-2 text-sm px-3 text-white  data-[activated]:hidden data-[group-activated]:hidden',
+      },
+      image: {
+        image: {
+          className: clsx(
+            'rounded-2xl object-cover w-[95%]',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56',
+            'data-[loaded=false]:hidden'
+          ),
+        },
+        placeholder: {
+          className: clsx(
+            'border border-neutral-200 rounded-2xl bg-red-300 animate-pulse',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56'
+          ),
+        },
+      },
+      video: {
+        className: 'rounded-2xl',
+      },
+      location: {
+        container: {
+          className: 'flex gap-2 group items-center p-1 bg-neutral-700 py-2 px-4 rounded-3xl',
+        },
+        title: {
+          className: 'group-hover:underline mt-1',
+        },
+        icon: {
+          className: 'h-5 w-5 text-red-300 ',
+        },
+      },
+      row: {
+        className: clsx(
+          'flex gap-2 flex-wrap',
+          'data-[horizontal=center]:justify-center',
+          'data-[horizontal=right]:justify-end',
+          'data-[horizontal=stretch]:justify-between',
+          'data-[vertical=center]:items-center',
+          'data-[vertical=bottom]:items-end'
+        ),
+      },
+      column: {
+        className: clsx(
+          'flex flex-col gap-2 w-fit group/container',
+          'data-[horizontal=center]:items-center',
+          'data-[horizontal=right]:items-end',
+          'data-[vertical=center]:justify-center',
+          'data-[vertical=bottom]:justify-end',
+          'data-[vertical=stretch]:justify-between'
+        ),
+      },
+      bubble: {
+        className: clsx(
+          'rounded-3xl p-2 px-4 max-w-[85%]',
+          'group-data-[direction=outgoing]:bg-blue-800',
+          'group-data-[direction=outgoing]:text-blue-100',
+          'group-data-[direction=outgoing]:rounded-br-md',
+          'group-data-[direction=incoming]:rounded-bl-md',
+          'group-data-[direction=incoming]:bg-neutral-700',
+          'group-data-[direction=incoming]:text-neutral-100'
+        ),
+      },
+      carousel: {
+        container: {
+          className: 'group relative overflow-hidden',
+        },
+        slidesContainer: {
+          className:
+            'grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]',
+        },
+        backButton: {
+          className: clsx(
+            'absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-neutral-700 bg-opacity-20 p-0.5 text-neutral-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-neutral-100 data-[disabled]:hidden'
+          ),
+        },
+        nextButton: {
+          className: clsx(
+            'absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-neutral-700 bg-opacity-20 p-0.5 text-neutral-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-neutral-100 data-[disabled]:hidden'
+          ),
+        },
+      },
+    },
+  },
+  loadingIndicator: {
+    container: {
+      className: clsx(
+        'flex items-end gap-1.5 bg-neutral-700 rounded-lg p-2',
+        'before:(animate-jump h-1.5 w-1.5 rounded-full bg-neutral-400)',
+        'after:(animate-jump h-1.5 w-1.5 rounded-full bg-neutral-400 [animation-delay:0.2s])'
+      ),
+    },
+    loader: {
+      className: clsx('animate-jump h-1.5 w-1.5 rounded-full bg-neutral-400 [animation-delay:0.1s]'),
+    },
+  },
+}

package/src/themes/index.ts

@@ -0,0 +1,6 @@
+export * from './dawn'
+export * from './midnight'
+export * from './duskTheme'
+export * from './eggplant'
+export * from './galaxy'
+export * from './prism'