@poveste/controls 0.1.3 → 0.2.0

package/src/components/select/HstSelect.story.vue

@@ -79,7 +79,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ options }}</pre>
+        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ options }}</pre>
         <HstSelect
           v-model="state.select"
           title="Games"
@@ -100,7 +100,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ objectOptions }}</pre>
+        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ objectOptions }}</pre>
         <HstSelect
           v-model="state.select"
           title="Games"
@@ -121,7 +121,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ flatOptions }}</pre>
+        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ flatOptions }}</pre>
         <HstSelect
           v-model="state.select"
           title="Select"
@@ -142,7 +142,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ numberOptions }}</pre>
+        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ numberOptions }}</pre>
         <HstSelect
           v-model="state.count"
           title="Select"

package/src/components/select/HstSelect.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-select htw-cursor-text htw-items-center"
+    class="poveste-select ptw-cursor-text ptw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
   >

package/src/components/slider/HstSlider.vue

@@ -50,19 +50,19 @@ const tooltipStyle = computed<CSSProperties>(() => {
 
 <template>
   <HstWrapper
-    class="poveste-slider htw-items-center"
+    class="poveste-slider ptw-items-center"
     :title="title"
     :class="$attrs.class"
     :style="$attrs.style"
   >
-    <div class="htw-relative htw-w-full htw-flex htw-items-center">
-      <div class="htw-absolute htw-inset-0 htw-flex htw-items-center">
-        <div class="htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" />
+    <div class="ptw-relative ptw-w-full ptw-flex ptw-items-center">
+      <div class="ptw-absolute ptw-inset-0 ptw-flex ptw-items-center">
+        <div class="ptw-border ptw-border-black/25 dark:ptw-border-white/25 ptw-h-1 ptw-w-full ptw-rounded-full" />
       </div>
       <input
         ref="input"
         v-model.number="numberModel"
-        class="htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700"
+        class="ptw-range-input ptw-appearance-none ptw-border-0 ptw-bg-transparent ptw-cursor-pointer ptw-relative ptw-w-full ptw-m-0 ptw-text-gray-700"
         type="range"
         v-bind="{ ...$attrs, class: null, style: null, min, max }"
         @mouseover="showTooltip = true"
@@ -71,7 +71,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
       <div
         v-if="showTooltip"
         v-tooltip="{ content: modelValue.toString(), shown: true, distance: 16, delay: 0 }"
-        class="htw-absolute"
+        class="ptw-absolute"
         :style="tooltipStyle"
       />
     </div>
@@ -79,25 +79,25 @@ const tooltipStyle = computed<CSSProperties>(() => {
 </template>
 
 <style lang="pcss">
-.htw-range-input {
+.ptw-range-input {
   &::-webkit-slider-thumb {
-    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+    @apply ptw-appearance-none ptw-h-3 ptw-w-3 ptw-bg-white dark:ptw-bg-gray-700 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-full;
   }
 
   &:hover::-webkit-slider-thumb {
-    @apply !htw-bg-primary-500  !htw-border-primary-500;
+    @apply !ptw-bg-primary-500  !ptw-border-primary-500;
   }
 }
 
 /* Separate rules for -moz-range-thumb to prevent a bug with Safari that causes it to ignore custom style */
 
-.htw-range-input {
+.ptw-range-input {
   &::-moz-range-thumb {
-    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+    @apply ptw-appearance-none ptw-h-3 ptw-w-3 ptw-bg-white dark:ptw-bg-gray-700 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-full;
   }
 
   &:hover::-moz-range-thumb {
-    @apply !htw-bg-primary-500  !htw-border-primary-500;
+    @apply !ptw-bg-primary-500  !ptw-border-primary-500;
   }
 }
 </style>

package/src/components/text/HstText.vue

@@ -23,7 +23,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-text htw-cursor-text htw-items-center"
+    class="poveste-text ptw-cursor-text ptw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       v-bind="{ ...$attrs, class: null, style: null }"
       type="text"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-px-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
 

package/src/components/textarea/HstTextarea.vue

@@ -24,7 +24,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-textarea htw-cursor-text"
+    class="poveste-textarea ptw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       ref="input"
       v-bind="{ ...$attrs, class: null, style: null }"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
+      class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-px-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm ptw-box-border ptw-resize-y ptw-min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
 

package/src/end.d.ts

@@ -2,7 +2,7 @@ import type { Ref } from '@poveste/vendors/vue'
 
 global {
   interface Window {
-    __hst_controls_dark: Ref<boolean>[]
-    __hst_controls_dark_ready: () => void
+    __pvt_controls_dark: Ref<boolean>[]
+    __pvt_controls_dark_ready: () => void
   }
 }

package/src/style/main.css

@@ -7,7 +7,7 @@
 
 body {
   font-size: 1.125rem;
-  @apply dark:htw-text-gray-100;
+  @apply dark:ptw-text-gray-100;
 }
 
 @media (min-width: 640px) {

package/src/utils.ts

@@ -2,11 +2,11 @@ import { ref } from 'vue'
 
 export const isDark = ref(false)
 
-if (!window.__hst_controls_dark) {
-  window.__hst_controls_dark = []
+if (!window.__pvt_controls_dark) {
+  window.__pvt_controls_dark = []
 }
 
 // There could be multiple instances of the controls lib (in the controls book https://controls.poveste.dev)
-window.__hst_controls_dark.push(isDark)
+window.__pvt_controls_dark.push(isDark)
 
-window.__hst_controls_dark_ready?.()
+window.__pvt_controls_dark_ready?.()

package/tailwind.config.cjs

@@ -3,7 +3,7 @@ const inheritedConfig = require('../../tailwind.config.cjs')
 
 module.exports = {
   ...inheritedConfig,
-  prefix: 'htw-',
+  prefix: 'ptw-',
   content: [
     path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
   ],