@kolking/react-ui 1.0.0

package/dist/index-DyIdU--j.js

@@ -0,0 +1,45 @@
+import { g as c } from "./_commonjsHelpers-B52_cu2H.js";
+var s = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var a;
+function p() {
+  return a || (a = 1, function(o) {
+    (function() {
+      var f = {}.hasOwnProperty;
+      function e() {
+        for (var t = "", r = 0; r < arguments.length; r++) {
+          var n = arguments[r];
+          n && (t = i(t, u(n)));
+        }
+        return t;
+      }
+      function u(t) {
+        if (typeof t == "string" || typeof t == "number")
+          return t;
+        if (typeof t != "object")
+          return "";
+        if (Array.isArray(t))
+          return e.apply(null, t);
+        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+          return t.toString();
+        var r = "";
+        for (var n in t)
+          f.call(t, n) && t[n] && (r = i(r, n));
+        return r;
+      }
+      function i(t, r) {
+        return r ? t ? t + " " + r : t + r : t;
+      }
+      o.exports ? (e.default = e, o.exports = e) : window.classNames = e;
+    })();
+  }(s)), s.exports;
+}
+var l = p();
+const x = /* @__PURE__ */ c(l);
+export {
+  x as c
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './components/Button';
+export * from './components/Dialog';
+export * from './components/Flex';
+export * from './components/Fields';
+export * from './components/Heading';
+export * from './components/Icon';
+export * from './components/Menu';
+export * from './components/Notice';
+export * from './components/Progress';
+export * from './components/Segmented';
+export * from './components/Spinner';
+export * from './components/Tooltip';

package/dist/index.esm-Dkuk1b-q.js

@@ -0,0 +1,211 @@
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var T = ["input:not([inert])", "select:not([inert])", "textarea:not([inert])", "a[href]:not([inert])", "button:not([inert])", "[tabindex]:not(slot):not([inert])", "audio[controls]:not([inert])", "video[controls]:not([inert])", '[contenteditable]:not([contenteditable="false"]):not([inert])', "details>summary:first-of-type:not([inert])", "details:not([inert])"], v = /* @__PURE__ */ T.join(","), m = typeof Element > "u", d = m ? function() {
+} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, b = !m && Element.prototype.getRootNode ? function(i) {
+  var t;
+  return i == null || (t = i.getRootNode) === null || t === void 0 ? void 0 : t.call(i);
+} : function(i) {
+  return i == null ? void 0 : i.ownerDocument;
+}, h = function i(t, e) {
+  var r;
+  e === void 0 && (e = !0);
+  var a = t == null || (r = t.getAttribute) === null || r === void 0 ? void 0 : r.call(t, "inert"), l = a === "" || a === "true", n = l || e && t && i(t.parentNode);
+  return n;
+}, x = function(t) {
+  var e, r = t == null || (e = t.getAttribute) === null || e === void 0 ? void 0 : e.call(t, "contenteditable");
+  return r === "" || r === "true";
+}, I = function(t, e, r) {
+  if (h(t))
+    return [];
+  var a = Array.prototype.slice.apply(t.querySelectorAll(v));
+  return e && d.call(t, v) && a.unshift(t), a = a.filter(r), a;
+}, N = function i(t, e, r) {
+  for (var a = [], l = Array.from(t); l.length; ) {
+    var n = l.shift();
+    if (!h(n, !1))
+      if (n.tagName === "SLOT") {
+        var u = n.assignedElements(), c = u.length ? u : n.children, s = i(c, !0, r);
+        r.flatten ? a.push.apply(a, s) : a.push({
+          scopeParent: n,
+          candidates: s
+        });
+      } else {
+        var f = d.call(n, v);
+        f && r.filter(n) && (e || !t.includes(n)) && a.push(n);
+        var o = n.shadowRoot || // check for an undisclosed shadow
+        typeof r.getShadowRoot == "function" && r.getShadowRoot(n), E = !h(o, !1) && (!r.shadowRootFilter || r.shadowRootFilter(n));
+        if (o && E) {
+          var p = i(o === !0 ? n.children : o.children, !0, r);
+          r.flatten ? a.push.apply(a, p) : a.push({
+            scopeParent: n,
+            candidates: p
+          });
+        } else
+          l.unshift.apply(l, n.children);
+      }
+  }
+  return a;
+}, R = function(t) {
+  return !isNaN(parseInt(t.getAttribute("tabindex"), 10));
+}, y = function(t) {
+  if (!t)
+    throw new Error("No node provided");
+  return t.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(t.tagName) || x(t)) && !R(t) ? 0 : t.tabIndex;
+}, A = function(t, e) {
+  var r = y(t);
+  return r < 0 && e && !R(t) ? 0 : r;
+}, O = function(t, e) {
+  return t.tabIndex === e.tabIndex ? t.documentOrder - e.documentOrder : t.tabIndex - e.tabIndex;
+}, C = function(t) {
+  return t.tagName === "INPUT";
+}, F = function(t) {
+  return C(t) && t.type === "hidden";
+}, D = function(t) {
+  var e = t.tagName === "DETAILS" && Array.prototype.slice.apply(t.children).some(function(r) {
+    return r.tagName === "SUMMARY";
+  });
+  return e;
+}, M = function(t, e) {
+  for (var r = 0; r < t.length; r++)
+    if (t[r].checked && t[r].form === e)
+      return t[r];
+}, k = function(t) {
+  if (!t.name)
+    return !0;
+  var e = t.form || b(t), r = function(u) {
+    return e.querySelectorAll('input[type="radio"][name="' + u + '"]');
+  }, a;
+  if (typeof window < "u" && typeof window.CSS < "u" && typeof window.CSS.escape == "function")
+    a = r(window.CSS.escape(t.name));
+  else
+    try {
+      a = r(t.name);
+    } catch (n) {
+      return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", n.message), !1;
+    }
+  var l = M(a, t.form);
+  return !l || l === t;
+}, L = function(t) {
+  return C(t) && t.type === "radio";
+}, P = function(t) {
+  return L(t) && !k(t);
+}, B = function(t) {
+  var e, r = t && b(t), a = (e = r) === null || e === void 0 ? void 0 : e.host, l = !1;
+  if (r && r !== t) {
+    var n, u, c;
+    for (l = !!((n = a) !== null && n !== void 0 && (u = n.ownerDocument) !== null && u !== void 0 && u.contains(a) || t != null && (c = t.ownerDocument) !== null && c !== void 0 && c.contains(t)); !l && a; ) {
+      var s, f, o;
+      r = b(a), a = (s = r) === null || s === void 0 ? void 0 : s.host, l = !!((f = a) !== null && f !== void 0 && (o = f.ownerDocument) !== null && o !== void 0 && o.contains(a));
+    }
+  }
+  return l;
+}, w = function(t) {
+  var e = t.getBoundingClientRect(), r = e.width, a = e.height;
+  return r === 0 && a === 0;
+}, j = function(t, e) {
+  var r = e.displayCheck, a = e.getShadowRoot;
+  if (getComputedStyle(t).visibility === "hidden")
+    return !0;
+  var l = d.call(t, "details>summary:first-of-type"), n = l ? t.parentElement : t;
+  if (d.call(n, "details:not([open]) *"))
+    return !0;
+  if (!r || r === "full" || r === "legacy-full") {
+    if (typeof a == "function") {
+      for (var u = t; t; ) {
+        var c = t.parentElement, s = b(t);
+        if (c && !c.shadowRoot && a(c) === !0)
+          return w(t);
+        t.assignedSlot ? t = t.assignedSlot : !c && s !== t.ownerDocument ? t = s.host : t = c;
+      }
+      t = u;
+    }
+    if (B(t))
+      return !t.getClientRects().length;
+    if (r !== "legacy-full")
+      return !0;
+  } else if (r === "non-zero-area")
+    return w(t);
+  return !1;
+}, q = function(t) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(t.tagName))
+    for (var e = t.parentElement; e; ) {
+      if (e.tagName === "FIELDSET" && e.disabled) {
+        for (var r = 0; r < e.children.length; r++) {
+          var a = e.children.item(r);
+          if (a.tagName === "LEGEND")
+            return d.call(e, "fieldset[disabled] *") ? !0 : !a.contains(t);
+        }
+        return !0;
+      }
+      e = e.parentElement;
+    }
+  return !1;
+}, g = function(t, e) {
+  return !(e.disabled || // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  h(e) || F(e) || j(e, t) || // For a details element with a summary, the summary element gets the focus
+  D(e) || q(e));
+}, S = function(t, e) {
+  return !(P(e) || y(e) < 0 || !g(t, e));
+}, U = function(t) {
+  var e = parseInt(t.getAttribute("tabindex"), 10);
+  return !!(isNaN(e) || e >= 0);
+}, V = function i(t) {
+  var e = [], r = [];
+  return t.forEach(function(a, l) {
+    var n = !!a.scopeParent, u = n ? a.scopeParent : a, c = A(u, n), s = n ? i(a.candidates) : u;
+    c === 0 ? n ? e.push.apply(e, s) : e.push(u) : r.push({
+      documentOrder: l,
+      tabIndex: c,
+      item: a,
+      isScope: n,
+      content: s
+    });
+  }), r.sort(O).reduce(function(a, l) {
+    return l.isScope ? a.push.apply(a, l.content) : a.push(l.content), a;
+  }, []).concat(e);
+}, z = function(t, e) {
+  e = e || {};
+  var r;
+  return e.getShadowRoot ? r = N([t], e.includeContainer, {
+    filter: S.bind(null, e),
+    flatten: !1,
+    getShadowRoot: e.getShadowRoot,
+    shadowRootFilter: U
+  }) : r = I(t, e.includeContainer, S.bind(null, e)), V(r);
+}, W = function(t, e) {
+  e = e || {};
+  var r;
+  return e.getShadowRoot ? r = N([t], e.includeContainer, {
+    filter: g.bind(null, e),
+    flatten: !0,
+    getShadowRoot: e.getShadowRoot
+  }) : r = I(t, e.includeContainer, g.bind(null, e)), r;
+}, Z = function(t, e) {
+  if (e = e || {}, !t)
+    throw new Error("No node provided");
+  return d.call(t, v) === !1 ? !1 : S(e, t);
+}, G = /* @__PURE__ */ T.concat("iframe").join(","), X = function(t, e) {
+  if (e = e || {}, !t)
+    throw new Error("No node provided");
+  return d.call(t, G) === !1 ? !1 : g(e, t);
+};
+const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  focusable: W,
+  getTabIndex: y,
+  isFocusable: X,
+  isTabbable: Z,
+  tabbable: z
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  X as a,
+  Y as b,
+  W as f,
+  y as g,
+  Z as i,
+  z as t
+};

package/dist/index.js

@@ -0,0 +1,54 @@
+import { Button as e } from "./components/Button/Button.js";
+import { Dialog as p, DialogClose as x, DialogContent as m, DialogFooter as i, DialogTitle as f } from "./components/Dialog/Dialog.js";
+import { useDialog as l } from "./components/Dialog/useDialog.js";
+import { withDialog as g } from "./components/Dialog/withDialog.js";
+import { Flex as D } from "./components/Flex/Flex.js";
+import { Checkbox as u } from "./components/Fields/Checkbox.js";
+import { Field as F, FieldDescription as C, FieldLabel as I } from "./components/Fields/Field.js";
+import { I as S } from "./Input-Lz3ft8Tp.js";
+import { Quantity as h } from "./components/Fields/Quantity.js";
+import { Radio as M } from "./components/Fields/Radio.js";
+import { Select as V } from "./components/Fields/Select.js";
+import { Textarea as w } from "./components/Fields/Textarea.js";
+import { V as H } from "./ValidationTooltip-BgSwl0hJ.js";
+import { Heading as N } from "./components/Heading/Heading.js";
+import { Icon as R } from "./components/Icon/Icon.js";
+import { Menu as q } from "./components/Menu/Menu.js";
+import { MenuItem as z } from "./components/Menu/MenuItem.js";
+import { Notice as E } from "./components/Notice/Notice.js";
+import { ProgressBar as J } from "./components/Progress/ProgressBar.js";
+import { ProgressCircular as O } from "./components/Progress/ProgressCircular.js";
+import { Segmented as W } from "./components/Segmented/Segmented.js";
+import { Spinner as Y } from "./components/Spinner/Spinner.js";
+import { Tooltip as _ } from "./components/Tooltip/Tooltip.js";
+export {
+  e as Button,
+  u as Checkbox,
+  p as Dialog,
+  x as DialogClose,
+  m as DialogContent,
+  i as DialogFooter,
+  f as DialogTitle,
+  F as Field,
+  C as FieldDescription,
+  I as FieldLabel,
+  D as Flex,
+  N as Heading,
+  R as Icon,
+  S as Input,
+  q as Menu,
+  z as MenuItem,
+  E as Notice,
+  J as ProgressBar,
+  O as ProgressCircular,
+  h as Quantity,
+  M as Radio,
+  W as Segmented,
+  V as Select,
+  Y as Spinner,
+  w as Textarea,
+  _ as Tooltip,
+  H as ValidationTooltip,
+  l as useDialog,
+  g as withDialog
+};

package/dist/styles/_theme-default.scss

@@ -0,0 +1,142 @@
+$font-family: (
+  body: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"),
+  mono: (Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
+  heading: var(--font-family-body),
+);
+
+$font-weight: (
+  normal: 400,
+  medium: 600,
+  bold:   700,
+  black:  800,
+);
+
+$font-size: (
+  em: 16px,
+  xs: 0.750rem,
+  sm: 0.875rem,
+  md: 1.000rem,
+  lg: 1.125rem,
+  xl: 1.250rem,
+  h6: clamp(1.000rem, 2.25vw, 1.125rem),
+  h5: clamp(1.125rem, 2.50vw, 1.250rem),
+  h4: clamp(1.250rem, 3.00vw, 1.500rem),
+  h3: clamp(1.500rem, 3.50vw, 1.750rem),
+  h2: clamp(1.750rem, 4.00vw, 2.000rem),
+  h1: clamp(2.000rem, 5.00vw, 2.500rem),
+);
+
+$line-height: (
+  xs: 1.125,
+  sm: 1.250,
+  md: 1.500,
+  lg: 1.750,
+  xl: 2.000,
+);
+
+$border-radius: (
+  xs: 0.1875rem, // 3px
+  sm: 0.3125rem, // 5px
+  md: 0.5000rem, // 8px
+  lg: 0.7500rem, // 12px
+  xl: 1.1250rem, // 18px
+);
+
+$spacing: (
+  xs: clamp(0.5rem, 0.9765625vw, 0.625rem), // 8 → 10
+  sm: clamp(1.0rem, 1.7578125vw, 1.125rem), // 16 → 18
+  md: clamp(1.5rem, 2.7343750vw, 1.750rem), // 24 → 28
+  lg: clamp(2.0rem, 3.5156250vw, 2.250rem), // 32 → 36
+  xl: clamp(2.5rem, 4.4921875vw, 2.875rem), // 40 → 46
+);
+
+$drop-shadow: (
+  rgb(0 0 0 / 10%) 0 0 0 1px,
+  rgb(0 0 0 / 5%) 0 80px 80px,
+  rgb(0 0 0 / 4%) 0 40px 40px,
+  rgb(0 0 0 / 3%) 0 20px 20px,
+  rgb(0 0 0 / 2%) 0 10px 10px
+);
+
+$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-out-bounce: cubic-bezier(0.1, 1.3, 0.7, 1.1);
+
+$light-colors: (
+  black:      #000000,
+  white:      #FFFFFF,
+  fg:         #191919,
+  bg:         #FFFFFF,
+  popup:      #FFFFFF,
+  dialog:     #FFFFFF,
+  input:      #FFFFFF,
+  backdrop:   rgb(0 0 0 / 50%),
+  focus:      var(--color-accent-400),
+  link:       var(--color-blue-500),
+  link-hover: var(--color-blue-600),
+  heading:    var(--color-fg),
+);
+
+$dark-colors: (
+  fg:         #E6E6E6,
+  bg:         #161616,
+  popup:      #262626,
+  dialog:     #191919,
+  input:      #101010,
+  backdrop:   rgb(0 0 0 / 65%),
+);
+
+$light-palette: (
+  colors: (
+    gray:   #8E8E99,
+    red:    #FF3B30,
+    orange: #FF9500,
+    yellow: #FFCC00,
+    green:  #34C759,
+    teal:   #30B0C7,
+    cyan:   #32ADE6,
+    blue:   #007AFF,
+    indigo: #5856D6,
+    purple: #AF52DE,
+    brown:  #A2845E,
+    accent: #007AFF,
+  ),
+  tints: (
+    50:  95%,
+    100: 90%,
+    200: 80%,
+    300: 60%,
+    400: 30%,
+    500: 0%,
+    600: -20%,
+    700: -40%,
+    800: -60%,
+  ),
+);
+
+$dark-palette: (
+  colors: (
+    gray:   #737380,
+    red:    #FF453A,
+    orange: #FF9E0B,
+    yellow: #FED709,
+    green:  #31D158,
+    teal:   #40C8E0,
+    cyan:   #64D3FF,
+    blue:   #0B84FF,
+    indigo: #5E5CE6,
+    purple: #BF5AF2,
+    brown:  #AC8E68,
+    accent: #0B84FF,
+  ),
+  tints: (
+    50:  95%,
+    100: 90%,
+    200: 80%,
+    300: 60%,
+    400: 30%,
+    500: 0%,
+    600: -20%,
+    700: -40%,
+    800: -60%,
+  ),
+);

package/dist/styles/_theme.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use './utils' as *;
+@use './theme-default' as default;
+
+$font-family: () !default;
+$font-weight: () !default;
+$font-size: () !default;
+$line-height: () !default;
+$border-radius: () !default;
+$spacing: () !default;
+$drop-shadow: default.$drop-shadow !default;
+$ease-out-cubic: default.$ease-out-cubic !default;
+$ease-out-bounce: default.$ease-out-bounce !default;
+
+$light-colors: () !default;
+$light-palette: () !default;
+$dark-colors: () !default;
+$dark-palette: () !default;
+
+$variables: (
+  font-family: map.merge(default.$font-family, $font-family),
+  font-weight: map.merge(default.$font-weight, $font-weight),
+  font-size: map.merge(default.$font-size, $font-size),
+  line-height: map.merge(default.$line-height, $line-height),
+  border-radius: map.merge(default.$border-radius, $border-radius),
+  spacing: map.merge(default.$spacing, $spacing),
+  drop-shadow: $drop-shadow,
+  ease-out-cubic: $ease-out-cubic,
+  ease-out-bounce: $ease-out-bounce,
+);
+
+$light-colors: colors-map(
+  map.merge(default.$light-colors, $light-colors),
+  map.deep-merge(default.$light-palette, $light-palette),
+);
+
+$dark-colors: colors-map(
+  map.merge(default.$dark-colors, $dark-colors),
+  map.deep-merge(default.$dark-palette, $dark-palette),
+);

package/dist/styles/_utils.scss

@@ -0,0 +1,118 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:string';
+
+// Define CSS variables recursively from a map
+@mixin vars($map, $prefix: null) {
+  @each $name, $value in $map {
+    @if meta.type-of($value) == map {
+      $new-prefix: $prefix;
+      @if string.slice($name, 1, 1) != '-' {
+        $new-prefix: if($prefix, #{$prefix}-#{$name}, #{$name});
+      }
+      @include vars($value, $new-prefix);
+    } @else {
+      $var-name: if($prefix, --#{$prefix}-#{$name}, --#{$name});
+      #{$var-name}: #{$value};
+    }
+  }
+}
+
+// Define tints/shades for colors in a palette
+// $palette map must contain 'colors' and 'tints' keys
+@function color-palette($palette, $bg, $fg) {
+  $output: ();
+  @each $name, $color in map.get($palette, colors) {
+    @each $level, $amount in map.get($palette, tints) {
+      $var-name: #{$name}-#{$level};
+      $mix-with: if($amount > 0, $bg, $fg);
+      $mixed-color: color.mix($mix-with, $color, math.abs($amount), $method: rgb);
+      $output: map.set($output, $var-name, to-hex($mixed-color));
+    }
+  }
+  @return $output;
+}
+
+// Generate colors map for building a theme
+// $colors map must contain 'bg' and 'fg' keys
+// $palette map must contain 'colors' and 'tints' keys
+@function colors-map($colors, $palette) {
+  $bg: map.get($colors, 'bg');
+  $fg: map.get($colors, 'fg');
+  @return map.merge($colors, color-palette($palette, $bg, $fg));
+}
+
+// Shortcut to set an opacity for a CSS variable
+@function color-opacity($hex, $opacity) {
+  @return color-mix(in srgb, $hex $opacity, transparent);
+}
+
+// Display SVG as background image
+@function svg-uri($width, $height, $svg) {
+  $encoded: '';
+  $slice: 2000;
+  $index: 0;
+  $svg: '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 #{$width} #{$height}">#{$svg}</svg>';
+  $loops: math.ceil(calc(string.length($svg) / $slice));
+  @for $i from 1 through $loops {
+    $chunk: string.slice($svg, $index, $index + $slice - 1);
+    $chunk: str-replace($chunk, '"', "'");
+    $chunk: str-replace($chunk, '<', '%3C');
+    $chunk: str-replace($chunk, '>', '%3E');
+    $chunk: str-replace($chunk, '&', '%26');
+    $chunk: str-replace($chunk, '#', '%23');
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+  @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
+}
+
+// Replace string
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+// Convert color to #HEX
+@function to-hex($color) {
+  $ie-hex: color.ie-hex-str($color);
+  @return string.unquote('#' + string.slice($ie-hex, 4));
+}
+
+@mixin focus-visible($color: var(--color-focus)) {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-color: $color;
+}
+
+@mixin required-sign($symbol: var(--field-required-symbol), $color: var(--field-required-color)) {
+  color: $color;
+  line-height: 0;
+  font-size: 125%;
+  content: $symbol;
+  margin-inline: 1px;
+  vertical-align: middle;
+}
+
+%truncate-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+%absolute-fill {
+  inset: 0;
+  position: absolute;
+}
+
+%flex-centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}