@bodynarf/react.components 1.13.8 → 1.14.1

package/components/primitives/radioGroup/component/style.css

@@ -0,0 +1,382 @@
+.bbr-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.bbr-radio-group.is-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.bbr-radio-item {
+  display: flex;
+  align-items: center;
+}
+
+.is-checkradio.bbr-radio[type=radio] {
+  outline: 0;
+  user-select: none;
+  display: inline-block;
+  position: absolute;
+  opacity: 0;
+}
+.is-checkradio.bbr-radio[type=radio] + label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-left: 1.75rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.25;
+  min-height: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio] + label::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0.1rem solid hsl(0, 0%, 86%);
+  border-radius: 50%;
+  background: transparent;
+  content: "";
+  transition: background 0.15s ease-out, border-color 0.15s ease-out;
+}
+.is-checkradio.bbr-radio[type=radio] + label::after {
+  position: absolute;
+  left: 0.3125rem;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: hsl(171, 100%, 41%);
+  content: "";
+  transition: transform 0.15s ease-out;
+}
+.is-checkradio.bbr-radio[type=radio]:checked + label::after {
+  transform: translateY(-50%) scale(1);
+}
+.is-checkradio.bbr-radio[type=radio]:checked + label::before {
+  border-color: hsl(171, 100%, 41%);
+}
+.is-checkradio.bbr-radio[type=radio]:focus + label::before {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio]:hover:not(:disabled) + label::before {
+  border-color: hsl(0, 0%, 71%);
+}
+.is-checkradio.bbr-radio[type=radio]:disabled {
+  cursor: not-allowed;
+}
+.is-checkradio.bbr-radio[type=radio]:disabled + label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.is-checkradio.bbr-radio[type=radio].is-circle + label::before {
+  border-radius: 50%;
+}
+.is-checkradio.bbr-radio[type=radio].is-circle + label::after {
+  border-radius: 50%;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label {
+  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+  background: hsl(0, 0%, 98%);
+  border-radius: 4px;
+  width: 100%;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label::after {
+  left: 0.8125rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label:hover {
+  background: hsl(0, 0%, 96%);
+}
+.is-checkradio.bbr-radio[type=radio].is-block:checked + label {
+  background: rgba(0, 209.1, 177.735, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].has-no-border + label::before {
+  border: none;
+  background: hsl(0, 0%, 86%);
+}
+.is-checkradio.bbr-radio[type=radio].has-no-border:checked + label::before {
+  background: rgba(0, 209.1, 177.735, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].has-background-color + label::before {
+  background: hsl(0, 0%, 96%);
+}
+.is-checkradio.bbr-radio[type=radio].has-background-color:checked + label::before {
+  background: rgba(0, 209.1, 177.735, 0.15);
+  border-color: hsl(171, 100%, 41%);
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label {
+  font-size: 0.75rem;
+  padding-left: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label::before {
+  width: 1rem;
+  height: 1rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label::after {
+  width: 0.5rem;
+  height: 0.5rem;
+  left: 0.25rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label {
+  padding-left: 2rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label::after {
+  left: 0.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label {
+  font-size: 1.25rem;
+  padding-left: 2rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label::before {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label::after {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label {
+  padding-left: 2.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::after {
+  left: 0.875rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label {
+  font-size: 1.5rem;
+  padding-left: 2.25rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label::before {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label::after {
+  width: 0.875rem;
+  height: 0.875rem;
+  left: 0.4375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label {
+  padding-left: 2.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label::after {
+  left: 0.9375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-white:checked + label::before {
+  border-color: hsl(0, 0%, 100%);
+}
+.is-checkradio.bbr-radio[type=radio].is-white:checked + label::after {
+  background: hsl(0, 0%, 100%);
+}
+.is-checkradio.bbr-radio[type=radio].is-white:focus + label::before {
+  border-color: hsl(0, 0%, 100%);
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-white.is-block:checked + label {
+  background: rgba(255, 255, 255, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-white.has-background-color:checked + label::before {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: hsl(0, 0%, 100%);
+}
+.is-checkradio.bbr-radio[type=radio].is-white.has-no-border:checked + label::before {
+  background: rgba(255, 255, 255, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-black:checked + label::before {
+  border-color: hsl(0, 0%, 4%);
+}
+.is-checkradio.bbr-radio[type=radio].is-black:checked + label::after {
+  background: hsl(0, 0%, 4%);
+}
+.is-checkradio.bbr-radio[type=radio].is-black:focus + label::before {
+  border-color: hsl(0, 0%, 4%);
+  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-black.is-block:checked + label {
+  background: rgba(10.2, 10.2, 10.2, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-black.has-background-color:checked + label::before {
+  background: rgba(10.2, 10.2, 10.2, 0.15);
+  border-color: hsl(0, 0%, 4%);
+}
+.is-checkradio.bbr-radio[type=radio].is-black.has-no-border:checked + label::before {
+  background: rgba(10.2, 10.2, 10.2, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-light:checked + label::before {
+  border-color: hsl(0, 0%, 96%);
+}
+.is-checkradio.bbr-radio[type=radio].is-light:checked + label::after {
+  background: hsl(0, 0%, 96%);
+}
+.is-checkradio.bbr-radio[type=radio].is-light:focus + label::before {
+  border-color: hsl(0, 0%, 96%);
+  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-light.is-block:checked + label {
+  background: rgba(244.8, 244.8, 244.8, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-light.has-background-color:checked + label::before {
+  background: rgba(244.8, 244.8, 244.8, 0.15);
+  border-color: hsl(0, 0%, 96%);
+}
+.is-checkradio.bbr-radio[type=radio].is-light.has-no-border:checked + label::before {
+  background: rgba(244.8, 244.8, 244.8, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark:checked + label::before {
+  border-color: hsl(0, 0%, 21%);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark:checked + label::after {
+  background: hsl(0, 0%, 21%);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark:focus + label::before {
+  border-color: hsl(0, 0%, 21%);
+  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark.is-block:checked + label {
+  background: rgba(53.55, 53.55, 53.55, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark.has-background-color:checked + label::before {
+  background: rgba(53.55, 53.55, 53.55, 0.15);
+  border-color: hsl(0, 0%, 21%);
+}
+.is-checkradio.bbr-radio[type=radio].is-dark.has-no-border:checked + label::before {
+  background: rgba(53.55, 53.55, 53.55, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:checked + label::before {
+  border-color: hsl(171, 100%, 41%);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:focus + label::before {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.is-block:checked + label {
+  background: rgba(0, 209.1, 177.735, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.has-background-color:checked + label::before {
+  background: rgba(0, 209.1, 177.735, 0.15);
+  border-color: hsl(171, 100%, 41%);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.has-no-border:checked + label::before {
+  background: rgba(0, 209.1, 177.735, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:checked + label::before {
+  border-color: hsl(229, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:checked + label::after {
+  background: hsl(229, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:focus + label::before {
+  border-color: hsl(229, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.is-block:checked + label {
+  background: rgba(71.6295, 94.92035, 198.6705, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.has-background-color:checked + label::before {
+  background: rgba(71.6295, 94.92035, 198.6705, 0.15);
+  border-color: hsl(229, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.has-no-border:checked + label::before {
+  background: rgba(71.6295, 94.92035, 198.6705, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:checked + label::before {
+  border-color: hsl(207, 61%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:checked + label::after {
+  background: hsl(207, 61%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:focus + label::before {
+  border-color: hsl(207, 61%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.is-block:checked + label {
+  background: rgba(62.0415, 142.46085, 208.2585, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.has-background-color:checked + label::before {
+  background: rgba(62.0415, 142.46085, 208.2585, 0.15);
+  border-color: hsl(207, 61%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.has-no-border:checked + label::before {
+  background: rgba(62.0415, 142.46085, 208.2585, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:checked + label::before {
+  border-color: hsl(153, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:checked + label::after {
+  background: hsl(153, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:focus + label::before {
+  border-color: hsl(153, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.is-block:checked + label {
+  background: rgba(71.6295, 198.6705, 141.50205, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.has-background-color:checked + label::before {
+  background: rgba(71.6295, 198.6705, 141.50205, 0.15);
+  border-color: hsl(153, 53%, 53%);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.has-no-border:checked + label::before {
+  background: rgba(71.6295, 198.6705, 141.50205, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:checked + label::before {
+  border-color: hsl(44, 100%, 77%);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:checked + label::after {
+  background: hsl(44, 100%, 77%);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:focus + label::before {
+  border-color: hsl(44, 100%, 77%);
+  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.is-block:checked + label {
+  background: rgba(255, 223.72, 137.7, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.has-background-color:checked + label::before {
+  background: rgba(255, 223.72, 137.7, 0.15);
+  border-color: hsl(44, 100%, 77%);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.has-no-border:checked + label::before {
+  background: rgba(255, 223.72, 137.7, 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:checked + label::before {
+  border-color: hsl(348, 86%, 61%);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:checked + label::after {
+  background: hsl(348, 86%, 61%);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:focus + label::before {
+  border-color: hsl(348, 86%, 61%);
+  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.is-block:checked + label {
+  background: rgba(241.077, 70.023, 104.2338, 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.has-background-color:checked + label::before {
+  background: rgba(241.077, 70.023, 104.2338, 0.15);
+  border-color: hsl(348, 86%, 61%);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.has-no-border:checked + label::before {
+  background: rgba(241.077, 70.023, 104.2338, 0.2);
+}

package/components/primitives/radioGroup/component/style.scss

@@ -0,0 +1,271 @@
+@import "bulma/sass/utilities/derived-variables";
+
+.bbr-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    &.is-horizontal {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+}
+
+.bbr-radio-item {
+    display: flex;
+    align-items: center;
+}
+
+.is-checkradio.bbr-radio[type="radio"] {
+    outline: 0;
+    user-select: none;
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+
+    + label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding-left: 1.75rem;
+        cursor: pointer;
+        font-size: $size-normal;
+        line-height: 1.25;
+        min-height: 1.5rem;
+
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 0.1rem solid $grey-lighter;
+            border-radius: 50%;
+            background: transparent;
+            content: "";
+            transition: background 0.15s ease-out, border-color 0.15s ease-out;
+        }
+
+        &::after {
+            position: absolute;
+            left: 0.3125rem;
+            top: 50%;
+            transform: translateY(-50%) scale(0);
+            width: 0.625rem;
+            height: 0.625rem;
+            border-radius: 50%;
+            background: $primary;
+            content: "";
+            transition: transform 0.15s ease-out;
+        }
+    }
+
+    &:checked + label::after {
+        transform: translateY(-50%) scale(1);
+    }
+
+    &:checked + label::before {
+        border-color: $primary;
+    }
+
+    &:focus + label::before {
+        border-color: $primary;
+        box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+    }
+
+    &:hover:not(:disabled) + label::before {
+        border-color: $grey-light;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+
+        + label {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    // Circle style (default for radio)
+    &.is-circle + label {
+        &::before {
+            border-radius: 50%;
+        }
+
+        &::after {
+            border-radius: 50%;
+        }
+    }
+
+    // Block style
+    &.is-block {
+        + label {
+            padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+            background: $white-bis;
+            border-radius: $radius;
+            width: 100%;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.8125rem;
+            }
+
+            &:hover {
+                background: $white-ter;
+            }
+        }
+
+        &:checked + label {
+            background: rgba($primary, 0.1);
+        }
+    }
+
+    // Without border
+    &.has-no-border + label::before {
+        border: none;
+        background: $grey-lighter;
+    }
+
+    &.has-no-border:checked + label::before {
+        background: rgba($primary, 0.2);
+    }
+
+    // Has background color
+    &.has-background-color + label::before {
+        background: $white-ter;
+    }
+
+    &.has-background-color:checked + label::before {
+        background: rgba($primary, 0.15);
+        border-color: $primary;
+    }
+
+    // Size variations
+    &.is-small {
+        + label {
+            font-size: $size-small;
+            padding-left: 1.5rem;
+
+            &::before {
+                width: 1rem;
+                height: 1rem;
+            }
+
+            &::after {
+                width: 0.5rem;
+                height: 0.5rem;
+                left: 0.25rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.75rem;
+            }
+        }
+    }
+
+    &.is-medium {
+        + label {
+            font-size: $size-medium;
+            padding-left: 2rem;
+
+            &::before {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+
+            &::after {
+                width: 0.75rem;
+                height: 0.75rem;
+                left: 0.375rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2.5rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.875rem;
+            }
+        }
+    }
+
+    &.is-large {
+        + label {
+            font-size: $size-large;
+            padding-left: 2.25rem;
+
+            &::before {
+                width: 1.75rem;
+                height: 1.75rem;
+            }
+
+            &::after {
+                width: 0.875rem;
+                height: 0.875rem;
+                left: 0.4375rem;
+            }
+        }
+
+        &.is-block + label {
+            padding-left: 2.75rem;
+
+            &::before {
+                left: 0.5rem;
+            }
+
+            &::after {
+                left: 0.9375rem;
+            }
+        }
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+
+        &.is-#{$name} {
+            &:checked + label::before {
+                border-color: $color;
+            }
+
+            &:checked + label::after {
+                background: $color;
+            }
+
+            &:focus + label::before {
+                border-color: $color;
+                box-shadow: 0 0 0 0.125em rgba($color, 0.25);
+            }
+
+            &.is-block:checked + label {
+                background: rgba($color, 0.1);
+            }
+
+            &.has-background-color:checked + label::before {
+                background: rgba($color, 0.15);
+                border-color: $color;
+            }
+
+            &.has-no-border:checked + label::before {
+                background: rgba($color, 0.2);
+            }
+        }
+    }
+}

package/components/primitives/radioGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/radioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/radioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/radioGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";