@trackunit/react-components 0.0.1-alpha-59a0a75488.0

package/index.css

@@ -0,0 +1,488 @@
+/* CSS related to the Button component */
+
+.tu-button {
+  @apply flex-row
+    inline-flex
+    gap-2
+    box-border
+    justify-center
+    items-center
+    whitespace-nowrap
+    max-w-full
+    outline-0
+    outline-current
+    transition-all
+    ease-in-out
+    rounded-lg
+    cursor-pointer
+    flex-none
+    py-1.5
+    px-2.5
+    h-min
+    w-min
+    max-h-8
+    focus:ring
+    focus:ring-offset-1
+    focus:outline-none
+    disabled:cursor-not-allowed
+    text-sm
+    font-medium
+    align-middle;
+
+  &__spinner {
+    @apply !w-[1em]
+      !h-[1em];
+
+    &--full-width {
+      @apply !w-auto;
+    }
+  }
+
+  &--rounded {
+    @apply !rounded-full;
+  }
+
+  &--square {
+    @apply aspect-square;
+  }
+
+  &--full-width {
+    @apply w-full
+      flex-auto;
+  }
+
+  &--small {
+    @apply py-1
+      px-2
+      max-h-7;
+  }
+
+  &--large {
+    @apply py-2
+      px-4
+      max-h-9;
+  }
+
+  &--primary {
+    @apply bg-primary-600
+      text-white
+      hover:bg-primary-800
+      active:bg-primary-700
+      focus:ring-primary-300
+      disabled:hover:bg-slate-400
+      disabled:bg-slate-400
+      disabled:text-slate-200;
+  }
+
+  &--secondary {
+    @apply bg-slate-200
+      text-slate-600
+      hover:bg-slate-400
+      hover:text-slate-800
+      active:text-slate-700
+      active:bg-slate-300
+      focus:ring-slate-300
+      disabled:bg-slate-200
+      disabled:hover:bg-slate-200
+      disabled:text-slate-400;
+  }
+
+  &--danger {
+    @apply bg-danger-600
+      text-white
+      hover:bg-danger-800
+      active:bg-danger-700
+      focus:ring-danger-300
+      disabled:bg-slate-200
+      disabled:hover:bg-slate-200
+      disabled:text-slate-400;
+  }
+
+  &--warning {
+    @apply bg-warning-50
+      text-warning-600
+      hover:bg-warning-200
+      hover:text-warning-800
+      active:text-warning-700
+      active:bg-warning-100
+      focus:ring-warning-300
+      disabled:bg-warning-50
+      disabled:hover:bg-warning-50
+      disabled:text-slate-400;
+  }
+
+  &--tertiary {
+    @apply bg-white border
+      text-slate-600
+      active:bg-slate-100
+      active:text-slate-700
+      focus:ring-slate-300
+      hover:bg-slate-200
+      hover:text-slate-800
+      border-slate-300
+      disabled:bg-slate-200
+      disabled:hover:bg-slate-200
+      disabled:text-slate-400;
+  }
+
+  &--transparent-primary {
+    @apply text-primary-600
+      hover:text-primary-700
+      active:bg-primary-700
+      focus:ring-primary-300
+      hover:bg-primary-500/10
+      disabled:hover:bg-transparent;
+  }
+
+  &--transparent-secondary {
+    @apply text-neutral-600
+      hover:text-neutral-800
+      active:text-neutral-700
+      active:bg-black/10
+      focus:ring-neutral-300
+      hover:bg-black/5
+      disabled:hover:bg-transparent;
+  }
+
+  &--transparent-danger {
+    @apply text-danger-600
+      active:bg-danger-600/10
+      focus:ring-danger-300
+      hover:bg-danger-600/10
+      disabled:hover:bg-transparent;
+  }
+
+  &--transparent-warning {
+    @apply text-warning-600
+      active:bg-warning-500/20
+      focus:ring-warning-300
+      hover:bg-warning-500/10
+      disabled:hover:bg-transparent;
+  }
+
+  &--transparent-tertiary {
+    @apply text-slate-600
+      active:bg-slate-200/20
+      focus:ring-slate-300
+      hover:bg-slate-600/10
+      disabled:hover:bg-transparent;
+  }
+
+  &__container {
+    @apply w-5
+      h-5
+      flex
+      justify-center
+      items-center
+      box-border;
+
+    &--small {
+      @apply w-4
+        h-4
+        flex
+        justify-center
+        items-center
+        box-border;
+    }
+  }
+}
+
+/* CSS related to the LAbel component */
+
+.tu-label {
+  @apply leading-none
+    text-base
+    text-slate-700	
+    whitespace-nowrap
+    text-ellipsis
+    items-center 
+    grid
+    gap-2	
+    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 
+    w-fit	
+    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;
+  }
+
+  &--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;
+    }
+  }
+}
+
+.tu-section-header {
+  @apply w-full;
+
+  &__flex {
+    @apply flex
+      items-center
+      flex-wrap-reverse
+      gap-2;
+  }
+}
+
+.tu-textarea {
+  @apply tu-input-base 
+    block
+    overflow-auto
+    appearance-none
+    px-3
+    py-2
+    bg-transparent
+    text-base
+    text-slate-900
+    placeholder-slate-400
+    focus-visible:outline-none
+    w-full 
+    h-20
+    transition;
+
+  &--invalid {
+    @apply tu-input--invalid;
+  }
+
+  &--disabled {
+    @apply tu-input--disabled;
+  }
+}
+
+/* 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.d.ts

@@ -0,0 +1,4 @@
+export * from "./common";
+export * from "./components";
+export * from "./hooks";
+export * from "./layout";