@dotss/ui 0.0.8 → 0.0.11

package/SegmentedButton/SegmentedButton.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@emotion/react/jsx-runtime"),l=require("react"),A=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),M=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),v=require("../utils/getSibling/getSibling.cjs"),K=require("@emotion/styled"),P=o=>o&&o.__esModule?o:{default:o},$=P(K),j=$.default.div`
+  display: flex;
+  align-items: center;
+  height: 44px;
+
+  ${({fullWidth:o})=>o?{width:"100%","& > button":{width:"100%",flexShrink:1}}:null}
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({theme:o})=>o.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({focusWithin:o,theme:p})=>o?{outline:`${p.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+  }
+`,B=l.forwardRef(function({children:p,variant:b="outlined",color:k="primary",rounded:S=!0,onChange:e,value:m,fullWidth:h,inlineCSS:q,disabled:y,...w},x){const s=l.useRef(null);l.useImperativeHandle(x,()=>s.current);const{hasFocus:E}=A.default({ref:s}),{isKeyboardMode:D}=M.default(),_=(t,i)=>n=>{typeof e=="function"&&e(t),typeof i=="function"&&i(n)},R=t=>{var i,n,a,f,d;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault(),t.stopPropagation();const r=(i=s.current)==null?void 0:i.querySelector('button[aria-checked="true"]');if(!r)return;const u=v.default(r,"next",{skipDisabled:!0});if(u&&typeof e=="function"&&(e(u.dataset.value),u.focus()),!u){const c=(n=s.current)==null?void 0:n.querySelector("button:first-child");c&&typeof e=="function"&&(e(c.dataset.value),c.focus())}}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation();const r=(a=s.current)==null?void 0:a.querySelector('button[aria-checked="true"]');if(!r)return;const u=v.default(r,"prev",{skipDisabled:!0});if(u&&typeof e=="function"&&(e(u.dataset.value),u.focus()),!u){const c=(f=s.current)==null?void 0:f.querySelector("button:last-child");c&&typeof e=="function"&&(e(c.dataset.value),c.focus())}}if(t.key==="Enter"||t.key===" "){t.preventDefault(),t.stopPropagation();const r=(d=s.current)==null?void 0:d.querySelector('button[aria-checked="true"]');r&&typeof e=="function"&&(e(r.dataset.value),r.focus())}};return g.jsx(j,{ref:s,fullWidth:h,role:"radiogroup",focusWithin:D&&E,onKeyDown:R,...w,css:q,children:l.Children.map(p,(t,i)=>{var a,f,d,r;if(!l.isValidElement(t))return null;const n=m===((a=t.props)==null?void 0:a.value);return l.cloneElement(t,{...t.props,variant:b,color:k,rounded:S,disabled:y,isActive:n,isFirst:i===0,isLast:l.Children.count(p)-1===i,tabIndex:n?0:-1,role:"radio","aria-checked":n,"aria-disabled":y,"data-value":(f=t.props)==null?void 0:f.value,onClick:_((d=t.props)==null?void 0:d.value,(r=t.props)==null?void 0:r.onClick)})})})});exports.default=B;

package/SegmentedButton/SegmentedButton.es.js

@@ -0,0 +1,122 @@
+import { jsx as K } from "@emotion/react/jsx-runtime";
+import { forwardRef as R, useRef as $, useImperativeHandle as g, Children as y, isValidElement as B, cloneElement as F } from "react";
+import P from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import H from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import m from "../utils/getSibling/getSibling.es.js";
+import I from "@emotion/styled";
+const L = I.div`
+  display: flex;
+  align-items: center;
+  height: 44px;
+
+  ${({ fullWidth: c }) => c ? {
+  width: "100%",
+  "& > button": {
+    width: "100%",
+    flexShrink: 1
+  }
+} : null}
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: c }) => c.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: c, theme: p }) => c ? {
+  outline: `${p.palette.grey[100]} solid 2px`,
+  outlineOffset: 2
+} : {}}
+  }
+`, J = R(function({
+  children: p,
+  variant: v = "outlined",
+  color: k = "primary",
+  rounded: b = !0,
+  onChange: e,
+  value: w,
+  fullWidth: h,
+  inlineCSS: S,
+  disabled: d,
+  ...x
+}, E) {
+  const i = $(null);
+  g(E, () => i.current);
+  const { hasFocus: D } = P({ ref: i }), { isKeyboardMode: q } = H(), A = (t, u) => (s) => {
+    typeof e == "function" && e(t), typeof u == "function" && u(s);
+  };
+  return /* @__PURE__ */ K(
+    L,
+    {
+      ref: i,
+      fullWidth: h,
+      role: "radiogroup",
+      focusWithin: q && D,
+      onKeyDown: (t) => {
+        var u, s, f, l, a;
+        if (t.key === "ArrowRight" || t.key === "ArrowDown") {
+          t.preventDefault(), t.stopPropagation();
+          const r = (u = i.current) == null ? void 0 : u.querySelector(
+            'button[aria-checked="true"]'
+          );
+          if (!r) return;
+          const o = m(r, "next", { skipDisabled: !0 });
+          if (o && typeof e == "function" && (e(o.dataset.value), o.focus()), !o) {
+            const n = (s = i.current) == null ? void 0 : s.querySelector("button:first-child");
+            n && typeof e == "function" && (e(n.dataset.value), n.focus());
+          }
+        }
+        if (t.key === "ArrowLeft" || t.key === "ArrowUp") {
+          t.preventDefault(), t.stopPropagation();
+          const r = (f = i.current) == null ? void 0 : f.querySelector(
+            'button[aria-checked="true"]'
+          );
+          if (!r) return;
+          const o = m(r, "prev", { skipDisabled: !0 });
+          if (o && typeof e == "function" && (e(o.dataset.value), o.focus()), !o) {
+            const n = (l = i.current) == null ? void 0 : l.querySelector("button:last-child");
+            n && typeof e == "function" && (e(n.dataset.value), n.focus());
+          }
+        }
+        if (t.key === "Enter" || t.key === " ") {
+          t.preventDefault(), t.stopPropagation();
+          const r = (a = i.current) == null ? void 0 : a.querySelector(
+            'button[aria-checked="true"]'
+          );
+          r && typeof e == "function" && (e(r.dataset.value), r.focus());
+        }
+      },
+      ...x,
+      css: S,
+      children: y.map(p, (t, u) => {
+        var f, l, a, r;
+        if (!B(t))
+          return null;
+        const s = w === ((f = t.props) == null ? void 0 : f.value);
+        return F(t, {
+          ...t.props,
+          variant: v,
+          color: k,
+          rounded: b,
+          disabled: d,
+          isActive: s,
+          isFirst: u === 0,
+          isLast: y.count(p) - 1 === u,
+          tabIndex: s ? 0 : -1,
+          role: "radio",
+          "aria-checked": s,
+          "aria-disabled": d,
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          "data-value": (l = t.props) == null ? void 0 : l.value,
+          onClick: A((a = t.props) == null ? void 0 : a.value, (r = t.props) == null ? void 0 : r.onClick)
+        });
+      })
+    }
+  );
+});
+export {
+  J as default
+};

package/Select/Select.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),i=require("react"),P=require("../Backdrop/Backdrop.cjs"),T=require("../Box/Box.cjs"),K=require("../Flexbox/Flexbox.cjs"),U=require("../Icon/Icon.cjs"),X=require("@emotion/styled"),E=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},m=G(X),J=m.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  color: ${({theme:e})=>e.palette.grey[100]};
+  width: ${({fullWidth:e})=>e?"100%":"328px"};
+  padding: ${({theme:e})=>`${e.spacing.content(3)}px ${e.spacing.content(4)}px`};
+  border-radius: 10px;
+  cursor: pointer;
+  & > svg {
+    color: inherit;
+  }
+
+  ${({theme:{palette:{grey:e,background:r}},variant:g})=>{let s={};switch(g){case"outlined":s={border:`1px solid ${e[50]}`,"&[disabled]":{backgroundColor:e[10],border:`1px solid ${e[30]}`,color:e[30],pointerEvents:"none"}};break;case"filled":s={border:"1px solid transparent",backgroundColor:r.primary,"&[disabled]":{backgroundColor:e[10],color:e[30],pointerEvents:"none"}};break}return s}}
+
+  ${({theme:{palette:{brand:e}},isFocused:r})=>r?{border:`1px solid ${e.primary.line}`}:{}}
+  
+  ${({size:e})=>{let r={};switch(e){case"large":r={height:"48px"};break;case"xLarge":r={height:"56px"};break}return r}}
+`,N=m.default.div`
+  display: flex;
+  width: calc(100% - 24px - 8px);
+  gap: ${({theme:e})=>`${e.spacing.content(2)}px`};
+  & svg {
+    color: inherit;
+  }
+
+  ${({theme:{typography:e,palette:{grey:r}},value:g})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:r[30]}};return g?{...s,color:r[100]}:{...s,color:r[50]}}}
+`,Q=m.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`,Y=m.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${({isFocused:e})=>e?"rotate(180deg)":"rotate(0deg)"};
+  transition: transform 200ms linear;
+`,Z=m.default.ul`
+  position: fixed;
+  max-height: 476px;
+  overflow-y: auto;
+  z-index: 100003;
+  margin-top: ${({theme:e})=>`${e.spacing.content(1)}px`};
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  padding: ${({theme:e})=>`${e.spacing.content(1)}px 0`};
+  background: ${({theme:e})=>e.palette.grey.white};
+  box-shadow: ${({theme:{elevation:e}})=>e[4]};
+  transition: opacity 200ms linear;
+  opacity: ${({isFocused:e})=>e?1:0};
+`,ee=i.forwardRef(function({value:r,onChange:g,open:s,onOpen:v,onClose:C,variant:O="outlined",size:q="large",startAdornment:j,placeholder:W="TEXT",disabled:k=!1,fullWidth:D,children:h,inlineCSS:z,...S},V){const _=i.useId(),b=i.useRef(null),w=i.useRef(null),x=i.useRef(""),[d,u]=i.useState(s||!1),[f,c]=i.useState(""),[$,y]=i.useState({top:0,bottom:0,left:0,width:0}),p=(S==null?void 0:S.id)||_,H=()=>{s===void 0?u(t=>!t):s===!1&&v&&typeof v=="function"&&v()},I=t=>()=>{g(t.toString()),R()},R=()=>{s===void 0?(u(!1),c("")):s===!0&&C&&typeof C=="function"&&C()},B=t=>{if(t.preventDefault(),t.code==="Escape"&&u(!1),t.code==="Space"||t.code==="Enter")if(x.current?c(x.current):f||c(`${p}-0`),d){if(f){const n=document.querySelector(`#${CSS.escape(f)}`);n&&n.hasAttribute("value")&&(x.current=n==null?void 0:n.id,I(n.value)())}u(!1)}else u(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(d||u(!0),x.current?c(x.current):c(`${p}-0`),!w.current||!f)return;const n=w.current.querySelector(`#${CSS.escape(f)}`);if(!n)return;if(t.code==="ArrowDown"){const o=E.default(n,"next",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.firstElementChild;l&&(c(l.id),l.scrollIntoView({block:"start"}))}}if(t.code==="ArrowUp"){const o=E.default(n,"prev",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.lastElementChild;l&&(c(l.id),l.scrollIntoView({block:"end"}))}}}if(t.code==="Home"&&c(`${p}-0`),t.code==="End"){const n=i.Children.count(h);c(`${p}-${n-1}`)}},L=t=>{const n=i.Children.map(t,o=>i.isValidElement(o)&&o&&o.props.value===r?o.props.children:null);return n&&n.length?n[0]:""};return i.useEffect(()=>{const t=()=>{if(b.current){const n=b.current.getBoundingClientRect(),o=i.Children.count(h),l=40,A=24,F=l*o>476?476:l*o,M=b.current.getBoundingClientRect().bottom+F+A>window.innerHeight;y(M?{bottom:24,left:n.left,width:b.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:b.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[h]),i.useEffect(()=>{s!==void 0&&u(s)},[s]),a.jsxs(T.default,{ref:V,inlineCSS:{position:"relative"},children:[a.jsxs(J,{role:"combobox",ref:b,tabIndex:0,variant:O,size:q,disabled:k,fullWidth:D,isFocused:d,onClick:H,onKeyDown:B,"aria-controls":p,"aria-expanded":d,"aria-haspopup":"listbox","aria-activedescendant":f,...S,css:z,children:[a.jsxs(N,{value:r==="0"||!!r,disabled:k,children:[j&&a.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),a.jsx(Q,{children:L(h)||W})]}),a.jsx(Y,{isFocused:d,children:a.jsx(U.default,{name:"ChevronDownLine",size:"small",color:k?"grey.30":"grey.100"})})]}),a.jsx(P.default,{open:d,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:a.jsx(Z,{id:p,role:"listbox",ref:w,tabIndex:-1,isFocused:d,style:{top:$.top,bottom:$.bottom,left:$.left,width:$.width},children:i.Children.map(h,(t,n)=>{if(!i.isValidElement(t)||!t.props.value)return null;const o=`${p}-${n}`,l=r===t.props.value;return l&&(x.current=o),i.cloneElement(t,{id:o,selected:l,focused:o===f,onClick:I(t.props.value),...t.props})})})})]})});exports.default=ee;

package/{dist/Select → Select}/Select.es.js

@@ -1,12 +1,12 @@
-import { jsxs as k, jsx as u } from "@emotion/react/jsx-runtime";
-import { forwardRef as J, useId as N, useRef as y, useState as I, useEffect as j, Children as $, isValidElement as z, cloneElement as Q } from "react";
+import { jsxs as I, jsx as b } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useId as N, useRef as y, useState as E, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
 import Y from "../Backdrop/Backdrop.es.js";
 import Z from "../Box/Box.es.js";
 import _ from "../Flexbox/Flexbox.es.js";
 import ee from "../Icon/Icon.es.js";
-import x from "@emotion/styled";
-import D from "../utils/getSibling/getSibling.es.js";
-const te = x.div`
+import h from "@emotion/styled";
+import H from "../utils/getSibling/getSibling.es.js";
+const te = h.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -79,7 +79,7 @@ const te = x.div`
   }
   return i;
 }}
-`, oe = x.div`
+`, ne = h.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({ theme: e }) => `${e.spacing.content(2)}px`};
@@ -111,17 +111,17 @@ const te = x.div`
     color: i[50]
   };
 }}
-`, ne = x.div`
+`, oe = h.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, ie = x.div`
+`, ie = h.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({ isFocused: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
   transition: transform 200ms linear;
-`, re = x.ul`
+`, re = h.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -135,141 +135,152 @@ const te = x.div`
   box-shadow: ${({ theme: { elevation: e } }) => e[4]};
   transition: opacity 200ms linear;
   opacity: ${({ isFocused: e }) => e ? 1 : 0};
-`, me = J(function({
+`, be = J(function({
   value: i,
   onChange: m,
   open: r,
-  onOpen: v,
-  onClose: S,
-  variant: H = "outlined",
+  onOpen: S,
+  onClose: C,
+  variant: V = "outlined",
   size: B = "large",
   startAdornment: R,
   placeholder: L = "TEXT",
-  disabled: C = !1,
+  disabled: k = !1,
   fullWidth: A,
-  children: b,
+  children: g,
   inlineCSS: F,
-  ...h
-}, V) {
-  const q = N(), p = y(null), K = y(null), f = y(""), [l, a] = I(r || !1), [c, s] = I(""), [w, E] = I({ top: 0, bottom: 0, left: 0, width: 0 }), d = (h == null ? void 0 : h.id) || q, P = () => {
-    r === void 0 ? a((t) => !t) : r === !1 && v && typeof v == "function" && v();
+  ...w
+}, q) {
+  const K = N(), f = y(null), x = y(null), u = y(""), [c, a] = E(r || !1), [d, l] = E(""), [$, O] = E({ top: 0, bottom: 0, left: 0, width: 0 }), p = (w == null ? void 0 : w.id) || K, P = () => {
+    r === void 0 ? a((t) => !t) : r === !1 && S && typeof S == "function" && S();
   }, W = (t) => () => {
-    m(t.toString()), O();
-  }, O = () => {
-    r === void 0 ? (a(!1), s("")) : r === !0 && S && typeof S == "function" && S();
+    m(t.toString()), j();
+  }, j = () => {
+    r === void 0 ? (a(!1), l("")) : r === !0 && C && typeof C == "function" && C();
   }, T = (t) => {
     if (t.preventDefault(), t.code === "Escape" && a(!1), t.code === "Space" || t.code === "Enter")
-      if (f.current ? s(f.current) : c || s(`${d}-0`), l) {
-        if (c) {
-          const o = document.querySelector(
-            `#${CSS.escape(c)}`
+      if (u.current ? l(u.current) : d || l(`${p}-0`), c) {
+        if (d) {
+          const n = document.querySelector(
+            `#${CSS.escape(d)}`
           );
-          o && o.hasAttribute("value") && (f.current = o == null ? void 0 : o.id, W(o.value)());
+          n && n.hasAttribute("value") && (u.current = n == null ? void 0 : n.id, W(n.value)());
         }
         a(!1);
       } else
         a(!0);
     if (t.code === "ArrowDown" || t.code === "ArrowUp") {
-      if (l || a(!0), f.current ? s(f.current) : s(`${d}-0`), !c) return;
-      const o = document.querySelector(
-        `#${CSS.escape(c)}`
+      if (c || a(!0), u.current ? l(u.current) : l(`${p}-0`), !x.current || !d) return;
+      const n = x.current.querySelector(
+        `#${CSS.escape(d)}`
       );
-      if (!o) return;
+      if (!n) return;
       if (t.code === "ArrowDown") {
-        const n = D(o, "next", { skipDisabled: !0 });
-        n && n.id ? (s(n.id), n.scrollIntoView({ block: "end" })) : s(c);
+        const o = H(n, "next", { skipDisabled: !0 });
+        if (o && o.id)
+          l(o.id), o.scrollIntoView({ block: "end" });
+        else {
+          const s = x.current.firstElementChild;
+          s && (l(s.id), s.scrollIntoView({ block: "start" }));
+        }
       }
       if (t.code === "ArrowUp") {
-        const n = D(o, "prev", { skipDisabled: !0 });
-        n && n.id && (s(n.id), n.scrollIntoView({ block: "end" }));
+        const o = H(n, "prev", { skipDisabled: !0 });
+        if (o && o.id)
+          l(o.id), o.scrollIntoView({ block: "end" });
+        else {
+          const s = x.current.lastElementChild;
+          s && (l(s.id), s.scrollIntoView({ block: "end" }));
+        }
       }
     }
-    if (t.code === "Home" && s(`${d}-0`), t.code === "End") {
-      const o = $.count(b);
-      s(`${d}-${o - 1}`);
+    if (t.code === "Home" && l(`${p}-0`), t.code === "End") {
+      const n = v.count(g);
+      l(`${p}-${n - 1}`);
     }
   }, U = (t) => {
-    const o = $.map(t, (n) => z(n) && n && n.props.value === i ? n.props.children : null);
-    return o && o.length ? o[0] : "";
+    const n = v.map(t, (o) => D(o) && o && o.props.value === i ? o.props.children : null);
+    return n && n.length ? n[0] : "";
   };
-  return j(() => {
+  return z(() => {
     const t = () => {
-      if (p.current) {
-        const o = p.current.getBoundingClientRect(), n = $.count(b), g = 40, M = 24, X = g * n > 476 ? 476 : g * n, G = p.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
-        E(G ? {
+      if (f.current) {
+        const n = f.current.getBoundingClientRect(), o = v.count(g), s = 40, M = 24, X = s * o > 476 ? 476 : s * o, G = f.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
+        O(G ? {
           bottom: 24,
-          left: o.left,
-          width: p.current.offsetWidth
+          left: n.left,
+          width: f.current.offsetWidth
         } : {
-          top: o.top + o.height,
-          left: o.left,
-          width: p.current.offsetWidth
+          top: n.top + n.height,
+          left: n.left,
+          width: f.current.offsetWidth
         });
       }
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [b]), j(() => {
+  }, [g]), z(() => {
     r !== void 0 && a(r);
-  }, [r]), /* @__PURE__ */ k(Z, { ref: V, inlineCSS: { position: "relative" }, children: [
-    /* @__PURE__ */ k(
+  }, [r]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ I(
       te,
       {
         role: "combobox",
-        ref: p,
+        ref: f,
         tabIndex: 0,
-        variant: H,
+        variant: V,
         size: B,
-        disabled: C,
+        disabled: k,
         fullWidth: A,
-        isFocused: l,
+        isFocused: c,
         onClick: P,
         onKeyDown: T,
-        "aria-controls": d,
-        "aria-expanded": l,
+        "aria-controls": p,
+        "aria-expanded": c,
         "aria-haspopup": "listbox",
-        "aria-activedescendant": c,
-        ...h,
+        "aria-activedescendant": d,
+        ...w,
         css: F,
         children: [
-          /* @__PURE__ */ k(oe, { value: i === "0" || !!i, disabled: C, children: [
-            R && /* @__PURE__ */ u(_, { justifyContent: "center", alignItems: "center", children: R }),
-            /* @__PURE__ */ u(ne, { children: U(b) || L })
+          /* @__PURE__ */ I(ne, { value: i === "0" || !!i, disabled: k, children: [
+            R && /* @__PURE__ */ b(_, { justifyContent: "center", alignItems: "center", children: R }),
+            /* @__PURE__ */ b(oe, { children: U(g) || L })
           ] }),
-          /* @__PURE__ */ u(ie, { isFocused: l, children: /* @__PURE__ */ u(ee, { name: "ChevronDownLine", size: "small", color: C ? "grey.30" : "grey.100" }) })
+          /* @__PURE__ */ b(ie, { isFocused: c, children: /* @__PURE__ */ b(ee, { name: "ChevronDownLine", size: "small", color: k ? "grey.30" : "grey.100" }) })
         ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ b(
       Y,
       {
-        open: l,
-        onClose: O,
+        open: c,
+        onClose: j,
         inlineCSS: { backgroundColor: "transparent" },
-        children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ b(
           re,
           {
-            id: d,
+            id: p,
             role: "listbox",
-            ref: K,
+            ref: x,
             tabIndex: -1,
-            isFocused: l,
+            isFocused: c,
             style: {
-              top: w.top,
-              bottom: w.bottom,
-              left: w.left,
-              width: w.width
+              top: $.top,
+              bottom: $.bottom,
+              left: $.left,
+              width: $.width
             },
-            children: $.map(b, (t, o) => {
-              if (!z(t) || !t.props.value)
+            children: v.map(g, (t, n) => {
+              if (!D(t) || !t.props.value)
                 return null;
-              const n = `${d}-${o}`, g = i === t.props.value;
-              return g && (f.current = n), Q(t, {
-                id: n,
-                selected: g,
-                focused: n === c,
-                onClick: W(t.props.value)
+              const o = `${p}-${n}`, s = i === t.props.value;
+              return s && (u.current = o), Q(t, {
+                id: o,
+                selected: s,
+                focused: o === d,
+                onClick: W(t.props.value),
+                ...t.props
               });
             })
           }
@@ -279,5 +290,5 @@ const te = x.div`
   ] });
 });
 export {
-  me as default
+  be as default
 };

package/Slider/Slider.cjs

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

package/{dist/Slider → Slider}/Slider.d.ts

@@ -10,6 +10,7 @@ export interface SliderProps extends GeneralComponentProps<Omit<HTMLAttributes<H
     hasMarks?: boolean;
     defaultValue?: number;
     disabledValues?: number[];
+    readValue?: (value: number) => string;
     railProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     trackProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;