skillgrid 0.0.88 → 0.0.89

package/dist/assets/components/Radio/Radio.module-C97VGndQ.css

@@ -0,0 +1 @@
+:root{--radio-background-neutral: #FFFFFF;--radio-border-neutral: var(--base-graphite-90);--radio-icon-neutral: #FFFFFF;--radio-background-accent: var(--brand-primary-500);--radio-background-accent-hovered: var(--brand-primary-550);--radio-background-negative: var(--base-red-60);--radio-border-negative: var(--base-red-60);--radio-background-secondary: var(--base-graphite-85);--radio-border-secondary: var(--base-graphite-95);--radio-icon-secondary: var(--base-graphite-95);--radio-focused-accent: color-mix(in srgb, var(--brand-primary-500) 48%, transparent);--radio-focused-negative: color-mix(in srgb, var(--base-red-60) 48%, transparent);--radio-focused-secondary: color-mix(in srgb, var(--radio-background-secondary) 48%, transparent);--radio-animation-ease-in-out-200: all .2s ease-in-out;--radio-animation-ease-in-out-tiger-200: all .2s ease-in-out;--radio-scale-pressed: 1.05;--radio-size-small: 16.67px;--radio-size-medium: 16.67px;--radio-size-large: 20px;--radio-padding: 2px;--radio-border-width: 1.5px;--radio-focus-ring-width: 4px;--radio-icon-size: 8px;--radio-gap: 10px;--radio-mode-card-xl-padding: 16px;--radio-mode-card-m-padding: 14px;--radio-mode-card-s-padding: 10px 8px;--radio-mode-card-border-radius: 12px;--radio-mode-card-border: 1px solid var(--radio-border-neutral);--radio-label-font-size: 14px;--radio-label-line-height: 20px}._default_1mtjf_53{display:flex}._radio_1mtjf_59{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:var(--radio-padding);color:var(--radio-icon-neutral);border-radius:50%;transition:var(--radio-animation-ease-in-out-tiger-200)}._radio_1mtjf_59._checked_1mtjf_78 ._background_1mtjf_78{fill:var(--radio-background-accent)}._radio_1mtjf_59._checked_1mtjf_78 ._outline_1mtjf_82{opacity:0}._radio_1mtjf_59._error_1mtjf_86 ._outline_1mtjf_82{stroke:var(--radio-border-negative)}._radio_1mtjf_59._error_1mtjf_86._checked_1mtjf_78 ._background_1mtjf_78{fill:var(--radio-background-negative)}._radio_1mtjf_59._disabled_1mtjf_94{cursor:not-allowed}._radio_1mtjf_59._disabled_1mtjf_94 ._outline_1mtjf_82{stroke:var(--radio-border-secondary)}._radio_1mtjf_59._checked_1mtjf_78._disabled_1mtjf_94 ._background_1mtjf_78{fill:var(--radio-background-secondary)}._radio_1mtjf_59:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_1mtjf_59._checked_1mtjf_78:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_1mtjf_59._error_1mtjf_86:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-negative)}._radio_1mtjf_59._disabled_1mtjf_94:focus-visible{outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-secondary)}._iconBaseline_1mtjf_127{display:block;width:var(--radio-icon-size);height:var(--radio-icon-size)}._icon_1mtjf_127{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;width:100%;height:100%}._background_1mtjf_78{r:50%;fill:var(--radio-background-neutral);transition:var(--radio-animation-ease-in-out-tiger-200)}._outline_1mtjf_82{r:calc(50% - var(--radio-border-width) / 2);fill:none;stroke:var(--radio-border-neutral);stroke-width:var(--radio-border-width);transition:var(--radio-animation-ease-in-out-tiger-200)}._dot_1mtjf_161{r:calc(var(--radio-icon-size) / 2);fill:currentcolor;transition:var(--radio-animation-ease-in-out-200)}._small_1mtjf_168{width:var(--radio-size-small);min-width:var(--radio-size-small);height:var(--radio-size-small);min-height:var(--radio-size-small)}._medium_1mtjf_175{width:var(--radio-size-medium);min-width:var(--radio-size-medium);height:var(--radio-size-medium);min-height:var(--radio-size-medium)}._large_1mtjf_182{width:var(--radio-size-large);min-width:var(--radio-size-large);height:var(--radio-size-large);min-height:var(--radio-size-large)}._label_1mtjf_189{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;gap:var(--radio-gap);align-items:center}._label_1mtjf_189[aria-disabled=true]{cursor:not-allowed}._label_1mtjf_189:hover ._radio_1mtjf_59:not(._checked_1mtjf_78,._error_1mtjf_86,._disabled_1mtjf_94) ._dot_1mtjf_161{fill:var(--radio-icon-secondary)}._label_1mtjf_189:hover ._radio_1mtjf_59._checked_1mtjf_78:not(._error_1mtjf_86,._disabled_1mtjf_94) ._background_1mtjf_78{fill:var(--radio-background-accent-hovered)}._label_1mtjf_189:active ._radio_1mtjf_59:not(._disabled_1mtjf_94){transform:scale(var(--radio-scale-pressed))}._container_1mtjf_215{display:flex;gap:var(--radio-gap);align-items:baseline;width:fit-content;font-family:var(--font-family);font-size:var(--radio-label-font-size);line-height:var(--radio-label-line-height);color:var(--text-primary)}._input_1mtjf_228{position:absolute;width:0;height:0;opacity:0}._card_1mtjf_235{padding:var(--radio-mode-card-m-padding);border:var(--radio-mode-card-border);border-radius:var(--radio-mode-card-border-radius)}._smallCard_1mtjf_241{padding:var(--radio-mode-card-s-padding)}._mediumCard_1mtjf_245{padding:var(--radio-mode-card-m-padding)}._largeCard_1mtjf_249{padding:var(--radio-mode-card-xl-padding)}[data-skillgridDarkTheme=true]{--radio-background-neutral: var(--bg-secondary);--radio-border-neutral: var(--stroke-neutral);--radio-icon-neutral: var(--bg-secondary);--radio-background-secondary: var(--stroke-neutral-disabled);--radio-border-secondary: var(--stroke-neutral);--radio-icon-secondary: var(--stroke-neutral)}

package/dist/components/Radio/Radio.js

@@ -1,101 +1,115 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { forwardRef as O } from "react";
-import { clsx as d } from "clsx";
+import { clsx as l } from "clsx";
 import a from "./Radio.module.css.js";
 const P = "radio-container-", j = "radio-label", q = O(
-  (y, C) => {
+  (I, C) => {
     const {
       name: f,
       id: R,
       value: o,
       size: b = "large",
       loading: v = !1,
-      error: h,
+      error: N,
       disabled: D = !1,
-      checked: l = !1,
-      containerClassName: p,
+      checked: n = !1,
+      containerClassName: h,
       className: T,
-      children: N,
+      children: p,
       clickable: _ = "all",
-      mode: n = "default",
-      tabIndex: $,
-      style: g,
-      containerStyle: w,
+      mode: m = "default",
+      tabIndex: g,
+      style: $,
+      containerStyle: A,
       onChange: e,
-      "data-testid": E,
-      ...A
-    } = y, I = !!h, r = D || v, t = _ === "all", k = n === "card", u = a[`${b}Card`], s = R ?? f, S = (i) => {
-      r || e == null || e(o, i);
+      "data-testid": u,
+      ...S
+    } = I, y = !!N, s = D || v, r = _ === "all", k = m === "card", x = a[`${b}Card`], t = R ?? f, w = (i) => {
+      s || e == null || e(o, i);
     }, B = (i) => {
-      i.key === "Enter" && !r && (i.preventDefault(), e == null || e(o));
+      i.key === "Enter" && !s && (i.preventDefault(), e == null || e(o));
     }, F = (i) => i.stopPropagation(), L = () => /* @__PURE__ */ c(
       "div",
       {
-        className: d(
+        className: l(
           a.radio,
           a[b],
           {
-            [a.checked]: l,
-            [a.disabled]: r,
-            [a.error]: I && !r
+            [a.checked]: n,
+            [a.disabled]: s,
+            [a.error]: y && !s
           },
           T
         ),
-        style: g,
-        tabIndex: $ || 1,
-        "data-testid": `${P}${s}`,
+        style: $,
+        tabIndex: g || 1,
+        "data-testid": `${P}${t}`,
         children: [
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ d(
             "input",
             {
-              "aria-errormessage": h,
-              "aria-invalid": I,
-              checked: l,
+              "aria-errormessage": N,
+              "aria-invalid": y,
+              checked: n,
               className: a.input,
-              "data-testid": `radio-${s}`,
-              disabled: r,
-              id: s,
+              "data-testid": `radio-${t}`,
+              disabled: s,
+              id: t,
               name: f,
               ref: C,
               type: "radio",
               value: o,
-              onChange: S,
+              onChange: w,
               onClick: F
             }
           ),
-          /* @__PURE__ */ m("svg", { "data-testid": `radio-icon-${s}`, viewBox: "0 0 8 8", className: a.icon, children: /* @__PURE__ */ m("circle", { cx: 4, cy: 4, fill: "current", r: 4 }) })
+          /* @__PURE__ */ d("span", { className: a.iconBaseline, "aria-hidden": !0 }),
+          /* @__PURE__ */ c(
+            "svg",
+            {
+              "data-testid": `radio-icon-${t}`,
+              className: a.icon,
+              "aria-hidden": !0,
+              focusable: !1,
+              children: [
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.background }),
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.outline }),
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.dot })
+              ]
+            }
+          )
         ]
       }
-    ), x = () => /* @__PURE__ */ c(
+    ), E = () => /* @__PURE__ */ c(
       "label",
       {
-        "aria-checked": l,
-        "aria-disabled": r,
-        "data-testid": t ? E : j,
-        htmlFor: s,
-        style: w,
-        className: d(a.label, {
-          [d(a.container, a[n], p)]: t,
-          [u]: t && k
+        "aria-checked": n,
+        "aria-disabled": s,
+        "data-testid": r ? u : j,
+        htmlFor: t,
+        style: A,
+        className: l(a.label, {
+          [l(a.container, a[m], h)]: r,
+          [x]: r && k
         }),
         onKeyDown: B,
-        ...A,
+        ...S,
         children: [
           L(),
-          t && N
+          r && p
         ]
       }
     );
-    return t ? x() : /* @__PURE__ */ c(
+    return r ? E() : /* @__PURE__ */ c(
       "div",
       {
-        className: d(a.container, a[n], p, {
-          [u]: k
+        className: l(a.container, a[m], h, {
+          [x]: k
         }),
-        "data-testid": E,
+        "data-testid": u,
         children: [
-          x(),
-          N
+          E(),
+          p
         ]
       }
     );

package/dist/components/Radio/Radio.module.css.js

@@ -1,36 +1,44 @@
-import '../../assets/components/Radio/Radio.module-TNOIshDX.css';const d = "_radio_nm7dp_59", _ = "_checked_nm7dp_80", n = "_error_nm7dp_85", a = "_disabled_nm7dp_94", e = "_icon_nm7dp_130", m = "_small_nm7dp_138", r = "_medium_nm7dp_145", c = "_large_nm7dp_152", l = "_label_nm7dp_159", o = "_container_nm7dp_185", s = "_input_nm7dp_198", t = "_card_nm7dp_205", i = "_smallCard_nm7dp_211", p = "_mediumCard_nm7dp_215", u = "_largeCard_nm7dp_219", C = {
-  default: "_default_nm7dp_53",
-  radio: d,
-  checked: _,
+import '../../assets/components/Radio/Radio.module-C97VGndQ.css';const _ = "_radio_1mtjf_59", t = "_checked_1mtjf_78", a = "_background_1mtjf_78", o = "_outline_1mtjf_82", n = "_error_1mtjf_86", e = "_disabled_1mtjf_94", c = "_iconBaseline_1mtjf_127", d = "_icon_1mtjf_127", m = "_dot_1mtjf_161", r = "_small_1mtjf_168", l = "_medium_1mtjf_175", s = "_large_1mtjf_182", i = "_label_1mtjf_189", f = "_container_1mtjf_215", j = "_input_1mtjf_228", u = "_card_1mtjf_235", b = "_smallCard_1mtjf_241", g = "_mediumCard_1mtjf_245", C = "_largeCard_1mtjf_249", k = {
+  default: "_default_1mtjf_53",
+  radio: _,
+  checked: t,
+  background: a,
+  outline: o,
   error: n,
-  disabled: a,
-  icon: e,
-  small: m,
-  medium: r,
-  large: c,
-  label: l,
-  container: o,
-  input: s,
-  card: t,
-  smallCard: i,
-  mediumCard: p,
-  largeCard: u
+  disabled: e,
+  iconBaseline: c,
+  icon: d,
+  dot: m,
+  small: r,
+  medium: l,
+  large: s,
+  label: i,
+  container: f,
+  input: j,
+  card: u,
+  smallCard: b,
+  mediumCard: g,
+  largeCard: C
 };
 export {
-  t as card,
-  _ as checked,
-  o as container,
-  C as default,
-  a as disabled,
+  a as background,
+  u as card,
+  t as checked,
+  f as container,
+  k as default,
+  e as disabled,
+  m as dot,
   n as error,
-  e as icon,
-  s as input,
-  l as label,
-  c as large,
-  u as largeCard,
-  r as medium,
-  p as mediumCard,
-  d as radio,
-  m as small,
-  i as smallCard
+  d as icon,
+  c as iconBaseline,
+  j as input,
+  i as label,
+  s as large,
+  C as largeCard,
+  l as medium,
+  g as mediumCard,
+  o as outline,
+  _ as radio,
+  r as small,
+  b as smallCard
 };