stargazer-ui 1.5.21 → 1.5.23

package/src/hooks/useScreenSize.ts

@@ -0,0 +1,24 @@
+import { useState, useMemo, useEffect} from "react"
+import { debounce } from "lodash"
+
+const useScreenSize = (debounceTime=25) => {
+    const [size, setSize]= useState({height: window.innerHeight, width: window.innerWidth})
+
+
+    const handleResize = ()=> {
+        setSize({height: window.innerHeight, width: window.innerWidth})
+    }
+    const handleResizeDebounced = useMemo(() => 
+        debounce(handleResize, debounceTime)
+    , [debounceTime] )
+
+	useEffect(() => {
+		window.addEventListener("resize", handleResizeDebounced, true)
+		return function cleanup() {
+			window.removeEventListener("resize", handleResizeDebounced, true)
+		}
+	}, [handleResizeDebounced])
+    return size
+}
+
+export default useScreenSize

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from "./Button"
+export * from "./ButtonGroup"
+export * from "./Card"
+export * from "./CloseButton"
+export * from "./Dropdown"
+export * from "./FloatingLabel"
+export * from "./Form"
+//export * from "./Grid"
+export * from "./InputGroup"
+export * from "./Modal"
+export * from "./Nav"
+export * from "./NavBar"
+export * from "./NavDropdown"
+//export * from "./OffCanvas"
+export * from "./Overlay"
+export * from "./Popout"
+export * from "./Spinner"
+export * from "./Table"
+export * from "./Tabs"
+export * from "./ToggleButton"
+export * from "./utils/BaseTypes"

package/src/styles/_Card.scss

@@ -0,0 +1,166 @@
+.sg-card {
+    --card-border-radius: 0rem;
+    --border-width: -2px;
+
+    --border-gradient-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
+    --border-gradient-mix-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
+
+    --background-gradient-color: #{$sg-nav-color};
+    --background-gradient-mix-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
+
+    --divider-color: #{$card-border-color};
+
+    display: flex;
+    flex-direction: column;
+    border: calc(var(--border-width) * -1) solid transparent;// $card-border-color;
+    position: relative;
+    
+    border-radius: var(--card-border-radius);
+    background: linear-gradient(71deg, 
+            var(--background-gradient-color), 
+            var(--background-gradient-mix-color), 
+            var(--background-gradient-color)
+        );
+    background-clip: padding-box;
+    &.sg-card-overlay {
+        color: $card-text-color;
+        border: 1px solid $card-border-color;
+    }
+
+    .sg-card-body {
+        flex: 1 1 auto;
+        padding: 1em;
+    }
+    
+    .sg-card-header {
+        margin-bottom: 0;
+        padding: 0.5em 1em;
+        border-bottom: 1px solid var(--divider-color);
+
+
+        &:first-child {
+            border-top-left-radius: var(--card-border-radius);
+            border-top-right-radius: var(--card-border-radius);
+        }
+    }
+    .sg-card-title {
+        margin: 0;
+    }
+
+    .sg-card-footer {
+        padding: 0.5em 1em;
+        border-top: 1px solid var(--divider-color);
+        &:last-child {
+            border-bottom-left-radius: var(--card-border-radius);
+            border-bottom-right-radius: var(--card-border-radius);
+        }
+    }
+    
+    .sg-card-text:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.sg-card::after {
+    position: absolute;
+    content: "";
+    top: var(--border-width);
+    bottom: var(--border-width);
+    right: var(--border-width);
+    left: var(--border-width);
+    z-index: -1;
+    border-radius: var(--card-border-radius);
+    background: linear-gradient(71deg, 
+            var(--border-gradient-color), 
+            var(--border-gradient-mix-color),
+            var(--border-gradient-color)
+        );
+}
+
+@mixin invertedColor($color) {
+    --border-gradient-color: color-mix(in srgb, #{$color}, black 30%);
+    --border-gradient-mix-color: #{$color};
+
+    --background-gradient-color:  color-mix(in srgb, #{$color}, black 0%);
+    --background-gradient-mix-color: #{$color};
+
+    --divider-color: color-mix(in srgb, #{$color}, black 15%);
+    //text-shadow: 2px -2px $color, 2px 2px $color, -2px 2px $color, -2px -2px $color;
+    /*
+    > h1, h2, h3, h4, h5, h6, span, p, small {
+        background-color: $color;
+        box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
+    }
+    */
+}
+
+.primary {
+    --border-gradient-mix-color: #{$danger};
+    grid-column:  2 / 3;
+    grid-row: 1;
+    &.inverted {
+        @include invertedColor($danger);
+        color: black;
+    }
+}
+.secondary {
+    --border-gradient-mix-color: #{$secondary};
+    grid-column:  4 / 5;
+    grid-row: 1;
+    &.inverted {
+        @include invertedColor($secondary);
+    }
+}
+.success {
+    --border-gradient-mix-color: #{$success};
+    grid-column:  6 / 7;
+    grid-row: 1;
+    &.inverted {
+        @include invertedColor($success);
+        color: black;
+    }
+}
+.info {
+    --border-gradient-mix-color: #{$info};
+    grid-column:  8 / 9;
+    grid-row: 1;
+    &.inverted {
+        @include invertedColor($info);
+        color: black;
+    }
+}
+.warning {
+    --border-gradient-mix-color: #{$warning};
+    grid-column:  2 / 3;
+    grid-row: 2;
+    &.inverted {
+        @include invertedColor($warning);
+        color: black;
+    }
+}
+.danger {
+    --border-gradient-mix-color: #{$primary};
+    grid-column:  4 / 5;
+    grid-row: 2;
+    &.inverted {
+        @include invertedColor($primary);
+        color: black;
+    }
+}
+.light {
+    --border-gradient-mix-color: #{$light};
+    grid-column:  6 / 7;
+    grid-row: 2;
+    &.inverted {
+        @include invertedColor($light);
+        color: black;
+    }
+}
+.dark {
+    --border-gradient-mix-color: #{$dark};
+    grid-column: 8 / 9;
+    grid-row: 2;
+    &.inverted {
+        @include invertedColor($dark);
+    }
+}

package/src/styles/_CloseButton.scss

@@ -0,0 +1,51 @@
+@use "functions";
+
+$sg-button-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+
+.sg-button-close {
+    box-sizing: content-box;
+    width: 1rem;
+    height: 1rem;
+    padding: 0.25rem 0.25rem;
+    color: black;
+    background: transparent $sg-button-close-bg center / 1rem auto no-repeat; // include transparent for button elements
+    border: 0; // for button elements
+    border-radius: 0.125rem;
+    opacity: 0.5;
+  
+    // Override <a>'s hover style
+    &:hover {
+      color: black;
+      text-decoration: none;
+      opacity: 0.75;
+    }
+    &:focus-visible, &:focus:not(:focus-visible) {
+        box-shadow: 0 0 0 3px black;
+        outline: 2px solid white;
+        opacity: 1;
+        z-index: 5;
+    }
+
+    &:disabled,
+    &.disabled {
+      pointer-events: none;
+      user-select: none;
+      opacity:0.25;
+    }
+  }
+  
+  .sg-button-close-white {
+    filter: invert(1) grayscale(100%) brightness(200%);
+  }
+
+.sg-close-visually-hidden-label {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0,0,0,0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+}

package/src/styles/_CustomButton.scss

@@ -0,0 +1,134 @@
+@use "sass:string";
+@use "sass:color";
+@use "sass:list";
+
+
+.sg-button {
+    --text-color: black;
+    --text-contrast: white;
+    --bg-color: rgb(252, 95, 95);
+    --border-color: var(--bg-color);
+    --bg-hover-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 15%) ;// color.mix(var(--text-color), var(--bg-color), 15%);
+    --border-hover-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 15%);
+    --bg-active-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 20%);
+    --border-active-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 20%);
+    --focus-visible-border-color: var(--text-contrast);
+    --focus-visible-outline-color: var(--bg-color);
+    --focus-visible-boxshadow-color: var(--text-contrast);
+
+    //border-radius: 0.375rem;
+    min-width: fit-content;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0.375em 0.5em;
+    font-size: 0.85rem;
+
+    background-color: var(--bg-color);
+    border: 2px outset color-mix(in oklab, var(--bg-color), var(--text-color) 20%);// 1px solid /*inset*/ var(--border-color);
+    color: var(--text-color);
+    &:hover {
+        background-color: var(--bg-hover-color);
+        border-color: var(--border-hover-color);
+    }
+    &:active{
+        background-color: var(--bg-active-color);
+        border-color: var(--border-active-color);
+        border-style: inset;
+    }
+    /*
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--focus-visible-boxshadow-color);
+        border: 1px solid var(--focus-visible-border-color);
+        outline: 2px solid var(--focus-visible-outline-color);
+        z-index: 5;
+    }
+    */
+}
+
+@each $name, $color in $colors {
+    $text-color: color-contrast($color);
+    $hover-background: if($text-color == $color-contrast-light, color.mix(black, $color, 15%), color.mix(white, $color, 15%));
+    $active-background: if($text-color == $color-contrast-light, color.mix(black, $color, 20%), color.mix(white, $color, 20%));
+    .sg-button-#{$name} {
+        --text-color: #{$text-color};
+        --bg-color: #{$color};
+        --border-color: #{$color};
+        --bg-hover-color: #{$hover-background};
+        --border-hover-color: #{$hover-background};
+        --bg-active-color: #{$active-background};
+        --border-active-color: #{$active-background};
+        --focus-visible-border-color: #{$text-color};
+        --focus-visible-outline-color: #{$color};
+        --focus-visible-boxshadow-color: #{$text-color};
+    }
+    .sg-button-group > .btn-#{$name} {
+        position: relative;
+        flex: 1 1 auto;
+    }
+}
+
+.sg-button-group, .sg-button-group-vertical {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    //width: 100%;
+    border-radius: 0.375rem;
+    //width: 100%;
+    > .sg-button {
+        position: relative;
+        flex: 1 1 auto;
+    }
+}
+.sg-button-group {
+    // Prevent double borders when buttons are next to each other
+    > :not(.sg-button-check:first-child) + .sg-button, > .sg-button-group:not(:first-child) {
+        margin-left: -1px;
+    }
+
+    // Reset rounded corners
+    > .sg-button:not(:last-child), > .sg-button-group:not(:last-child) > .sg-button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    // The left radius should be 0 if the button is:
+    // - the "third or more" child
+    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+    // - part of a btn-group which isn't the first child
+    > .sg-button:nth-child(n + 3), > :not(.sg-button-check) + .sg-button, > .sg-button-group:not(:first-child) > .sg-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.sg-button-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+  
+    
+    > .sg-button,
+    > .sg-button-group {
+      width: 100%;
+    }
+    
+    > .sg-button:not(:first-child),
+    > .sg-button-group:not(:first-child) {
+      margin-top: -1px;
+    }
+  
+    // Reset rounded corners
+    > .sg-button:not(:last-child):not(.dropdown-toggle),
+    > .sg-button-group:not(:last-child) > .sg-button {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+  
+    > .sg-button ~ .sg-button,
+    > .sg-button-group:not(:first-child) > .sg-button {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+  }
+

package/src/styles/_Dropdown.scss

@@ -0,0 +1,127 @@
+@use "sass:color";
+
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+  position: relative;
+}
+
+.sg-dropdown {
+  --sg-dropdown-list-bg: ${$sg-dropdown-list-bg};
+}
+
+.sg-dropdown-list {
+    --sg-dropdown-list-bg: #{$sg-dropdown-list-bg};
+    position: absolute;
+    z-index: $zindex-dropdown;
+    display: none; // none by default, but block on "open" of the menu
+    min-width: 10rem;
+    padding: 0;
+    margin: 0; // Override default margin of ul
+    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    list-style: none;
+    background-color: $sg-body-bg; //$sg-dropdown-list-bg;
+    color: white;
+    background-clip: padding-box;
+    border: 2px outset color-mix(in oklab, $sg-body-bg, white 60%);// white;
+  //border-radius: 0.375rem;
+}
+.sg-dropdown-list.show {
+  display: block;
+}
+
+.sg-dropdown-toggle {
+    position: relative;
+    white-space: nowrap;
+    
+    &::after {
+        display: inline-block;
+        margin-left: calc(0.3em * 0.85);
+        vertical-align: calc(0.3em * 0.85);
+        content: "";
+        border-top: 0.3em solid;
+        border-right: 0.3em solid transparent;
+        border-bottom: 0;
+        border-left: 0.3em solid transparent;
+    }
+    &[data-drop="up"]::after {
+      transform: rotate(180deg);
+    }
+    &[data-drop="right"]::after {
+      transform: rotate(270deg);
+    }
+    
+    &[data-drop="left"]::after {
+      display: none;
+    }
+    &[data-drop="left"]::before {
+      display: inline-block;
+      margin-right: calc(0.3em * 0.85);
+      vertical-align: calc(0.3em * 0.85);
+      content: "";
+      border-top: 0.3em solid;
+      border-right: 0.3em solid transparent;
+      border-bottom: 0;
+      border-left: 0.3em solid transparent;
+      transform: rotate(90deg);
+    }
+}
+
+.sg-dropdown-divider {
+  --line-color: rgba(0, 0, 0, 0.175);
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid var(--line-color);
+  opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
+}
+  
+  // Links, buttons, and more within the dropdown menu
+  //
+  // `<button>`-specific styles are denoted with `// For <button>s`
+.sg-dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: 0.25rem 0.5rem;
+  clear: both;
+  text-align: inherit; // For `<button>`s
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background-color: transparent; // For `<button>`s
+  color: inherit;
+  border: 2px solid transparent; // For `<button>`s
+
+  &.active,
+  &:active {
+      background-color: $sg-dropdown-item-action-bg;
+  }
+
+  &.disabled,
+  &:disabled {
+      background-color: $sg-dropdown-item-disabled-bg;
+      opacity: 0.5;
+  }
+  &.sg-dropdown-item-visual-focus {
+    /*
+    background-color: $sg-dropdown-item-hover-bg;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+    */
+    background-color: color-mix(in oklab, $input-background-color, white 20%);
+    &:active {
+        background-color: color-mix(in oklab, $input-background-color, white 25%);
+    }
+    //background-color: color-mix(in oklab, $danger, transparent 50%);
+    //border: 2px outset color-mix(in oklab, $danger, currentColor 20%)
+    //@include sg-focus-visible();
+  }
+}
+a.sg-dropdown-item {
+  cursor: pointer;
+  text-decoration: none;
+}
+[data-nav="true"] .sg-dropdown-item {
+  font-size: 0.85rem;
+}

package/src/styles/_FloatingLabel.scss

@@ -0,0 +1,56 @@
+.sg-form-floating {
+    position: relative;
+    --height: calc(3rem + 2px);
+    --text-color: #{$input-text-color};
+
+    > .sg-form-control, > .sg-form-control-plaintext, > .sg-form-select, > .sg-form-select-tag {
+        height: var(--height);
+        padding-inline: 1.25rem;
+        &::placeholder {
+            color: transparent;
+        }
+        &:focus, &:not(:placeholder-shown) {
+            padding-top: 1.25rem;
+        }
+        // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+        &:-webkit-autofill {
+            padding-top: 1.25rem;
+        }
+    }
+
+    > .sg-form-floating-label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: var(--text-color);
+        width: 100%;
+        height: 100%; // allow textareas
+        padding-inline: 1rem;
+        padding-block: 0.75rem;
+        pointer-events: none;
+        transition: transform 0.1s ease-in-out;
+        transform-origin: 0 0;
+        z-index: 5;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    > .sg-form-select {
+        padding-inline: 1rem;
+        padding-block: 1.5rem 0.5rem;
+    }
+
+    > .sg-form-control:focus, 
+    > .sg-form-control:not(:placeholder-shown), 
+    > .sg-form-control-plaintext, 
+    > .sg-form-select,
+    > .sg-form-select-tag {
+        ~ .sg-form-floating-label {
+            font-size: 0.75rem;
+            height: fit-content;
+            padding: 0.5rem 0.5rem;
+            transform: translate(0, -0.25rem);
+            opacity: 0.75;
+        }
+    }
+}

package/src/styles/_Forms.scss

@@ -0,0 +1,7 @@
+@import "forms/FormCheck";
+@import "forms/FormControl";
+@import "forms/FormGroup";
+@import "forms/FormLabel";
+@import "forms/FormSlider";
+@import "forms/FormSelect";
+@import "forms/FormText";