@soubiran/ui 0.9.2 → 0.10.0

package/dist/resolver.mjs

@@ -1,14 +1,15 @@
 //#region src/resolver.ts
 const components = [
+	"Comments",
+	"Feedback",
+	"LoginCallback",
 	"Page",
+	"PageTitle",
+	"PageHeader",
 	"Header",
 	"Socials",
 	"Sponsors",
-	"Feedback",
 	"Container",
-	"PageTitle",
-	"PageHeader",
-	"FeedbackCard",
 	"ViewersCounter",
 	"TableOfContents"
 ];
@@ -17,8 +18,8 @@ function resolver_default() {
 		type: "component",
 		resolve: (name) => {
 			if (components.includes(name)) return {
-				name: "default",
-				from: `@soubiran/ui/components/${name}.vue`
+				name,
+				from: "@soubiran/ui"
 			};
 		}
 	};

package/dist/style.css

@@ -1,146 +1,11 @@
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .4s ease-out;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  html:not(.no-sliding) .slide-enter, html:not(.no-sliding) .slide-enter-content > * {
-    --enter-step: 60ms;
-    --enter-initial: 0s;
-    animation: 1s both slide-enter;
-    animation-delay: calc(var(--enter-stage) * var(--enter-step));
-  }
-
-  .slide-enter-content > :first-child {
-    --enter-stage: 1 !important;
-  }
-
-  .slide-enter-content > :nth-child(2) {
-    --enter-stage: 2 !important;
-  }
-
-  .slide-enter-content > :nth-child(3) {
-    --enter-stage: 3 !important;
-  }
-
-  .slide-enter-content > :nth-child(4) {
-    --enter-stage: 4 !important;
-  }
-
-  .slide-enter-content > :nth-child(5) {
-    --enter-stage: 5 !important;
-  }
-
-  .slide-enter-content > :nth-child(6) {
-    --enter-stage: 6 !important;
-  }
-
-  .slide-enter-content > :nth-child(7) {
-    --enter-stage: 7 !important;
-  }
-
-  .slide-enter-content > :nth-child(8) {
-    --enter-stage: 8 !important;
-  }
-
-  .slide-enter-content > :nth-child(9) {
-    --enter-stage: 9 !important;
-  }
-
-  .slide-enter-content > :nth-child(10) {
-    --enter-stage: 10 !important;
-  }
-
-  .slide-enter-content > :nth-child(11) {
-    --enter-stage: 11 !important;
-  }
-
-  .slide-enter-content > :nth-child(12) {
-    --enter-stage: 12 !important;
-  }
-
-  .slide-enter-content > :nth-child(13) {
-    --enter-stage: 13 !important;
-  }
-
-  .slide-enter-content > :nth-child(14) {
-    --enter-stage: 14 !important;
-  }
-
-  .slide-enter-content > :nth-child(15) {
-    --enter-stage: 15 !important;
-  }
-
-  .slide-enter-content > :nth-child(16) {
-    --enter-stage: 16 !important;
-  }
-
-  .slide-enter-content > :nth-child(17) {
-    --enter-stage: 17 !important;
-  }
-
-  .slide-enter-content > :nth-child(18) {
-    --enter-stage: 18 !important;
-  }
-
-  .slide-enter-content > :nth-child(19) {
-    --enter-stage: 19 !important;
-  }
-
-  .slide-enter-content > :nth-child(20) {
-    --enter-stage: 20 !important;
-  }
-}
-
-@keyframes slide-enter {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scale-up {
-  from {
-    opacity: 0;
-    transform: scale(.96) translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.shiki {
-  color: var(--shiki-light);
-  background-color: var(--ui-color-neutral-100);
-}
-
-.shiki .line span {
-  color: var(--shiki-light);
-}
-
-.dark .shiki {
-  color: var(--shiki-dark);
-  background-color: var(--ui-color-neutral-800);
-}
-
-.dark .shiki .line span {
-  color: var(--shiki-dark);
-}
+@import './styles/animations.css';
+@import './styles/keyframes.css';
+@import './styles/shiki.css';
 
 @theme {
-  --font-sans: "DM Sans", sans-serif;
-  --font-sofia: "Sofia sans", sans-serif;
-  --font-mono: "DM Mono", monospace;
+  --font-sans: 'DM Sans', sans-serif;
+  --font-sofia: 'Sofia sans', sans-serif;
+  --font-mono: 'DM Mono', monospace;
 }
 
 html {

package/dist/styles/animations.css

@@ -0,0 +1,80 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not(.no-sliding) .slide-enter,
+  html:not(.no-sliding) .slide-enter-content > * {
+    --enter-step: 60ms;
+    --enter-initial: 0ms;
+    animation: slide-enter 1s both 1;
+    animation-delay: calc(var(--enter-stage) * var(--enter-step));
+  }
+
+  .slide-enter-content > *:nth-child(1) {
+    --enter-stage: 1 !important;
+  }
+  .slide-enter-content > *:nth-child(2) {
+    --enter-stage: 2 !important;
+  }
+  .slide-enter-content > *:nth-child(3) {
+    --enter-stage: 3 !important;
+  }
+  .slide-enter-content > *:nth-child(4) {
+    --enter-stage: 4 !important;
+  }
+  .slide-enter-content > *:nth-child(5) {
+    --enter-stage: 5 !important;
+  }
+  .slide-enter-content > *:nth-child(6) {
+    --enter-stage: 6 !important;
+  }
+  .slide-enter-content > *:nth-child(7) {
+    --enter-stage: 7 !important;
+  }
+  .slide-enter-content > *:nth-child(8) {
+    --enter-stage: 8 !important;
+  }
+  .slide-enter-content > *:nth-child(9) {
+    --enter-stage: 9 !important;
+  }
+  .slide-enter-content > *:nth-child(10) {
+    --enter-stage: 10 !important;
+  }
+  .slide-enter-content > *:nth-child(11) {
+    --enter-stage: 11 !important;
+  }
+  .slide-enter-content > *:nth-child(12) {
+    --enter-stage: 12 !important;
+  }
+  .slide-enter-content > *:nth-child(13) {
+    --enter-stage: 13 !important;
+  }
+  .slide-enter-content > *:nth-child(14) {
+    --enter-stage: 14 !important;
+  }
+  .slide-enter-content > *:nth-child(15) {
+    --enter-stage: 15 !important;
+  }
+  .slide-enter-content > *:nth-child(16) {
+    --enter-stage: 16 !important;
+  }
+  .slide-enter-content > *:nth-child(17) {
+    --enter-stage: 17 !important;
+  }
+  .slide-enter-content > *:nth-child(18) {
+    --enter-stage: 18 !important;
+  }
+  .slide-enter-content > *:nth-child(19) {
+    --enter-stage: 19 !important;
+  }
+  .slide-enter-content > *:nth-child(20) {
+    --enter-stage: 20 !important;
+  }
+}

package/dist/styles/keyframes.css

@@ -0,0 +1,23 @@
+@keyframes slide-enter {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-up {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

package/dist/styles/shiki.css

@@ -0,0 +1,17 @@
+.shiki {
+  color: var(--shiki-light);
+  background-color: var(--ui-color-neutral-100);
+}
+
+.shiki .line span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki {
+  color: var(--shiki-dark);
+  background-color: var(--ui-color-neutral-800);
+}
+
+.dark .shiki .line span {
+  color: var(--shiki-dark);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soubiran/ui",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "author": "Estéban Soubiran <esteban@soubiran.dev>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/Barbapapazes",
@@ -17,11 +17,6 @@
       "import": "./dist/index.js",
       "style": "./dist/style.css"
     },
-    "./components/*": "./dist/components/*",
-    "./composables/*": {
-      "types": "./dist/composables/*.d.ts",
-      "import": "./dist/composables/*.js"
-    },
     "./imports": {
       "types": "./dist/imports.d.mts",
       "import": "./dist/imports.mjs"
@@ -48,35 +43,40 @@
     "dist",
     "umami.d.ts"
   ],
-  "dependencies": {
+  "peerDependencies": {
     "@nuxt/ui": "^4.7.0",
     "@pinia/colada": "^1.2.1",
-    "@vue/compiler-sfc": "^3.5.33",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.35"
+  },
+  "dependencies": {
     "@vueuse/core": "^14.3.0",
-    "markdown-it-github-alerts": "^1.0.1",
     "motion-v": "^2.2.1",
     "ofetch": "^1.5.1",
     "partysocket": "^1.1.18",
-    "pinia": "^3.0.4",
     "reka-ui": "^2.9.6",
     "tailwind-variants": "^3.2.2",
-    "unplugin-vue-components": "^32.0.0",
-    "vite": "^8.0.10",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6"
+    "unplugin-vue-components": "^32.0.0"
   },
   "devDependencies": {
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.79",
-    "@tsdown/css": "^0.21.10",
+    "@nuxt/ui": "^4.7.0",
+    "@pinia/colada": "^1.2.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/node": "^24.12.2",
     "@vitejs/plugin-vue": "^6.0.6",
-    "@vue/language-core": "^3.2.7",
+    "@vue/compiler-sfc": "^3.5.35",
     "@vue/tsconfig": "^0.9.1",
+    "pinia": "^3.0.4",
+    "tailwindcss": "^4.3.3",
     "tsdown": "^0.21.10",
     "typescript": "~5.9.3",
     "unplugin-icons": "^23.0.1",
     "unplugin-vue": "^7.2.0",
+    "vite": "^8.0.10",
+    "vue": "^3.5.35",
+    "vue-router": "^5.0.6",
     "vue-tsc": "^3.2.7"
   },
   "scripts": {

package/dist/components/Container.vue

@@ -1,36 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-
-const container = tv({
-  slots: {
-    base: 'px-4 sm:px-6 lg:px-8',
-    inner: 'w-full max-w-7xl mx-auto',
-  },
-})
-
-export interface ContainerProps {
-  class?: any
-  ui?: Partial<typeof container.slots>
-}
-export interface ContainerEmits {}
-export interface ContainerSlots {
-  default: (props: any) => any
-}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<ContainerProps>()
-defineEmits<ContainerEmits>()
-defineSlots<ContainerSlots>()
-
-const ui = computed(() => container())
-</script>
-
-<template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <div :class="ui.inner({ class: props.ui?.inner })">
-      <slot />
-    </div>
-  </div>
-</template>

package/dist/components/Feedback.vue

@@ -1,65 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed, ref } from 'vue'
-import thumbsUp from '~icons/ph/thumbs-up'
-import useUmami from '../composables/useUmami'
-import FeedbackCard from './FeedbackCard.vue'
-
-const feedback = tv({
-  slots: {
-    base: 'px-0 py-1 text-dimmed text-sm',
-  },
-})
-
-export interface FeedbackProps {
-  id: string
-  class?: any
-  ui?: Partial<typeof feedback.slots>
-}
-export interface FeedbackEmits {}
-export interface FeedbackSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<FeedbackProps>()
-defineEmits<FeedbackEmits>()
-defineSlots<FeedbackSlots>()
-
-const { track } = useUmami()
-function onClick() {
-  track('feedback_click')
-}
-
-const content = ref('')
-const rating = ref('')
-
-function onSuccess() {
-  content.value = ''
-  rating.value = ''
-}
-
-const ui = computed(() => feedback())
-</script>
-
-<template>
-  <UPopover :ui="{ content: 'ring-0 data-[state=open]:animate-[scale-up_100ms_ease-out]' }">
-    <UButton
-      variant="link"
-      color="neutral"
-      label="Give feedback"
-      size="sm"
-      :icon="thumbsUp"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
-      @click="onClick"
-    />
-
-    <template #content>
-      <FeedbackCard
-        :id="props.id"
-        v-model:rating="rating"
-        v-model:content="content"
-        @success="onSuccess"
-      />
-    </template>
-  </UPopover>
-</template>

package/dist/components/FeedbackCard.vue

@@ -1,168 +0,0 @@
-<script lang="ts">
-import { useMutation } from '@pinia/colada'
-import { motion } from 'motion-v'
-import { ofetch } from 'ofetch'
-import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
-import { tv } from 'tailwind-variants'
-import { computed, ref } from 'vue'
-import checkCircle from '~icons/ph/check-circle'
-import useUmami from '../composables/useUmami'
-
-const feedbackCard = tv({
-  slots: {
-    base: 'relative w-64',
-    successfullySentOverlay: 'absolute z-10 inset-0 bg-default',
-    successfullySentContent: 'absolute z-20 inset-0 flex flex-col justify-center items-center text-muted text-xs',
-    successfullySentIcon: 'size-5',
-    input: 'w-full',
-    radioGroup: 'flex flex-row gap-2 text-lg',
-    radioGroupItem: 'peer',
-    radioGroupLabel: 'grayscale-100 hover:grayscale-0 peer-data-[state=checked]:grayscale-0',
-  },
-})
-
-export interface FeedbackCardProps {
-  id: string
-  class?: any
-  ui?: Partial<typeof feedbackCard.slots>
-}
-export interface FeedbackCardEmits {
-  success: [void]
-}
-export interface FeedbackCardSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<FeedbackCardProps>()
-const emits = defineEmits<FeedbackCardEmits>()
-defineSlots<FeedbackCardSlots>()
-
-const content = defineModel<string>('content', { required: true })
-const rating = defineModel<string>('rating', { required: true })
-
-const ratings = [
-  {
-    label: '😭',
-    value: 'Hate it',
-  },
-  {
-    label: '🙁',
-    value: 'Not great',
-  },
-  {
-    label: '🙂',
-    value: 'It\'s ok',
-  },
-  {
-    label: '🤩',
-    value: 'Love it',
-  },
-]
-
-const successfullySent = ref(false)
-
-const { track } = useUmami()
-const { mutate, isLoading, error } = useMutation<
-  void,
-  { rating: string, content: string },
-  { status: number, data: { errors?: { content?: string[], rating?: string[] } } }
->({
-  mutation: ({ rating, content }) => ofetch(`/api/pages/${props.id}/feedback`, {
-    method: 'POST',
-    body: { rating, content },
-    baseURL: import.meta.env.VITE_API_BASE_URL,
-  }),
-  onSuccess: () => {
-    successfullySent.value = true
-
-    track('feedback_submit')
-
-    // Wait for the animation to finish
-    setTimeout(emits, 200, 'success')
-  },
-})
-
-function sendFeedback() {
-  mutate({ rating: rating.value, content: content.value })
-}
-
-const formattedError = computed<string | undefined>(() => {
-  if (!error.value)
-    return undefined
-
-  if (error.value.data?.errors) {
-    return error.value.data.errors.content?.[0] || error.value.data.errors.rating?.[0]
-  }
-
-  if (error.value.status === 404)
-    return 'Page not found. Cannot send feedback. It\'s us, not you!'
-
-  if (error.value.status === 503)
-    return 'Service is currently unavailable. Please try again later.'
-
-  return 'An unexpected error occurred.'
-})
-
-const ui = computed(() => feedbackCard())
-</script>
-
-<template>
-  <UCard :class="ui.base({ class: [props.ui?.base, props.class] })" :ui="{ body: 'p-2 sm:p-2', footer: 'p-2 sm:p-2 flex items-center justify-between' }">
-    <template v-if="successfullySent">
-      <motion.div
-        :initial="{ opacity: 0 }"
-        :animate="{ opacity: 1, transition: { duration: 0.2 } }"
-        :class="ui.successfullySentOverlay({ class: props.ui?.successfullySentOverlay })"
-      />
-      <div :class="ui.successfullySentContent({ class: props.ui?.successfullySentContent })">
-        <motion.div
-          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
-          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.1, duration: 0.3 } }"
-        >
-          <UIcon :name="checkCircle" :class="ui.successfullySentIcon({ class: props.ui?.successfullySentIcon })" />
-        </motion.div>
-        <motion.p
-          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
-          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.2, duration: 0.3 } }"
-          class="mt-3"
-        >
-          Your feedback has been received.
-        </motion.p>
-        <motion.p
-          :initial="{ opacity: 0, transform: 'translateY(4px)' }"
-          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { delay: 0.3, duration: 0.3 } }"
-          class="mt-1"
-        >
-          Thanks for your help!
-        </motion.p>
-      </div>
-    </template>
-
-    <UFormField :error="formattedError">
-      <UTextarea v-model="content" placeholder="Your feedback..." variant="soft" :class="ui.input({ class: props.ui?.input })" />
-      <template #error="{ error: formFieldError }">
-        <motion.div
-          v-if="formFieldError"
-          :initial="{ height: 0 }"
-          :animate="{ height: 'auto' }"
-          class="text-sm"
-        >
-          {{ formFieldError }}
-        </motion.div>
-      </template>
-    </UFormField>
-    <template #footer>
-      <RadioGroupRoot v-model="rating" :class="ui.radioGroup({ class: props.ui?.radioGroup })">
-        <div v-for="item in ratings" :key="item.value">
-          <RadioGroupItem :id="item.value" :value="item.value" :class="ui.radioGroupItem({ class: props.ui?.radioGroupItem })">
-            <RadioGroupIndicator />
-          </RadioGroupItem>
-          <UTooltip :text="item.value">
-            <label :for="item.value" :class="ui.radioGroupLabel({ class: props.ui?.radioGroupLabel })">{{ item.label }}</label>
-          </UTooltip>
-        </div>
-      </RadioGroupRoot>
-      <UButton size="sm" label="Send" :loading="isLoading" @click="sendFeedback" />
-    </template>
-  </UCard>
-</template>