@trackunit/react-form-components 0.0.101 → 0.0.102

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/{index.cjs → index.cjs.js}

@@ -49,23 +49,23 @@ const translations = {
     ns: namespace,
     default: defaultTranslations,
     languages: {
-        de: () => Promise.resolve().then(function () { return require('./translation.cjs'); }),
-        da: () => Promise.resolve().then(function () { return require('./translation2.cjs'); }),
-        cs: () => Promise.resolve().then(function () { return require('./translation3.cjs'); }),
-        nl: () => Promise.resolve().then(function () { return require('./translation4.cjs'); }),
-        fr: () => Promise.resolve().then(function () { return require('./translation5.cjs'); }),
-        fi: () => Promise.resolve().then(function () { return require('./translation6.cjs'); }),
-        hu: () => Promise.resolve().then(function () { return require('./translation7.cjs'); }),
-        it: () => Promise.resolve().then(function () { return require('./translation8.cjs'); }),
-        nb: () => Promise.resolve().then(function () { return require('./translation9.cjs'); }),
-        pl: () => Promise.resolve().then(function () { return require('./translation10.cjs'); }),
-        pt: () => Promise.resolve().then(function () { return require('./translation11.cjs'); }),
-        ru: () => Promise.resolve().then(function () { return require('./translation12.cjs'); }),
-        ro: () => Promise.resolve().then(function () { return require('./translation13.cjs'); }),
-        es: () => Promise.resolve().then(function () { return require('./translation14.cjs'); }),
-        sv: () => Promise.resolve().then(function () { return require('./translation15.cjs'); }),
-        ja: () => Promise.resolve().then(function () { return require('./translation16.cjs'); }),
-        th: () => Promise.resolve().then(function () { return require('./translation17.cjs'); }),
+        de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
 /**

package/index.esm.css

@@ -0,0 +1,259 @@
+/* CSS related to the Label component */
+
+.tu-label {
+  @apply text-base
+    text-slate-700	
+    overflow-hidden
+    whitespace-nowrap
+    text-ellipsis
+    hover:text-slate-800 
+    group-hover:text-slate-800 
+    active:text-slate-800
+    group-active:text-slate-800;
+
+  &--invalid {
+    @apply text-red-600
+      hover:text-red-700 
+      group-hover:text-red-700 
+      active:text-red-700
+      group-active:text-red-700;
+  }
+
+  &--disabled {
+    @apply text-slate-400
+      hover:text-slate-400
+      group-hover:text-slate-400;
+  }
+}
+
+/* CSS related to the RadioGroup component */
+.tu-radiogroup {
+  @apply flex
+    gap-2
+    flex-col
+    items-start;
+
+  &--inline {
+    @apply flex
+      gap-3
+      flex-row
+      items-center;
+  }
+}
+
+.tu-radioitem {
+  @apply w-4
+    h-4
+    appearance-none
+    rounded-3xl
+    bg-white
+    border-solid
+    border
+    border-slate-300
+    shadow-sm
+    shrink-0
+    transition
+    box-border
+    hover:cursor-pointer
+    hover:bg-slate-100
+    focus:ring-2
+    focus:ring-offset-2
+    focus:ring-blue-700;
+
+  &__wrapper {
+    @apply flex
+      gap-2
+      items-center;
+  }
+
+  &--checked {
+    @apply border-solid
+      border-4
+      border-blue-600
+      bg-white
+      hover:bg-slate-100
+      hover:cursor-pointer
+      outline-0
+      active:bg-slate-200
+      active:ring-2
+      active:ring-offset-2
+      active:ring-blue-700
+      focus:bg-slate-200
+      focus:ring-2
+      focus:ring-offset-2
+      focus:ring-blue-700
+      group-active:ring-2
+      group-active:ring-offset-2
+      group-active:ring-blue-700;
+  }
+
+  &--invalid {
+    @apply border-red-600
+      active:ring-red-700
+      focus:ring-red-700
+      group-focus:ring-2
+      group-focus:ring-offset-2;
+  }
+
+  &--disabled {
+    @apply bg-slate-400
+      border-slate-300
+      cursor-not-allowed
+      group-hover:bg-slate-400
+      group-focus:bg-slate-400
+      hover:bg-slate-400
+      focus:bg-slate-400
+      active:bg-slate-400
+      focus:ring-0
+      focus:ring-offset-0
+      group-active:ring-0
+      group-active:ring-offset-0;
+  }
+
+  &--disabled.tu-radioitem--checked {
+    @apply bg-white;
+  }
+
+  &__label-container {
+    @apply gap-y-1
+      grid;
+  }
+
+  &__description {
+    @apply text-sm
+      font-normal
+      text-slate-500
+      text-left
+      whitespace-nowrap
+      text-ellipsis
+      overflow-hidden;
+
+    &--disabled {
+      @apply text-slate-400
+        hover:text-slate-400
+        group-hover:text-slate-400;
+    }
+  }
+}
+
+/* CSS related to the toggle component */
+.tu-toggle {
+  @apply rounded-full
+    bg-white
+    h-full
+    aspect-square
+    translate-x-0
+    transition-all;
+
+  &__wrapper {
+    @apply flex
+      gap-2;
+  }
+
+  &__input-container {
+    @apply flex
+      self-start
+      w-fit	
+      active:shadow
+      rounded-full
+      cursor-pointer
+      focus-within:ring
+      focus-within:ring-offset-2
+      focus-within:ring-blue-700;
+  }
+
+  &__input {
+    @apply absolute
+      opacity-0
+      -z-10;
+  }
+
+  &__switch-container {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      rounded-full
+      bg-slate-300
+      focus:bg-slate-400
+      hover:bg-slate-400
+      active:bg-slate-500;
+  }
+
+  &__switch {
+    @apply bg-white
+      rounded-full
+      h-full
+      w-5/12		
+      aspect-square
+      translate-x-4
+      transition-all;
+  }
+
+  &--medium {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-9
+      h-5;
+  }
+
+  &--small {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-8
+      h-4;
+
+    .tu-toggle__switch {
+      @apply w-4/12;
+    }
+  }
+
+  &--toggled {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      bg-blue-600
+      focus:bg-blue-700
+      hover:bg-blue-700
+      active:bg-blue-800;
+  }
+
+  &--disabled {
+    @apply flex
+      items-center
+      p-1
+      cursor-not-allowed
+      pointer-events-none
+      bg-slate-200;
+  }
+
+  &--disabled.tu-toggle--toggled {
+    @apply bg-slate-400;
+  }
+
+  &__label-container {
+    @apply gap-y-1
+      grid;
+  }
+
+  &__description {
+    @apply text-sm	
+      font-normal
+      text-slate-500	
+      text-left
+      whitespace-nowrap
+      text-ellipsis	
+      overflow-hidden;
+
+    &--disabled {
+      @apply text-slate-400
+        hover:text-slate-400
+        group-hover:text-slate-400;
+    }
+  }
+}

package/{index.js → index.esm.js}

@@ -23,23 +23,23 @@ const translations = {
     ns: namespace,
     default: defaultTranslations,
     languages: {
-        de: () => import('./translation.js'),
-        da: () => import('./translation2.js'),
-        cs: () => import('./translation3.js'),
-        nl: () => import('./translation4.js'),
-        fr: () => import('./translation5.js'),
-        fi: () => import('./translation6.js'),
-        hu: () => import('./translation7.js'),
-        it: () => import('./translation8.js'),
-        nb: () => import('./translation9.js'),
-        pl: () => import('./translation10.js'),
-        pt: () => import('./translation11.js'),
-        ru: () => import('./translation12.js'),
-        ro: () => import('./translation13.js'),
-        es: () => import('./translation14.js'),
-        sv: () => import('./translation15.js'),
-        ja: () => import('./translation16.js'),
-        th: () => import('./translation17.js'),
+        de: () => import('./translation.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
     },
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.11",
     "@trackunit/i18n-library-translation": "0.0.67",
-    "@trackunit/react-components": "0.1.137",
+    "@trackunit/react-components": "0.1.138",
     "@trackunit/tailwind-styled-components": "0.0.60",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
@@ -17,9 +17,7 @@
     "react-select": "5.7.3",
     "uuid": "8.3.2"
   },
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "type": "module",
-  "types": "./src/index.d.ts",
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
   "peerDependencies": {}
 }