@dotss/ui 0.0.10 → 0.0.11

package/Slider/Slider.es.js

@@ -1,155 +1,242 @@
-import { jsxs as N, jsx as m } from "@emotion/react/jsx-runtime";
-import { forwardRef as B, useRef as S, useState as F, useEffect as G } from "react";
-import O from "../Flexbox/Flexbox.es.js";
-import i from "@emotion/styled";
-const U = i.div`
+import { jsxs as I, jsx as k } from "@emotion/react/jsx-runtime";
+import { forwardRef as z, useRef as b, useState as B, useEffect as G } from "react";
+import _ from "../Flexbox/Flexbox.es.js";
+import u from "@emotion/styled";
+import J from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import Q from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+const Y = u.div`
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   height: 12px;
-  margin: ${({ theme: { spacing: n } }) => `${n.content(2)}px 0px`};
+  margin: ${({ theme: { spacing: i } }) => `${i.content(2)}px 0px`};
   cursor: pointer;
   border-radius: 20px;
-`, W = i.div`
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: i }) => i.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: i, theme: n }) => i ? {
+  outline: `${n.palette.grey[100]} solid 2px`,
+  outlineOffset: 2
+} : {}}
+  }
+`, Z = u.div`
   position: absolute;
   width: 100%;
   height: 100%;
-  background: ${({ theme: { palette: n } }) => n.grey[10]};
+  background: ${({ theme: { palette: i } }) => i.grey[10]};
   border-radius: inherit;
-`, _ = i.div`
+`, V = u.div`
   position: absolute;
   height: 100%;
-  background: ${({ theme: { palette: n } }) => n.brand.primary.main};
+  background: ${({ theme: { palette: i } }) => i.brand.primary.main};
   border-radius: inherit;
-`, z = i.div`
+`, P = u.div`
   position: absolute;
   display: flex;
   width: 24px;
   height: 24px;
   justify-content: space-between;
   align-items: center;
-  padding: ${({ theme: { spacing: n } }) => `${n.content(2)}px ${n.content(3)}px`};
-  background: ${({ theme: { palette: n } }) => n.grey[90]};
+  padding: ${({ theme: { spacing: i } }) => `${i.content(2)}px ${i.content(3)}px`};
+  background: ${({ theme: { palette: i } }) => i.grey[90]};
   transform: translateX(-50%);
   border-radius: 50%;
-`, H = i.div`
+
+  &:focus {
+    outline-offset: 2px;
+  }
+`, ee = u.div`
   position: absolute;
   width: 4px;
   height: 4px;
   transform: translateX(-50%);
   border-radius: 50%;
 
-  ${({ theme: { palette: n }, marked: o, disabled: c, hasMarks: r }) => c || !r ? {
+  ${({ theme: { palette: i }, marked: n, disabled: c, hasMarks: o }) => c || !o ? {
   background: "transparent",
   opacity: 0
-} : o ? {
-  background: n.grey.white
+} : n ? {
+  background: i.grey.white
 } : {
-  background: n.grey[30]
+  background: i.grey[30]
 }}
-`, T = 10, P = B(function({
-  value: o,
+`, X = 10, ce = z(function({
+  value: n,
   onChange: c,
-  step: r = 1,
+  step: o = 1,
   min: s = 0,
-  max: a = 100,
-  hasMarks: R = !0,
-  disabledValues: C = [],
+  max: l = 100,
+  hasMarks: C = !0,
+  disabledValues: a = [],
+  readValue: w,
   railProps: d,
-  trackProps: u,
-  thumbProps: f,
-  inlineCSS: D,
-  ...X
-}, A) {
-  const l = S(null), y = S(null), L = S(null), [V, b] = F(!1), k = 100 / ((a - s) / r), M = (e) => {
-    if (l.current) {
-      const t = e - l.current.getBoundingClientRect().left, g = Array.from(
-        l.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')
-      ), v = g.reduce((x, p) => Math.abs(p.offsetLeft - t) < Math.abs(x.offsetLeft - t) ? p : x, g[0]).getAttribute("data-value");
-      return v !== null ? Number(v) : null;
+  trackProps: h,
+  thumbProps: y,
+  inlineCSS: L,
+  ...v
+}, M) {
+  const m = b(null), { isKeyboardMode: E } = J(), { hasFocus: K } = Q({ ref: M || m }), f = b(null), S = b(null), j = b(null), [F, $] = B(!1), p = 100 / ((l - s) / o), x = (t) => {
+    if (f.current) {
+      const e = t - f.current.getBoundingClientRect().left, r = Array.from(
+        f.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')
+      ), R = r.reduce((N, T) => Math.abs(T.offsetLeft - e) < Math.abs(N.offsetLeft - e) ? T : N, r[0]).getAttribute("data-value");
+      return R !== null ? Number(R) : null;
     }
     return null;
-  }, $ = (e) => {
-    b(!0);
-    const t = M(e);
-    t !== null && c(t);
-  }, w = (e) => {
-    if (!V)
+  }, U = (t) => {
+    let e = n;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") {
+      if (n === l) return;
+      e = n + o;
+    } else if (t.key === "ArrowLeft" || t.key === "ArrowDown") {
+      if (n === s) return;
+      e = n - o;
+    } else if (t.key === "PageUp") {
+      if (n === l) return;
+      e = Math.min(n + o * 5, l);
+    } else if (t.key === "PageDown") {
+      if (n === s) return;
+      e = Math.max(n - o * 5, s);
+    } else if (t.key === "Home") {
+      for (let r = s; r <= l; r += o)
+        if (!a.includes(r)) {
+          e = r;
+          break;
+        }
+    } else if (t.key === "End") {
+      for (let r = l; r >= s; r -= o)
+        if (!a.includes(r)) {
+          e = r;
+          break;
+        }
+    }
+    if (a.includes(e)) {
+      if (e > n) {
+        for (let r = e; r <= l; r += o)
+          if (!a.includes(r)) {
+            c(r);
+            return;
+          }
+      } else if (e < n) {
+        for (let r = e; r >= s; r -= o)
+          if (!a.includes(r)) {
+            c(r);
+            return;
+          }
+      }
       return;
-    const t = M(e);
-    t !== null && c(t);
-  }, h = () => b(!1), j = (e) => $(e.clientX), E = (e) => $(e.touches[0].clientX), I = (e) => w(e.clientX), q = (e) => w(e.touches[0].clientX);
+    }
+    c(e);
+  }, D = (t) => {
+    $(!0);
+    const e = x(t);
+    e !== null && c(e);
+  }, A = (t) => {
+    if (!F) return;
+    const e = x(t);
+    e !== null && c(e);
+  }, g = () => $(!1), q = (t) => D(t.clientX), H = (t) => D(t.touches[0].clientX), O = (t) => A(t.clientX), W = (t) => A(t.touches[0].clientX);
   return G(() => {
-    if (l.current) {
-      const e = l.current.querySelector(
-        `[data-value="${o}"]`
+    if (f.current) {
+      const t = f.current.querySelector(
+        `[data-value="${n}"]`
       );
-      if (y.current && e) {
-        const { offsetLeft: t, offsetWidth: g } = e;
-        y.current.style.width = `${t + g + T * 2}px`;
+      if (S.current && t) {
+        const { offsetLeft: e, offsetWidth: r } = t;
+        S.current.style.width = `${e + r + X * 2}px`;
       }
     }
-  }, [o, s, a, r]), /* @__PURE__ */ N(
-    U,
+  }, [n, s, l, o]), /* @__PURE__ */ I(
+    Y,
     {
-      ref: A,
-      ...X,
+      ref: M || m,
+      ...v,
       className: "slider",
-      onMouseDown: j,
-      onMouseMove: I,
-      onMouseUp: h,
-      onMouseLeave: h,
-      onTouchStart: E,
-      onTouchMove: q,
-      onTouchEnd: h,
-      onTouchCancel: h,
-      css: D,
+      onMouseDown: q,
+      onMouseMove: O,
+      onMouseUp: g,
+      onMouseLeave: g,
+      onTouchStart: H,
+      onTouchMove: W,
+      onTouchEnd: g,
+      onTouchCancel: g,
+      css: L,
+      focusWithin: E && K,
       children: [
-        /* @__PURE__ */ m(W, { ref: L, ...d, css: d == null ? void 0 : d.inlineCSS, className: "slider-rail" }),
-        /* @__PURE__ */ m(
-          _,
+        /* @__PURE__ */ k(
+          Z,
           {
-            ref: y,
-            ...u,
-            css: u == null ? void 0 : u.inlineCSS,
-            className: "slider-track"
+            ref: j,
+            ...d,
+            css: d == null ? void 0 : d.inlineCSS,
+            className: "slider-rail",
+            tabIndex: -1,
+            "aria-hidden": !0
           }
         ),
-        /* @__PURE__ */ N(
-          O,
+        /* @__PURE__ */ k(
+          V,
+          {
+            ref: S,
+            ...h,
+            css: h == null ? void 0 : h.inlineCSS,
+            className: "slider-track",
+            tabIndex: -1,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ I(
+          _,
           {
             className: "slider-mark-wrapper",
             alignItems: "center",
-            ref: l,
+            ref: f,
+            tabIndex: -1,
             inlineCSS: {
-              margin: `0 ${T + 2}px`,
+              margin: `0 ${X + 2}px`,
               width: "100%",
               height: "24px",
               position: "relative"
             },
             children: [
-              a > 0 && s < a && r > 0 && Array.from({ length: (a - s) / r + 1 }, (e, t) => /* @__PURE__ */ m(
-                H,
+              l > 0 && s < l && o > 0 && Array.from({ length: (l - s) / o + 1 }, (t, e) => /* @__PURE__ */ k(
+                ee,
                 {
-                  className: `slider-mark-${t} slider-mark`,
-                  marked: t <= (o - s) / r,
-                  hasMarks: R,
-                  disabled: C.includes(s + r * t),
-                  "data-value": s + r * t,
+                  className: `slider-mark-${e} slider-mark`,
+                  marked: e <= (n - s) / o,
+                  hasMarks: C,
+                  disabled: a.includes(s + o * e),
+                  "data-value": s + o * e,
                   style: {
-                    left: `${k * t}%`
-                  }
+                    left: `${p * e}%`
+                  },
+                  "aria-hidden": !0
                 },
-                `slider-mark-${o}:${s + r * t}`
+                `slider-mark-${n}:${s + o * e}`
               )),
-              /* @__PURE__ */ m(
-                z,
+              /* @__PURE__ */ k(
+                P,
                 {
-                  ...f,
+                  ...y,
                   className: "slider-thumb",
-                  css: f == null ? void 0 : f.inlineCSS,
-                  style: { left: `${k * (o - s) / r}%` }
+                  css: y == null ? void 0 : y.inlineCSS,
+                  onKeyDown: U,
+                  role: "slider",
+                  "aria-orientation": "horizontal",
+                  tabIndex: 0,
+                  "aria-valuemin": s,
+                  "aria-valuemax": l,
+                  "aria-valuenow": n,
+                  "aria-valuetext": w && typeof w == "function" ? w(n) : n.toString(),
+                  style: { left: `${p * (n - s) / o}%` }
                 }
               )
             ]
@@ -160,5 +247,5 @@ const U = i.div`
   );
 });
 export {
-  P as default
+  ce as default
 };

package/Switch/Switch.cjs

@@ -1,24 +1,26 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),f=require("react"),h=require("@emotion/styled"),d=r=>r&&r.__esModule?r:{default:r},i=d(h),x=i.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),c=require("react"),X=require("@emotion/styled"),q=require("../core/useTheme.cjs"),H=t=>t&&t.__esModule?t:{default:t},s=H(X),L=s.default.div`
   position: relative;
   display: flex;
-  width: 56px;
+  min-width: 56px;
   height: 32px;
-  padding: ${({theme:{spacing:r}})=>`${r.content(1)}px`};
+  padding: ${({theme:{spacing:t}})=>`${t.content(1)}px`};
   align-items: center;
   border-radius: 20px;
-  transition: ${({transitionDuration:r})=>`background-color ${r}ms ease-in-out`};
-  pointer-events: ${({disabled:r})=>r?"none":"auto"};
+  transition: ${({transitionDuration:t})=>`background-color ${t}ms ease-in-out`};
+  pointer-events: ${({disabled:t})=>t?"none":"auto"};
 
-  ${({theme:{palette:{brand:r,grey:n}},selected:t,disabled:o})=>t&&o?{backgroundColor:r.primary.bg}:t&&!o?{backgroundColor:r.primary.main}:!t&&o?{backgroundColor:n[20]}:!t&&!o?{backgroundColor:n[40]}:{}}
-`,g=i.default.div`
+  ${({theme:{palette:{brand:t,grey:r}},selected:n,disabled:e})=>n&&e?{backgroundColor:t.primary.bg}:n&&!e?{backgroundColor:t.primary.main}:!n&&e?{backgroundColor:r[20]}:!n&&!e?{backgroundColor:r[40]}:{}}
+`,E=s.default.div`
+  position: absolute;
+  right: ${({withLabel:t})=>t?"24px":"auto"};
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  transition: ${({transitionDuration:r})=>`all ${r}ms ease-in-out`};
+  transition: ${({transitionDuration:t})=>`all ${t}ms ease-in-out`};
   transition-property: background-color, transform, filter;
 
-  ${({theme:{palette:{grey:r,background:n}},selected:t,disabled:o})=>t&&o?{backgroundColor:r.white,transform:"translateX(100%)"}:t&&!o?{backgroundColor:r.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",transform:"translateX(100%)"}:!t&&o?{backgroundColor:n.primary}:!t&&!o?{backgroundColor:r.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"}:{}}
-`,m=i.default.input`
+  ${({theme:{palette:{grey:t,background:r},spacing:n},selected:e,disabled:o,labelWidth:h,withLabel:f})=>{if(f){if(e&&o)return{backgroundColor:t.white,transform:`translateX(calc(100% - ${n.content(1)}px))`};if(e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",transform:`translateX(calc(100% - ${n.content(1)}px))`};if(!e&&o)return{backgroundColor:r.primary,transform:`translateX(calc(100% - ${h+n.content(1)}px))`};if(!e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",transform:`translateX(calc(100% - ${h+n.content(1)}px))`}}else{if(e&&o)return{backgroundColor:t.white,transform:"translateX(100%)"};if(e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",transform:"translateX(100%)"};if(!e&&o)return{backgroundColor:r.primary};if(!e&&!o)return{backgroundColor:t.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"}}return{}}}
+`,T=s.default.input`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -27,4 +29,19 @@
   left: 0;
   border-radius: 20px;
   cursor: pointer;
-`,w=f.forwardRef(function({selected:n,disabled:t,onChange:o,transitionDuration:u=150,inputProps:a,thumbProps:p,inlineCSS:c,...s},l){return e.jsxs(x,{ref:l,selected:n,disabled:t,transitionDuration:u,css:c,...s,children:[e.jsx(g,{selected:n,disabled:t,transitionDuration:u,...p}),e.jsx(m,{type:"checkbox",role:"switch",checked:n,disabled:t,onChange:o,...a})]})});exports.default=w;
+`,v=s.default.div`
+  position: absolute;
+  opacity: ${({selected:t})=>t?1:0};
+  pointer-events: none;
+  transition: opacity 0.2s;
+
+  ${({theme:{spacing:t},variant:r})=>{switch(r){case"unselected":return{right:t.content(2)};case"selected":return{left:t.content(2)};default:return{}}}}
+
+  ${({theme:{typography:t,palette:{grey:r}}})=>({fontSize:t.c2M.size,fontWeight:t.c2M.weight,lineHeight:t.c2M.lineHeight,color:r.white})}
+`,S=s.default.div`
+  ${({theme:{spacing:t},variant:r})=>{switch(r){case"unselected":return{marginRight:`${t.content(8)}px`};case"selected":return{marginRight:`${t.content(8)}px`};default:return{}}}}
+
+  visibility: hidden;
+
+  ${({theme:{typography:t,palette:{grey:r}}})=>({fontSize:t.c2M.size,fontWeight:t.c2M.weight,lineHeight:t.c2M.lineHeight,color:r.white})}
+`,y=c.forwardRef(function({selected:r,disabled:n,onChange:e,transitionDuration:o=150,inputProps:h,thumbProps:f,inlineCSS:C,selectedLabel:a,unselectedLabel:u,...R},W){const{spacing:l}=q.default(),[p,j]=c.useState(0),[x,M]=c.useState(0),w=c.useRef(null),m=c.useRef(null),z=!!a||!!u,_=r?x||p:p||x;return c.useEffect(()=>{const d=()=>{var b,k;const g=((b=m.current)==null?void 0:b.offsetWidth)??0,$=((k=w.current)==null?void 0:k.offsetWidth)??0;g>0&&M(g+l.content(2)),$>0&&j($+l.content(2))};return d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)}},[l,u,a,r]),i.jsxs(L,{ref:W,selected:r,disabled:n,transitionDuration:o,css:C,...R,children:[i.jsx(E,{selected:r,disabled:n,labelWidth:_,withLabel:z,transitionDuration:o,...f}),i.jsx(T,{type:"checkbox",role:"switch",checked:r,disabled:n,onChange:e,...h}),u&&!r&&i.jsx(S,{ref:w,variant:"unselected","aria-hidden":!0,children:u}),a&&r&&i.jsx(S,{ref:m,variant:"selected","aria-hidden":!0,children:a}),u&&i.jsx(v,{variant:"unselected",selected:!r,"aria-hidden":r,children:u}),a&&i.jsx(v,{variant:"selected",selected:r,"aria-hidden":!r,children:a})]})});exports.default=y;

package/Switch/Switch.d.ts

@@ -8,6 +8,8 @@ export interface SwitchProps extends GeneralComponentProps<HTMLAttributes<HTMLDi
     transitionDuration?: number;
     inputProps?: HTMLAttributes<HTMLInputElement>;
     thumbProps?: HTMLAttributes<HTMLDivElement>;
+    selectedLabel?: string;
+    unselectedLabel?: string;
 }
 declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Switch;