@dotss/ui 0.0.10 → 0.0.11

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs

@@ -31,4 +31,4 @@
     color: ${({theme:{palette:{grey:e}}})=>e[30]};
     cursor: not-allowed;
   }
-`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;
+`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{type:"button",size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js

@@ -98,7 +98,16 @@ const m = n.div`
 `, v = p(
   function({ children: t, size: r, disabled: i, inlineCSS: l, ...a }, s) {
     const { isHoverPossible: c } = d();
-    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(g, { size: r, disabled: i, isHoverPossible: c, children: t }) });
+    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(
+      g,
+      {
+        type: "button",
+        size: r,
+        disabled: i,
+        isHoverPossible: c,
+        children: t
+      }
+    ) });
   }
 );
 export {

package/PageControl/PageControl.cjs

@@ -1,15 +1,26 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),f=require("react"),g=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},n=m(g),y=n.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},d=D(A),L=d.default.div`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
-`,h=n.default.span`
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({theme:e})=>e.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({focusWithin:e,theme:r})=>e?{outline:`${r.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+  }
+`,S=d.default.button`
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: ${({theme:{palette:{grey:e}},color:t})=>t==="primary"?e[10]:e[30]};
+  background-color: ${({theme:{palette:{grey:e}},color:r})=>r==="primary"?e[10]:e[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
 
-  ${({theme:{palette:{brand:e}},color:t,isActive:r})=>r?{width:24,borderRadius:8,backgroundColor:t==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
-`,b=f.forwardRef(function({totalCount:t=1,page:r=1,onChange:a,color:s="primary",inlineCSS:u,...c},d){const p=l=>{typeof a=="function"&&a(Number(l.currentTarget.dataset.page))};return i.jsx(y,{ref:d,...c,css:u,children:Array.from({length:t},(l,o)=>i.jsx(h,{isActive:o+1===r,color:s,"data-page":o+1,onClick:p},o))})});exports.default=b;
+  ${({theme:{palette:{brand:e}},color:r,isActive:o})=>o?{width:24,borderRadius:8,backgroundColor:r==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
+`,F=n.forwardRef(function({totalCount:r=1,page:o=1,onChange:l,color:p="primary",inlineCSS:y,tabIdPrefix:b,controlIdPrefix:m,tabProps:x,...h},$){const k=n.useRef(null),R=$??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),a=`${b??P}-`,I=`${m??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=o;if(i.key==="ArrowLeft"?o>1?t=o-1:o===1&&(t=r):i.key==="ArrowRight"?o<r?t=o+1:o===r&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=r),t!==o){const s=document.getElementById(`${a}${t}`);s==null||s.focus(),l==null||l(t)}};return c.jsx(L,{ref:R,role:"tablist",...h,css:y,focusWithin:w,children:c.jsx(j.default,{ref:f,gap:2,children:Array.from({length:r},(i,t)=>{const s=t+1,u=s===o;return c.jsx(S,{id:`${a}${s}`,"aria-controls":`${I}${s}`,isActive:u,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":u,onKeyDown:g,tabIndex:u?0:-1,...x,color:p},t)})})})});exports.default=F;

package/PageControl/PageControl.d.ts

@@ -6,6 +6,9 @@ export interface PageControlProps extends GeneralComponentProps<Omit<HTMLAttribu
     totalCount?: number;
     page?: number;
     color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
+    tabIdPrefix?: string;
+    controlIdPrefix?: string;
+    tabProps?: GeneralComponentProps<HTMLAttributes<HTMLButtonElement>>;
     onChange?: (page: number) => void;
 }
 declare const PageControl: import('react').ForwardRefExoticComponent<PageControlProps & import('react').RefAttributes<HTMLDivElement>>;

package/PageControl/PageControl.es.js

@@ -1,51 +1,104 @@
-import { jsx as n } from "@emotion/react/jsx-runtime";
-import { forwardRef as u } from "react";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { forwardRef as D, useRef as u, useId as d } from "react";
+import F from "../Flexbox/Flexbox.es.js";
+import E from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
 import p from "@emotion/styled";
-const f = p.div`
+const H = p.div`
   display: flex;
   align-items: center;
-  gap: ${({ theme: { spacing: r } }) => r.content(2)}px;
-`, g = p.span`
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: t }) => t.palette.grey[100]} solid 2px;
+      outline-offset: 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: t, theme: r }) => t ? {
+  outline: `${r.palette.grey[100]} solid 2px`,
+  outlineOffset: 2
+} : {}}
+  }
+`, K = p.button`
   width: 8px;
   height: 8px;
   border-radius: 4px;
   background-color: ${({
   theme: {
-    palette: { grey: r }
+    palette: { grey: t }
   },
-  color: t
-}) => t === "primary" ? r[10] : r[30]};
+  color: r
+}) => r === "primary" ? t[10] : t[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
 
   ${({
   theme: {
-    palette: { brand: r }
+    palette: { brand: t }
   },
-  color: t,
+  color: r,
   isActive: o
 }) => o ? {
   width: 24,
   borderRadius: 8,
-  backgroundColor: t === "primary" ? r.primary.pageControl : r.primary.tooltip,
+  backgroundColor: r === "primary" ? t.primary.pageControl : t.primary.tooltip,
   cursor: "default"
 } : null}
-`, C = u(function({ totalCount: t = 1, page: o = 1, onChange: a, color: l = "primary", inlineCSS: s, ...c }, d) {
-  const m = (i) => {
-    typeof a == "function" && a(Number(i.currentTarget.dataset.page));
+`, O = D(function({
+  totalCount: r = 1,
+  page: o = 1,
+  onChange: l,
+  color: m = "primary",
+  inlineCSS: y,
+  tabIdPrefix: b,
+  controlIdPrefix: x,
+  tabProps: h,
+  ...$
+}, k) {
+  const w = u(null), P = k ?? w, c = u(null), { hasFocus: I } = E({ ref: c }), R = d(), v = d(), a = `${b ?? R}-`, g = `${x ?? v}-`, A = (s) => (e) => {
+    e.preventDefault(), typeof l == "function" && l(s);
+  }, L = (s) => {
+    let e = o;
+    if (s.key === "ArrowLeft" ? o > 1 ? e = o - 1 : o === 1 && (e = r) : s.key === "ArrowRight" ? o < r ? e = o + 1 : o === r && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = r), e !== o) {
+      const i = document.getElementById(`${a}${e}`);
+      i == null || i.focus(), l == null || l(e);
+    }
   };
-  return /* @__PURE__ */ n(f, { ref: d, ...c, css: s, children: Array.from({ length: t }, (i, e) => /* @__PURE__ */ n(
-    g,
+  return /* @__PURE__ */ f(
+    H,
     {
-      isActive: e + 1 === o,
-      color: l,
-      "data-page": e + 1,
-      onClick: m
-    },
-    e
-  )) });
+      ref: P,
+      role: "tablist",
+      ...$,
+      css: y,
+      focusWithin: I,
+      children: /* @__PURE__ */ f(F, { ref: c, gap: 2, children: Array.from({ length: r }, (s, e) => {
+        const i = e + 1, n = i === o;
+        return /* @__PURE__ */ f(
+          K,
+          {
+            id: `${a}${i}`,
+            "aria-controls": `${g}${i}`,
+            isActive: n,
+            "data-page": i,
+            onClick: A(i),
+            role: "tab",
+            type: "button",
+            "aria-selected": n,
+            onKeyDown: L,
+            tabIndex: n ? 0 : -1,
+            ...h,
+            color: m
+          },
+          e
+        );
+      }) })
+    }
+  );
 });
 export {
-  C as default
+  O as default
 };

package/PageControl/PageControl.stories.d.ts

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithScreenReaderSupport: Story;

package/Radio/Radio.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),f=require("react"),y=require("@emotion/styled"),m=require("../core/useTheme.cjs"),c=t=>t&&t.__esModule?t:{default:t},p=c(y),C=p.default.span`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),f=require("react"),m=require("@emotion/styled"),y=require("../core/useTheme.cjs"),c=t=>t&&t.__esModule?t:{default:t},p=c(m),C=p.default.span`
   position: relative;
   display: inline-flex;
 `,x=p.default.input`
@@ -7,10 +7,10 @@
   height: 100%;
   top: 0;
   left: 0;
-  opacity: 0;
+  appearance: none;
   cursor: pointer;
 
   &:disabled {
     cursor: default;
   }
-`;function g({size:t,color:i="primary",checked:s,disabled:n}){const{palette:{brand:r,grey:e,background:d}}=m.default();let l=e.white,u=e[50],o=e[10];return s&&(l=i==="primary"?r.primary.main:r[i],u=i==="primary"?r.primary.main:r[i],o=i==="primary"?e.white:e[10]),!s&&n&&(l=d.primary,u=e[30],o=e[20]),s&&n&&(l=i==="primary"?r.primary.disable:e[30],u=i==="primary"?r.primary.disable:e[30],o=i==="primary"?e.white:e[10]),a.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",children:[a.jsx("path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",fill:l}),a.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",fill:u}),a.jsx("circle",{cx:"12",cy:"12",r:"4",fill:o})]})}const h=f.forwardRef(function({size:i="medium",color:s="primary",checked:n,disabled:r,inlineCSS:e,...d},l){return a.jsxs(C,{ref:l,css:e,children:[a.jsx(x,{type:"radio",checked:n,disabled:r,...d}),a.jsx(g,{size:i,color:s,checked:n,disabled:r})]})});exports.default=h;
+`;function h({size:t,color:i="primary",checked:n,disabled:s}){const{palette:{brand:r,grey:e,background:d}}=y.default();let l=e.white,u=e[50],o=e[10];return n&&(l=i==="primary"?r.primary.main:r[i],u=i==="primary"?r.primary.main:r[i],o=i==="primary"?e.white:e[10]),!n&&s&&(l=d.primary,u=e[30],o=e[20]),n&&s&&(l=i==="primary"?r.primary.disable:e[30],u=i==="primary"?r.primary.disable:e[30],o=i==="primary"?e.white:e[10]),a.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none","aria-hidden":!0,focusable:"false",children:[a.jsx("path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",fill:l}),a.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",fill:u}),a.jsx("circle",{cx:"12",cy:"12",r:"4",fill:o})]})}const g=f.forwardRef(function({size:i="medium",color:n="primary",checked:s,disabled:r,inlineCSS:e,...d},l){return a.jsxs(C,{ref:l,css:e,children:[a.jsx(x,{type:"radio",checked:s,disabled:r,...d}),a.jsx(h,{size:i,color:n,checked:s,disabled:r})]})});exports.default=g;

package/Radio/Radio.es.js

@@ -1,7 +1,7 @@
-import { jsxs as s, jsx as o } from "@emotion/react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { jsxs as s, jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
 import f from "@emotion/styled";
-import u from "../core/useTheme.es.js";
+import y from "../core/useTheme.es.js";
 const C = f.span`
   position: relative;
   display: inline-flex;
@@ -11,7 +11,7 @@ const C = f.span`
   height: 100%;
   top: 0;
   left: 0;
-  opacity: 0;
+  appearance: none;
   cursor: pointer;
 
   &:disabled {
@@ -20,15 +20,15 @@ const C = f.span`
 `;
 function w({
   size: m,
-  color: r = "primary",
-  checked: a,
-  disabled: p
+  color: i = "primary",
+  checked: t,
+  disabled: n
 }) {
   const {
-    palette: { brand: t, grey: i, background: d }
-  } = u();
-  let e = i.white, l = i[50], n = i[10];
-  return a && (e = r === "primary" ? t.primary.main : t[r], l = r === "primary" ? t.primary.main : t[r], n = r === "primary" ? i.white : i[10]), !a && p && (e = d.primary, l = i[30], n = i[20]), a && p && (e = r === "primary" ? t.primary.disable : i[30], l = r === "primary" ? t.primary.disable : i[30], n = r === "primary" ? i.white : i[10]), /* @__PURE__ */ s(
+    palette: { brand: e, grey: r, background: d }
+  } = y();
+  let a = r.white, l = r[50], o = r[10];
+  return t && (a = i === "primary" ? e.primary.main : e[i], l = i === "primary" ? e.primary.main : e[i], o = i === "primary" ? r.white : r[10]), !t && n && (a = d.primary, l = r[30], o = r[20]), t && n && (a = i === "primary" ? e.primary.disable : r[30], l = i === "primary" ? e.primary.disable : r[30], o = i === "primary" ? r.white : r[10]), /* @__PURE__ */ s(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -36,15 +36,17 @@ function w({
       height: m === "2xLarge" ? 48 : 24,
       viewBox: "0 0 24 24",
       fill: "none",
+      "aria-hidden": !0,
+      focusable: "false",
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ p(
           "path",
           {
             d: "M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
-            fill: e
+            fill: a
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ p(
           "path",
           {
             fillRule: "evenodd",
@@ -53,17 +55,17 @@ function w({
             fill: l
           }
         ),
-        /* @__PURE__ */ o("circle", { cx: "12", cy: "12", r: "4", fill: n })
+        /* @__PURE__ */ p("circle", { cx: "12", cy: "12", r: "4", fill: o })
       ]
     }
   );
 }
-const b = y(function({ size: r = "medium", color: a = "primary", checked: p, disabled: t, inlineCSS: i, ...d }, e) {
-  return /* @__PURE__ */ s(C, { ref: e, css: i, children: [
-    /* @__PURE__ */ o(h, { type: "radio", checked: p, disabled: t, ...d }),
-    /* @__PURE__ */ o(w, { size: r, color: a, checked: p, disabled: t })
+const R = u(function({ size: i = "medium", color: t = "primary", checked: n, disabled: e, inlineCSS: r, ...d }, a) {
+  return /* @__PURE__ */ s(C, { ref: a, css: r, children: [
+    /* @__PURE__ */ p(h, { type: "radio", checked: n, disabled: e, ...d }),
+    /* @__PURE__ */ p(w, { size: i, color: t, checked: n, disabled: e })
   ] });
 });
 export {
-  b as default
+  R as default
 };

package/RadioGroup/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@emotion/react/jsx-runtime"),e=require("react"),c=require("../Flexbox/Flexbox.cjs"),d=require("../FormControlText/FormControlText.cjs"),p=require("../Radio/Radio.cjs"),f=e.forwardRef(function({children:n,name:u,inlineCSS:l,...a},s){const i=e.useId(),r=u||i;return m.jsx(c.default,{tag:"div",role:"radiogroup",ref:s,css:l,...a,children:e.Children.map(n,t=>{if(e.isValidElement(t)&&t.type===p.default)return e.cloneElement(t,{name:r});if(e.isValidElement(t)&&t.type===d.default){const o=t.props.control;if(e.isValidElement(o))return e.cloneElement(t,{...t.props,control:e.cloneElement(o,{...o.props,name:r})})}return null})})});exports.default=f;

package/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface RadioGroupProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    name?: string;
+}
+declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/RadioGroup/RadioGroup.es.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as l, useId as d, Children as x, isValidElement as t, cloneElement as e } from "react";
+import c from "../Flexbox/Flexbox.es.js";
+import R from "../FormControlText/FormControlText.es.js";
+import E from "../Radio/Radio.es.js";
+const b = l(function({ children: m, name: p, inlineCSS: a, ...f }, s) {
+  const i = d(), n = p || i;
+  return /* @__PURE__ */ u(c, { tag: "div", role: "radiogroup", ref: s, css: a, ...f, children: x.map(m, (o) => {
+    if (t(o) && o.type === E)
+      return e(o, { name: n });
+    if (t(o) && o.type === R) {
+      const r = o.props.control;
+      if (t(r))
+        return e(o, {
+          ...o.props,
+          // @ts-expect-error - add name to control element
+          control: e(r, {
+            ...r.props,
+            name: n
+          })
+        });
+    }
+    return null;
+  }) });
+});
+export {
+  b as default
+};

package/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./RadioGroup').RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Standalone: Story;

package/RadioGroup/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./RadioGroup.cjs");exports.default=e.default;

package/RadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as RadioGroup } from './RadioGroup';
+
+export default RadioGroup;

package/RadioGroup/index.es.js

@@ -0,0 +1,4 @@
+import r from "./RadioGroup.es.js";
+export {
+  r as default
+};

package/SegmentedButton/SegmentedButton.cjs

@@ -1,7 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@emotion/react/jsx-runtime"),n=require("react"),m=require("@emotion/styled"),x=e=>e&&e.__esModule?e:{default:e},b=x(m),j=b.default.div`
+"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:e})=>e?{width:"100%","& > button":{width:"100%",flexShrink:1}}:null}
-`,k=n.forwardRef(function({children:u,variant:d="outlined",color:c="primary",rounded:a=!0,onChange:r,value:f,fullWidth:p,inlineCSS:y,disabled:_,...g},h){const v=(t,i)=>o=>{typeof r=="function"&&r(t),typeof i=="function"&&i(o)};return S.jsx(j,{ref:h,fullWidth:p,...g,css:y,children:n.Children.map(u,(t,i)=>{var o,s,l;return n.isValidElement(t)?n.cloneElement(t,{...t.props,variant:d,color:c,rounded:a,disabled:_,isActive:f===((o=t.props)==null?void 0:o.value),isFirst:i===0,isLast:n.Children.count(u)-1===i,onClick:v((s=t.props)==null?void 0:s.value,(l=t.props)==null?void 0:l.onClick)}):null})})});exports.default=k;
+  ${({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

@@ -1,48 +1,122 @@
-import { jsx as x } from "@emotion/react/jsx-runtime";
-import { forwardRef as S, Children as u, isValidElement as k, cloneElement as w } from "react";
-import B from "@emotion/styled";
-const C = B.div`
+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: r }) => r ? {
+  ${({ fullWidth: c }) => c ? {
   width: "100%",
   "& > button": {
     width: "100%",
     flexShrink: 1
   }
 } : null}
-`, A = S(function({
-  children: n,
-  variant: f = "outlined",
-  color: l = "primary",
-  rounded: d = !0,
-  onChange: s,
-  value: c,
-  fullWidth: a,
-  inlineCSS: m,
-  disabled: y,
-  ...h
-}, g) {
-  const v = (t, o) => (i) => {
-    typeof s == "function" && s(t), typeof o == "function" && o(i);
+
+  @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__ */ x(C, { ref: g, fullWidth: a, ...h, css: m, children: u.map(n, (t, o) => {
-    var i, e, p;
-    return k(t) ? w(t, {
-      ...t.props,
-      variant: f,
-      color: l,
-      rounded: d,
-      disabled: y,
-      isActive: c === ((i = t.props) == null ? void 0 : i.value),
-      isFirst: o === 0,
-      isLast: u.count(n) - 1 === o,
-      onClick: v((e = t.props) == null ? void 0 : e.value, (p = t.props) == null ? void 0 : p.onClick)
-    }) : null;
-  }) });
+  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 {
-  A as default
+  J as default
 };

package/Select/Select.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=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"),I=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},m=G(X),J=m.default.div`
+"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;
@@ -12,7 +12,7 @@
     color: inherit;
   }
 
-  ${({theme:{palette:{grey:e,background:r}},variant:b})=>{let s={};switch(b){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:{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}`}:{}}
   
@@ -25,7 +25,7 @@
     color: inherit;
   }
 
-  ${({theme:{typography:e,palette:{grey:r}},value:b})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:r[30]}};return b?{...s,color:r[100]}:{...s,color:r[50]}}}
+  ${({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;
@@ -50,4 +50,4 @@
   box-shadow: ${({theme:{elevation:e}})=>e[4]};
   transition: opacity 200ms linear;
   opacity: ${({isFocused:e})=>e?1:0};
-`,ee=i.forwardRef(function({value:r,onChange:b,open:s,onOpen:$,onClose:v,variant:E="outlined",size:q="large",startAdornment:j,placeholder:O="TEXT",disabled:C=!1,fullWidth:W,children:g,inlineCSS:D,...w},z){const _=i.useId(),p=i.useRef(null),H=i.useRef(null),x=i.useRef(""),[d,u]=i.useState(s||!1),[a,l]=i.useState(""),[S,k]=i.useState({top:0,bottom:0,left:0,width:0}),f=(w==null?void 0:w.id)||_,B=()=>{s===void 0?u(t=>!t):s===!1&&$&&typeof $=="function"&&$()},y=t=>()=>{b(t.toString()),R()},R=()=>{s===void 0?(u(!1),l("")):s===!0&&v&&typeof v=="function"&&v()},L=t=>{if(t.preventDefault(),t.code==="Escape"&&u(!1),t.code==="Space"||t.code==="Enter")if(x.current?l(x.current):a||l(`${f}-0`),d){if(a){const n=document.querySelector(`#${CSS.escape(a)}`);n&&n.hasAttribute("value")&&(x.current=n==null?void 0:n.id,y(n.value)())}u(!1)}else u(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(d||u(!0),x.current?l(x.current):l(`${f}-0`),!a)return;const n=document.querySelector(`#${CSS.escape(a)}`);if(!n)return;if(t.code==="ArrowDown"){const o=I.default(n,"next",{skipDisabled:!0});o&&o.id?(l(o.id),o.scrollIntoView({block:"end"})):l(a)}if(t.code==="ArrowUp"){const o=I.default(n,"prev",{skipDisabled:!0});o&&o.id&&(l(o.id),o.scrollIntoView({block:"end"}))}}if(t.code==="Home"&&l(`${f}-0`),t.code==="End"){const n=i.Children.count(g);l(`${f}-${n-1}`)}},V=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(p.current){const n=p.current.getBoundingClientRect(),o=i.Children.count(g),h=40,A=24,F=h*o>476?476:h*o,M=p.current.getBoundingClientRect().bottom+F+A>window.innerHeight;k(M?{bottom:24,left:n.left,width:p.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:p.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[g]),i.useEffect(()=>{s!==void 0&&u(s)},[s]),c.jsxs(T.default,{ref:z,inlineCSS:{position:"relative"},children:[c.jsxs(J,{role:"combobox",ref:p,tabIndex:0,variant:E,size:q,disabled:C,fullWidth:W,isFocused:d,onClick:B,onKeyDown:L,"aria-controls":f,"aria-expanded":d,"aria-haspopup":"listbox","aria-activedescendant":a,...w,css:D,children:[c.jsxs(N,{value:r==="0"||!!r,disabled:C,children:[j&&c.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),c.jsx(Q,{children:V(g)||O})]}),c.jsx(Y,{isFocused:d,children:c.jsx(U.default,{name:"ChevronDownLine",size:"small",color:C?"grey.30":"grey.100"})})]}),c.jsx(P.default,{open:d,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:c.jsx(Z,{id:f,role:"listbox",ref:H,tabIndex:-1,isFocused:d,style:{top:S.top,bottom:S.bottom,left:S.left,width:S.width},children:i.Children.map(g,(t,n)=>{if(!i.isValidElement(t)||!t.props.value)return null;const o=`${f}-${n}`,h=r===t.props.value;return h&&(x.current=o),i.cloneElement(t,{id:o,selected:h,focused:o===a,onClick:y(t.props.value)})})})})]})});exports.default=ee;
+`,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;