@bodynarf/react.components 1.14.0 → 1.14.2

package/components/progress/component/style.scss

@@ -1,18 +1,23 @@
-// Bulma variables
-$black: #0a0a0a !default;
-$white: #fff !default;
-$light: #f5f5f5 !default;
-$dark: #363636 !default;
-$primary: #485fc7 !default;
-$link: #485fc7 !default;
-$info: #3e8ed0 !default;
-$success: #48c78e !default;
-$warning: #ffe08a !default;
-$danger: #f14668 !default;
-$text: #4a4a4a !default;
-$background: #f5f5f5 !default;
-$radius: 4px !default;
-$speed: 0.25s !default;
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$black: var(--bulma-black, #0a0a0a);
+$white: var(--bulma-white, #fff);
+$light: var(--bulma-light, #f5f5f5);
+$dark: var(--bulma-dark, #363636);
+$primary: var(--bulma-primary, #00d1b2);
+$link: var(--bulma-link, #485fc7);
+$info: var(--bulma-info, #3e8ed0);
+$success: var(--bulma-success, #48c78e);
+$warning: var(--bulma-warning, #ffe08a);
+$danger: var(--bulma-danger, #f14668);
+$text: var(--bulma-text, #4a4a4a);
+$background: var(--bulma-background, #f5f5f5);
+$radius: var(--bulma-radius, 4px);
+$speed: var(--bulma-speed, 0.25s);
 
 $size-small: 0.75rem !default;
 $size-normal: 1rem !default;

package/components/search/component/style.css

@@ -0,0 +1,18 @@
+.bbr-search input[type=search] {
+  transition: 0.15s ease-out;
+  transition-property: border-color, color, background-color;
+}
+.bbr-search input[type=search]::placeholder {
+  user-select: none;
+}
+.bbr-search input[type=search]::-webkit-input-placeholder {
+  transition: 0.15s ease-out color;
+}
+.bbr-search input[type=search]::-webkit-search-cancel-button {
+  cursor: pointer;
+  font-size: 1.25rem;
+}
+.bbr-search.is-loading::after {
+  right: 1rem;
+  top: 0.725rem;
+}

package/components/stepper/component/style.css

@@ -0,0 +1,418 @@
+@keyframes stepper-connector-fill {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+.bbr-stepper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+.bbr-stepper.is-vertical {
+  flex-direction: column;
+}
+.bbr-stepper.is-vertical .bbr-stepper-step {
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-bottom: 1.5rem;
+}
+.bbr-stepper.is-vertical .bbr-stepper-step:last-child {
+  padding-bottom: 0;
+}
+.bbr-stepper.is-vertical .bbr-stepper-content {
+  margin-top: 0;
+  margin-left: 1rem;
+  text-align: left;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector {
+  position: absolute;
+  left: calc(1.25rem - 1px);
+  top: 2.5rem;
+  width: 2px;
+  height: calc(100% - 2.5rem + 0.5rem);
+  right: auto;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow {
+  height: calc(100% - 2.5rem);
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow::after {
+  right: auto;
+  left: 50%;
+  top: auto;
+  bottom: -6px;
+  transform: translateX(-50%);
+  border-top: 6px solid var(--bulma-grey-lighter, #dbdbdb);
+  border-bottom: none;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::after {
+  border-top-color: var(--bulma-primary, #00d1b2);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-vertical.is-small .bbr-stepper-connector {
+  left: calc(1rem - 1px);
+  top: 2rem;
+  height: calc(100% - 2rem + 0.5rem);
+}
+.bbr-stepper.is-vertical.is-medium .bbr-stepper-connector {
+  left: calc(1.5rem - 1px);
+  top: 3rem;
+  height: calc(100% - 3rem + 0.5rem);
+}
+.bbr-stepper.is-vertical.is-large .bbr-stepper-connector {
+  left: calc(1.75rem - 1px);
+  top: 3.5rem;
+  height: calc(100% - 3.5rem + 0.5rem);
+}
+.bbr-stepper .bbr-stepper-step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 0 0.5rem;
+}
+.bbr-stepper .bbr-stepper-step:first-child {
+  padding-left: 0;
+}
+.bbr-stepper .bbr-stepper-step:last-child {
+  padding-right: 0;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable {
+  cursor: pointer;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable .bbr-stepper-marker {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.bbr-stepper .bbr-stepper-step.is-clickable:hover .bbr-stepper-marker {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-primary, #00d1b2);
+  border: 2px solid var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper .bbr-stepper-step.is-completed .bbr-stepper-title {
+  color: var(--bulma-grey-dark, #4a4a4a);
+  font-weight: 500;
+}
+.bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-marker {
+  background: var(--bulma-white, #fff);
+  border: 2px solid var(--bulma-primary, #00d1b2);
+  color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-primary, #00d1b2), 0.2);
+}
+.bbr-stepper .bbr-stepper-step.is-current .bbr-stepper-title {
+  color: var(--bulma-grey-darker, #363636);
+  font-weight: 600;
+}
+.bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-marker {
+  background: var(--bulma-white, #fff);
+  border: 2px solid var(--bulma-grey-lighter, #dbdbdb);
+  color: var(--bulma-grey, #7a7a7a);
+}
+.bbr-stepper .bbr-stepper-step.is-upcoming .bbr-stepper-title {
+  color: var(--bulma-grey, #7a7a7a);
+}
+.bbr-stepper .bbr-stepper-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  z-index: 1;
+  flex-shrink: 0;
+}
+.bbr-stepper .bbr-stepper-number,
+.bbr-stepper .bbr-stepper-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bbr-stepper .bbr-stepper-content {
+  margin-top: 0.75rem;
+  text-align: center;
+}
+.bbr-stepper .bbr-stepper-title {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  transition: color 0.2s ease;
+}
+.bbr-stepper .bbr-stepper-description {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--bulma-grey, #7a7a7a);
+  line-height: 1.25;
+}
+.bbr-stepper .bbr-stepper-connector {
+  position: absolute;
+  top: calc(1.25rem - 1px);
+  left: calc(50% + 1.25rem + 0.25rem);
+  right: calc(-50% + 1.25rem + 0.25rem);
+  height: 2px;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  z-index: 0;
+}
+.bbr-stepper .bbr-stepper-connector.is-completed {
+  background: var(--bulma-primary, #00d1b2);
+}
+.bbr-stepper .bbr-stepper-connector.is-hidden {
+  display: none;
+}
+.bbr-stepper .bbr-stepper-connector.has-arrow::before {
+  content: "";
+  position: absolute;
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid var(--bulma-grey-lighter, #dbdbdb);
+  z-index: 2;
+}
+.bbr-stepper .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow::before {
+  right: auto;
+  top: auto;
+  left: 50%;
+  bottom: -6px;
+  transform: translateX(-50%);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--bulma-grey-lighter, #dbdbdb);
+  border-bottom: none;
+}
+.bbr-stepper.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-primary, #00d1b2);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-animated .bbr-stepper-connector.is-completed {
+  position: relative;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+}
+.bbr-stepper.is-animated .bbr-stepper-connector.is-completed::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--bulma-primary, #00d1b2);
+  animation: stepper-connector-fill 0.5s ease forwards;
+}
+.bbr-stepper.is-animated.is-vertical .bbr-stepper-connector.is-completed::after {
+  width: 100%;
+  height: 0;
+  animation: none;
+}
+@keyframes stepper-connector-fill-vertical {
+  from {
+    height: 0;
+  }
+  to {
+    height: 100%;
+  }
+}
+.bbr-stepper.is-animated.is-vertical .bbr-stepper-connector.is-completed::after {
+  animation: stepper-connector-fill-vertical 0.5s ease forwards;
+}
+.bbr-stepper.is-small .bbr-stepper-marker {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+}
+.bbr-stepper.is-small .bbr-stepper-title {
+  font-size: 0.75rem;
+}
+.bbr-stepper.is-small .bbr-stepper-description {
+  font-size: 0.625rem;
+}
+.bbr-stepper.is-small .bbr-stepper-connector {
+  top: calc(1rem - 1px);
+  left: calc(50% + 1rem + 0.25rem);
+  right: calc(-50% + 1rem + 0.25rem);
+}
+.bbr-stepper.is-medium .bbr-stepper-marker {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.25rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-title {
+  font-size: 1rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-description {
+  font-size: 0.875rem;
+}
+.bbr-stepper.is-medium .bbr-stepper-connector {
+  top: calc(1.5rem - 1px);
+  left: calc(50% + 1.5rem + 0.25rem);
+  right: calc(-50% + 1.5rem + 0.25rem);
+}
+.bbr-stepper.is-large .bbr-stepper-marker {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.5rem;
+}
+.bbr-stepper.is-large .bbr-stepper-title {
+  font-size: 1.125rem;
+}
+.bbr-stepper.is-large .bbr-stepper-description {
+  font-size: 1rem;
+}
+.bbr-stepper.is-large .bbr-stepper-connector {
+  top: calc(1.75rem - 1px);
+  left: calc(50% + 1.75rem + 0.25rem);
+  right: calc(-50% + 1.75rem + 0.25rem);
+}
+.bbr-stepper.is-primary .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-primary, #00d1b2);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper.is-primary .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-primary, #00d1b2), 0.2);
+}
+.bbr-stepper.is-primary .bbr-stepper-connector.is-completed {
+  background: var(--bulma-primary, #00d1b2);
+}
+.bbr-stepper.is-primary .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-stepper.is-primary.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.bbr-stepper.is-primary.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-primary, #00d1b2);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-link .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-link, #485fc7);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper.is-link .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-link, #485fc7), 0.2);
+}
+.bbr-stepper.is-link .bbr-stepper-connector.is-completed {
+  background: var(--bulma-link, #485fc7);
+}
+.bbr-stepper.is-link .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-link, #485fc7);
+}
+.bbr-stepper.is-link.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-link, #485fc7);
+}
+.bbr-stepper.is-link.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-link, #485fc7);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-info .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-info, #3e8ed0);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper.is-info .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-info, #3e8ed0), 0.2);
+}
+.bbr-stepper.is-info .bbr-stepper-connector.is-completed {
+  background: var(--bulma-info, #3e8ed0);
+}
+.bbr-stepper.is-info .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-info, #3e8ed0);
+}
+.bbr-stepper.is-info.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-info, #3e8ed0);
+}
+.bbr-stepper.is-info.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-info, #3e8ed0);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-success .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-success, #48c78e);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper.is-success .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-success, #48c78e), 0.2);
+}
+.bbr-stepper.is-success .bbr-stepper-connector.is-completed {
+  background: var(--bulma-success, #48c78e);
+}
+.bbr-stepper.is-success .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-success, #48c78e);
+}
+.bbr-stepper.is-success.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-success, #48c78e);
+}
+.bbr-stepper.is-success.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-success, #48c78e);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-warning .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-warning, #ffe08a);
+  border-color: var(--bulma-warning, #ffe08a);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-stepper.is-warning .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-warning, #ffe08a);
+  color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-warning, #ffe08a), 0.2);
+}
+.bbr-stepper.is-warning .bbr-stepper-connector.is-completed {
+  background: var(--bulma-warning, #ffe08a);
+}
+.bbr-stepper.is-warning .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-warning, #ffe08a);
+}
+.bbr-stepper.is-warning.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-warning, #ffe08a);
+}
+.bbr-stepper.is-warning.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-warning, #ffe08a);
+  border-left-color: transparent;
+}
+.bbr-stepper.is-danger .bbr-stepper-step.is-completed .bbr-stepper-marker {
+  background: var(--bulma-danger, #f14668);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-white, #fff);
+}
+.bbr-stepper.is-danger .bbr-stepper-step.is-current .bbr-stepper-marker {
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 4px rgba(var(--bulma-danger, #f14668), 0.2);
+}
+.bbr-stepper.is-danger .bbr-stepper-connector.is-completed {
+  background: var(--bulma-danger, #f14668);
+}
+.bbr-stepper.is-danger .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-left-color: var(--bulma-danger, #f14668);
+}
+.bbr-stepper.is-danger.is-animated .bbr-stepper-connector.is-completed::after {
+  background: var(--bulma-danger, #f14668);
+}
+.bbr-stepper.is-danger.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+  border-top-color: var(--bulma-danger, #f14668);
+  border-left-color: transparent;
+}

package/components/stepper/component/style.scss

@@ -1,3 +1,29 @@
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$grey-dark: var(--bulma-grey-dark, #4a4a4a);
+$grey-darker: var(--bulma-grey-darker, #363636);
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
+
 $stepper-marker-size: 2.5rem !default;
 $stepper-marker-size-small: 2rem !default;
 $stepper-marker-size-medium: 3rem !default;
@@ -387,8 +413,8 @@ $stepper-description-color: $grey !default;
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
 
         &.is-#{$name} {
             .bbr-stepper-step.is-completed {

package/components/table/component/style.css

@@ -0,0 +1,14 @@
+table.bbr-table.has-sticky-header thead th {
+  position: sticky;
+  top: 0.125rem;
+  z-index: 1;
+}
+table.bbr-table.has-shadow-bordered-header thead th {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+table.bbr-table.has-borderless-header thead th {
+  border: none !important;
+}
+table.bbr-table.has-borderless-header tbody tr:nth-child(1) td {
+  border-top: none !important;
+}

package/components/tabs/component/style.css

@@ -0,0 +1,6 @@
+.bbr-tabs__tab .bbr-icon:first-child {
+  margin-right: 0.5rem;
+}
+.bbr-tabs__tab .bbr-icon:last-child {
+  margin-left: 0.5rem;
+}

package/components/tag/component/style.css

@@ -0,0 +1,19 @@
+.bbr-tag {
+  border: 1px solid transparent;
+  transition: border-color 0.15s ease-in-out;
+}
+.bbr-tag.is-clickable {
+  cursor: pointer;
+}
+.bbr-tag.is-clickable.is-light:hover {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.bbr-tag.is-clickable.is-light:focus, .bbr-tag.is-clickable.is-light:active {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+.bbr-tag.is-clickable:not(.is-light):hover {
+  border-color: rgba(0, 0, 0, 0.35);
+}
+.bbr-tag.is-clickable:not(.is-light):focus, .bbr-tag.is-clickable:not(.is-light):active {
+  border-color: rgba(0, 0, 0, 0.75);
+}