boreal-ui 0.0.76 → 0.0.78

package/dist/next/Chip.css

@@ -0,0 +1,598 @@
+@charset "UTF-8";
+/**
+ * ---------------------------------------------------------------------
+ * theme.scss
+ * ---------------------------------------------------------------------
+ * Global design tokens and theme configuration for the Boreal UI system.
+ * This file defines SCSS variables, maps, and constants for:
+ * - Colors (brand, background, feedback, text)
+ * - Fonts (families, sizes, weights)
+ * - Spacing
+ * - Border radii
+ * - Shadows
+ * - Transitions
+ * - Z-index layers
+ * - Thematic color maps
+ * - UI states (success, error, warning)
+ * - Rounding and shadow presets
+ * 
+ * All variables support the `!default` flag to allow overrides via user-defined themes.
+ * ---------------------------------------------------------------------
+ *
+ * == Color Palette ==
+ * $primary-color           – Brand primary color
+ * $secondary-color         – Secondary accent color
+ * $tertiary-color          – Alternate accent color
+ * $quaternary-color        – Alternate accent color
+ * $background-color        – Main background color (dark)
+ * $background-color-surface – Surface layer background (cards, modals)
+ * $error-color, $success-color, $warning-color – Feedback states
+ * $link-color              – Link default color
+ * $link-hover-color        – Link hover state
+ * $text-color, $text-color-light, $text-color-primary, $text-color-secondary – Text coloring
+ *
+ * == Typography ==
+ * $font-family-primary / secondary – Primary typefaces
+ * $font-size-xxs to $font-size-xxl – Font size scale
+ * $font-weight-light to bolder     – Font weights
+ *
+ * == Spacing ==
+ * $spacing-xxs to $spacing-xl – Margin/padding utility scale
+ *
+ * == Border Radius ==
+ * $border-radius-xs to full  – Border rounding presets
+ *
+ * == Shadows ==
+ * $box-shadow-light to intense – Shadow elevation levels
+ * $inverted-shadows            – Shadows used on dark surfaces (e.g. modals)
+ *
+ * == Transitions ==
+ * $transition-fast / default / slow – Standard easing transitions
+ *
+ * == Z-Index Layers ==
+ * $z-index-drawer   – For slide-out panels
+ * $z-index-modal    – For modals and overlays
+ * $z-index-tooltip  – Highest layer for tooltips and floating labels
+ *
+ * == Theme Map ==
+ * $themes: map of theme names (e.g. "primary", "secondary") to their visual styles
+ *  - Each theme includes: bg, hover, text, border, text-hover
+ *
+ * == State Map ==
+ * $states: visual styles for UI feedback states (success, error, warning)
+ *
+ * == Rounding / Shadow Maps ==
+ * $rounding: key-value pairs for component rounding levels
+ * $shadow: key-value pairs for shadow levels
+ */
+/**
+ * -----------------------------------------------------
+ * _breakpoints.scss
+ * -----------------------------------------------------
+ * These constants define the standard device-width breakpoints
+ * used in responsive media queries throughout the theme.
+ *
+ * - $breakpoint-xs: 320px  (Extra small, portrait phones)
+ * - $breakpoint-sm: 480px  (Small devices, larger phones)
+ * - $breakpoint-md: 768px  (Medium devices, tablets)
+ * - $breakpoint-lg: 1024px (Large devices, desktops)
+ * - $breakpoint-xl: 1280px (Extra large desktops)
+ * - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+ *
+ * $breakpoints map:
+ *  Use this map to loop over breakpoints or access named values.
+ */
+/**
+ * -----------------------------------------------------
+ * _animations.scss
+ * -----------------------------------------------------
+ * This file contains reusable keyframe animations
+ * used across the component library for transitions,
+ * loaders, and visual enhancements.
+ *
+ * List of Animations:
+ *
+ * 1. fade-in
+ *    - Smoothly fades in an element by transitioning opacity from 0 to 1.
+ *
+ * 2. slide-up
+ *    - Slides an element upward into view from below while fading in.
+ *
+ * 3. spin-3d
+ *    - Rotates an element in 3D space along both X and Y axes (360°).
+ *
+ * 4. spin
+ *    - Continuously rotates an element clockwise in 2D space.
+ *
+ * 5. pulse
+ *    - Gently scales an element up and down to create a pulsing effect.
+ *
+ * 6. fade-in-up
+ *    - Combines a fade-in with a slight upward motion (used for tooltips, popups).
+ *
+ * 7. progress-grow
+ *    - Expands the width of a progress bar from 0% to 100%.
+ *
+ * 8. indeterminate-move
+ *    - Moves an element from left to right in a loop, used in indeterminate loaders.
+ *
+ * 9. skeleton-loading
+ *    - Creates a sweeping shimmer effect for skeleton loaders.
+ */
+@keyframes _fade-in_ok3go_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _slide-up_ok3go_1 {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes _spin-3d_ok3go_1 {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+@keyframes _spin_ok3go_1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes _pulse_ok3go_1 {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes _fade-in-up_ok3go_1 {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes _progress-grow_ok3go_1 {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes _indeterminate-move_ok3go_1 {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes _skeleton-loading_ok3go_1 {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+._chip_ok3go_204 {
+  position: relative;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--font-family-ui);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+  max-width: 90vw;
+  width: fit-content;
+  min-width: 180px;
+  opacity: 1;
+  text-align: center;
+  animation: _fade-in_ok3go_1 0.3s ease-out;
+  transition: transform var(--transition-default), opacity var(--transition-default), box-shadow var(--transition-default);
+}
+@media (width <= 479.98px) {
+  ._chip_ok3go_204 {
+    min-width: 150px;
+    max-width: 96vw;
+  }
+}
+@media (min-width: 1024px) {
+  ._chip_ok3go_204 {
+    min-width: 220px;
+    max-width: 70vw;
+  }
+}
+._chip_ok3go_204._roundNone_ok3go_235 {
+  border-radius: var(--border-radius-none);
+}
+._chip_ok3go_204._roundSmall_ok3go_238 {
+  border-radius: var(--border-radius-sm);
+}
+._chip_ok3go_204._roundMedium_ok3go_241 {
+  border-radius: var(--border-radius-md);
+}
+._chip_ok3go_204._roundLarge_ok3go_244 {
+  border-radius: var(--border-radius-lg);
+}
+._chip_ok3go_204._roundFull_ok3go_247 {
+  border-radius: var(--border-radius-full);
+}
+._chip_ok3go_204._shadowNone_ok3go_250 {
+  box-shadow: var(--box-shadow-none);
+}
+._chip_ok3go_204._shadowLight_ok3go_253 {
+  box-shadow: var(--box-shadow-light);
+}
+._chip_ok3go_204._shadowMedium_ok3go_256 {
+  box-shadow: var(--box-shadow-medium);
+}
+._chip_ok3go_204._shadowStrong_ok3go_259 {
+  box-shadow: var(--box-shadow-heavy);
+}
+._chip_ok3go_204._shadowIntense_ok3go_262 {
+  box-shadow: var(--box-shadow-intense);
+}
+._chip_ok3go_204:focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 3px;
+}
+
+._fixed_ok3go_270 {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+._fadeout_ok3go_276 {
+  opacity: 0;
+  transform: translate(-50%, -10px);
+}
+
+._topCenter_ok3go_281 {
+  top: 20px;
+}
+
+._bottomCenter_ok3go_285 {
+  bottom: 20px;
+}
+
+._topLeft_ok3go_289 {
+  top: 20px;
+  left: 20px;
+  transform: none;
+}
+
+._topRight_ok3go_295 {
+  top: 20px;
+  right: 20px;
+  left: auto;
+  transform: none;
+}
+
+._bottomLeft_ok3go_302 {
+  bottom: 20px;
+  left: 20px;
+  transform: none;
+}
+
+._bottomRight_ok3go_308 {
+  bottom: 20px;
+  right: 20px;
+  left: auto;
+  transform: none;
+}
+
+._primary_ok3go_315 {
+  background-color: var(--primary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--primary-color);
+}
+._primary_ok3go_315:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 3px;
+}
+
+._secondary_ok3go_325 {
+  background-color: var(--secondary-color);
+  color: var(--text-color-secondary);
+  border: 1px solid var(--secondary-color);
+}
+._secondary_ok3go_325:focus-visible {
+  outline: 2px solid var(--secondary-color);
+  outline-offset: 3px;
+}
+
+._tertiary_ok3go_335 {
+  background-color: var(--tertiary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--tertiary-color);
+}
+._tertiary_ok3go_335:focus-visible {
+  outline: 2px solid var(--tertiary-color);
+  outline-offset: 3px;
+}
+
+._quaternary_ok3go_345 {
+  background-color: var(--quaternary-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--quaternary-color);
+}
+._quaternary_ok3go_345:focus-visible {
+  outline: 2px solid var(--quaternary-color);
+  outline-offset: 3px;
+}
+
+._clear_ok3go_355 {
+  background-color: transparent;
+  color: var(--text-color-primary);
+  border: 1px solid var(--text-color-primary);
+}
+._clear_ok3go_355:focus-visible {
+  outline: 2px solid var(--text-color-primary);
+  outline-offset: 3px;
+}
+
+._success_ok3go_365 {
+  background-color: var(--success-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--success-color);
+}
+._success_ok3go_365:focus-visible {
+  outline: 2px solid var(--success-color);
+  outline-offset: 3px;
+}
+
+._error_ok3go_375 {
+  background-color: var(--error-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--error-color);
+}
+._error_ok3go_375:focus-visible {
+  outline: 2px solid var(--error-color);
+  outline-offset: 3px;
+}
+
+._warning_ok3go_385 {
+  background-color: var(--warning-color);
+  color: var(--text-color-primary);
+  border: 1px solid var(--warning-color);
+}
+._warning_ok3go_385:focus-visible {
+  outline: 2px solid var(--warning-color);
+  outline-offset: 3px;
+}
+
+._icon_ok3go_395 {
+  margin-right: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  margin-top: -0.1em;
+}
+@media (width <= 479.98px) {
+  ._icon_ok3go_395 {
+    margin-right: var(--spacing-xs);
+  }
+}
+@media (min-width: 1024px) {
+  ._icon_ok3go_395 {
+    margin-right: var(--spacing-md);
+  }
+}
+
+._message_ok3go_412 {
+  flex-grow: 1;
+  margin-right: 12px;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+@media (width <= 479.98px) {
+  ._message_ok3go_412 {
+    margin-right: var(--spacing-xs);
+  }
+}
+@media (min-width: 1024px) {
+  ._message_ok3go_412 {
+    margin-right: var(--spacing-sm);
+  }
+}
+
+._icon_inner_ok3go_430 {
+  height: 1em;
+  width: 1em;
+}
+
+._xs_ok3go_435 {
+  padding: 5px 9px;
+  height: 20px;
+}
+._xs_ok3go_435 ._message_ok3go_412 {
+  font-size: var(--font-size-caption);
+}
+._xs_ok3go_435 ._icon_inner_ok3go_430 {
+  height: 0.8rem;
+  width: 0.8rem;
+}
+@media (width <= 479.98px) {
+  ._xs_ok3go_435 ._message_ok3go_412 {
+    font-size: var(--font-size-caption);
+  }
+  ._xs_ok3go_435 {
+    padding: 5px 10px;
+  }
+}
+@media (min-width: 1024px) {
+  ._xs_ok3go_435 ._message_ok3go_412 {
+    font-size: calc(var(--font-size-caption) * 1.05);
+  }
+  ._xs_ok3go_435 {
+    padding: 8px 14px;
+  }
+}
+
+._small_ok3go_463 {
+  padding: 6px 10px;
+  height: 20px;
+}
+._small_ok3go_463 ._message_ok3go_412 {
+  font-size: var(--font-size-label);
+}
+._small_ok3go_463 ._icon_inner_ok3go_430 {
+  height: 0.9rem;
+  width: 0.9rem;
+}
+@media (width <= 479.98px) {
+  ._small_ok3go_463 ._message_ok3go_412 {
+    font-size: var(--font-size-label);
+  }
+  ._small_ok3go_463 {
+    padding: 5px 10px;
+  }
+}
+@media (min-width: 1024px) {
+  ._small_ok3go_463 ._message_ok3go_412 {
+    font-size: calc(var(--font-size-label) * 1.05);
+  }
+  ._small_ok3go_463 {
+    padding: 8px 14px;
+  }
+}
+
+._medium_ok3go_491 {
+  padding: 6px 12px;
+}
+._medium_ok3go_491 ._message_ok3go_412 {
+  font-size: var(--font-size-body-sm);
+}
+._medium_ok3go_491 ._icon_inner_ok3go_430 {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+@media (width <= 479.98px) {
+  ._medium_ok3go_491 ._message_ok3go_412 {
+    font-size: var(--font-size-body-sm);
+  }
+  ._medium_ok3go_491 {
+    padding: 5px 10px;
+  }
+}
+@media (min-width: 1024px) {
+  ._medium_ok3go_491 ._message_ok3go_412 {
+    font-size: calc(var(--font-size-body-sm) * 1.05);
+  }
+  ._medium_ok3go_491 {
+    padding: 8px 14px;
+  }
+}
+
+._large_ok3go_518 {
+  padding: 6px 14px;
+}
+._large_ok3go_518 ._message_ok3go_412 {
+  font-size: var(--font-size-body);
+}
+._large_ok3go_518 ._icon_inner_ok3go_430 {
+  height: 1.3rem;
+  width: 1.3rem;
+}
+@media (width <= 479.98px) {
+  ._large_ok3go_518 ._message_ok3go_412 {
+    font-size: var(--font-size-body);
+  }
+  ._large_ok3go_518 {
+    padding: 5px 10px;
+  }
+}
+@media (min-width: 1024px) {
+  ._large_ok3go_518 ._message_ok3go_412 {
+    font-size: calc(var(--font-size-body) * 1.05);
+  }
+  ._large_ok3go_518 {
+    padding: 8px 14px;
+  }
+}
+
+._xl_ok3go_545 {
+  padding: 10px 18px;
+}
+._xl_ok3go_545 ._message_ok3go_412 {
+  font-size: var(--font-size-h6);
+}
+._xl_ok3go_545 ._icon_inner_ok3go_430 {
+  height: 2rem;
+  width: 2rem;
+}
+@media (width <= 479.98px) {
+  ._xl_ok3go_545 ._message_ok3go_412 {
+    font-size: var(--font-size-h6);
+  }
+  ._xl_ok3go_545 {
+    padding: 5px 10px;
+  }
+}
+@media (min-width: 1024px) {
+  ._xl_ok3go_545 ._message_ok3go_412 {
+    font-size: calc(var(--font-size-h6) * 1.05);
+  }
+  ._xl_ok3go_545 {
+    padding: 8px 14px;
+    padding: 12px 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._chip_ok3go_204,
+  ._chip_ok3go_204 * {
+    animation: none !important;
+    transition: none !important;
+  }
+  ._chip_ok3go_204:hover {
+    transform: none !important;
+    box-shadow: none !important;
+  }
+}
+@media (hover: none) {
+  ._chip_ok3go_204:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+@media (forced-colors: active) {
+  ._chip_ok3go_204 {
+    border: 1px solid ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    outline-color: Highlight;
+    box-shadow: none !important;
+  }
+}

package/dist/next/Chip.js

@@ -1,4 +1,4 @@
-import { C } from "./Chip-Cg7khsSn.js";
+import { C } from "./Chip-D-QH1huh.js";
 export {
   C as default
 };

package/dist/next/{CircularProgress-CzFUYDX1.cjs → CircularProgress-BG83Q-uO.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const require$$2 = require("react/jsx-runtime");
+require('./CircularProgress.css');const require$$2 = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
@@ -102,41 +102,31 @@ const CircularProgressBase = ({
   );
 };
 CircularProgressBase.displayName = "CircularProgressBase";
-const noScroll = "_noScroll_1fd21_109";
-const errorMessage = "_errorMessage_1fd21_110";
-const loadingContainer = "_loadingContainer_1fd21_111";
-const hideScrollbar = "_hideScrollbar_1fd21_103";
-const sr_only = "_sr_only_1fd21_112";
-const circular_progress = "_circular_progress_1fd21_637";
-const circle_border = "_circle_border_1fd21_642";
-const inner_circle = "_inner_circle_1fd21_655";
-const primary = "_primary_1fd21_677";
-const secondary = "_secondary_1fd21_680";
-const tertiary = "_tertiary_1fd21_683";
-const quaternary = "_quaternary_1fd21_686";
-const clear = "_clear_1fd21_689";
-const success = "_success_1fd21_692";
-const error = "_error_1fd21_110";
-const warning = "_warning_1fd21_698";
-const shadowNone = "_shadowNone_1fd21_702";
-const shadowLight = "_shadowLight_1fd21_706";
-const shadowMedium = "_shadowMedium_1fd21_710";
-const shadowStrong = "_shadowStrong_1fd21_714";
-const shadowIntense = "_shadowIntense_1fd21_718";
-const xs = "_xs_1fd21_722";
-const value_text = "_value_text_1fd21_738";
-const small = "_small_1fd21_765";
-const medium = "_medium_1fd21_808";
-const large = "_large_1fd21_851";
-const xl = "_xl_1fd21_894";
-const spin = "_spin_1fd21_1";
-const pulse = "_pulse_1fd21_1";
+const circular_progress = "_circular_progress_vyn3b_204";
+const circle_border = "_circle_border_vyn3b_209";
+const inner_circle = "_inner_circle_vyn3b_222";
+const primary = "_primary_vyn3b_244";
+const secondary = "_secondary_vyn3b_247";
+const tertiary = "_tertiary_vyn3b_250";
+const quaternary = "_quaternary_vyn3b_253";
+const clear = "_clear_vyn3b_256";
+const success = "_success_vyn3b_259";
+const error = "_error_vyn3b_262";
+const warning = "_warning_vyn3b_265";
+const shadowNone = "_shadowNone_vyn3b_269";
+const shadowLight = "_shadowLight_vyn3b_273";
+const shadowMedium = "_shadowMedium_vyn3b_277";
+const shadowStrong = "_shadowStrong_vyn3b_281";
+const shadowIntense = "_shadowIntense_vyn3b_285";
+const xs = "_xs_vyn3b_289";
+const value_text = "_value_text_vyn3b_305";
+const small = "_small_vyn3b_332";
+const medium = "_medium_vyn3b_375";
+const large = "_large_vyn3b_418";
+const xl = "_xl_vyn3b_461";
+const spin = "_spin_vyn3b_1";
+const pulse = "_pulse_vyn3b_1";
 const styles = {
-  noScroll,
-  errorMessage,
-  loadingContainer,
-  hideScrollbar,
-  sr_only,
   circular_progress,
   circle_border,
   inner_circle,
@@ -159,17 +149,17 @@ const styles = {
   medium,
   large,
   xl,
-  "fade-in": "_fade-in_1fd21_1",
-  "slide-up": "_slide-up_1fd21_1",
-  "spin-3d": "_spin-3d_1fd21_1",
+  "fade-in": "_fade-in_vyn3b_1",
+  "slide-up": "_slide-up_vyn3b_1",
+  "spin-3d": "_spin-3d_vyn3b_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1fd21_1",
-  "progress-grow": "_progress-grow_1fd21_1",
-  "indeterminate-move": "_indeterminate-move_1fd21_1",
-  "skeleton-loading": "_skeleton-loading_1fd21_1"
+  "fade-in-up": "_fade-in-up_vyn3b_1",
+  "progress-grow": "_progress-grow_vyn3b_1",
+  "indeterminate-move": "_indeterminate-move_vyn3b_1",
+  "skeleton-loading": "_skeleton-loading_vyn3b_1"
 };
 const CircularProgress = (props) => /* @__PURE__ */ require$$2.jsx(CircularProgressBase, { ...props, classMap: styles });
 CircularProgress.displayName = "CircularProgress";
 exports.CircularProgress = CircularProgress;
-//# sourceMappingURL=CircularProgress-CzFUYDX1.cjs.map
+//# sourceMappingURL=CircularProgress-BG83Q-uO.cjs.map